[ts] Demo refactoring.

2026-02-10 00:58:43 +08:00 · 2016-09-06 12:46:25 +02:00 · 2016-09-06 12:46:25 +02:00 · 4a2ba83aa4
commit 4a2ba83aa4
parent 44f542935d
24 changed files with 206 additions and 187 deletions
--- 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.
--- a/spine-ts/webgl/demos/framebyframe.html
+++ b/spine-ts/webgl/demos/framebyframe.html
@ -1,23 +0,0 @@
-<html>
-<title>Frame-by-frame - Spine Demo</title>
-<link rel="stylesheet" href="demos.css">
-<script src="../../build/spine-webgl.js"></script>
-<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
-<script src="utils.js"></script>
-<script src="framebyframe.js"></script>
-<body>
-
-<center>
-<div class="aspect"><div><canvas id="framebyframedemo-canvas"></canvas></div></div>
-<div id="framebyframedemo-timeline" class="slider"></div>
-<input id="framebyframedemo-playbutton" type="button" value="Pause"></input><br>
-<select id="framebyframedemo-active-skeleton" size="2"></select>
-</center>
-
-<script>
-spineDemos.loadSliders();
-frameByFrameDemo(spineDemos.setupRendering);
-</script>
-
-</body>
-</html>
--- a/spine-ts/webgl/demos/ikconstraint.html
+++ b/spine-ts/webgl/demos/ikconstraint.html
@ -4,16 +4,16 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="utils.js"></script>
-<script src="ikconstraint.js"></script>
+<script src="hoverboard.js"></script>
 <body>

 <center>
-<div class="aspect"><div><canvas id="ikdemo-canvas"></canvas></div></div>
-<input id="ikdemo-drawbones" type="checkbox"></input> Display Bones
+<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
+<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
 </center>

 <script>
-ikConstraintDemo(spineDemos.setupRendering);
+hoverboardDemo(spineDemos.setupRendering);
 </script>

 </body>
--- a/spine-ts/webgl/demos/ikconstraint.js
+++ b/spine-ts/webgl/demos/ikconstraint.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;
--- a/spine-ts/webgl/demos/imagechanges.html
+++ b/spine-ts/webgl/demos/imagechanges.html
@ -0,0 +1,23 @@
+<html>
+<title>Frame-by-frame - Spine Demo</title>
+<link rel="stylesheet" href="demos.css">
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<script src="utils.js"></script>
+<script src="imagechanges.js"></script>
+<body>
+
+<center>
+<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
+<div id="imagechanges-timeline" class="slider"></div>
+<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
+<select id="imagechanges-skeleton" size="2"></select>
+</center>
+
+<script>
+spineDemos.loadSliders();
+imageChangesDemo(spineDemos.setupRendering);
+</script>
+
+</body>
+</html>
--- a/spine-ts/webgl/demos/imagechanges.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></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);
--- a/spine-ts/webgl/demos/meshes.html
+++ b/spine-ts/webgl/demos/meshes.html
@ -8,12 +8,12 @@
 <body>

 <center>
-<div class="aspect"><div><canvas id="meshesdemo-canvas"></canvas></div></div>
-<div id="meshesdemo-timeline" class="slider"></div>
-<input id="meshesdemo-playbutton" type="button" value="Pause"></input><br>
-<select id="meshesdemo-active-skeleton" size="3"></select><br>
-<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
-<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
+<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
+<div id="meshes-timeline" class="slider"></div>
+<input id="meshes-playbutton" type="button" value="Pause"></input><br>
+<select id="meshes-skeleton" size="3"></select><br>
+<input type="checkbox" id="meshes-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
+<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
 </center>

 <script>
--- a/spine-ts/webgl/demos/meshes.js
+++ b/spine-ts/webgl/demos/meshes.js
@ -11,7 +11,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);

 	function init () {
-		canvas = document.getElementById("meshesdemo-canvas");
+		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 });	

