UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Fixed up demos

Browse Source
This commit is contained in:
badlogic 2017-03-31 12:27:41 +02:00
parent 030da37e6b
commit 6808b9f44a
9 changed files with 128 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
spine-ts/webgl/demos/hoverboard.js
View File

@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = 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); for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]); // 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.end(); renderer.end();
gl.lineWidth(1); gl.lineWidth(1);

56
spine-ts/webgl/demos/imagechanges.js
View File

@ -1,8 +1,8 @@
var imageChangesDemo = function(loadingComplete, bgColor) { 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 canvas, gl, renderer, input, assetManager;
var skeleton, bounds; var skeleton, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var skeletons = {}; var skeletons = {};
var activeSkeleton = "Alien"; var activeSkeleton = "Alien";
@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function init () { function init () {
canvas = document.getElementById("imagechanges-canvas"); canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; 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);
assetManager = spineDemos.assetManager; 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.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas"); assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load () { function load () {
timeKeeper.update(); timeKeeper.update();
@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]); skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI(); setupUI();
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
requestAnimationFrame(load); requestAnimationFrame(load);
@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function setupUI() { function setupUI() {
playButton = $("#imagechanges-playbutton"); playButton = $("#imagechanges-playbutton");
var playButtonUpdate = function () { var playButtonUpdate = function () {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) if (isPlaying)
playButton.addClass("pause").removeClass("play"); playButton.addClass("pause").removeClass("play");
@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
timeLine = $("#imagechanges-timeline").data("slider"); timeLine = $("#imagechanges-timeline").data("slider");
timeLine.changed = function (percent) { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration; 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.update(time - active.playTime);
active.state.apply(active.skeleton); active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform(); active.skeleton.updateWorldTransform();
active.playTime = time; active.playTime = time;
} }
}; };
var list = $("#imagechanges-skeleton"); var list = $("#imagechanges-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
var option = $("<option></option>"); var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName); option.attr("value", skeletonName).text(skeletonName);
@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) { function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) { 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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.setSkinByName("default"); skeleton.setSkinByName("default");
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData)); var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
var anim = skeletonData.findAnimation(animation); var anim = skeletonData.findAnimation(animation);
state.setAnimation(0, animation, true); state.setAnimation(0, animation, true);
if (name === "alien") { if (name === "alien") {
state.update(anim.duration / 2.5); state.update(anim.duration / 2.5);
} }
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
var size = new spine.Vector2(); var size = new spine.Vector2();
skeleton.getBounds(offset, size); skeleton.getBounds(offset, size, []);
if (name === "alien") { if (name === "alien") {
state.update(-anim.duration / 2.5); state.update(-anim.duration / 2.5);
} }
@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var regions = []; var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) { for(var i = 0; i < sequenceSlots.length; i++) {
var slot = sequenceSlots[i]; var slot = sequenceSlots[i];
var index = skeleton.findSlotIndex(slot); var index = skeleton.findSlotIndex(slot);
for (var name in skeleton.skin.attachments[index]) { for (var name in skeleton.skin.attachments[index]) {
regions.push(skeleton.skin.attachments[index][name]); regions.push(skeleton.skin.attachments[index][name]);
} }
} }
return { return {
atlas: atlas, atlas: atlas,
skeleton: skeleton, skeleton: skeleton,
state: state, state: state,
playTime: 0, playTime: 0,
bounds: { bounds: {
offset: offset, offset: offset,
@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var skeleton = active.skeleton; var skeleton = active.skeleton;
@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
if (isPlaying) { if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
active.playTime += delta; active.playTime += delta;
while (active.playTime >= animationDuration) { while (active.playTime >= animationDuration) {
active.playTime -= animationDuration; active.playTime -= animationDuration;
} }
@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
} }
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
var y = offsetY; var y = offsetY;
var slotsWidth = 0, slotsHeight = 0; var slotsWidth = 0, slotsHeight = 0;
var slotSize = size.y / 3; var slotSize = size.y / 3;
var maxSlotWidth = 0; var maxSlotWidth = 0;
var j = 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 region = active.regions[i].region;
var scale = Math.min(slotSize / region.height, slotSize / region.width); var scale = Math.min(slotSize / region.height, slotSize / region.width);
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale); 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++) { for (var ii = 0; ii < active.slots.length; ii++) {
var slotName = active.slots[ii]; var slotName = active.slots[ii];
var slotIndex = skeleton.findSlotIndex(slotName); var slotIndex = skeleton.findSlotIndex(slotName);
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) { for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
var slot = skeleton.drawOrder[iii]; var slot = skeleton.drawOrder[iii];
if (slot.data.index == slotIndex) { if (slot.data.index == slotIndex) {
@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
maxSlotWidth = 0; maxSlotWidth = 0;
y = offsetY; y = offsetY;
j = 0; j = 0;
} }
} }
renderer.end(); renderer.end();

38
spine-ts/webgl/demos/meshes.js
View File

@ -1,6 +1,6 @@
var meshesDemo = function(loadingComplete, bgColor) { var meshesDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, bounds; var skeleton, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var skeletons = {}; var skeletons = {};
var activeSkeleton = "Orange Girl"; var activeSkeleton = "Orange Girl";
@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
function init () { function init () {
canvas = document.getElementById("meshes-canvas"); canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; 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);
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = spineDemos.assetManager; 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.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load () { function load () {
timeKeeper.update(); timeKeeper.update();
@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function setupUI() { function setupUI() {
playButton = $("#meshes-playbutton"); playButton = $("#meshes-playbutton");
var playButtonUpdate = function () { var playButtonUpdate = function () {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) if (isPlaying)
playButton.addClass("pause").removeClass("play"); playButton.addClass("pause").removeClass("play");
@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
timeLine = $("#meshes-timeline").data("slider"); timeLine = $("#meshes-timeline").data("slider");
timeLine.changed = function (percent) { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration; 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.update(time - active.playTime);
active.state.apply(active.skeleton); active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform(); active.skeleton.updateWorldTransform();
active.playTime = time; active.playTime = time;
} }
}; };
var list = $("#meshes-skeleton"); var list = $("#meshes-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
var option = $("<option></option>"); var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName); option.attr("value", skeletonName).text(skeletonName);
@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) { function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { 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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) {
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData)); var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
state.setAnimation(0, animation, true); state.setAnimation(0, animation, true);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
var size = new spine.Vector2(); var size = new spine.Vector2();
skeleton.getBounds(offset, size); skeleton.getBounds(offset, size, []);
return { return {
atlas: atlas, atlas: atlas,
skeleton: skeleton, skeleton: skeleton,
state: state, state: state,
playTime: 0, playTime: 0,
bounds: { bounds: {
offset: offset, offset: offset,
size: size size: size
} }
}; };
} }
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var skeleton = active.skeleton; var skeleton = active.skeleton;
@ -145,7 +145,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
if (isPlaying) { if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
active.playTime += delta; active.playTime += delta;
while (active.playTime >= animationDuration) { while (active.playTime >= animationDuration) {
active.playTime -= animationDuration; active.playTime -= animationDuration;
} }
@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
} }
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton); renderer.drawSkeletonDebug(skeleton);
renderer.end(); renderer.end();

