[ts] Added debug rendering to widget, see README.md for details on how to enable and configure it

spine-ts/README.md

@@ -99,6 +99,7 @@ To specify the configuration of a Spine Widget via HTML, you can use these HTML
   * `data-fit-to-canvas`: optional, whether to fit the animation to the canvas size or not. Defaults to `true` if omitted, in which case `data-scale`, `data-x` and `data-y` are irrelevant. This setting calculates the setup pose bounding box using the specified skin to center and scale the animation on the canvas.
   * `data-background-color`: optional, the background color to use. Defaults to `#000000` if omitted.
   * `data-premultiplied-alpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
+  * `data-debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted. 
 
 You can specify these as attribuets on the HTML element like this:
 
@@ -152,6 +153,7 @@ The configuration object has the following fields:
   * `fitToCanvas`: optional, whether to fit the animation to the canvas size or not. Defaults to `true` if omitted, in which case `data-scale`, `data-x` and `data-y` are irrelevant. This setting calculates the setup pose bounding box using the specified skin to center and scale the animation on the canvas.
   * `backgroundColor`: optional, the background color to use. Defaults to `#000000` if omitted.
   * `premultipliedAlpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
+  * `debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
   * `success`: optional, a callback taking a `SpineWidget` called when the animation has been loaded successfully
   * `error`: optional, a callback taking a `SpineWidget` and an error string called when the animation couldn't be loaded
 
@@ -160,3 +162,5 @@ an element via JavaScript on demand.
 
 The resulting `SpineWidget` has various fields that let you modify the animation programmatically. Most notably, the `skeleton` and `state` fields
 let you modify all aspects of your animation as you wish. See the [example](https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-ts/widget/example/index.html#L21).
+
+You can also modify what debug information is shown by accessing `SpineWidget.debugRenderer` and set the various `drawXXX` fields to `true` or `false`.

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

@@ -1222,10 +1222,12 @@ declare module spine {
         state: AnimationState;
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
+        debugRenderer: spine.webgl.SkeletonDebugRenderer;
         private config;
         private assetManager;
         private shader;
         private batcher;
+        private debugShader;
         private mvp;
         private skeletonRenderer;
         private paused;
@@ -1261,6 +1263,7 @@ declare module spine {
         fitToCanvas: boolean;
         backgroundColor: string;
         premultipliedAlpha: boolean;
+        debug: boolean;
         success: (widget: SpineWidget) => void;
         error: (widget: SpineWidget, msg: string) => void;
     }

spine-ts/build/spine-all.js

@@ -6210,6 +6210,8 @@ var spine;
             this.batcher = new spine.webgl.PolygonBatcher(gl);
             this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
             this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+            this.debugShader = spine.webgl.Shader.newColored(gl);
+            this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
             var assets = this.assetManager = new spine.webgl.AssetManager(gl);
             assets.loadText(config.atlas);
             assets.loadText(config.json);
@@ -6248,6 +6250,8 @@ var spine;
             }
             if (!config.premultipliedAlpha === undefined)
                 config.premultipliedAlpha = false;
+            if (!config.debug === undefined)
+                config.debug = false;
             this.backgroundColor.setFromString(config.backgroundColor);
             this.config = config;
         };
@@ -6310,16 +6314,25 @@ var spine;
             state.apply(skeleton);
             skeleton.updateWorldTransform();
             var shader = this.shader;
+            var batcher = this.batcher;
+            var skeletonRenderer = this.skeletonRenderer;
             shader.bind();
             shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
             shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
-            var batcher = this.batcher;
-            var skeletonRenderer = this.skeletonRenderer;
             batcher.begin(shader);
             skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
             skeletonRenderer.draw(batcher, skeleton);
             batcher.end();
             shader.unbind();
+            if (this.config.debug) {
+                var shader_1 = this.debugShader;
+                var renderer = this.debugRenderer;
+                shader_1.bind();
+                shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
+                renderer.premultipliedAlpha = premultipliedAlpha;
+                renderer.draw(shader_1, skeleton);
+                shader_1.unbind();
+            }
             if (!this.paused)
                 requestAnimationFrame(function () { _this.render(); });
         };
@@ -6396,6 +6409,8 @@ var spine;
                 config.backgroundColor = widget.getAttribute("data-background-color");
             if (widget.getAttribute("data-premultiplied-alpha"))
                 config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
+            if (widget.getAttribute("data-debug"))
+                config.debug = widget.getAttribute("data-debug") === "true";
             new spine.SpineWidget(widget, config);
         };
         SpineWidget.ready = function () {
@@ -6431,6 +6446,7 @@ var spine;
             this.fitToCanvas = true;
             this.backgroundColor = "#555555";
             this.premultipliedAlpha = false;
+            this.debug = false;
         }
         return SpineWidgetConfig;
     }());

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

@@ -1152,10 +1152,12 @@ declare module spine {
         state: AnimationState;
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
+        debugRenderer: spine.webgl.SkeletonDebugRenderer;
         private config;
         private assetManager;
         private shader;
         private batcher;
+        private debugShader;
         private mvp;
         private skeletonRenderer;
         private paused;
@@ -1191,6 +1193,7 @@ declare module spine {
         fitToCanvas: boolean;
         backgroundColor: string;
         premultipliedAlpha: boolean;
+        debug: boolean;
         success: (widget: SpineWidget) => void;
         error: (widget: SpineWidget, msg: string) => void;
     }

spine-ts/build/spine-widget.js

@@ -5789,6 +5789,8 @@ var spine;
             this.batcher = new spine.webgl.PolygonBatcher(gl);
             this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
             this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+            this.debugShader = spine.webgl.Shader.newColored(gl);
+            this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
             var assets = this.assetManager = new spine.webgl.AssetManager(gl);
             assets.loadText(config.atlas);
             assets.loadText(config.json);
@@ -5827,6 +5829,8 @@ var spine;
             }
             if (!config.premultipliedAlpha === undefined)
                 config.premultipliedAlpha = false;
