[ts] Refactored demos so we can load them sequentially

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

@@ -1161,7 +1161,7 @@ declare module spine.webgl {
         constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
         begin(): void;
         drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
-        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
         drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
         drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
         line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@@ -1275,6 +1275,7 @@ declare module spine.webgl {
         drawMeshHull: boolean;
         drawMeshTriangles: boolean;
         drawPaths: boolean;
+        drawSkeletonXY: boolean;
         premultipliedAlpha: boolean;
         scale: number;
         boneWidth: number;
@@ -1284,7 +1285,7 @@ declare module spine.webgl {
         private static LIGHT_GRAY;
         private static GREEN;
         constructor(gl: WebGLRenderingContext);
-        draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
+        draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
         dispose(): void;
     }
 }

spine-ts/build/spine-all.js

@@ -5725,11 +5725,12 @@ var spine;
                 this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
                 this.skeletonRenderer.draw(this.batcher, skeleton);
             };
-            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
+            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
                 if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 this.enableRenderer(this.shapes);
                 this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
-                this.skeletonDebugRenderer.draw(this.shapes, skeleton);
+                this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
             };
             SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
                 if (color === void 0) { color = null; }
@@ -6411,6 +6412,7 @@ var spine;
                 this.drawMeshHull = true;
                 this.drawMeshTriangles = true;
                 this.drawPaths = true;
+                this.drawSkeletonXY = false;
                 this.premultipliedAlpha = false;
                 this.scale = 1;
                 this.boneWidth = 2;
@@ -6418,7 +6420,8 @@ var spine;
                 this.temp = new Array();
                 this.gl = gl;
             }
-            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton) {
+            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 var skeletonX = skeleton.x;
                 var skeletonY = skeleton.y;
                 var gl = this.gl;
@@ -6429,13 +6432,16 @@ var spine;
                     shapes.setColor(this.boneLineColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         if (bone.parent == null)
                             continue;
                         var x = skeletonX + bone.data.length * bone.a + bone.worldX;
                         var y = skeletonY + bone.data.length * bone.c + bone.worldY;
                         shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
                     }
-                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                    if (this.drawSkeletonXY)
+                        shapes.x(skeletonX, skeletonY, 4 * this.scale);
                 }
                 if (this.drawRegionAttachments) {
                     shapes.setColor(this.attachmentLineColor);
@@ -6540,6 +6546,8 @@ var spine;
                     shapes.setColor(this.boneOriginColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
                     }
                 }

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

@@ -1091,7 +1091,7 @@ declare module spine.webgl {
         constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
         begin(): void;
         drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
-        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
         drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
         drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
         line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@@ -1205,6 +1205,7 @@ declare module spine.webgl {
         drawMeshHull: boolean;
         drawMeshTriangles: boolean;
         drawPaths: boolean;
+        drawSkeletonXY: boolean;
         premultipliedAlpha: boolean;
         scale: number;
         boneWidth: number;
@@ -1214,7 +1215,7 @@ declare module spine.webgl {
         private static LIGHT_GRAY;
         private static GREEN;
         constructor(gl: WebGLRenderingContext);
-        draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
+        draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
         dispose(): void;
     }
 }

spine-ts/build/spine-webgl.js

@@ -5302,11 +5302,12 @@ var spine;
                 this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
                 this.skeletonRenderer.draw(this.batcher, skeleton);
             };
-            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
+            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
                 if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 this.enableRenderer(this.shapes);
                 this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
-                this.skeletonDebugRenderer.draw(this.shapes, skeleton);
+                this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
             };
             SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
                 if (color === void 0) { color = null; }
@@ -5988,6 +5989,7 @@ var spine;
                 this.drawMeshHull = true;
                 this.drawMeshTriangles = true;
                 this.drawPaths = true;
+                this.drawSkeletonXY = false;
                 this.premultipliedAlpha = false;
                 this.scale = 1;
                 this.boneWidth = 2;
@@ -5995,7 +5997,8 @@ var spine;
                 this.temp = new Array();
                 this.gl = gl;
             }
