[ts] Added playback controls to demos

spine-ts/build/spine-all.d.ts

@@ -1,11 +1,12 @@
 declare module spine {
     class AssetManager implements Disposable {
+        private pathPrefix;
         private textureLoader;
         private assets;
         private errors;
         private toLoad;
         private loaded;
-        constructor(textureLoader: (image: HTMLImageElement) => any);
+        constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         get(path: string): any;
@@ -21,7 +22,7 @@ declare module spine {
 }
 declare module spine.canvas {
     class AssetManager extends spine.AssetManager {
-        constructor();
+        constructor(pathPrefix?: string);
     }
 }
 declare module spine {
@@ -916,7 +917,7 @@ declare module spine {
 }
 declare module spine.threejs {
     class AssetManager extends spine.AssetManager {
-        constructor();
+        constructor(pathPrefix?: string);
     }
 }
 declare module spine.threejs {
@@ -960,7 +961,7 @@ declare module spine.threejs {
 }
 declare module spine.webgl {
     class AssetManager extends spine.AssetManager {
-        constructor(gl: WebGLRenderingContext);
+        constructor(gl: WebGLRenderingContext, pathPrefix?: string);
     }
 }
 declare module spine.webgl {

spine-ts/build/spine-all.js

@@ -1,17 +1,20 @@
 var spine;
 (function (spine) {
     var AssetManager = (function () {
-        function AssetManager(textureLoader) {
+        function AssetManager(textureLoader, pathPrefix) {
+            if (pathPrefix === void 0) { pathPrefix = ""; }
             this.assets = {};
             this.errors = {};
             this.toLoad = 0;
             this.loaded = 0;
             this.textureLoader = textureLoader;
+            this.pathPrefix = pathPrefix;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
@@ -37,6 +40,7 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var img = new Image();
             img.src = path;
@@ -57,9 +61,11 @@ var spine;
             };
         };
         AssetManager.prototype.get = function (path) {
+            path = this.pathPrefix + path;
             return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
+            path = this.pathPrefix + path;
             var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
@@ -106,8 +112,9 @@ var spine;
     (function (canvas) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager() {
+            function AssetManager(pathPrefix) {
-                _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); });
+                if (pathPrefix === void 0) { pathPrefix = ""; }
+                _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));
@@ -4583,10 +4590,11 @@ var spine;
     (function (threejs) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager() {
+            function AssetManager(pathPrefix) {
+                if (pathPrefix === void 0) { pathPrefix = ""; }
                 _super.call(this, function (image) {
                     return new threejs.ThreeJsTexture(image);
-                });
+                }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));
@@ -4828,10 +4836,11 @@ var spine;
     (function (webgl) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager(gl) {
+            function AssetManager(gl, pathPrefix) {
+                if (pathPrefix === void 0) { pathPrefix = ""; }
                 _super.call(this, function (image) {
                     return new spine.webgl.GLTexture(gl, image);
-                });
+                }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));

spine-ts/build/spine-core.d.ts

@@ -236,12 +236,13 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
+        private pathPrefix;
         private textureLoader;
         private assets;
         private errors;
         private toLoad;
         private loaded;
-        constructor(textureLoader: (image: HTMLImageElement) => any);
+        constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         get(path: string): any;

spine-ts/build/spine-core.js

@@ -989,17 +989,20 @@ var spine;
 var spine;
 (function (spine) {
     var AssetManager = (function () {
-        function AssetManager(textureLoader) {
+        function AssetManager(textureLoader, pathPrefix) {
+            if (pathPrefix === void 0) { pathPrefix = ""; }
             this.assets = {};
             this.errors = {};
             this.toLoad = 0;
             this.loaded = 0;
             this.textureLoader = textureLoader;
+            this.pathPrefix = pathPrefix;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
@@ -1025,6 +1028,7 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var img = new Image();
             img.src = path;
@@ -1045,9 +1049,11 @@ var spine;
             };
         };
         AssetManager.prototype.get = function (path) {
+            path = this.pathPrefix + path;
             return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
+            path = this.pathPrefix + path;
             var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();

spine-ts/build/spine-threejs.d.ts

@@ -236,12 +236,13 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
+        private pathPrefix;
         private textureLoader;
         private assets;
         private errors;
         private toLoad;
         private loaded;
-        constructor(textureLoader: (image: HTMLImageElement) => any);
+        constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         get(path: string): any;
@@ -890,7 +891,7 @@ declare module spine {
 }
 declare module spine.threejs {
     class AssetManager extends spine.AssetManager {
-        constructor();
+        constructor(pathPrefix?: string);
     }
 }
 declare module spine.threejs {

spine-ts/build/spine-threejs.js

@@ -989,17 +989,20 @@ var spine;
 var spine;
 (function (spine) {
     var AssetManager = (function () {
-        function AssetManager(textureLoader) {
+        function AssetManager(textureLoader, pathPrefix) {
+            if (pathPrefix === void 0) { pathPrefix = ""; }
             this.assets = {};
             this.errors = {};
             this.toLoad = 0;
             this.loaded = 0;
             this.textureLoader = textureLoader;
+            this.pathPrefix = pathPrefix;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
@@ -1025,6 +1028,7 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var img = new Image();
             img.src = path;
@@ -1045,9 +1049,11 @@ var spine;
             };
         };
         AssetManager.prototype.get = function (path) {
+            path = this.pathPrefix + path;
             return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
+            path = this.pathPrefix + path;
             var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
@@ -4407,10 +4413,11 @@ var spine;
     (function (threejs) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager() {
+            function AssetManager(pathPrefix) {
+                if (pathPrefix === void 0) { pathPrefix = ""; }
                 _super.call(this, function (image) {
                     return new threejs.ThreeJsTexture(image);
-                });
+                }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));

spine-ts/build/spine-webgl.d.ts

@@ -236,12 +236,13 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
+        private pathPrefix;
         private textureLoader;
         private assets;
         private errors;
         private toLoad;
         private loaded;
-        constructor(textureLoader: (image: HTMLImageElement) => any);
+        constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         get(path: string): any;
@@ -890,7 +891,7 @@ declare module spine {
 }
 declare module spine.webgl {
     class AssetManager extends spine.AssetManager {
-        constructor(gl: WebGLRenderingContext);
+        constructor(gl: WebGLRenderingContext, pathPrefix?: string);
     }
 }
 declare module spine.webgl {

spine-ts/build/spine-webgl.js

@@ -989,17 +989,20 @@ var spine;
 var spine;
 (function (spine) {
     var AssetManager = (function () {
-        function AssetManager(textureLoader) {
+        function AssetManager(textureLoader, pathPrefix) {
+            if (pathPrefix === void 0) { pathPrefix = ""; }
             this.assets = {};
             this.errors = {};
             this.toLoad = 0;
             this.loaded = 0;
             this.textureLoader = textureLoader;
+            this.pathPrefix = pathPrefix;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
@@ -1025,6 +1028,7 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var img = new Image();
             img.src = path;
@@ -1045,9 +1049,11 @@ var spine;
             };
         };
         AssetManager.prototype.get = function (path) {
+            path = this.pathPrefix + path;
             return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
+            path = this.pathPrefix + path;
             var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
@@ -4407,10 +4413,11 @@ var spine;
     (function (webgl) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager(gl) {
+            function AssetManager(gl, pathPrefix) {
+                if (pathPrefix === void 0) { pathPrefix = ""; }
                 _super.call(this, function (image) {
                     return new spine.webgl.GLTexture(gl, image);
-                });
+                }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));

spine-ts/build/spine-widget.d.ts

@@ -236,12 +236,13 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
+        private pathPrefix;
         private textureLoader;
         private assets;
         private errors;
         private toLoad;
         private loaded;
-        constructor(textureLoader: (image: HTMLImageElement) => any);
+        constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         get(path: string): any;
@@ -890,7 +891,7 @@ declare module spine {
 }
 declare module spine.webgl {
     class AssetManager extends spine.AssetManager {
-        constructor(gl: WebGLRenderingContext);
+        constructor(gl: WebGLRenderingContext, pathPrefix?: string);
     }
 }
 declare module spine.webgl {

spine-ts/build/spine-widget.js

@@ -989,17 +989,20 @@ var spine;
 var spine;
 (function (spine) {
     var AssetManager = (function () {
-        function AssetManager(textureLoader) {
+        function AssetManager(textureLoader, pathPrefix) {
+            if (pathPrefix === void 0) { pathPrefix = ""; }
             this.assets = {};
             this.errors = {};
             this.toLoad = 0;
             this.loaded = 0;
             this.textureLoader = textureLoader;
+            this.pathPrefix = pathPrefix;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
@@ -1025,6 +1028,7 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
+            path = this.pathPrefix + path;
             this.toLoad++;
             var img = new Image();
             img.src = path;
@@ -1045,9 +1049,11 @@ var spine;
             };
         };
         AssetManager.prototype.get = function (path) {
+            path = this.pathPrefix + path;
             return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
+            path = this.pathPrefix + path;
             var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
@@ -4407,10 +4413,11 @@ var spine;
     (function (webgl) {
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
-            function AssetManager(gl) {
+            function AssetManager(gl, pathPrefix) {
+                if (pathPrefix === void 0) { pathPrefix = ""; }
                 _super.call(this, function (image) {
                     return new spine.webgl.GLTexture(gl, image);
-                });
+                }, pathPrefix);
             }
             return AssetManager;
         }(spine.AssetManager));

spine-ts/canvas/src/AssetManager.ts

@@ -33,8 +33,8 @@
 
 module spine.canvas {
 	export class AssetManager extends spine.AssetManager {
-		constructor () {
+		constructor (pathPrefix: string = "") {
-			super((image: HTMLImageElement) => { return new spine.canvas.CanvasTexture(image); });
+			super((image: HTMLImageElement) => { return new spine.canvas.CanvasTexture(image); }, pathPrefix);
 		}
 	}
 }

spine-ts/core/src/AssetManager.ts

@@ -31,20 +31,23 @@
 
 module spine {
 	export class AssetManager implements Disposable {
+		private pathPrefix: string;
 		private textureLoader: (image: HTMLImageElement) => any;
 		private assets: Map<any> = {};
 		private errors: Map<string> = {};
 		private toLoad = 0;
 		private loaded = 0;
 
-		constructor (textureLoader: (image: HTMLImageElement) => any) {
+		constructor (textureLoader: (image: HTMLImageElement) => any, pathPrefix: string = "") {
 			this.textureLoader = textureLoader;
+			this.pathPrefix = pathPrefix;
 		}
 
 		loadText(path: string,
 			success: (path: string, text: string) => void = null,
 			error: (path: string, error: string) => void = null
 		) {
+			path = this.pathPrefix + path;
 			this.toLoad++;
 			let request = new XMLHttpRequest();
 			request.onreadystatechange = () => {
@@ -68,6 +71,7 @@ module spine {
 			success: (path: string, image: HTMLImageElement) => void = null,
 			error: (path: string, error: string) => void = null
 		) {
+			path = this.pathPrefix + path;
 			this.toLoad++;
 			let img = new Image();
 			img.src = path;
@@ -87,10 +91,12 @@ module spine {
 		}
 
 		get (path: string) {
+			path = this.pathPrefix + path;
 			return this.assets[path];
 		}
 
 		remove (path: string) {
+			path = this.pathPrefix + path;
 			let asset = this.assets[path];
 			if ((<any>asset).dispose) (<any>asset).dispose();			
 			this.assets[path] = null;

spine-ts/threejs/src/AssetManager.ts

@@ -31,10 +31,10 @@
 
 module spine.threejs {
 	export class AssetManager extends spine.AssetManager {
-		constructor () {
+		constructor (pathPrefix: string = "") {
 			super((image: HTMLImageElement) => {
 				return new ThreeJsTexture(image);
-			});
+			}, pathPrefix);
 		}
 	}
 }

spine-ts/webgl/demos/animationmixing.html

@@ -0,0 +1,16 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="mixingdemo-canvas"></canvas>
+<center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
+<script src="mixing.js"></script>
+<script>
+	ikConstraintDemo();
+</script>
+</body>
+</html>

spine-ts/webgl/demos/animationmixing.js

@@ -0,0 +1,98 @@
+var ikConstraintDemo = function(pathPrefix) {
+	var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
+	var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
+
+	var canvas, gl, renderer, input, assetManager;
+	var skeleton, bounds;		
+	var lastFrameTime = Date.now() / 1000;
+	var target = null;	
+	var boneName = "hip";
+	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();	
+
+	function init () {		
+		canvas = document.getElementById("mixingdemo-canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
+
+		renderer = new spine.webgl.SceneRenderer(canvas, gl);
+		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
+		input = new spine.webgl.Input(canvas);
+		input.addListener({
+			down: function(x, y) {			
+				var bone = skeleton.findBone(boneName);				
+				renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+				if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 20) {
+					target = bone;
+				}				
+			},
+			up: function(x, y) {
+				target = null;
+			},
+			moved: function(x, y) {
+				if (target != null) {
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+					if (target.parent !== null) {
+						target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+						target.x = temp2.x;
+						target.y = temp2.y;
+					} else {
+						target.x = coords.x - skeleton.x;
+						target.y = coords.y - skeleton.y;
+					}
+				}
+			}
+		})
+		assetManager.loadTexture("assets/spineboy.png");
+		assetManager.loadText("assets/spineboy-mesh.json");
+		assetManager.loadText("assets/spineboy.atlas");
+		requestAnimationFrame(load);
+	}
+
+	function load () {
+		if (assetManager.isLoadingComplete()) {
+			var atlas = new spine.TextureAtlas(assetManager.get("assets/spineboy.atlas"), function(path) {
+				return assetManager.get("assets/" + path);		
+			});
+			var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/spineboy-mesh.json"));
+			skeleton = new spine.Skeleton(skeletonData);
+			skeleton.setToSetupPose();
+			skeleton.updateWorldTransform();
+			var offset = new spine.Vector2();
+			bounds = new spine.Vector2();
+			skeleton.getBounds(offset, bounds);
+
+			renderer.camera.position.x = offset.x + bounds.x / 2;
+			renderer.camera.position.y = offset.y + bounds.y / 2;
+
+			requestAnimationFrame(render);
+		} else requestAnimationFrame(load);
+	}
+
+	function render () {
+		var now = Date.now() / 1000;
+		var delta = now - lastFrameTime;
+		lastFrameTime = now;
+
+		renderer.camera.viewportWidth = bounds.x * 1.2;
+		renderer.camera.viewportHeight = bounds.y * 1.2;
+		renderer.resize(spine.webgl.ResizeMode.Fit);
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		skeleton.updateWorldTransform();
+
+		renderer.begin();				
+		renderer.drawSkeleton(skeleton);
+		var bone = skeleton.findBone(boneName);
+		renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_INNER_COLOR);
+		renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_OUTER_COLOR);
+		renderer.end();
+
+		requestAnimationFrame(render);
+	}
+
+	init();
+};

spine-ts/webgl/demos/assets/alien.atlas

@@ -0,0 +1,153 @@
+
+alien.png
+size: 1024,512
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+back_foot
+  rotate: true
+  xy: 1016, 366
+  size: 8, 6
+  orig: 8, 6
+  offset: 0, 0
+  index: -1
+back_shin
+  rotate: false
+  xy: 28, 2
+  size: 21, 24
+  orig: 21, 24
+  offset: 0, 0
+  index: -1
+back_thigh
+  rotate: false
+  xy: 2, 2
+  size: 24, 24
+  orig: 24, 24
+  offset: 0, 0
+  index: -1
+backarmor
+  rotate: false
+  xy: 933, 295
+  size: 81, 91
+  orig: 81, 91
+  offset: 0, 0
+  index: -1
+blown_up_nck
+  rotate: false
+  xy: 2, 28
+  size: 77, 52
+  orig: 77, 52
+  offset: 0, 0
+  index: -1
+body
+  rotate: true
+  xy: 781, 167
+  size: 98, 118
+  orig: 98, 118
+  offset: 0, 0
+  index: -1
+burst01
+  rotate: false
+  xy: 788, 355
+  size: 143, 155
+  orig: 143, 155
+  offset: 0, 0
+  index: -1
+burst02
+  rotate: false
+  xy: 630, 329
+  size: 156, 181
+  orig: 156, 181
+  offset: 0, 0
+  index: -1
+front_foot
+  rotate: true
+  xy: 1016, 376
+  size: 10, 6
+  orig: 10, 6
+  offset: 0, 0
+  index: -1
+front_lower_arm
+  rotate: true
+  xy: 81, 25
+  size: 55, 63
+  orig: 55, 63
+  offset: 0, 0
+  index: -1
+front_shin
+  rotate: true
+  xy: 287, 55
+  size: 25, 28
+  orig: 25, 28
+  offset: 0, 0
+  index: -1
+front_thigh
+  rotate: false
+  xy: 258, 53
+  size: 27, 27
+  orig: 27, 27
+  offset: 0, 0
+  index: -1
+front_upper_arm
+  rotate: false
+  xy: 199, 52
+  size: 57, 28
+  orig: 57, 28
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 630, 191
+  size: 149, 136
+  orig: 149, 136
+  offset: 0, 0
+  index: -1
+jaw
+  rotate: true
+  xy: 933, 388
+  size: 122, 86
+  orig: 122, 86
+  offset: 0, 0
+  index: -1
+lower_back_arm
+  rotate: false
+  xy: 146, 34
+  size: 51, 46
+  orig: 51, 46
+  offset: 0, 0
+  index: -1
+metaljaw
+  rotate: false
+  xy: 788, 267
+  size: 122, 86
+  orig: 122, 86
+  offset: 0, 0
+  index: -1
+splat01
+  rotate: false
+  xy: 371, 258
+  size: 257, 252
+  orig: 257, 252
+  offset: 0, 0
+  index: -1
+splat02
+  rotate: false
+  xy: 2, 254
+  size: 367, 256
+  orig: 367, 256
+  offset: 0, 0
+  index: -1
+splat03
+  rotate: false
+  xy: 2, 82
+  size: 362, 170
+  orig: 362, 170
+  offset: 0, 0
+  index: -1
+upper_back_arm
+  rotate: true
+  xy: 146, 2
+  size: 30, 43
+  orig: 30, 43
+  offset: 0, 0
+  index: -1

spine-ts/webgl/demos/assets/dragon.atlas

@@ -0,0 +1,279 @@
+
+dragon.png
+size: 1024,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+L_front_leg
+  rotate: false
+  xy: 870, 881
+  size: 42, 29
+  orig: 42, 29
+  offset: 0, 0
+  index: -1
+L_front_thigh
+  rotate: false
+  xy: 258, 761
+  size: 42, 36
+  orig: 42, 36
+  offset: 0, 0
+  index: -1
+L_rear_leg
+  rotate: false
+  xy: 765, 859
+  size: 103, 89
+  orig: 103, 89
+  offset: 0, 0
+  index: -1
+L_rear_thigh
+  rotate: false
+  xy: 156, 116
+  size: 46, 75
+  orig: 46, 75
+  offset: 0, 0
+  index: -1
+L_wing01
+  rotate: false
+  xy: 100, 687
+  size: 96, 128
+  orig: 96, 128
+  offset: 0, 0
+  index: -1
+L_wing02
+  rotate: false
+  xy: 2, 88
+  size: 90, 135
+  orig: 90, 135
+  offset: 0, 0
+  index: -1
+L_wing03
+  rotate: false
+  xy: 114, 451
+  size: 93, 104
+  orig: 93, 104
+  offset: 0, 0
+  index: -1
+L_wing04
+  rotate: false
+  xy: 104, 193
+  size: 94, 68
+  orig: 94, 68
+  offset: 0, 0
+  index: -1
+L_wing05
+  rotate: false
+  xy: 907, 915
+  size: 109, 107
+  orig: 109, 107
+  offset: 0, 0
+  index: -1
+L_wing06
+  rotate: false
+  xy: 2, 671
+  size: 96, 166
+  orig: 96, 166
+  offset: 0, 0
+  index: -1
+L_wing07
+  rotate: false
+  xy: 114, 557
+  size: 80, 128
+  orig: 80, 128
+  offset: 0, 0
+  index: -1
+L_wing08
+  rotate: false
+  xy: 104, 263
+  size: 82, 91
+  orig: 82, 91
+  offset: 0, 0
+  index: -1
+L_wing09
+  rotate: false
+  xy: 2, 2
+  size: 102, 84
+  orig: 102, 84
+  offset: 0, 0
+  index: -1
+R_front_leg
+  rotate: false
+  xy: 696, 873
+  size: 51, 45
+  orig: 51, 45
+  offset: 0, 0
+  index: -1
+R_front_thigh
+  rotate: false
+  xy: 331, 842
+  size: 54, 54
+  orig: 54, 54
+  offset: 0, 0
+  index: -1
+R_rear_leg
+  rotate: false
+  xy: 198, 763
+  size: 58, 50
+  orig: 58, 50
+  offset: 0, 0
+  index: -1
+R_rear_thigh
+  rotate: false
+  xy: 213, 815
+  size: 46, 75
+  orig: 46, 75
+  offset: 0, 0
+  index: -1
+R_wing01
+  rotate: false
+  xy: 2, 514
+  size: 110, 155
+  orig: 110, 155
+  offset: 0, 0
+  index: -1
+R_wing02
+  rotate: false
+  xy: 2, 359
+  size: 102, 153
+  orig: 102, 153
+  offset: 0, 0
+  index: -1
+R_wing03
+  rotate: false
+  xy: 254, 898
+  size: 136, 124
+  orig: 136, 124
+  offset: 0, 0
+  index: -1
+R_wing04
+  rotate: false
+  xy: 765, 950
+  size: 140, 72
+  orig: 140, 72
+  offset: 0, 0
+  index: -1
+R_wing05
+  rotate: false
+  xy: 392, 907
+  size: 126, 115
+  orig: 126, 115
+  offset: 0, 0
+  index: -1
+R_wing06
+  rotate: false
+  xy: 2, 839
+  size: 100, 183
+  orig: 100, 183
+  offset: 0, 0
+  index: -1
+R_wing07
+  rotate: false
+  xy: 2, 225
+  size: 100, 132
+  orig: 100, 132
+  offset: 0, 0
+  index: -1
+R_wing08
+  rotate: false
+  xy: 520, 895
+  size: 117, 127
+  orig: 117, 127
+  offset: 0, 0
+  index: -1
+R_wing09
+  rotate: false
+  xy: 639, 920
+  size: 124, 102
+  orig: 124, 102
+  offset: 0, 0
+  index: -1
+back
+  rotate: false
+  xy: 106, 356
+  size: 95, 93
+  orig: 95, 93
+  offset: 0, 0
+  index: -1
+chest
+  rotate: false
+  xy: 261, 835
+  size: 68, 61
+  orig: 68, 61
+  offset: 0, 0
+  index: -1
+chin
+  rotate: false
+  xy: 104, 817
+  size: 107, 73
+  orig: 107, 73
+  offset: 0, 0
+  index: -1
+front_toeA
+  rotate: false
+  xy: 311, 808
+  size: 15, 25
+  orig: 15, 25
+  offset: 0, 0
+  index: -1
+front_toeB
+  rotate: false
+  xy: 914, 884
+  size: 28, 29
+  orig: 28, 29
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 104, 892
+  size: 148, 130
+  orig: 148, 130
+  offset: 0, 0
+  index: -1
+rear-toe
+  rotate: false
+  xy: 639, 879
+  size: 55, 39
+  orig: 55, 39
+  offset: 0, 0
+  index: -1
+tail01
+  rotate: false
+  xy: 94, 114
+  size: 60, 77
+  orig: 60, 77
+  offset: 0, 0
+  index: -1
+tail02
+  rotate: false
+  xy: 198, 701
+  size: 48, 60
+  orig: 48, 60
+  offset: 0, 0
+  index: -1
+tail03
+  rotate: false
+  xy: 248, 713
+  size: 37, 46
+  orig: 37, 46
+  offset: 0, 0
+  index: -1
+tail04
+  rotate: false
+  xy: 870, 912
+  size: 28, 36
+  orig: 28, 36
+  offset: 0, 0
+  index: -1
+tail05
+  rotate: false
+  xy: 944, 883
+  size: 26, 30
+  orig: 26, 30
+  offset: 0, 0
+  index: -1
+tail06
+  rotate: false
+  xy: 261, 799
+  size: 48, 34
+  orig: 48, 34
+  offset: 0, 0
+  index: -1

spine-ts/webgl/demos/assets/dragon.json

@@ -0,0 +1,780 @@
+{
+"skeleton": { "hash": "nl+4Zc3R/zjLJ5nRvx8tYdSz3Qg", "spine": "3.4.02", "width": 660.39, "height": 499.66, "images": "./images/" },
+"bones": [
+	{ "name": "root", "y": -176.12 },
+	{ "name": "COG", "parent": "root", "y": 176.12 },
+	{ "name": "chest", "parent": "COG", "length": 31.24, "rotation": 161.7, "x": 52.52, "y": 15.34 },
+	{ "name": "L_front_thigh", "parent": "chest", "length": 67.42, "rotation": 138.94, "x": -45.58, "y": 7.92 },
+	{ "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "rotation": 43.36, "x": 67.42, "y": 0.02 },
+	{ "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "rotation": -98, "x": 45.53, "y": 2.43 },
+	{ "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "rotation": -55.26, "x": 51.57, "y": -0.12 },
+	{ "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "rotation": -11.13, "x": 54.19, "y": 0.6, "scaleX": 1.134 },
+	{ "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "rotation": 19.42, "x": 50.6, "y": 7.08, "scaleX": 1.134 },
+	{ "name": "back", "parent": "COG", "length": 115.37, "rotation": 151.83, "x": 16.03, "y": 27.94 },
+	{ "name": "R_rear_thigh", "parent": "back", "length": 123.46, "rotation": 104.87, "x": 65.31, "y": 59.89 },
+	{ "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "rotation": 28.35, "x": -8.59, "y": 30.18 },
+	{ "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "rotation": -122.41, "x": 96.04, "y": -0.97 },
+	{ "name": "L_wing", "parent": "chest", "length": 301.12, "rotation": -75.51, "x": -7.24, "y": -24.65 },
+	{ "name": "R_front_thigh", "parent": "chest", "length": 81.63, "rotation": 67.96, "x": -10.89, "y": 28.25 },
+	{ "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "rotation": 92.7, "x": 83.04, "y": -0.3 },
+	{ "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "rotation": 8.59, "x": 70.03, "y": 5.31 },
+	{ "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "rotation": -35.02, "x": 66.52, "y": 0.33 },
+	{ "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "rotation": -74.67, "x": 62.1, "y": -0.79 },
+	{ "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "rotation": -129.04, "x": 123.46, "y": -0.26 },
+	{ "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "rotation": 141.98, "x": 90.06, "y": 2.12 },
+	{ "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "rotation": 125.32, "x": 89.6, "y": 1.52 },
+	{ "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "rotation": 112.26, "x": 91.06, "y": -0.35 },
+	{ "name": "neck", "parent": "COG", "length": 41.36, "rotation": 39.05, "x": 64.75, "y": 11.98 },
+	{ "name": "head", "parent": "neck", "length": 188.83, "rotation": 8.06, "x": 69.96, "y": 2.49 },
+	{ "name": "R_wing", "parent": "head", "length": 359.5, "rotation": 83.21, "x": -74.68, "y": 20.9 },
+	{ "name": "chin", "parent": "neck", "length": 153.15, "rotation": -69.07, "x": 64.62, "y": -6.99 },
+	{ "name": "tail1", "parent": "back", "length": 65.65, "rotation": 44.31, "x": 115.37, "y": -0.19 },
+	{ "name": "tail2", "parent": "tail1", "length": 54.5, "rotation": 12, "x": 65.65, "y": 0.22 },
+	{ "name": "tail3", "parent": "tail2", "length": 41.78, "rotation": 1.8, "x": 54.5, "y": 0.37 },
+	{ "name": "tail4", "parent": "tail3", "length": 34.19, "rotation": -1.8, "x": 41.78, "y": 0.16 },
+	{ "name": "tail5", "parent": "tail4", "length": 32.32, "rotation": -3.15, "x": 34.19, "y": -0.19 },
+	{ "name": "tail6", "parent": "tail5", "length": 80.08, "rotation": -29.55, "x": 32.32, "y": -0.23 }
+],
+"slots": [
+	{ "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" },
+	{ "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" },
+	{ "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" },
+	{ "name": "tail6", "bone": "tail6", "attachment": "tail06" },
+	{ "name": "tail5", "bone": "tail5", "attachment": "tail05" },
+	{ "name": "tail4", "bone": "tail4", "attachment": "tail04" },
+	{ "name": "tail3", "bone": "tail3", "attachment": "tail03" },
+	{ "name": "tail2", "bone": "tail2", "attachment": "tail02" },
+	{ "name": "tail1", "bone": "tail1", "attachment": "tail01" },
+	{ "name": "back", "bone": "back", "attachment": "back" },
+	{ "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" },
+	{ "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" },
+	{ "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" },
+	{ "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" },
+	{ "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" },
+	{ "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" },
+	{ "name": "chest", "bone": "chest", "attachment": "chest" },
+	{ "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" },
+	{ "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" },
+	{ "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" },
+	{ "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" },
+	{ "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" },
+	{ "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" },
+	{ "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" },
+	{ "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" },
+	{ "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" },
+	{ "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" },
+	{ "name": "chin", "bone": "chin", "attachment": "chin" },
+	{ "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" },
+	{ "name": "head", "bone": "head", "attachment": "head" }
+],
+"skins": {
+	"default": {
+		"L_front_leg": {
+			"L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 }
+		},
+		"L_front_thigh": {
+			"L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 }
+		},
+		"L_front_toe1": {
+			"front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 }
+		},
+		"L_front_toe2": {
+			"front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 }
+		},
+		"L_front_toe3": {
+			"front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 }
+		},
+		"L_front_toe4": {
+			"front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 }
+		},
+		"L_rear_leg": {
+			"L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 }
+		},
+		"L_rear_thigh": {
+			"L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 }
+		},
+		"L_wing": {
+			"L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 },
+			"L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 },
+			"L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 },
+			"L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 },
+			"L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 },
+			"L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 },
+			"L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 },
+			"L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 },
+			"L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 }
+		},
+		"R_front_leg": {
+			"R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 }
+		},
+		"R_front_thigh": {
+			"R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 }
+		},
+		"R_front_toe1": {
+			"front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 }
+		},
+		"R_front_toe2": {
+			"front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 }
+		},
+		"R_front_toe3": {
+			"front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 }
+		},
+		"R_rear_leg": {
+			"R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 }
+		},
+		"R_rear_thigh": {
+			"R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 }
+		},
+		"R_rear_toe1": {
+			"rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 }
+		},
+		"R_rear_toe2": {
+			"rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 }
+		},
+		"R_rear_toe3": {
+			"rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 }
+		},
+		"R_wing": {
+			"R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 },
+			"R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 },
+			"R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 },
+			"R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 },
+			"R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 },
+			"R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 },
+			"R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 },
+			"R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 },
+			"R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 }
+		},
+		"back": {
+			"back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 }
+		},
+		"chest": {
+			"chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 }
+		},
+		"chin": {
+			"chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 }
+		},
+		"head": {
+			"head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 }
+		},
+		"tail1": {
+			"tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 }
+		},
+		"tail2": {
+			"tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 }
+		},
+		"tail3": {
+			"tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 }
+		},
+		"tail4": {
+			"tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 }
+		},
+		"tail5": {
+			"tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 }
+		},
+		"tail6": {
+			"tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 }
+		}
+	}
+},
+"animations": {
+	"flying": {
+		"slots": {
+			"L_wing": {
+				"attachment": [
+					{ "time": 0, "name": "L_wing01" },
+					{ "time": 0.0666, "name": "L_wing02" },
+					{ "time": 0.1333, "name": "L_wing03" },
+					{ "time": 0.2, "name": "L_wing04" },
+					{ "time": 0.2666, "name": "L_wing05" },
+					{ "time": 0.3333, "name": "L_wing06" },
+					{ "time": 0.4, "name": "L_wing07" },
+					{ "time": 0.4666, "name": "L_wing08" },
+					{ "time": 0.5333, "name": "L_wing09" },
+					{ "time": 0.6, "name": "L_wing01" },
+					{ "time": 0.7333, "name": "L_wing02" },
+					{ "time": 0.8, "name": "L_wing03" },
+					{ "time": 0.8333, "name": "L_wing04" },
+					{ "time": 0.8666, "name": "L_wing05" },
+					{ "time": 0.9, "name": "L_wing06" },
+					{ "time": 0.9333, "name": "L_wing07" },
+					{ "time": 0.9666, "name": "L_wing08" },
+					{ "time": 1, "name": "L_wing01" }
+				]
+			},
+			"R_wing": {
+				"attachment": [
+					{ "time": 0, "name": "R_wing01" },
+					{ "time": 0.0666, "name": "R_wing02" },
+					{ "time": 0.1333, "name": "R_wing03" },
+					{ "time": 0.2, "name": "R_wing04" },
+					{ "time": 0.2666, "name": "R_wing05" },
+					{ "time": 0.3333, "name": "R_wing06" },
+					{ "time": 0.4, "name": "R_wing07" },
+					{ "time": 0.4666, "name": "R_wing08" },
+					{ "time": 0.5333, "name": "R_wing09" },
+					{ "time": 0.6, "name": "R_wing01" },
+					{ "time": 0.7333, "name": "R_wing02" },
+					{ "time": 0.7666, "name": "R_wing02" },
+					{ "time": 0.8, "name": "R_wing03" },
+					{ "time": 0.8333, "name": "R_wing04" },
+					{ "time": 0.8666, "name": "R_wing05" },
+					{ "time": 0.9, "name": "R_wing06" },
+					{ "time": 0.9333, "name": "R_wing07" },
+					{ "time": 0.9666, "name": "R_wing08" },
+					{ "time": 1, "name": "R_wing01" }
+				]
+			}
+		},
+		"bones": {
+			"back": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 17.39 },
+					{ "time": 0.5, "angle": 0 },
+					{ "time": 0.8333, "angle": 7 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -8.18 },
+					{ "time": 0.3333, "angle": -23.16 },
+					{ "time": 0.5, "angle": -18.01 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"chest": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail1": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -2.42 },
+					{ "time": 0.3333, "angle": -26.2 },
+					{ "time": 0.5, "angle": -29.65 },
+					{ "time": 0.6666, "angle": -23.15 },
+					{ "time": 0.8333, "angle": -55.46 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_rear_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail2": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -1.12 },
+					{ "time": 0.3333, "angle": 10.48 },
+					{ "time": 0.5, "angle": 7.89 },
+					{ "time": 0.8333, "angle": -10.38 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail3": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 8.24 },
+					{ "time": 0.3333, "angle": 15.21 },
+					{ "time": 0.5, "angle": 14.84 },
+					{ "time": 0.8333, "angle": -18.9 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail4": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 17.46 },
+					{ "time": 0.3333, "angle": 22.15 },
+					{ "time": 0.5, "angle": 22.76 },
+					{ "time": 0.8333, "angle": -4.37 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail5": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 7.4 },
+					{ "time": 0.3333, "angle": 28.5 },
+					{ "time": 0.5, "angle": 21.33 },
+					{ "time": 0.8333, "angle": -1.27 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"tail6": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 45.99 },
+					{ "time": 0.4, "angle": 43.53 },
+					{ "time": 0.5, "angle": 61.79 },
+					{ "time": 0.8333, "angle": 13.28 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_rear_leg": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -14.21 },
+					{ "time": 0.5, "angle": 47.17 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_rear_toe3": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.5, "angle": -36.06 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_rear_toe2": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.5, "angle": -20.32 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_rear_toe1": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.5, "angle": -18.71 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0,
+						"curve": [ 0.408, 1.36, 0.675, 1.43 ]
+					},
+					{ "time": 0.5, "angle": 1.03 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"chin": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0,
+						"curve": [ 0.416, 1.15, 0.494, 1.27 ]
+					},
+					{ "time": 0.3333, "angle": -5.15 },
+					{ "time": 0.5, "angle": 9.79 },
+					{ "time": 0.6666, "angle": 18.94 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -19.18 },
+					{ "time": 0.3333, "angle": -32.02 },
+					{ "time": 0.5, "angle": -19.62 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_front_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -12.96 },
+					{ "time": 0.5, "angle": 16.2 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_leg": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 37.77 },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_toe1": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": -16.08 },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_toe2": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.33, "y": 1.029 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_toe4": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.5, "angle": 26.51 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.21, "y": 0.993 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_front_toe3": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.5, "angle": 16.99 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.354, "y": 1.007 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_front_leg": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 26.07 },
+					{ "time": 0.5, "angle": -21.6 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.5, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_front_toe1": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 29.23 },
+					{ "time": 0.5, "angle": 34.83 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.412, "y": 1 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_front_toe2": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 24.89 },
+					{ "time": 0.5, "angle": 23.16 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.407, "y": 1.057 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"R_front_toe3": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1666, "angle": 11.01 },
+					{ "time": 0.5, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.5, "x": 1.329, "y": 1.181 },
+					{ "time": 1, "x": 1, "y": 1 }
+				]
+			},
+			"L_rear_leg": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.3666, "angle": 25.19 },
+					{ "time": 0.6666, "angle": -15.65 },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"COG": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0,
+						"curve": [ 0.456, 0.2, 0.422, 1.06 ]
+					},
+					{ "time": 0.3333, "angle": 23.93 },
+					{
+						"time": 0.6666,
+						"angle": 337.8,
+						"curve": [ 0.41, 0, 0.887, 0.75 ]
+					},
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": 0,
+						"y": 0,
+						"curve": [ 0.33, 1, 0.816, 1.33 ]
+					},
+					{
+						"time": 0.5,
+						"x": 0,
+						"y": 113.01,
+						"curve": [ 0.396, 0, 0.709, 2.03 ]
+					},
+					{ "time": 1, "x": 0, "y": 0 }
+				]
+			}
+		}
+	}
+}
+}

spine-ts/webgl/demos/ikconstraint.html

@@ -1,5 +1,5 @@
 <html>
-<script src="../../../build/spine-webgl.js"></script>
+<script src="../../build/spine-webgl.js"></script>
 <style>
 	* { margin: 0; padding: 0; }
 	body, html { height: 100% }
@@ -9,5 +9,8 @@
 <canvas id="ikdemo-canvas"></canvas>
 <center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
 <script src="ikconstraint.js"></script>
+<script>
+	ikConstraintDemo();
+</script>
 </body>
 </html>

spine-ts/webgl/demos/ikconstraint.js

@@ -1,4 +1,4 @@
-(function() {
+var ikConstraintDemo = function(pathPrefix) {
 	var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
 	var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
 
@@ -10,12 +10,13 @@
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();		
 
 	function init () {
+
 		canvas = document.getElementById("ikdemo-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl);
+		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
 		input = new spine.webgl.Input(canvas);
 		input.addListener({
 			down: function(x, y) {			
@@ -95,4 +96,4 @@
 	}
 
 	init();
-})();
+};

spine-ts/webgl/demos/imagesequences.html

@@ -0,0 +1,23 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="imagesequencesdemo-canvas"></canvas>
+<center>
+<div style="color: #fff; position: fixed; top: 0; width: 100%">
+<select id="imagesequencesdemo-active-skeleton"></select></br>
+<input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input>
+<input id="imagesequencesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
+</div>
+</center>
+<script src="imagesequences.js"></script>
+<script>
+	imageSequencesDemo();
+</script>
+</body>
+</html>

spine-ts/webgl/demos/imagesequences.js

@@ -0,0 +1,205 @@
+var imageSequencesDemo = function(pathPrefix) {
+	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
+
+	var canvas, gl, renderer, input, assetManager;
+	var skeleton, bounds;		
+	var lastFrameTime = Date.now() / 1000;
+	var skeletons = {};
+	var activeSkeleton = "alien";
+
+	var playButton, timeLine, isPlaying = true;
+
+	function init () {
+		canvas = document.getElementById("imagesequencesdemo-canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
+
+		renderer = new spine.webgl.SceneRenderer(canvas, gl);
+		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);		
+		assetManager.loadTexture("assets/alien.png");
+		assetManager.loadText("assets/alien.json");
+		assetManager.loadText("assets/alien.atlas");
+		assetManager.loadTexture("assets/dragon.png");		
+		assetManager.loadText("assets/dragon.json");
+		assetManager.loadText("assets/dragon.atlas");
+		requestAnimationFrame(load);
+	}	
+
+	function load () {
+		if (assetManager.isLoadingComplete()) {
+			skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
+			skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
+			setupUI();
+			requestAnimationFrame(render);			
+		} else requestAnimationFrame(load);
+	}
+
+	function setupUI() {
+		playButton = $("#imagesequencesdemo-playbutton");
+		playButtonUpdate = function () {			
+			isPlaying = !isPlaying;
+			if (isPlaying) playButton.val("Pause");		
+			else playButton.val("Play");		
+		}
+		playButton.click(playButtonUpdate);
+
+		timeLine = $("#imagesequencesdemo-timeline");
+		timeLineUpdate = function () {
+			if (!isPlaying) {
+				var active = skeletons[activeSkeleton];
+				var time = timeLine.val() / 100;
+				var animationDuration = active.state.getCurrent(0).animation.duration;
+				time = animationDuration * time;
+				active.state.update(time - active.playTime);
+				active.state.apply(active.skeleton);
+				active.skeleton.updateWorldTransform();
+				active.playTime = time;				
+			}
+		}
+		timeLine.change(timeLineUpdate);
+		timeLine.on("input", timeLineUpdate);
+		timeLine.click(function () { if (isPlaying) playButton.click();});
+
+		var list = $("#imagesequencesdemo-active-skeleton");	
+		for (var skeletonName in skeletons) {
+			var option = $("<option></option>");
+			option.attr("value", skeletonName).text(skeletonName);
+			if (skeletonName === activeSkeleton) option.attr("selected", "selected");
+			list.append(option);
+		}
+		list.change(function() {
+			activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text();
+			var active = skeletons[activeSkeleton];
+			var animationDuration = active.state.getCurrent(0).animation.duration;
+			timeLine.val(active.playTime / animationDuration * 100);
+		})
+	}
+
+	function loadSkeleton(name, animation, sequenceSlots) {
+		var atlas = new spine.TextureAtlas(assetManager.get("assets/" + name + ".atlas"), function(path) {
+			return assetManager.get("assets/" + path);		
+		});
+		var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
+		var skeletonJson = new spine.SkeletonJson(atlasLoader);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
+		var skeleton = new spine.Skeleton(skeletonData);
+		skeleton.setSkinByName("default");
+
+		var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
+		state.setAnimation(0, animation, true);
+		state.apply(skeleton);
+		skeleton.updateWorldTransform();			
+		var offset = new spine.Vector2();
+		var size = new spine.Vector2();
+		skeleton.getBounds(offset, size);
+
+		var regions = [];
+		for(var i = 0; i < sequenceSlots.length; i++) {
+			var slot = sequenceSlots[i];
+			var index = skeleton.findSlotIndex(slot);			
+			for (var name in skeleton.skin.attachments[index]) {
+				regions.push(skeleton.skin.attachments[index][name]);	
+			}
+		}
+
+		return {
+			atlas: atlas,
+			skeleton: skeleton, 
+			state: state, 
+			playTime: 0,
+			bounds: {
+				offset: offset,
+				size: size
+			},
+			slots: sequenceSlots,
+			regions: regions
+		};
+	}
+
+	function render () {
+		var now = Date.now() / 1000;
+		var delta = now - lastFrameTime;
+		lastFrameTime = now;
+		delta *= 0.5;
+
+		var active = skeletons[activeSkeleton];
+		var skeleton = active.skeleton;
+		var state = active.state;
+		var offset = active.bounds.offset;
+		var size = active.bounds.size;
+
+		renderer.camera.position.x = offset.x + size.x;
+		renderer.camera.position.y = offset.y + size.y / 2;
+		renderer.camera.viewportWidth = size.x * 2.2;
+		renderer.camera.viewportHeight = size.y * 1.2;
+		renderer.resize(spine.webgl.ResizeMode.Fit);
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		if (isPlaying) {
+			var animationDuration = state.getCurrent(0).animation.duration;
+			active.playTime += delta;			
+			while (active.playTime >= animationDuration) {
+				active.playTime -= animationDuration;
+			}
+			timeLine.val(active.playTime / animationDuration * 100);
+
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+
+		renderer.begin();				
+		renderer.drawSkeleton(skeleton);
+
+		var x = offset.x + size.x + 100;
+		var y = offset.y;
+		var slotsWidth = 0, slotsHeight = 0;
+		var slotSize = size.y / 3;
+		var maxSlotWidth = 0;	
+		var j = 0;
+		for (var i = 0; i < active.regions.length; i++) {			
+			var region = active.regions[i].region;
+			var scale = Math.min(slotSize / region.height, slotSize / region.width);
+			renderer.drawRegion(region, x,  y, region.width * scale, region.height * scale);
+
+			var isVisible = false;
+			for (var ii = 0; ii < active.slots.length; ii++) {
+				var slotName = active.slots[ii];
+				var slotIndex = skeleton.findSlotIndex(slotName);
+				
+				for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
+					var slot = skeleton.drawOrder[iii];
+					if (slot.data.index == slotIndex) {
+						if (slot.attachment != null) {
+							if (slot.attachment.name === active.regions[i].name) {
+								isVisible = true;
+								break;
+							}
+						}
+					}
+				}
+				if (isVisible) break;
+			}
+
+			if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR);
+
+			maxSlotWidth = Math.max(maxSlotWidth, region.width * scale);
+			y += slotSize;
+			j++;
+			if (j == 3) {
+				x += maxSlotWidth + 10;
+				maxSlotWidth = 0;
+				y = offset.y;
+				j = 0;
+			}			
+		}
+
+		renderer.end();
+
+		requestAnimationFrame(render);
+	}
+
+	init();
+};

spine-ts/webgl/demos/skeletalvssprite.html

@@ -1,5 +1,6 @@
 <html>
-<script src="../../../build/spine-webgl.js"></script>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
 	* { margin: 0; padding: 0; }
 	body, html { height: 100% }
@@ -12,9 +13,14 @@
 	<span style="color: #fff">Time Multiplier</span>
 	<input type="range" min="0" max="200" value ="100" id="skeletonvsspritedemo-timeslider" style="color: #fff;"></input></br>
 	<span style="color: #fff">Show Atlas</span>	
-	<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input>
+	<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
+	<input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input>
+	<input id="skeletonvsspritedemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
 	</center>
 </div>
 <script src="skeletonvssprite.js"></script>
+<script>
+	skeletonVsSpriteDemo();
+</script>
 </body>
 </html>

spine-ts/webgl/demos/skeletonvssprite.js

@@ -1,4 +1,7 @@
-(function() {	
+var skeletonVsSpriteDemo = function(pathPrefix) {
+	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);
+
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, animationState, offset, bounds;
 	var skeletonAtlas;
@@ -7,11 +10,10 @@
 	var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
 	var lastFrameTime = Date.now() / 1000;
 	var timeSlider, atlasCheckbox;
-
+	var playButton, timeLine, isPlaying = true, playTime = 0;
-	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);
 
 	function init () {
+		if (pathPrefix === undefined) pathPrefix = "";
 		timeSlider = document.getElementById("skeletonvsspritedemo-timeslider");
 		atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
 
@@ -20,7 +22,7 @@
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl);		
+		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);		
 		assetManager.loadTexture("assets/raptor.png");
 		assetManager.loadText("assets/raptor.json");
 		assetManager.loadText("assets/raptor.atlas");
@@ -56,17 +58,43 @@
 				frames.push(frameAtlas.findRegion("raptor-walk_" + i));
 			}
 			frameScale = bounds.x / frames[0].width * 1.1;
-
 			viewportWidth = ((700 + bounds.x) - offset.x);
 			viewportHeight = ((0 + bounds.y) - offset.y);						
 
-			renderer.camera.position.x = offset.x + viewportWidth / 2;
+			setupUI();
-			renderer.camera.position.y = offset.y + viewportHeight / 2;			
-
 			requestAnimationFrame(render);
 		} else requestAnimationFrame(load);
 	}
 
+	function setupUI() {
+		playButton = $("#skeletonvsspritedemo-playbutton");
+		playButtonUpdate = function () {			
+			isPlaying = !isPlaying;
+			if (isPlaying) playButton.val("Pause");		
+			else playButton.val("Play");		
+		}
+		playButton.click(playButtonUpdate);
+
+		timeLine = $("#skeletonvsspritedemo-timeline");
+		timeLineUpdate = function () {
+			if (!isPlaying) {				
+				var time = timeLine.val() / 100;
+				var animationDuration = animationState.getCurrent(0).animation.duration;
+				time = animationDuration * time;				
+				animationState.update(time - playTime);
+				animationState.apply(skeleton);
+				skeleton.updateWorldTransform();
+				playTime = time;
+				frameTime = time;
+				while (frameTime > animationDuration) frameTime -= animationDuration;				
+				currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);								
+			}
+		}
+		timeLine.change(timeLineUpdate);
+		timeLine.on("input", timeLineUpdate);
+		timeLine.click(function () { if (isPlaying) playButton.click();});
+	}
+
 	function render () {
 		var now = Date.now() / 1000;
 		var delta = now - lastFrameTime;
@@ -76,18 +104,26 @@
 		delta *= (timeSlider.value / 100);	
 
 		if (!atlasCheckbox.checked) {
-			animationState.update(delta);
+			if (isPlaying) {
-			animationState.apply(skeleton);
+				var animationDuration = animationState.getCurrent(0).animation.duration;
-			skeleton.updateWorldTransform();
+				playTime += delta;			
+				while (playTime >= animationDuration) {
+					playTime -= animationDuration;
+				}
+				timeLine.val(playTime / animationDuration * 100);
 
-			frameTime += delta;
+				animationState.update(delta);
-			if (frameTime > 1 / FPS) {
+				animationState.apply(skeleton);
-				frameTime -= 1 / FPS;
+				skeleton.updateWorldTransform();
-				currFrame++;
+
-				if (currFrame >= frames.length) currFrame = 0;
+				frameTime += delta;
+				while (frameTime > animationDuration) frameTime -= animationDuration;				
+				currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
 			}
 		}	
 
+		renderer.camera.position.x = offset.x + viewportWidth / 2 + 100;
+		renderer.camera.position.y = offset.y + viewportHeight / 2;	
 		renderer.camera.viewportWidth = viewportWidth * 1.2;
 		renderer.camera.viewportHeight = viewportHeight * 1.2;
 		renderer.resize(spine.webgl.ResizeMode.Fit);
@@ -111,7 +147,7 @@
 			renderer.drawTexture(skeletonAtlas.pages[0].texture, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
 								 offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize);
 			renderer.rect(false, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
-						  offset.y + halfSpaceWidth / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
+						  offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
 
 			var x = offset.x + halfSpaceWidth;
 			var y = offset.y + halfSpaceHeight / 2;
@@ -130,4 +166,4 @@
 	}
 
 	init();
-})();
+};

spine-ts/webgl/example/index.html

@@ -1,5 +1,6 @@
 <html>
 <script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
 	* { margin: 0; padding: 0; }
 	body, html { height: 100% }

spine-ts/webgl/src/AssetManager.ts

@@ -31,10 +31,10 @@
 
 module spine.webgl {
 	export class AssetManager extends spine.AssetManager {
-		constructor (gl: WebGLRenderingContext) {
+		constructor (gl: WebGLRenderingContext, pathPrefix: string = "") {
 			super((image: HTMLImageElement) => { 
 				return new spine.webgl.GLTexture(gl, image); 
-			});
+			}, pathPrefix);
 		}
 	}
 }