+            if (!config.debug === undefined)
+                config.debug = false;
             this.backgroundColor.setFromString(config.backgroundColor);
             this.config = config;
         };
@@ -5889,16 +5893,25 @@ var spine;
             state.apply(skeleton);
             skeleton.updateWorldTransform();
             var shader = this.shader;
+            var batcher = this.batcher;
+            var skeletonRenderer = this.skeletonRenderer;
             shader.bind();
             shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
             shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
-            var batcher = this.batcher;
-            var skeletonRenderer = this.skeletonRenderer;
             batcher.begin(shader);
             skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
             skeletonRenderer.draw(batcher, skeleton);
             batcher.end();
             shader.unbind();
+            if (this.config.debug) {
+                var shader_1 = this.debugShader;
+                var renderer = this.debugRenderer;
+                shader_1.bind();
+                shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
+                renderer.premultipliedAlpha = premultipliedAlpha;
+                renderer.draw(shader_1, skeleton);
+                shader_1.unbind();
+            }
             if (!this.paused)
                 requestAnimationFrame(function () { _this.render(); });
         };
@@ -5975,6 +5988,8 @@ var spine;
                 config.backgroundColor = widget.getAttribute("data-background-color");
             if (widget.getAttribute("data-premultiplied-alpha"))
                 config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
+            if (widget.getAttribute("data-debug"))
+                config.debug = widget.getAttribute("data-debug") === "true";
             new spine.SpineWidget(widget, config);
         };
         SpineWidget.ready = function () {
@@ -6010,6 +6025,7 @@ var spine;
             this.fitToCanvas = true;
             this.backgroundColor = "#555555";
             this.premultipliedAlpha = false;
+            this.debug = false;
         }
         return SpineWidgetConfig;
     }());

spine-ts/widget/example/index.html

@@ -17,6 +17,7 @@ new spine.SpineWidget("spine-widget", {
 	atlas: "assets/spineboy.atlas",		
 	animation: "run",	
 	backgroundColor: "#000000",
+	debug: true,
 	success: function (widget) {
 		var animIndex = 0;
 		widget.canvas.onclick = function () {				

spine-ts/widget/src/Widget.ts

@@ -35,11 +35,13 @@ module spine {
 		state: AnimationState;
 		gl: WebGLRenderingContext;
 		canvas: HTMLCanvasElement;
+		debugRenderer: spine.webgl.SkeletonDebugRenderer;
 
 		private config: SpineWidgetConfig;
 		private assetManager: spine.webgl.AssetManager;
 		private shader: spine.webgl.Shader;
 		private batcher: spine.webgl.PolygonBatcher;
+		private debugShader: spine.webgl.Shader;		
 		private mvp = new spine.webgl.Matrix4();
 		private skeletonRenderer: spine.webgl.SkeletonRenderer;		
 		private paused = false;
@@ -71,6 +73,8 @@ module spine {
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
 			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+			this.debugShader = spine.webgl.Shader.newColored(gl);
+			this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
 
 			let assets = this.assetManager = new spine.webgl.AssetManager(gl);
 			assets.loadText(config.atlas);
@@ -100,6 +104,7 @@ module spine {
 				}
 			}
 			if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
+			if (!config.debug === undefined) config.debug = false;
 			this.backgroundColor.setFromString(config.backgroundColor);
 			this.config = config;		
 		}
@@ -165,22 +170,30 @@ module spine {
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			
-			// Bind the shader and set the texture and model-view-projection matrix.
+			// Draw the skeleton
 			let shader = this.shader;
+			let batcher = this.batcher;
+			let skeletonRenderer = this.skeletonRenderer;
 			shader.bind();
 			shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
 			shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);			
-
-			// Start the batch and tell the SkeletonRenderer to render the active skeleton.
-			let batcher = this.batcher;
-			let skeletonRenderer = this.skeletonRenderer;
 			batcher.begin(shader);
 			skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
 			skeletonRenderer.draw(batcher, skeleton);
 			batcher.end();				
-				
 			shader.unbind();
 
+			// Draw debug information if requested via config
+			if (this.config.debug) {
+				let shader = this.debugShader;
+				let renderer = this.debugRenderer;
+				shader.bind();
+				shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
+				renderer.premultipliedAlpha = premultipliedAlpha;
+				renderer.draw(shader, skeleton);
+				shader.unbind();
+			}
+
 			if (!this.paused) requestAnimationFrame(() => { this.render(); });
 		}
 
@@ -254,6 +267,7 @@ module spine {
 			if (widget.getAttribute("data-fit-to-canvas")) config.fitToCanvas = widget.getAttribute("data-fit-to-canvas") === "true";							
 			if (widget.getAttribute("data-background-color")) config.backgroundColor = widget.getAttribute("data-background-color");
 			if (widget.getAttribute("data-premultiplied-alpha")) config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
+			if (widget.getAttribute("data-debug")) config.debug = widget.getAttribute("data-debug") === "true";			
 
 			new spine.SpineWidget(widget, config);
 		}
@@ -291,6 +305,7 @@ module spine {
 		fitToCanvas = true;		
 		backgroundColor = "#555555";
 		premultipliedAlpha = false;
+		debug = false;	
 		success: (widget: SpineWidget) => void;
 		error: (widget: SpineWidget, msg: string) => void;		
 	}