[ts][widget] Added transparent canvas widget support

spine-ts/README.md

@@ -166,6 +166,7 @@ The configuration object has the following fields:
   * `x`: optional, the x-coordinate to display the animation at. The origin is in the bottom left corner. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
   * `y`: optional, the y-coordinate to display the animation at. The origin is in the bottom left corner with the y-axis pointing upwards. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
   * `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.
+  * `alpha`: optional, whether to allow the canvas to be transparent. Defaults to `true`. Set the alpha channel in ``backgroundColor` to 0 as well, e.g. `#00000000`.
   * `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.

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

@@ -1548,6 +1548,7 @@ declare module spine {
 		scale: number;
 		x: number;
 		y: number;
+		alpha: boolean;
 		fitToCanvas: boolean;
 		backgroundColor: string;
 		premultipliedAlpha: boolean;

spine-ts/build/spine-all.js

@@ -7819,7 +7819,7 @@ var spine;
 			element.appendChild(canvas);
 			canvas.width = element.clientWidth;
 			canvas.height = element.clientHeight;
-			var webglConfig = { alpha: false };
+			var webglConfig = { alpha: config.alpha };
 			var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
 			this.shader = spine.webgl.Shader.newColoredTextured(gl);
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
@@ -7868,6 +7868,8 @@ var spine;
 				config.premultipliedAlpha = false;
 			if (!config.debug === undefined)
 				config.debug = false;
+			if (!config.alpha === undefined)
+				config.alpha = true;
 			this.backgroundColor.setFromString(config.backgroundColor);
 			this.config = config;
 		};
@@ -8030,6 +8032,8 @@ var spine;
 				config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
 			if (widget.getAttribute("data-debug"))
 				config.debug = widget.getAttribute("data-debug") === "true";
+			if (widget.getAttribute("data-alpha"))
+				config.alpha = widget.getAttribute("data-alpha") === "true";
 			new spine.SpineWidget(widget, config);
 		};
 		SpineWidget.ready = function () {
@@ -8062,6 +8066,7 @@ var spine;
 			this.scale = 1.0;
 			this.x = 0;
 			this.y = 0;
+			this.alpha = true;
 			this.fitToCanvas = true;
 			this.backgroundColor = "#555555";
 			this.premultipliedAlpha = false;

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

@@ -1478,6 +1478,7 @@ declare module spine {
 		scale: number;
 		x: number;
 		y: number;
+		alpha: boolean;
 		fitToCanvas: boolean;
 		backgroundColor: string;
 		premultipliedAlpha: boolean;

spine-ts/build/spine-widget.js

@@ -7398,7 +7398,7 @@ var spine;
 			element.appendChild(canvas);
 			canvas.width = element.clientWidth;
 			canvas.height = element.clientHeight;
-			var webglConfig = { alpha: false };
+			var webglConfig = { alpha: config.alpha };
 			var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
 			this.shader = spine.webgl.Shader.newColoredTextured(gl);
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
@@ -7447,6 +7447,8 @@ var spine;
 				config.premultipliedAlpha = false;
 			if (!config.debug === undefined)
 				config.debug = false;
+			if (!config.alpha === undefined)
+				config.alpha = true;
 			this.backgroundColor.setFromString(config.backgroundColor);
 			this.config = config;
 		};
@@ -7609,6 +7611,8 @@ var spine;
 				config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
 			if (widget.getAttribute("data-debug"))
 				config.debug = widget.getAttribute("data-debug") === "true";
+			if (widget.getAttribute("data-alpha"))
+				config.alpha = widget.getAttribute("data-alpha") === "true";
 			new spine.SpineWidget(widget, config);
 		};
 		SpineWidget.ready = function () {
@@ -7641,6 +7645,7 @@ var spine;
 			this.scale = 1.0;
 			this.x = 0;
 			this.y = 0;
+			this.alpha = true;
 			this.fitToCanvas = true;
 			this.backgroundColor = "#555555";
 			this.premultipliedAlpha = false;

spine-ts/widget/example/index.html

@@ -14,13 +14,13 @@
 <script>
 new spine.SpineWidget("spine-widget", {
 	json: "assets/spineboy.json",
-	atlas: "assets/spineboy.atlas",		
+	atlas: "assets/spineboy.atlas",
-	animation: "run",	
+	animation: "run",
-	backgroundColor: "#000000",
+	backgroundColor: "#00000000",
 	debug: true,
 	success: function (widget) {
 		var animIndex = 0;
-		widget.canvas.onclick = function () {				
+		widget.canvas.onclick = function () {
 			animIndex++;
 			let animations = widget.skeleton.data.animations;
 			if (animIndex >= animations.length) animIndex = 0;

spine-ts/widget/src/Widget.ts

@@ -66,7 +66,7 @@ module spine {
 			(<HTMLElement> element).appendChild(canvas);
 			canvas.width = (<HTMLElement>element).clientWidth;
 			canvas.height = (<HTMLElement>element).clientHeight;
-			var webglConfig = { alpha: false };
+			var webglConfig = { alpha: config.alpha };
 			let gl = this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
 
 			this.shader = spine.webgl.Shader.newColoredTextured(gl);
@@ -106,6 +106,7 @@ module spine {
 			}
 			if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
 			if (!config.debug === undefined) config.debug = false;
+			if (!config.alpha === undefined) config.alpha = true;
 			this.backgroundColor.setFromString(config.backgroundColor);
 			this.config = config;
 		}
@@ -272,6 +273,7 @@ module spine {
 			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";
+			if (widget.getAttribute("data-alpha")) config.alpha = widget.getAttribute("data-alpha") === "true";
 
 			new spine.SpineWidget(widget, config);
 		}
@@ -306,6 +308,7 @@ module spine {
 		scale = 1.0;
 		x = 0;
 		y = 0;
+		alpha = true;
 		fitToCanvas = true;
 		backgroundColor = "#555555";
 		premultipliedAlpha = false;