-            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton) {
+            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 var skeletonX = skeleton.x;
                 var skeletonY = skeleton.y;
                 var gl = this.gl;
@@ -6006,13 +6009,16 @@ var spine;
                     shapes.setColor(this.boneLineColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         if (bone.parent == null)
                             continue;
                         var x = skeletonX + bone.data.length * bone.a + bone.worldX;
                         var y = skeletonY + bone.data.length * bone.c + bone.worldY;
                         shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
                     }
-                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                    if (this.drawSkeletonXY)
+                        shapes.x(skeletonX, skeletonY, 4 * this.scale);
                 }
                 if (this.drawRegionAttachments) {
                     shapes.setColor(this.attachmentLineColor);
@@ -6117,6 +6123,8 @@ var spine;
                     shapes.setColor(this.boneOriginColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
                     }
                 }

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

@@ -1091,7 +1091,7 @@ declare module spine.webgl {
         constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
         begin(): void;
         drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
-        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
         drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
         drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
         line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@@ -1205,6 +1205,7 @@ declare module spine.webgl {
         drawMeshHull: boolean;
         drawMeshTriangles: boolean;
         drawPaths: boolean;
+        drawSkeletonXY: boolean;
         premultipliedAlpha: boolean;
         scale: number;
         boneWidth: number;
@@ -1214,7 +1215,7 @@ declare module spine.webgl {
         private static LIGHT_GRAY;
         private static GREEN;
         constructor(gl: WebGLRenderingContext);
-        draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
+        draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
         dispose(): void;
     }
 }

spine-ts/build/spine-widget.js

@@ -5302,11 +5302,12 @@ var spine;
                 this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
                 this.skeletonRenderer.draw(this.batcher, skeleton);
             };
-            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
+            SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
                 if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 this.enableRenderer(this.shapes);
                 this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
-                this.skeletonDebugRenderer.draw(this.shapes, skeleton);
+                this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
             };
             SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
                 if (color === void 0) { color = null; }
@@ -5988,6 +5989,7 @@ var spine;
                 this.drawMeshHull = true;
                 this.drawMeshTriangles = true;
                 this.drawPaths = true;
+                this.drawSkeletonXY = false;
                 this.premultipliedAlpha = false;
                 this.scale = 1;
                 this.boneWidth = 2;
@@ -5995,7 +5997,8 @@ var spine;
                 this.temp = new Array();
                 this.gl = gl;
             }
-            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton) {
+            SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
+                if (ignoredBones === void 0) { ignoredBones = null; }
                 var skeletonX = skeleton.x;
                 var skeletonY = skeleton.y;
                 var gl = this.gl;
@@ -6006,13 +6009,16 @@ var spine;
                     shapes.setColor(this.boneLineColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         if (bone.parent == null)
                             continue;
                         var x = skeletonX + bone.data.length * bone.a + bone.worldX;
                         var y = skeletonY + bone.data.length * bone.c + bone.worldY;
                         shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
                     }
-                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                    if (this.drawSkeletonXY)
+                        shapes.x(skeletonX, skeletonY, 4 * this.scale);
                 }
                 if (this.drawRegionAttachments) {
                     shapes.setColor(this.attachmentLineColor);
@@ -6117,6 +6123,8 @@ var spine;
                     shapes.setColor(this.boneOriginColor);
                     for (var i = 0, n = bones.length; i < n; i++) {
                         var bone = bones[i];
+                        if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
+                            continue;
                         shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
                     }
                 }

spine-ts/webgl/demos/animationmixing.html

@@ -18,9 +18,10 @@
 <div id="animationmixingdemo-timeslider"></div></br>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="animationmixing.js"></script>
 <script>
-	animationMixingDemo();
+	animationMixingDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/animationmixing.js

