Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts] Demo refactoring.

NathanSweet 9 years ago
parent
44f542935d
commit
4a2ba83aa4
24 changed files with 206 additions and 187 deletions
Split View Show Diff Stats
  1. 16 3
      spine-ts/README.md
  2. 0 23
      spine-ts/webgl/demos/framebyframe.html
  3. 4 4
      spine-ts/webgl/demos/hoverboard.html
  4. 4 4
      spine-ts/webgl/demos/hoverboard.js
  5. 23 0
      spine-ts/webgl/demos/imagechanges.html
  6. 7 7
      spine-ts/webgl/demos/imagechanges.js
  7. 6 6
      spine-ts/webgl/demos/meshes.html
  8. 7 7
      spine-ts/webgl/demos/meshes.js
  9. 0 23
      spine-ts/webgl/demos/pathconstraint.html
  10. 5 5
      spine-ts/webgl/demos/skins.html
  11. 7 7
      spine-ts/webgl/demos/skins.js
  12. 0 24
      spine-ts/webgl/demos/spritesheet.html
  13. 24 0
      spine-ts/webgl/demos/spritesheets.html
  14. 34 28
      spine-ts/webgl/demos/spritesheets.js
  15. 4 4
      spine-ts/webgl/demos/stretchyman.html
  16. 4 4
      spine-ts/webgl/demos/stretchyman.js
  17. 4 4
      spine-ts/webgl/demos/tank.html
  18. 4 4
      spine-ts/webgl/demos/tank.js
  19. 5 5
      spine-ts/webgl/demos/transforms.html
  20. 10 10
      spine-ts/webgl/demos/transforms.js
  21. 2 2
      spine-ts/webgl/demos/transitions.html
  22. 7 7
      spine-ts/webgl/demos/transitions.js
  23. 23 0
      spine-ts/webgl/demos/vine.html
  24. 6 6
      spine-ts/webgl/demos/vine.js

+ 16 - 3
spine-ts/README.md
View File 

@@ -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.

+ 0 - 23
spine-ts/webgl/demos/framebyframe.html
View File 

@@ -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>

+ 4 - 4
spine-ts/webgl/demos/ikconstraint.html → spine-ts/webgl/demos/hoverboard.html
View File 

@@ -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>

+ 4 - 4
spine-ts/webgl/demos/ikconstraint.js → spine-ts/webgl/demos/hoverboard.js
View File 

@@ -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;

+ 23 - 0
spine-ts/webgl/demos/imagechanges.html
View File 

@@ -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>

+ 7 - 7
spine-ts/webgl/demos/framebyframe.js → spine-ts/webgl/demos/imagechanges.js
View File 

@@ -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);

+ 6 - 6
spine-ts/webgl/demos/meshes.html
View File 

@@ -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>

+ 7 - 7
spine-ts/webgl/demos/meshes.js
View File 

@@ -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;
 
 		})

+ 0 - 23
spine-ts/webgl/demos/pathconstraint.html
View File 

@@ -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>

+ 5 - 5
spine-ts/webgl/demos/skins.html
View File 

@@ -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>

+ 7 - 7
spine-ts/webgl/demos/skins.js
View File 

@@ -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);		
 	}

+ 0 - 24
spine-ts/webgl/demos/spritesheet.html
View File 

@@ -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>

+ 24 - 0
spine-ts/webgl/demos/spritesheets.html
View File 

@@ -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>

+ 34 - 28
spine-ts/webgl/demos/spritesheet.js → spine-ts/webgl/demos/spritesheets.js
View File 

@@ -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();

+ 4 - 4
spine-ts/webgl/demos/stretchy.html → spine-ts/webgl/demos/stretchyman.html
View File 

@@ -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>

+ 4 - 4
spine-ts/webgl/demos/stretchy.js → spine-ts/webgl/demos/stretchyman.js
View File 

@@ -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() {

+ 4 - 4
spine-ts/webgl/demos/tank.html
View File 

@@ -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>

+ 4 - 4
spine-ts/webgl/demos/tank.js
View File 

@@ -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;			
 		});

+ 5 - 5
spine-ts/webgl/demos/transformconstraint.html → spine-ts/webgl/demos/transforms.html
View File 

@@ -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>

+ 10 - 10
spine-ts/webgl/demos/transformconstraint.js → spine-ts/webgl/demos/transforms.js
View File 

@@ -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() {

+ 2 - 2
spine-ts/webgl/demos/transitions.html
View File 

@@ -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>

+ 7 - 7
spine-ts/webgl/demos/transitions.js
View File 

@@ -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();		
 	}

+ 23 - 0
spine-ts/webgl/demos/vine.html
View File 

@@ -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>

+ 6 - 6
spine-ts/webgl/demos/pathconstraint.js → spine-ts/webgl/demos/vine.js
View File 

@@ -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;