diff --git a/spine-ts/README.md b/spine-ts/README.md index c93ee1b9c..198dffbc2 100644 --- a/spine-ts/README.md +++ b/spine-ts/README.md @@ -36,9 +36,8 @@ All `*.js` files are self-contained and include both the core and respective bac If you write your app with TypeScript, additionally copy the corresponding `build/spine-*.d.ts` file to your project. -## Example -To run the examples, spawn a light-weight web server in the root of spine-ts, then navigate to the respective -`index.html` file. E.g.: +## Examples +To run the examples, the image, atlas, and JSON files must be served by a webserver, they can't be loaded from your local disk. Spawn a light-weight web server in the root of spine-ts, then navigate to the `index.html` file for the example you want to view. E.g.: ``` cd spine-ts @@ -47,6 +46,20 @@ python -m SimpleHTTPServer Then open `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `https://localhost:8000/threejs/example` or `http://localhost:8000/widget/example` in your browser. +## WebGL Demos +The spine-ts WebGL demos load their image, atlas, and JSON files from our webserver and so can be run directly, without needing a webserver. View the demos [all on one page](http://esotericsoftware.com/spine-demos/) or use the [standalone demos]() which are easy for you to explore and edit. The standalone demos can also be viewed here: + +- [Spine vs sprite sheets](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/spritesheets.html) +- [Image changes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/imagechanges.html) +- [Transitions](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transitions.html) +- [Meshes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/meshes.html) +- [Skins](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/skins.html) +- [Hoverboard](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/hoverboard.html) +- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transforms.html) +- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/tank.html) +- [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/vine.html) +- [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/stretchyman.html) + ## Development Setup The spine-ts runtime and the various backends are implemented in TypeScript for greater maintainability and better tooling support. To setup a development environment, follow these steps. diff --git a/spine-ts/webgl/demos/framebyframe.html b/spine-ts/webgl/demos/framebyframe.html deleted file mode 100644 index 10ff67bdc..000000000 --- a/spine-ts/webgl/demos/framebyframe.html +++ /dev/null @@ -1,23 +0,0 @@ - -Frame-by-frame - Spine Demo - - - - - - - -
-
-
-
- -
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/ikconstraint.html b/spine-ts/webgl/demos/hoverboard.html similarity index 56% rename from spine-ts/webgl/demos/ikconstraint.html rename to spine-ts/webgl/demos/hoverboard.html index b48a2bc9a..9534e2a72 100644 --- a/spine-ts/webgl/demos/ikconstraint.html +++ b/spine-ts/webgl/demos/hoverboard.html @@ -4,16 +4,16 @@ - +
-
- Display Bones +
+ Display Bones
diff --git a/spine-ts/webgl/demos/ikconstraint.js b/spine-ts/webgl/demos/hoverboard.js similarity index 96% rename from spine-ts/webgl/demos/ikconstraint.js rename to spine-ts/webgl/demos/hoverboard.js index 1f7e04d4f..25bb6ec64 100644 --- a/spine-ts/webgl/demos/ikconstraint.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -1,4 +1,4 @@ -var ikConstraintDemo = function(loadingComplete, bgColor) { +var hoverboardDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -13,12 +13,12 @@ var ikConstraintDemo = function(loadingComplete, bgColor) { var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var isPlaying = true; - var DEMO_NAME = "IkConstraintDemo"; + var DEMO_NAME = "HoverboardDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("ikdemo-canvas"); + canvas = document.getElementById("hoverboard-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); @@ -71,7 +71,7 @@ var ikConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - var checkbox = $("#ikdemo-drawbones"); + var checkbox = $("#hoverboard-drawbones"); renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; diff --git a/spine-ts/webgl/demos/imagechanges.html b/spine-ts/webgl/demos/imagechanges.html new file mode 100644 index 000000000..43a2ae6f9 --- /dev/null +++ b/spine-ts/webgl/demos/imagechanges.html @@ -0,0 +1,23 @@ + +Frame-by-frame - Spine Demo + + + + + + + +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/framebyframe.js b/spine-ts/webgl/demos/imagechanges.js similarity index 94% rename from spine-ts/webgl/demos/framebyframe.js rename to spine-ts/webgl/demos/imagechanges.js index c0230a0f2..c2d2ae5f3 100644 --- a/spine-ts/webgl/demos/framebyframe.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -1,4 +1,4 @@ -var frameByFrameDemo = function(loadingComplete, bgColor) { +var imageChangesDemo = function(loadingComplete, bgColor) { var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var canvas, gl, renderer, input, assetManager; @@ -8,12 +8,12 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { var activeSkeleton = "Alien"; var playButton, timeLine, isPlaying = true; - var DEMO_NAME = "FrameByFrameDemo"; + var DEMO_NAME = "ImageChangesDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("framebyframedemo-canvas"); + 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 }); @@ -43,7 +43,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { } function setupUI() { - playButton = $("#framebyframedemo-playbutton"); + playButton = $("#imagechanges-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) { @@ -57,7 +57,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { playButton.click(playButtonUpdate); playButton.addClass("pause"); - timeLine = $("#framebyframedemo-timeline").data("slider"); + timeLine = $("#imagechanges-timeline").data("slider"); timeLine.changed = function (percent) { if (isPlaying) playButton.click(); if (!isPlaying) { @@ -71,7 +71,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { } }; - var list = $("#framebyframedemo-active-skeleton"); + var list = $("#imagechanges-skeleton"); for (var skeletonName in skeletons) { var option = $(""); option.attr("value", skeletonName).text(skeletonName); @@ -79,7 +79,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { list.append(option); } list.change(function() { - activeSkeleton = $("#framebyframedemo-active-skeleton option:selected").text(); + activeSkeleton = $("#imagechanges-skeleton option:selected").text(); var active = skeletons[activeSkeleton]; var animationDuration = active.state.getCurrent(0).animation.duration; timeLine.set(active.playTime / animationDuration); diff --git a/spine-ts/webgl/demos/meshes.html b/spine-ts/webgl/demos/meshes.html index 30ef4f49f..a87f42de4 100644 --- a/spine-ts/webgl/demos/meshes.html +++ b/spine-ts/webgl/demos/meshes.html @@ -8,12 +8,12 @@
-
-
-
-
- Draw bones
- Draw triangles
+
+
+
+
+ Draw bones
+ Draw triangles
- - - - - -
-
-
-
- Display bones & path -
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/skins.html b/spine-ts/webgl/demos/skins.html index a059c6108..f1e3241cd 100644 --- a/spine-ts/webgl/demos/skins.html +++ b/spine-ts/webgl/demos/skins.html @@ -8,11 +8,11 @@
-
-
- -
- Randomize skin +
+
+ +
+ Randomize skin
- - - - - -
-
- -
-Time multiplier -
-
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/spritesheets.html b/spine-ts/webgl/demos/spritesheets.html new file mode 100644 index 000000000..1f92933eb --- /dev/null +++ b/spine-ts/webgl/demos/spritesheets.html @@ -0,0 +1,24 @@ + +Spine vs Sprite Sheets - Spine Demo + + + + + + + +
+
+ +
+Time multiplier +
+
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/spritesheet.js b/spine-ts/webgl/demos/spritesheets.js similarity index 78% rename from spine-ts/webgl/demos/spritesheet.js rename to spine-ts/webgl/demos/spritesheets.js index 7ac08e06b..6a1ac9039 100644 --- a/spine-ts/webgl/demos/spritesheet.js +++ b/spine-ts/webgl/demos/spritesheets.js @@ -1,4 +1,4 @@ -var spritesheetDemo = function(loadingComplete, bgColor) { +var spritesheetsDemo = function(loadingComplete, bgColor) { var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8); var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8); @@ -11,12 +11,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) { var timeKeeper, loadingScreen, input; var playTime = 0, framePlaytime = 0, clickAnim = 0; - var DEMO_NAME = "SpritesheetDemo"; + var DEMO_NAME = "SpritesheetsDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("spritesheetdemo-canvas"); + canvas = document.getElementById("spritesheets-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); @@ -52,6 +52,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) { offset = new spine.Vector2(); bounds = new spine.Vector2(); skeleton.getBounds(offset, bounds); + skeleton.x -= 60; skeletonSeq = new spine.Skeleton(skeletonData); walkAnim = skeletonSeq.data.findAnimation("walk"); @@ -64,8 +65,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) { setupUI(); setupInput(); - $("#spritesheetdemo-overlay").removeClass("overlay-hide"); - $("#spritesheetdemo-overlay").addClass("overlay"); + $("#spritesheets-overlay").removeClass("overlay-hide"); + $("#spritesheets-overlay").addClass("overlay"); loadingComplete(canvas, render); } else { loadingScreen.draw(); @@ -73,34 +74,36 @@ var spritesheetDemo = function(loadingComplete, bgColor) { } } - function setupUI() { - timeSlider = $("#spritesheetdemo-timeslider").data("slider"); + function setupUI () { + timeSlider = $("#spritesheets-timeslider").data("slider"); timeSlider.set(0.5); - timeSliderLabel = $("#spritesheetdemo-timeslider-label")[0]; + timeSliderLabel = $("#spritesheets-timeslider-label")[0]; } - function setupInput() { + function setupInput () { input.addListener({ down: function(x, y) { - animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "roar" : "jump", false); - animationState.addAnimation(0, "walk", true, 0); + setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump"); }, up: function(x, y) { }, moved: function(x, y) { }, dragged: function(x, y) { } }); - $("#spritesheetdemo-roar").click(function () { - animationState.setAnimation(0, "roar", false); - animationState.addAnimation(0, "walk", true, 0); + $("#spritesheets-roar").click(function () { + setAnimation("roar"); }); - $("#spritesheetdemo-jump").click(function () { - animationState.setAnimation(0, "jump", false); - animationState.addAnimation(0, "walk", true, 0); + $("#spritesheets-jump").click(function () { + setAnimation("jump"); }); } + + function setAnimation (name) { + animationState.setAnimation(0, name, false); + animationState.addAnimation(0, "walk", true, 0); + } function resize () { - renderer.camera.position.x = offset.x + viewportWidth / 2 + 100; + renderer.camera.position.x = offset.x + viewportWidth / 2 - 25; renderer.camera.position.y = offset.y + viewportHeight / 2 - 160; renderer.camera.viewportWidth = viewportWidth * 1.2; renderer.camera.viewportHeight = viewportHeight * 1.2; @@ -119,16 +122,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) { var newValue = Math.round(timeSlider.get() * 100) + "%"; if (oldValue !== newValue) timeSliderLabel.textContent = newValue; } - + var animationDuration = animationState.getCurrent(0).animation.duration; playTime += delta; while (playTime >= animationDuration) { playTime -= animationDuration; - } - - animationState.update(delta); - animationState.apply(skeleton); - skeleton.updateWorldTransform(); + } walkLastTimePrecise += delta; while (walkLastTimePrecise - walkLastTime > 1 / FPS) { @@ -138,15 +137,22 @@ var spritesheetDemo = function(loadingComplete, bgColor) { } skeletonSeq.updateWorldTransform(); - + animationState.update(delta); + var current = animationState.getCurrent(0); + if (current.animation.name == "walk") current.time = walkLastTimePrecise; + animationState.apply(skeleton); + skeleton.updateWorldTransform(); + gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clear(gl.COLOR_BUFFER_BIT); - renderer.begin(); - var frame = frames[currFrame]; + renderer.begin(); + var frame = frames[currFrame]; renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeletonSeq, true); - renderer.end(); + renderer.end(); + + console.log(Math.round(animationState.getCurrent(0).time*10)/10 + " " + Math.round(walkLastTime*10)/10) } init(); diff --git a/spine-ts/webgl/demos/stretchy.html b/spine-ts/webgl/demos/stretchyman.html similarity index 56% rename from spine-ts/webgl/demos/stretchy.html rename to spine-ts/webgl/demos/stretchyman.html index a7f714564..a01599cbc 100644 --- a/spine-ts/webgl/demos/stretchy.html +++ b/spine-ts/webgl/demos/stretchyman.html @@ -4,16 +4,16 @@ - +
-
- Display bones +
+ Display bones
diff --git a/spine-ts/webgl/demos/stretchy.js b/spine-ts/webgl/demos/stretchyman.js similarity index 97% rename from spine-ts/webgl/demos/stretchy.js rename to spine-ts/webgl/demos/stretchyman.js index 087011b0e..ace9b61fa 100644 --- a/spine-ts/webgl/demos/stretchy.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -1,4 +1,4 @@ -var stretchyDemo = function(loadingComplete, bgColor) { +var stretchymanDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -21,12 +21,12 @@ var stretchyDemo = function(loadingComplete, bgColor) { var kneePos = new spine.Vector2(); var playButton, timeLine, spacing, isPlaying = true, playTime = 0; - var DEMO_NAME = "StretchyDemo"; + var DEMO_NAME = "StretchymanDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("stretchydemo-canvas"); + 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 }); @@ -79,7 +79,7 @@ var stretchyDemo = function(loadingComplete, bgColor) { } function setupUI() { - var checkbox = $("#stretchydemo-drawbones"); + var checkbox = $("#stretchyman-drawbones"); renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; checkbox.change(function() { diff --git a/spine-ts/webgl/demos/tank.html b/spine-ts/webgl/demos/tank.html index 315534ea4..6b7ba9453 100644 --- a/spine-ts/webgl/demos/tank.html +++ b/spine-ts/webgl/demos/tank.html @@ -8,10 +8,10 @@
-
-
-
- Display bones +
+
+
+ Display bones
- +
-
+
Rotation offset -

+

Translation mix -
+
diff --git a/spine-ts/webgl/demos/transformconstraint.js b/spine-ts/webgl/demos/transforms.js similarity index 91% rename from spine-ts/webgl/demos/transformconstraint.js rename to spine-ts/webgl/demos/transforms.js index d653663c7..bd7f20b38 100644 --- a/spine-ts/webgl/demos/transformconstraint.js +++ b/spine-ts/webgl/demos/transforms.js @@ -1,4 +1,4 @@ -var transformConstraintDemo = function(loadingComplete, bgColor) { +var transformsDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -15,12 +15,12 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { var lastRotation = 0; var mix, lastOffset = 0, lastMix = 0.5; - var DEMO_NAME = "TransformConstraintDemo"; + var DEMO_NAME = "TransformsDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("transformdemo-canvas"); + 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 }); @@ -45,7 +45,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { }); var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); - var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transformConstraint); + var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms); skeleton = new spine.Skeleton(skeletonData); skeleton.setToSetupPose(); skeleton.updateWorldTransform(); @@ -75,27 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - var rotationOffset = $("#transformdemo-rotationoffset").data("slider"); + var rotationOffset = $("#transforms-rotationoffset").data("slider"); rotationOffset.changed = function (percent) { var val = percent * 360 - 180; var delta = val - lastOffset; lastOffset = val; skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta; - $("#transformdemo-rotationoffset-label").text(Math.round(val) + "°"); + $("#transforms-rotationoffset-label").text(Math.round(val) + "°"); }; - $("#transformdemo-rotationoffset-label").text("0°"); + $("#transforms-rotationoffset-label").text("0°"); - var translationMix = $("#transformdemo-translationmix").data("slider"); + var translationMix = $("#transforms-translationmix").data("slider"); translationMix.set(0.5); translationMix.changed = function (percent) { var val = percent; var delta = val - lastMix; lastMix = val; skeleton.findTransformConstraint("wheel1").translateMix += delta; - $("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%"); + $("#transforms-translationmix-label").text(Math.round(val * 100) + "%"); }; - $("#transformdemo-translationmix-label").text("50%"); + $("#transforms-translationmix-label").text("50%"); } function setupInput() { diff --git a/spine-ts/webgl/demos/transitions.html b/spine-ts/webgl/demos/transitions.html index 498883d5b..ed7a58bc8 100644 --- a/spine-ts/webgl/demos/transitions.html +++ b/spine-ts/webgl/demos/transitions.html @@ -8,9 +8,9 @@
-
+
Time multiplier -
+
+ + + + + +
+
+
+
+ Display bones & path +
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/pathconstraint.js b/spine-ts/webgl/demos/vine.js similarity index 95% rename from spine-ts/webgl/demos/pathconstraint.js rename to spine-ts/webgl/demos/vine.js index 12af8f063..6507cde37 100644 --- a/spine-ts/webgl/demos/pathconstraint.js +++ b/spine-ts/webgl/demos/vine.js @@ -1,4 +1,4 @@ -var pathConstraintDemo = function(loadingComplete, bgColor) { +var vineDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -13,12 +13,12 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var playButton, timeLine, isPlaying = true, playTime = 0; - var DEMO_NAME = "PathConstraintDemo"; + var DEMO_NAME = "VineDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("pathconstraintdemo-canvas"); + 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 }); @@ -72,7 +72,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - playButton = $("#pathconstraintdemo-playbutton"); + playButton = $("#vine-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) { @@ -86,7 +86,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { playButton.click(playButtonUpdate); playButton.addClass("pause"); - timeLine = $("#pathconstraintdemo-timeline").data("slider"); + timeLine = $("#vine-timeline").data("slider"); timeLine.changed = function (percent) { if (isPlaying) playButton.click(); if (!isPlaying) { @@ -101,7 +101,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; - var checkbox = $("#pathconstraintdemo-drawbones"); + var checkbox = $("#vine-drawbones"); checkbox.change(function() { renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;