@@ -1,10 +1,10 @@
-var animationMixingDemo = function(pathPrefix) {
+var animationMixingDemo = function(pathPrefix, loadingComplete) {
 	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, skeletonNoMix, state, stateNoMix, bounds;
 	var timeSlider, timeSliderLabel;
-	var lastFrameTime = Date.now() / 1000
+	var lastFrameTime = Date.now() / 1000	
 
 	function init () {
 		timeSlider = $("#animationmixingdemo-timeslider");
@@ -45,8 +45,8 @@ var animationMixingDemo = function(pathPrefix) {
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
-			skeleton.getBounds(bounds.offset, bounds.size);			
+			skeleton.getBounds(bounds.offset, bounds.size);
-			requestAnimationFrame(render);			
+			loadingComplete(canvas, render);						
 		} else requestAnimationFrame(load);
 	}
 
@@ -121,10 +121,8 @@ var animationMixingDemo = function(pathPrefix) {
 		skeletonNoMix.updateWorldTransform();
 		skeletonNoMix.x = size.x;	
 		renderer.drawSkeleton(skeletonNoMix);
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
-
 	init();
+	return render;
 };

spine-ts/webgl/demos/ikconstraint.html

@@ -8,9 +8,10 @@
 <body>
 <canvas id="ikdemo-canvas"></canvas>
 <center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
+<script src="utils.js"></script>
 <script src="ikconstraint.js"></script>
 <script>
-	ikConstraintDemo();
+	ikConstraintDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/ikconstraint.js

@@ -1,4 +1,4 @@
-var ikConstraintDemo = function(pathPrefix) {
+var ikConstraintDemo = function(pathPrefix, loadingComplete) {
 	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);
 
@@ -68,7 +68,7 @@ var ikConstraintDemo = function(pathPrefix) {
 			renderer.camera.position.x = offset.x + bounds.x / 2;
 			renderer.camera.position.y = offset.y + bounds.y / 2;
 
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -92,10 +92,7 @@ var ikConstraintDemo = function(pathPrefix) {
 		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();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
-
 	init();
 };

spine-ts/webgl/demos/imagesequences.html

@@ -19,9 +19,10 @@
 <div id="imagesequencesdemo-timeline" class="slider"></div>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="imagesequences.js"></script>
 <script>
-	imageSequencesDemo();
+	imageSequencesDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/imagesequences.js

@@ -1,4 +1,4 @@
-var imageSequencesDemo = function(pathPrefix) {
+var imageSequencesDemo = function(pathPrefix, loadingComplete) {
 	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
 
 	var canvas, gl, renderer, input, assetManager;
@@ -30,7 +30,7 @@ var imageSequencesDemo = function(pathPrefix) {
 			skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
 			skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
 			setupUI();
-			requestAnimationFrame(render);			
+			loadingComplete(canvas, render);			
 		} else requestAnimationFrame(load);
 	}
 
@@ -199,9 +199,7 @@ var imageSequencesDemo = function(pathPrefix) {
 			}			
 		}
 
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
 
 	init();

spine-ts/webgl/demos/meshes.html

@@ -16,21 +16,18 @@
 <div style="position: fixed; top: 0; width: 100%">
 	<select id="meshesdemo-active-skeleton"></select></br>
 	<span style="color: #fff">Draw Bones</span>	
-	<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;" checked="true"></input>
+	<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;" checked="true"></input>		
-	<span style="color: #fff">Draw Regions</span>	
+	<span style="color: #fff">Draw Triangles</span>	
-	<input type="checkbox" id="meshesdemo-drawregionscheckbox" style="color: #fff;" checked="true"></input>
-	<span style="color: #fff">Draw Mesh Hull</span>	
-	<input type="checkbox" id="meshesdemo-drawmeshhullcheckbox" style="color: #fff;" checked="true"></input>
-	<span style="color: #fff">Draw Mesh Triangles</span>	
 	<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
 	<br>
 	<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
 	<div id="meshesdemo-timeline" class="slider"></input>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="meshes.js"></script>
 <script>
-	meshesDemo();
+	meshesDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/meshes.js

@@ -1,4 +1,4 @@
-var meshesDemo = function(pathPrefix) {
+var meshesDemo = function(pathPrefix, loadingComplete) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, bounds;		
 	var lastFrameTime = Date.now() / 1000;
@@ -13,6 +13,7 @@ var meshesDemo = function(pathPrefix) {
 		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
+		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 		assetManager = new spine.webgl.AssetManager(gl, pathPrefix);		
 		assetManager.loadTexture("assets/girl.png");
 		assetManager.loadText("assets/girl.json");
@@ -32,7 +33,7 @@ var meshesDemo = function(pathPrefix) {
 			skeletons["green_girl"] = loadSkeleton("gree_girl", "animation");
 			skeletons["fanart"] = loadSkeleton("fanart_cut", "animation");
 			setupUI();
-			requestAnimationFrame(render);			
+			loadingComplete(canvas, render);			
 		} else requestAnimationFrame(load);
 	}
 
@@ -82,13 +83,8 @@ var meshesDemo = function(pathPrefix) {
 		$("#meshesdemo-drawbonescheckbox").click(function() {
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		})
-		$("#meshesdemo-drawregionscheckbox").click(function() {
-			renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
-		})
-		$("#meshesdemo-drawmeshhullcheckbox").click(function() {
-			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
-		})
 		$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
+			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
 			renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
 		})
 	}
@@ -160,9 +156,7 @@ var meshesDemo = function(pathPrefix) {
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton);
 		renderer.drawSkeletonDebug(skeleton);
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
 
 	init();

spine-ts/webgl/demos/skeletalvssprite.html

@@ -22,9 +22,10 @@
 	<div id="skeletonvsspritedemo-timeline" class="slider"></div>
 	</center>
 </div>
+<script src="utils.js"></script>
 <script src="skeletonvssprite.js"></script>
-<script>
+<script>	
-	skeletonVsSpriteDemo();
+	skeletonVsSpriteDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/skeletonvssprite.js

@@ -1,4 +1,4 @@
-var skeletonVsSpriteDemo = function(pathPrefix) {
+var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
 	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);
 
@@ -60,7 +60,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 			viewportHeight = ((0 + bounds.y) - offset.y);						
 
 			setupUI();
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -170,9 +170,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
 				}
 			}			
 		}
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
 
 	init();

