diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js
index cef63e9f8..8a8a7bcbc 100644
--- a/spine-ts/webgl/demos/hoverboard.js
+++ b/spine-ts/webgl/demos/hoverboard.js
@@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2;
@@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
renderer.begin();
renderer.drawSkeleton(skeleton, true);
- renderer.drawSkeletonDebug(skeleton, false, ["root"]);
- gl.lineWidth(2);
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
- var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
- var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
- renderer.circle(true, bone.worldX, bone.worldY, 20, colorInner);
- renderer.circle(false, bone.worldX, bone.worldY, 20, colorOuter);
- }
+ // renderer.drawSkeletonDebug(skeleton, false, ["root"]);
+
renderer.end();
gl.lineWidth(1);
diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js
index 2af221d5f..3ae1ee519 100644
--- a/spine-ts/webgl/demos/imagechanges.js
+++ b/spine-ts/webgl/demos/imagechanges.js
@@ -1,8 +1,8 @@
var imageChangesDemo = function(loadingComplete, bgColor) {
- var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
+ var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
- var skeleton, bounds;
+ var skeleton, bounds;
var timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "Alien";
@@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
- var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+ var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
- assetManager.loadJson(DEMO_NAME, "demos.json");
- timeKeeper = new spine.TimeKeeper();
+ assetManager.loadJson(DEMO_NAME, "demos.json");
+ timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
- }
+ }
function load () {
timeKeeper.update();
@@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
- loadingComplete(canvas, render);
+ loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
@@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function setupUI() {
playButton = $("#imagechanges-playbutton");
- var playButtonUpdate = function () {
+ var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
timeLine = $("#imagechanges-timeline").data("slider");
timeLine.changed = function (percent) {
- if (isPlaying) playButton.click();
+ if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -63,11 +63,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
- active.playTime = time;
+ active.playTime = time;
}
};
- var list = $("#imagechanges-skeleton");
+ var list = $("#imagechanges-skeleton");
for (var skeletonName in skeletons) {
var option = $("");
option.attr("value", skeletonName).text(skeletonName);
@@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
- return assetManager.get(DEMO_NAME, path);
+ return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.setSkinByName("default");
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
- var anim = skeletonData.findAnimation(animation);
+ var anim = skeletonData.findAnimation(animation);
state.setAnimation(0, animation, true);
if (name === "alien") {
- state.update(anim.duration / 2.5);
+ state.update(anim.duration / 2.5);
}
state.apply(skeleton);
- skeleton.updateWorldTransform();
+ skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
- skeleton.getBounds(offset, size);
+ skeleton.getBounds(offset, size, []);
if (name === "alien") {
state.update(-anim.duration / 2.5);
}
@@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) {
var slot = sequenceSlots[i];
- var index = skeleton.findSlotIndex(slot);
+ var index = skeleton.findSlotIndex(slot);
for (var name in skeleton.skin.attachments[index]) {
- regions.push(skeleton.skin.attachments[index][name]);
+ regions.push(skeleton.skin.attachments[index][name]);
}
}
return {
atlas: atlas,
- skeleton: skeleton,
- state: state,
+ skeleton: skeleton,
+ state: state,
playTime: 0,
bounds: {
offset: offset,
@@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function render () {
timeKeeper.update();
- var delta = timeKeeper.delta;
+ var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;
@@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
- active.playTime += delta;
+ active.playTime += delta;
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
@@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
}
- renderer.begin();
+ renderer.begin();
renderer.drawSkeleton(skeleton, true);
var y = offsetY;
var slotsWidth = 0, slotsHeight = 0;
var slotSize = size.y / 3;
- var maxSlotWidth = 0;
+ var maxSlotWidth = 0;
var j = 0;
- for (var i = 0; i < active.regions.length; i++) {
+ for (var i = 0; i < active.regions.length; i++) {
var region = active.regions[i].region;
var scale = Math.min(slotSize / region.height, slotSize / region.width);
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
@@ -187,7 +187,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
for (var ii = 0; ii < active.slots.length; ii++) {
var slotName = active.slots[ii];
var slotIndex = skeleton.findSlotIndex(slotName);
-
+
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
var slot = skeleton.drawOrder[iii];
if (slot.data.index == slotIndex) {
@@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
maxSlotWidth = 0;
y = offsetY;
j = 0;
- }
+ }
}
renderer.end();
diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js
index aea802e5a..6d44f7931 100644
--- a/spine-ts/webgl/demos/meshes.js
+++ b/spine-ts/webgl/demos/meshes.js
@@ -1,6 +1,6 @@
var meshesDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
- var skeleton, bounds;
+ var skeleton, bounds;
var timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "Orange Girl";
@@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = spineDemos.assetManager;
- var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+ var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
- assetManager.loadJson(DEMO_NAME, "demos.json");
- timeKeeper = new spine.TimeKeeper();
+ assetManager.loadJson(DEMO_NAME, "demos.json");
+ timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
- }
+ }
function load () {
timeKeeper.update();
@@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function setupUI() {
playButton = $("#meshes-playbutton");
- var playButtonUpdate = function () {
+ var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
timeLine = $("#meshes-timeline").data("slider");
timeLine.changed = function (percent) {
- if (isPlaying) playButton.click();
+ if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -63,11 +63,11 @@ var meshesDemo = function(loadingComplete, bgColor) {
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
- active.playTime = time;
+ active.playTime = time;
}
};
- var list = $("#meshes-skeleton");
+ var list = $("#meshes-skeleton");
for (var skeletonName in skeletons) {
var option = $("");
option.attr("value", skeletonName).text(skeletonName);
@@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
- return assetManager.get(DEMO_NAME, path);
+ return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) {
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
state.setAnimation(0, animation, true);
state.apply(skeleton);
- skeleton.updateWorldTransform();
+ skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
- skeleton.getBounds(offset, size);
+ skeleton.getBounds(offset, size, []);
return {
atlas: atlas,
- skeleton: skeleton,
- state: state,
+ skeleton: skeleton,
+ state: state,
playTime: 0,
bounds: {
offset: offset,
size: size
- }
+ }
};
}
function render () {
timeKeeper.update();
- var delta = timeKeeper.delta;
+ var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;
@@ -145,7 +145,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
- active.playTime += delta;
+ active.playTime += delta;
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
@@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
}
- renderer.begin();
+ renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js
index ee64f03a0..9169e59eb 100644
--- a/spine-ts/webgl/demos/skins.js
+++ b/spine-ts/webgl/demos/skins.js
@@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
setupUI();
setupInput();
loadingComplete(canvas, render);
diff --git a/spine-ts/webgl/demos/spritesheets.js b/spine-ts/webgl/demos/spritesheets.js
index c68cfeb12..ebdbe6253 100644
--- a/spine-ts/webgl/demos/spritesheets.js
+++ b/spine-ts/webgl/demos/spritesheets.js
@@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
skeleton.x -= 60;
skeletonSeq = new spine.Skeleton(skeletonData);
diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js
index f4e7dd669..c4d074f53 100644
--- a/spine-ts/webgl/demos/stretchyman.js
+++ b/spine-ts/webgl/demos/stretchyman.js
@@ -5,7 +5,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
- var skeleton, bounds, state;
+ var skeleton, bounds, state;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [];
@@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
"front leg controller",
"back arm controller",
"front arm controller",
- "head controller",
+ "head controller",
"hip controller"
];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
@@ -28,16 +28,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
- input = new spine.webgl.Input(canvas);
+ input = new spine.webgl.Input(canvas);
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
- assetManager.loadJson(DEMO_NAME, "demos.json");
- timeKeeper = new spine.TimeKeeper();
+ assetManager.loadJson(DEMO_NAME, "demos.json");
+ timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
- return assetManager.get(DEMO_NAME, path);
+ return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- state.setAnimation(0, "idle", true);
+ state.setAnimation(0, "idle", true);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@@ -77,25 +77,25 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
}
}
- function setupUI() {
+ function setupUI() {
var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
- renderer.skeletonDebugRenderer.drawBones = this.checked;
+ renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function setupInput (){
input.addListener({
down: function(x, y) {
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
- renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
- }
+ }
}
},
up: function(x, y) {
@@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
}
}
},
- moved: function (x, y) {
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
- renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ moved: function (x, y) {
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
- }
+ }
}
});
}
@@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
function render () {
timeKeeper.update();
- var delta = timeKeeper.delta;
+ var delta = timeKeeper.delta;
state.update(delta);
state.apply(skeleton);
@@ -168,14 +168,14 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
angle = (angle - 90) * 2.5;
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
- skeleton.updateWorldTransform();
+ skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
- gl.clear(gl.COLOR_BUFFER_BIT);
+ gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
diff --git a/spine-ts/webgl/demos/transforms.js b/spine-ts/webgl/demos/transforms.js
index f7c8f393a..63da761cb 100644
--- a/spine-ts/webgl/demos/transforms.js
+++ b/spine-ts/webgl/demos/transforms.js
@@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
- var skeleton, state, bounds;
- var timeKeeper, loadingScreen;
- var rotateHandle;
+ var skeleton, state, bounds;
+ var timeKeeper, loadingScreen;
+ var rotateHandle;
var target = null;
var hoverTargets = [null, null, null];
- var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
+ var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5;
@@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
- var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+ var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
- timeKeeper = new spine.TimeKeeper();
+ timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
- return assetManager.get(DEMO_NAME, path);
+ return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- skeleton.setToSetupPose();
+ skeleton.setToSetupPose();
skeleton.updateWorldTransform();
- rotateHandle = skeleton.findBone("rotate-handle");
+ rotateHandle = skeleton.findBone("rotate-handle");
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@@ -62,7 +62,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-
+
setupUI();
setupInput();
@@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
var val = percent * 360 - 180;
var delta = val - lastOffset;
lastOffset = val;
- skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
+ skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
};
@@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) {
var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
- if (v.y < 0) angle = 360 - angle;
+ if (v.y < 0) angle = 360 - angle;
return angle;
}
input.addListener({
- down: function(x, y) {
+ down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
if (target === rotateHandle) lastRotation = getRotation(x, y);
- }
- }
+ }
+ }
},
- up: function(x, y) {
+ up: function(x, y) {
target = null;
},
dragged: function(x, y) {
@@ -140,10 +140,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
}
}
},
- moved: function (x, y) {
+ moved: function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
+ var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
@@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
gl.lineWidth(2);
- for (var i = 0; i < controlBones.length; i++) {
+ for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
- renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
- renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
+ renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+ renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
renderer.end();
diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js
index 7cc32509f..294d5cde3 100644
--- a/spine-ts/webgl/demos/transitions.js
+++ b/spine-ts/webgl/demos/transitions.js
@@ -40,6 +40,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25);
+ state.multipleMixing = true;
setAnimations(state, 0);
stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25);
diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js
index 6bd0e3a1c..59a0a80c2 100644
--- a/spine-ts/webgl/demos/vine.js
+++ b/spine-ts/webgl/demos/vine.js
@@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
- var skeleton, state, bounds;
+ var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [null, null, null, null, null, null];
@@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
- gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+ gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
- renderer = new spine.webgl.SceneRenderer(canvas, gl);
+ renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
- assetManager.loadJson(DEMO_NAME, "demos.json");
- timeKeeper = new spine.TimeKeeper();
+ assetManager.loadJson(DEMO_NAME, "demos.json");
+ timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
- return assetManager.get(DEMO_NAME, path);
+ return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds);
+ skeleton.getBounds(offset, bounds, []);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "animation", true);
state.apply(skeleton);
@@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) {
loadingComplete(canvas, render);
} else {
- loadingScreen.draw();
+ loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
playButton = $("#vine-playbutton");
- var playButtonUpdate = function () {
+ var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
- time = animationDuration * percent;
+ time = animationDuration * percent;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
- playTime = time;
+ playTime = time;
}
};
@@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) {
var checkbox = $("#vine-drawbones");
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
- renderer.skeletonDebugRenderer.drawBones = this.checked;
+ renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function setupInput() {
input.addListener({
down: function(x, y) {
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
- renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
- }
+ }
}
},
up: function(x, y) {
@@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) {
}
},
moved: function (x, y) {
- for (var i = 0; i < controlBones.length; i++) {
- var bone = skeleton.findBone(controlBones[i]);
- renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
- }
+ }
}
});
}
@@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
- playTime += delta;
+ playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.set(playTime / animationDuration);
state.update(delta);
- state.apply(skeleton);
+ state.apply(skeleton);
}
skeleton.updateWorldTransform();
@@ -168,18 +168,18 @@ var vineDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
- gl.clear(gl.COLOR_BUFFER_BIT);
+ gl.clear(gl.COLOR_BUFFER_BIT);
- renderer.begin();
+ renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
gl.lineWidth(2);
- for (var i = 0; i < controlBones.length; i++) {
+ for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
- renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
- renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
+ renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+ renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
renderer.end();