2
spine-ts/webgl/demos/skins.js
View File

@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
offset = new spine.Vector2(); offset = new spine.Vector2();
bounds = new spine.Vector2(); bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds); skeleton.getBounds(offset, bounds, []);
setupUI(); setupUI();
setupInput(); setupInput();
loadingComplete(canvas, render); loadingComplete(canvas, render);

2
spine-ts/webgl/demos/spritesheets.js
View File

@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
offset = new spine.Vector2(); offset = new spine.Vector2();
bounds = new spine.Vector2(); bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds); skeleton.getBounds(offset, bounds, []);
skeleton.x -= 60; skeleton.x -= 60;
skeletonSeq = new spine.Skeleton(skeletonData); skeletonSeq = new spine.Skeleton(skeletonData);

46
spine-ts/webgl/demos/stretchyman.js
View File

@ -5,7 +5,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, bounds, state; var skeleton, bounds, state;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var target = null; var target = null;
var hoverTargets = []; var hoverTargets = [];
@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
"front leg controller", "front leg controller",
"back arm controller", "back arm controller",
"front arm controller", "front arm controller",
"head controller", "head controller",
"hip controller" "hip controller"
]; ];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); 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 () { function init () {
canvas = document.getElementById("stretchyman-canvas"); canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; 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);
assetManager = spineDemos.assetManager; 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); };
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { 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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = 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); for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); 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.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 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"); var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() { checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
} }
function setupInput (){ function setupInput (){
input.addListener({ input.addListener({
down: function(x, y) { down: function(x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]); var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone; target = bone;
} }
} }
}, },
up: function(x, y) { up: function(x, y) {
@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
} }
} }
}, },
moved: function (x, y) { moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]); var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone; hoverTargets[i] = bone;
} else { } else {
hoverTargets[i] = null; hoverTargets[i] = null;
} }
} }
} }
}); });
} }
@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
state.update(delta); state.update(delta);
state.apply(skeleton); 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; var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
angle = (angle - 90) * 2.5; angle = (angle - 90) * 2.5;
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle); 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.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); 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.drawSkeleton(skeleton, true);

