[ts] Demos, a never ending story

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

@@ -731,10 +731,10 @@ declare module spine {
         static BLUE: Color;
         static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
-        set(r: number, g: number, b: number, a: number): void;
+        set(r: number, g: number, b: number, a: number): this;
-        setFromColor(c: Color): void;
+        setFromColor(c: Color): this;
-        setFromString(hex: string): void;
+        setFromString(hex: string): this;
-        add(r: number, g: number, b: number, a: number): void;
+        add(r: number, g: number, b: number, a: number): this;
         clamp(): this;
     }
     class MathUtils {
@@ -1249,6 +1249,7 @@ declare module spine.webgl {
         boneOriginColor: Color;
         attachmentLineColor: Color;
         triangleLineColor: Color;
+        pathColor: Color;
         aabbColor: Color;
         drawBones: boolean;
         drawRegionAttachments: boolean;

spine-ts/build/spine-webgl.js

@@ -3941,12 +3941,14 @@ var spine;
             this.b = b;
             this.a = a;
             this.clamp();
+            return this;
         };
         Color.prototype.setFromColor = function (c) {
             this.r = c.r;
             this.g = c.g;
             this.b = c.b;
             this.a = c.a;
+            return this;
         };
         Color.prototype.setFromString = function (hex) {
             hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
@@ -3954,6 +3956,7 @@ var spine;
             this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
             this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
             this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+            return this;
         };
         Color.prototype.add = function (r, g, b, a) {
             this.r += r;
@@ -3961,6 +3964,7 @@ var spine;
             this.b += b;
             this.a += a;
             this.clamp();
+            return this;
         };
         Color.prototype.clamp = function () {
             if (this.r < 0)
@@ -6322,6 +6326,7 @@ var spine;
                 this.boneOriginColor = new spine.Color(0, 1, 0, 1);
                 this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
                 this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.pathColor = new spine.Color().setFromString("FF7F00");
                 this.aabbColor = new spine.Color(0, 1, 0, 0.5);
                 this.drawBones = true;
                 this.drawRegionAttachments = true;
@@ -6432,7 +6437,7 @@ var spine;
                         var nn = path.worldVerticesLength;
                         var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
                         path.computeWorldVertices(slot, world);
-                        var color = path.color;
+                        var color = this.pathColor;
                         var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
                         if (path.closed) {
                             shapes.setColor(color);

spine-ts/core/src/Utils.ts

@@ -54,6 +54,7 @@ module spine {
 			this.b = b;
 			this.a = a;
 			this.clamp();
+			return this;
 		}
 
 		setFromColor (c: Color) {
@@ -61,6 +62,7 @@ module spine {
 			this.g = c.g;
 			this.b = c.b;
 			this.a = c.a;
+			return this;
 		}
 
 		setFromString (hex: string) {
@@ -69,6 +71,7 @@ module spine {
 			this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
 			this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
 			this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+			return this;
 		}
 
 		add (r: number, g: number, b: number, a: number) {
@@ -77,6 +80,7 @@ module spine {
 			this.b += b;
 			this.a += a;
 			this.clamp();
+			return this;
 		}
 
 		clamp () {

spine-ts/webgl/demos/imagesequences.js

@@ -55,6 +55,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
 			}			
 		}
 		playButton.click(playButtonUpdate);
+		playButton.addClass("pause");
 
 		timeLine = $("#imagesequencesdemo-timeline");
 		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {

spine-ts/webgl/demos/meshes.js

@@ -55,6 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			}			
 		}
 		playButton.click(playButtonUpdate);
+		playButton.addClass("pause");
 
 		timeLine = $("#meshesdemo-timeline");
 		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {

spine-ts/webgl/demos/tank.html

@@ -14,7 +14,8 @@
 <canvas id="tankdemo-canvas"></canvas>
 <center>
 <div style="position: fixed; top: 0; width: 100%">	
-	<br>	
+	<div>Display Bones</div><input id="tankdemo-drawbones" type="checkbox"></input>
+	</br>
 	<input id="tankdemo-playbutton" type="button" value="Pause"></input>
 	<div id="tankdemo-timeline" class="slider"></input>
 </div>

spine-ts/webgl/demos/tank.js

@@ -42,6 +42,11 @@ var tankDemo = function(loadingComplete, bgColor) {
 			offset = new spine.Vector2();
 			bounds = new spine.Vector2();
 			skeleton.getBounds(offset, bounds);
+
+			renderer.skeletonDebugRenderer.drawRegionAttachments = false;
+			renderer.skeletonDebugRenderer.drawMeshHull = false;
+			renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+
 			setupUI();
 			loadingComplete(canvas, render);
 		} else {
@@ -63,6 +68,7 @@ var tankDemo = function(loadingComplete, bgColor) {
 			}		
 		}
 		playButton.click(playButtonUpdate);
+		playButton.addClass("pause");
 
 		timeLine = $("#tankdemo-timeline");
 		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
@@ -76,7 +82,15 @@ var tankDemo = function(loadingComplete, bgColor) {
 				skeleton.updateWorldTransform();
 				playTime = time;												
 			}
-		}});		
+		}});
+
+		var checkbox = $("#tankdemo-drawbones");
+		renderer.skeletonDebugRenderer.drawPaths = false;
+		renderer.skeletonDebugRenderer.drawBones = false;
+		checkbox.change(function() {
+			renderer.skeletonDebugRenderer.drawPaths = this.checked;
+			renderer.skeletonDebugRenderer.drawBones = this.checked;			
+		});	
 	}
 
 	function render () {
@@ -109,7 +123,8 @@ var tankDemo = function(loadingComplete, bgColor) {
 		gl.clear(gl.COLOR_BUFFER_BIT);			
 
 		renderer.begin();				
-		renderer.drawSkeleton(skeleton, true);				
+		renderer.drawSkeleton(skeleton, true);
+		renderer.drawSkeletonDebug(skeleton, true);		
 		renderer.end();
 	}
 

spine-ts/webgl/demos/vine.js

@@ -84,6 +84,7 @@ var vineDemo = function(loadingComplete, bgColor) {
 			}		
 		}
 		playButton.click(playButtonUpdate);
+		playButton.addClass("pause");
 
 		timeLine = $("#vinedemo-timeline");
 		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {

spine-ts/webgl/src/SkeletonDebugRenderer.ts

@@ -35,6 +35,7 @@ module spine.webgl {
 		boneOriginColor = new Color(0, 1, 0, 1);
 		attachmentLineColor = new Color(0, 0, 1, 0.5);
 		triangleLineColor = new Color(1, 0.64, 0, 0.5);
+		pathColor = new Color().setFromString("FF7F00");
 		aabbColor = new Color(0, 1, 0, 0.5);
 		drawBones = true;
 		drawRegionAttachments = true;
@@ -154,7 +155,7 @@ module spine.webgl {
 					let nn = path.worldVerticesLength;
 					let world = this.temp = Utils.setArraySize(this.temp, nn, 0);
 					path.computeWorldVertices(slot, world);
-					let color = path.color;
+					let color = this.pathColor;
 					let x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
 					if (path.closed) {
 						shapes.setColor(color);