@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 	}

 	function setupUI() {
-		playButton = $("#meshesdemo-playbutton");
+		playButton = $("#meshes-playbutton");
 		var playButtonUpdate = function () {			
 			isPlaying = !isPlaying;
 			if (isPlaying) {
@ -57,7 +57,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");

-		timeLine = $("#meshesdemo-timeline").data("slider");
+		timeLine = $("#meshes-timeline").data("slider");
 		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();		
 			if (!isPlaying) {
@ -71,7 +71,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			}
 		};

-		var list = $("#meshesdemo-active-skeleton");	
+		var list = $("#meshes-skeleton");	
 		for (var skeletonName in skeletons) {
 			var option = $("<option></option>");
 			option.attr("value", skeletonName).text(skeletonName);
@ -79,20 +79,20 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			list.append(option);
 		}
 		list.change(function() {
-			activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text();
+			activeSkeleton = $("#meshes-skeleton option:selected").text();
 			var active = skeletons[activeSkeleton];
 			var animationDuration = active.state.getCurrent(0).animation.duration;
 			timeLine.set(active.playTime / animationDuration);
 		})

 		renderer.skeletonDebugRenderer.drawBones = false;
-		$("#meshesdemo-drawbonescheckbox").click(function() {
+		$("#meshes-drawbonescheckbox").click(function() {
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		})

 		renderer.skeletonDebugRenderer.drawMeshHull = false;
 		renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-		$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
+		$("#meshes-drawmeshtrianglescheckbox").click(function() {
 			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
 			renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
 		})
--- a/spine-ts/webgl/demos/pathconstraint.html
+++ b/spine-ts/webgl/demos/pathconstraint.html
@ -1,23 +0,0 @@
-<html>
-<title>Path Constraints - Spine Demo</title>
-<link rel="stylesheet" href="demos.css">
-<script src="../../build/spine-webgl.js"></script>
-<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
-<script src="utils.js"></script>
-<script src="pathconstraint.js"></script>
-<body>
-
-<center>
-<div class="aspect"><div><canvas id="pathconstraintdemo-canvas"></canvas></div></div>
-<div id="pathconstraintdemo-timeline" class="slider"></div>
-<input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input><br>
-<input id="pathconstraintdemo-drawbones" type="checkbox"></input> Display bones &amp; path
-</center>
-
-<script>	
-spineDemos.loadSliders();
-pathConstraintDemo(spineDemos.setupRendering);
-</script>
-
-</body>
-</html>
--- a/spine-ts/webgl/demos/skins.html
+++ b/spine-ts/webgl/demos/skins.html
@ -8,11 +8,11 @@
 <body>

 <center>
-<div class="aspect"><div><canvas id="skinsdemo-canvas"></canvas></div></div>
-<select id="skinsdemo-active-skin"></select><br>
-<button id="skinsdemo-randomizeattachments">Random Attachments</button>
-<button id="skinsdemo-swingsword">Swing Sword</button><br>
-<input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin
+<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
+<select id="skins-skin"></select><br>
+<button id="skins-randomizeattachments">Random Attachments</button>
+<button id="skins-swingsword">Swing Sword</button><br>
+<input id="skins-randomizeskins" type="checkbox" checked=true></input> Randomize skin
 </center>

 <script>
--- a/spine-ts/webgl/demos/skins.js
+++ b/spine-ts/webgl/demos/skins.js
@ -10,7 +10,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);		

 	function init () {
-		canvas = document.getElementById("skinsdemo-canvas");
+		canvas = document.getElementById("skins-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	

@ -114,7 +114,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 	}

 	function setupUI() {
-		var list = $("#skinsdemo-active-skin");	
+		var list = $("#skins-skin");	
 		for (var skin in skeleton.data.skins) {
 			skin = skeleton.data.skins[skin];
 			if (skin.name == "default") continue;
@ -127,15 +127,15 @@ var skinsDemo = function(loadingComplete, bgColor) {
 			list.append(option);
 		}
 		list.change(function() {
-			activeSkin = $("#skinsdemo-active-skin option:selected").text();
+			activeSkin = $("#skins-skin option:selected").text();
 			skeleton.setSkinByName(activeSkin);
 			skeleton.setSlotsToSetupPose();
 			randomizeSkins.checked = false;
 		});

-		$("#skinsdemo-randomizeattachments").click(randomizeAttachments);
-		$("#skinsdemo-swingsword").click(swingSword);
-		randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
+		$("#skins-randomizeattachments").click(randomizeAttachments);
+		$("#skins-swingsword").click(swingSword);
+		randomizeSkins = document.getElementById("skins-randomizeskins");
 	}

 	function setSkin (skin) {
@ -160,7 +160,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 			}
 		}
 		setSkin(result);
-		$("#skinsdemo-active-skin option").filter(function() {
+		$("#skins-skin option").filter(function() {
 			return ($(this).text() == result.name);
 		}).prop("selected", true);		
 	}
--- a/spine-ts/webgl/demos/spritesheet.html
+++ b/spine-ts/webgl/demos/spritesheet.html
@ -1,24 +0,0 @@
-<html>
-<title>Vs Sprite Sheets - Spine Demo</title>
-<link rel="stylesheet" href="demos.css">
-<script src="../../build/spine-webgl.js"></script>
-<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
-<script src="utils.js"></script>
-<script src="spritesheet.js"></script>
-<body>
-
-<center>
-<div class="aspect"><div><canvas id="spritesheetdemo-canvas"></canvas></div></div>
-<button id="spritesheetdemo-roar">Roar</button>
-<button id="spritesheetdemo-jump">Jump</button><br>
-Time multiplier
-<div id="spritesheetdemo-timeslider" class="slider filled"></div>
-</center>
-
-<script>	
-spineDemos.loadSliders();
-spritesheetDemo(spineDemos.setupRendering);
-</script>
-
-</body>
-</html>
--- a/spine-ts/webgl/demos/spritesheets.html
+++ b/spine-ts/webgl/demos/spritesheets.html
@ -0,0 +1,24 @@
+<html>
+<title>Spine vs Sprite Sheets - Spine Demo</title>
+<link rel="stylesheet" href="demos.css">
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<script src="utils.js"></script>
+<script src="spritesheets.js"></script>
+<body>
+
+<center>
+<div class="aspect"><div><canvas id="spritesheets-canvas"></canvas></div></div>
+<button id="spritesheets-roar">Roar</button>
+<button id="spritesheets-jump">Jump</button><br>
+Time multiplier
+<div id="spritesheets-timeslider" class="slider filled"></div>
+</center>
+
+<script>	
+spineDemos.loadSliders();
+spritesheetsDemo(spineDemos.setupRendering);
+</script>
+
+</body>
+</html>
--- a/spine-ts/webgl/demos/spritesheets.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();
--- a/spine-ts/webgl/demos/stretchyman.html
+++ b/spine-ts/webgl/demos/stretchyman.html
@ -4,16 +4,16 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="utils.js"></script>
-<script src="stretchy.js"></script>
+<script src="stretchyman.js"></script>
 <body>

 <center>
-<div class="aspect"><div><canvas id="stretchydemo-canvas"></canvas></div></div>
-<input id="stretchydemo-drawbones" type="checkbox"></input> Display bones
+<div class="aspect"><div><canvas id="stretchyman-canvas"></canvas></div></div>
+<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
 </center>

 <script>
-stretchyDemo(spineDemos.setupRendering);
+stretchymanDemo(spineDemos.setupRendering);
 </script>

 </body>
--- a/spine-ts/webgl/demos/stretchyman.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() {
--- a/spine-ts/webgl/demos/tank.html
+++ b/spine-ts/webgl/demos/tank.html
@ -8,10 +8,10 @@
 <body>

 <center>
-<div class="aspect"><div><canvas id="tankdemo-canvas"></canvas></div></div>
-<div id="tankdemo-timeline" class="slider"></div>
-<input id="tankdemo-playbutton" type="button" value="Pause"></input><br>
-<input id="tankdemo-drawbones" type="checkbox"></input> Display bones
+<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
+<div id="tank-timeline" class="slider"></div>
+<input id="tank-playbutton" type="button" value="Pause"></input><br>
+<input id="tank-drawbones" type="checkbox"></input> Display bones
 </center>

 <script>
--- a/spine-ts/webgl/demos/tank.js
+++ b/spine-ts/webgl/demos/tank.js
@ -9,7 +9,7 @@ var tankDemo = function(loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);

 	function init () {
-		canvas = document.getElementById("tankdemo-canvas");
+		canvas = document.getElementById("tank-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	

@ -59,7 +59,7 @@ var tankDemo = function(loadingComplete, bgColor) {
 	}

 	function setupUI() {
-		playButton = $("#tankdemo-playbutton");
+		playButton = $("#tank-playbutton");
 		var playButtonUpdate = function () {			
 			isPlaying = !isPlaying;
 			if (isPlaying) {
@ -73,7 +73,7 @@ var tankDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");

-		timeLine = $("#tankdemo-timeline").data("slider");
+		timeLine = $("#tank-timeline").data("slider");
 		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();
 			if (!isPlaying) {
@ -88,7 +88,7 @@ var tankDemo = function(loadingComplete, bgColor) {

 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
-		$("#tankdemo-drawbones").change(function() {
+		$("#tank-drawbones").change(function() {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;			
 		});	
--- a/spine-ts/webgl/demos/transformconstraint.html
+++ b/spine-ts/webgl/demos/transformconstraint.html
@ -4,20 +4,20 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="utils.js"></script>
-<script src="transformconstraint.js"></script>
+<script src="transforms.js"></script>
 <body>

 <center>
-<div class="aspect"><div><canvas id="transformdemo-canvas"></canvas></div></div>
+<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
 Rotation offset
-<div id="transformdemo-rotationoffset" class="slider filled"></div><br>
+<div id="transforms-rotationoffset" class="slider filled"></div><br>
 Translation mix
-<div id="transformdemo-translationmix" class="slider filled"></div>		
+<div id="transforms-translationmix" class="slider filled"></div>		
 </center>

 <script>	
 spineDemos.loadSliders();
-transformConstraintDemo(spineDemos.setupRendering);
+transformsDemo(spineDemos.setupRendering);
 </script>

 </body>
--- a/spine-ts/webgl/demos/transformconstraint.js
+++ b/spine-ts/webgl/demos/transformconstraint.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() {
--- a/spine-ts/webgl/demos/transitions.html
+++ b/spine-ts/webgl/demos/transitions.html
@ -8,9 +8,9 @@
 <body>

 <center>
-<div class="aspect"><div><canvas id="transitionsdemo-canvas"></canvas></div></div>
+<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
 Time multiplier
-<div id="transitionsdemo-timeslider" class="slider filled"></div>
+<div id="transitions-timeslider" class="slider filled"></div>
 </center>

 <script>
--- a/spine-ts/webgl/demos/transitions.js
+++ b/spine-ts/webgl/demos/transitions.js
@ -12,10 +12,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);

 	function init () {
-		timeSlider = $("#transitionsdemo-timeslider").data("slider");
+		timeSlider = $("#transitions-timeslider").data("slider");
 		timeSlider.set(0.5);
-		timeSliderLabel = $("#transitionsdemo-timeslider-label")[0];
-		canvas = document.getElementById("transitionsdemo-canvas");
+		timeSliderLabel = $("#transitions-timeslider-label")[0];
+		canvas = document.getElementById("transitions-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	

@ -50,8 +50,8 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 			bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
 			skeleton.getBounds(bounds.offset, bounds.size);
 			setupInput();
-			$("#transitionsdemo-overlay").removeClass("overlay-hide");
-			$("#transitionsdemo-overlay").addClass("overlay");	
+			$("#transitions-overlay").removeClass("overlay-hide");
+			$("#transitions-overlay").addClass("overlay");	
 			loadingComplete(canvas, render);						
 		} else {
 			loadingScreen.draw();			
@ -133,13 +133,13 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		state.update(delta);
 		state.apply(skeleton);
 		skeleton.updateWorldTransform();
-		skeleton.x = -60;
+		skeleton.x = -10;
 		renderer.drawSkeleton(skeleton, true);

 		stateNoMix.update(delta);
 		stateNoMix.apply(skeletonNoMix);
 		skeletonNoMix.updateWorldTransform();
-		skeletonNoMix.x = size.x + 60;
+		skeletonNoMix.x = size.x + 45;
 		renderer.drawSkeleton(skeletonNoMix, true);
 		renderer.end();		
 	}
--- a/spine-ts/webgl/demos/vine.html
+++ b/spine-ts/webgl/demos/vine.html
@ -0,0 +1,23 @@
+<html>
+<title>Path Constraints - Spine Demo</title>
+<link rel="stylesheet" href="demos.css">
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<script src="utils.js"></script>
+<script src="vine.js"></script>
+<body>
+
+<center>
+<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
+<div id="vine-timeline" class="slider"></div>
+<input id="vine-playbutton" type="button" value="Pause"></input><br>
+<input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path
+</center>
+
+<script>	
+spineDemos.loadSliders();
+vineDemo(spineDemos.setupRendering);
+</script>
+
+</body>
+</html>
--- a/spine-ts/webgl/demos/pathconstraint.js
+++ b/spine-ts/webgl/demos/pathconstraint.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;