spine-ts/webgl/demos/skins.html

@@ -20,9 +20,10 @@
 	<div id="skinsdemo-timeline" class="slider"></input>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="skins.js"></script>
 <script>
-	skinsDemo();
+	skinsDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/skins.js

@@ -1,4 +1,4 @@
-var skinsDemo = function(pathPrefix) {	
+var skinsDemo = function(pathPrefix, loadingComplete) {	
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, state, offset, bounds;		
 	var lastFrameTime = Date.now() / 1000;	
@@ -36,7 +36,7 @@ var skinsDemo = function(pathPrefix) {
 			bounds = new spine.Vector2();
 			skeleton.getBounds(offset, bounds);
 			setupUI();
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -121,9 +121,7 @@ var skinsDemo = function(pathPrefix) {
 		var scale = width / texture.getImage().width;
 		var height = scale * texture.getImage().height;
 		renderer.drawTexture(texture, offset.x + bounds.x, offset.y + bounds.y / 2 - height / 2, width, height);		
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);
 	}
 
 	init();

spine-ts/webgl/demos/tank.html

@@ -19,9 +19,10 @@
 	<div id="tankdemo-timeline" class="slider"></input>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="tank.js"></script>
 <script>
-	tankDemo();
+	tankDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/tank.js

@@ -1,4 +1,4 @@
-var tankDemo = function(pathPrefix) {	
+var tankDemo = function(pathPrefix, loadingComplete) {	
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, state, offset, bounds;		
 	var lastFrameTime = Date.now() / 1000;	
@@ -36,7 +36,7 @@ var tankDemo = function(pathPrefix) {
 			bounds = new spine.Vector2();
 			skeleton.getBounds(offset, bounds);
 			setupUI();
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -103,8 +103,6 @@ var tankDemo = function(pathPrefix) {
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton);				
 		renderer.end();
-
-		requestAnimationFrame(render);
 	}
 
 	init();

spine-ts/webgl/demos/transformconstraint.html

@@ -16,13 +16,13 @@
 <center>
 <div style="position: fixed; top: 0; width: 100%">
 	<div id="info"></div></br>	
-	<div>Rotation Offset</div><div id="transformdemo-rotationoffset" class="slider"></div>
+	<div>Rotation Offset</div><div id="transformdemo-rotationoffset" class="slider"></div>		
-	<div>Rotation Mix</div><div id="transformdemo-rotationmix" class="slider"></div>	
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="transformconstraint.js"></script>
 <script>
-	transformConstraintDemo();
+	transformConstraintDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/transformconstraint.js

@@ -1,4 +1,4 @@
-var transformConstraintDemo = function(pathPrefix) {
+var transformConstraintDemo = function(pathPrefix, loadingComplete) {
 	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);
@@ -76,7 +76,7 @@ var transformConstraintDemo = function(pathPrefix) {
 
 			setupUI();
 
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -88,16 +88,8 @@ var transformConstraintDemo = function(pathPrefix) {
 			lastOffset = val;
 			skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;			
 			skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
-			$("#transformdemo-rotationoffset-label").text(val + "%");
+			$("#transformdemo-rotationoffset-label").text(val + "°");
-		}});
+		}});	
-
-		mix = $("#transformdemo-rotationmix");
-		mix.slider({ range: "max", min: 0, max: 100, value: 100, slide: function () {
-			var val = mix.slider("value");
-			skeleton.findTransformConstraint("wheel2").rotateMix = val / 100;			
-			skeleton.findTransformConstraint("wheel3").rotateMix = val / 100;
-			$("#transformdemo-rotationmix-label").text(val + "%");
-		}});		
 	}
 
 	function render () {
@@ -113,18 +105,16 @@ var transformConstraintDemo = function(pathPrefix) {
 		renderer.resize(spine.webgl.ResizeMode.Fit);
 
 		gl.clearColor(0.2, 0.2, 0.2, 1);
-		gl.clear(gl.COLOR_BUFFER_BIT);			
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton);
-		renderer.drawSkeletonDebug(skeleton);				
+		renderer.drawSkeletonDebug(skeleton, false, ["root"]);				
 		var bone = wheel1;
 		var colorInner = bone === target ? COLOR_INNER_SELECTED : COLOR_INNER;
 		var colorOuter = bone === target ? COLOR_OUTER_SELECTED : COLOR_OUTER;		
 		renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);		