50
spine-ts/webgl/demos/transforms.js
View File

@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var rotateHandle; var rotateHandle;
var target = null; var target = null;
var hoverTargets = [null, null, 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 coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0; var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5; var mix, lastOffset = 0, lastMix = 0.5;
@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) {
function init () { function init () {
canvas = document.getElementById("transforms-canvas"); canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; 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);
assetManager = spineDemos.assetManager; 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.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { 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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = 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 = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.setToSetupPose(); skeleton.setToSetupPose();
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
rotateHandle = skeleton.findBone("rotate-handle"); rotateHandle = skeleton.findBone("rotate-handle");
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 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.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
setupInput(); setupInput();
@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
var val = percent * 360 - 180; var val = percent * 360 - 180;
var delta = val - lastOffset; var delta = val - lastOffset;
lastOffset = val; lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transforms-rotationoffset-label").text(Math.round(val) + "°"); $("#transforms-rotationoffset-label").text(Math.round(val) + "°");
}; };
@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) {
var wheel1 = skeleton.findBone("wheel1overlay"); var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize(); var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees; 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; return angle;
} }
input.addListener({ input.addListener({
down: function(x, y) { down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) { 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone; target = bone;
if (target === rotateHandle) lastRotation = getRotation(x, y); if (target === rotateHandle) lastRotation = getRotation(x, y);
} }
} }
}, },
up: function(x, y) { up: function(x, y) {
target = null; target = null;
}, },
dragged: function(x, y) { 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); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) { 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone; hoverTargets[i] = bone;
} else { } else {
@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]); renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
gl.lineWidth(2); 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 bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER; 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; 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(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(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
} }
gl.lineWidth(1); gl.lineWidth(1);
renderer.end(); renderer.end();

1
spine-ts/webgl/demos/transitions.js
View File

@ -40,6 +40,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
skeleton = loadSkeleton("spineboy"); skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data); skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25); state = createState(0.25);
state.multipleMixing = true;
setAnimations(state, 0); setAnimations(state, 0);
stateNoMix = createState(0); stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25); setAnimations(stateNoMix, -0.25);

54
spine-ts/webgl/demos/vine.js
View File

@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var target = null; var target = null;
var hoverTargets = [null, null, null, null, null, null]; var hoverTargets = [null, null, null, null, null, null];
@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) {
function init () { function init () {
canvas = document.getElementById("vine-canvas"); canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; 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); input = new spine.webgl.Input(canvas);
assetManager = spineDemos.assetManager; 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.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { 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 atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
bounds = 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 = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "animation", true); state.setAnimation(0, "animation", true);
state.apply(skeleton); state.apply(skeleton);
@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) {
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function setupUI() { function setupUI() {
playButton = $("#vine-playbutton"); playButton = $("#vine-playbutton");
var playButtonUpdate = function () { var playButtonUpdate = function () {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) if (isPlaying)
playButton.addClass("pause").removeClass("play"); playButton.addClass("pause").removeClass("play");
@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * percent; time = animationDuration * percent;
state.update(time - playTime); state.update(time - playTime);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
playTime = time; playTime = time;
} }
}; };
@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) {
var checkbox = $("#vine-drawbones"); var checkbox = $("#vine-drawbones");
checkbox.change(function() { checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
} }
function setupInput() { function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function(x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]); var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone; target = bone;
} }
} }
}, },
up: function(x, y) { up: function(x, y) {
@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) {
} }
}, },
moved: function (x, y) { moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]); var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); 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) { if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone; hoverTargets[i] = bone;
} else { } else {
hoverTargets[i] = null; hoverTargets[i] = null;
} }
} }
} }
}); });
} }
@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) { if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta; playTime += delta;
while (playTime >= animationDuration) { while (playTime >= animationDuration) {
playTime -= animationDuration; playTime -= animationDuration;
} }
timeLine.set(playTime / animationDuration); timeLine.set(playTime / animationDuration);
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);
} }
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
@ -168,18 +168,18 @@ var vineDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); 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.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton); renderer.drawSkeletonDebug(skeleton);
gl.lineWidth(2); 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 bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER; 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; 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(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(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
} }
gl.lineWidth(1); gl.lineWidth(1);
renderer.end(); renderer.end();