-		renderer.end();
+		renderer.end();		
-
-		requestAnimationFrame(render);		
 	}
 
 	init();

spine-ts/webgl/demos/utils.js

@@ -0,0 +1,10 @@
+var spineDemos;
+(function(spineDemos) {
+	spineDemos.setupRendering = function (canvas, renderFunc) {
+		function render() {
+			renderFunc();
+			requestAnimationFrame(render);
+		};
+		render();
+	}
+})(spineDemos || (spineDemos = { }));

spine-ts/webgl/demos/vine.html

@@ -24,9 +24,10 @@
 	<div id="vinedemo-timeline" class="slider"></div>
 </div>
 </center>
+<script src="utils.js"></script>
 <script src="vine.js"></script>
 <script>
-	vineDemo();
+	vineDemo("", spineDemos.setupRendering);
 </script>
 </body>
 </html>

spine-ts/webgl/demos/vine.js

@@ -1,4 +1,4 @@
-var vineDemo = function(pathPrefix) {
+var vineDemo = function(pathPrefix, loadingComplete) {
 	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);
@@ -82,7 +82,7 @@ var vineDemo = function(pathPrefix) {
 
 			setupUI();
 
-			requestAnimationFrame(render);
+			loadingComplete(canvas, render);
 		} else requestAnimationFrame(load);
 	}
 
@@ -164,9 +164,7 @@ var vineDemo = function(pathPrefix) {
 			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
 			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 		}
-		renderer.end();
+		renderer.end();				
-
-		requestAnimationFrame(render);		
 	}
 
 	init();

spine-ts/webgl/src/SceneRenderer.ts

@@ -73,10 +73,10 @@ module spine.webgl {
 			this.skeletonRenderer.draw(this.batcher, skeleton);
 		}
 
-		drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false) {
+		drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) {
 			this.enableRenderer(this.shapes);
 			this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
-			this.skeletonDebugRenderer.draw(this.shapes, skeleton);
+			this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
 		}
 
 		drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {

spine-ts/webgl/src/SkeletonDebugRenderer.ts

@@ -42,6 +42,7 @@ module spine.webgl {
 		drawMeshHull = true;
 		drawMeshTriangles = true;
 		drawPaths = true;
+		drawSkeletonXY = false;
 		premultipliedAlpha = false;
 		scale = 1;
 		boneWidth = 2;
@@ -56,7 +57,7 @@ module spine.webgl {
 			this.gl = gl;			
 		}
 
-		draw (shapes: ShapeRenderer, skeleton: Skeleton) {
+		draw (shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones: Array<string> = null) {
 			let skeletonX = skeleton.x;
 			let skeletonY = skeleton.y;
 			let gl = this.gl;									
@@ -68,12 +69,13 @@ module spine.webgl {
 				shapes.setColor(this.boneLineColor);				
 				for (let i = 0, n = bones.length; i < n; i++) {
 					let bone = bones[i];
+					if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1) continue;
 					if (bone.parent == null) continue;
 					let x = skeletonX + bone.data.length * bone.a + bone.worldX;
 					let y = skeletonY + bone.data.length * bone.c + bone.worldY;
 					shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
 				}				
-				shapes.x(skeletonX, skeletonY, 4 * this.scale);
+				if (this.drawSkeletonXY) shapes.x(skeletonX, skeletonY, 4 * this.scale);
 			}
 
 			if (this.drawRegionAttachments) {
@@ -183,7 +185,8 @@ module spine.webgl {
 			if (this.drawBones) {
 				shapes.setColor(this.boneOriginColor);
 				for (let i = 0, n = bones.length; i < n; i++) {
-					let bone = bones[i];					
+					let bone = bones[i];
+					if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1) continue;				
 					shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
 				}
 			}