[ts][canvas] Added support for alpha tinting, rgb tint is ignored

spine-ts/README.md

@@ -22,7 +22,7 @@ spine-ts works with data exported from Spine 3.5.xx.
 
 spine-ts WebGL & Widget backends supports all Spine features. 
 
-spine-ts Canvas does not support color tinting and mesh attachments. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers. 
+spine-ts Canvas does not support color tinting and mesh attachments. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers. 
 
 spine-ts THREE.JS does not support color tinting and blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.
 

spine-ts/build/spine-canvas.d.ts

@@ -79,6 +79,7 @@ declare module spine.canvas {
         private ctx;
         triangleRendering: boolean;
         debugRendering: boolean;
+        private tempColor;
         constructor(context: CanvasRenderingContext2D);
         draw(skeleton: Skeleton): void;
         private drawImages(skeleton);

spine-ts/build/spine-canvas.js

@@ -213,6 +213,7 @@ var spine;
             function SkeletonRenderer(context) {
                 this.triangleRendering = false;
                 this.debugRendering = false;
+                this.tempColor = new spine.Color(0, 0, 0, 1);
                 this.ctx = context;
             }
             SkeletonRenderer.prototype.draw = function (skeleton) {
@@ -226,18 +227,27 @@ var spine;
                 var drawOrder = skeleton.drawOrder;
                 if (this.debugRendering)
                     ctx.strokeStyle = "green";
+                ctx.save();
                 for (var i = 0, n = drawOrder.length; i < n; i++) {
                     var slot = drawOrder[i];
                     var attachment = slot.getAttachment();
+                    var regionAttachment = null;
                     var region = null;
                     var image = null;
                     if (attachment instanceof spine.RegionAttachment) {
-                        var regionAttachment = attachment;
+                        regionAttachment = attachment;
                         region = regionAttachment.region;
                         image = region.texture.getImage();
                     }
                     else
                         continue;
+                    var skeleton_1 = slot.bone.skeleton;
+                    var skeletonColor = skeleton_1.color;
+                    var slotColor = slot.color;
+                    var regionColor = regionAttachment.color;
+                    var alpha = skeletonColor.a * slotColor.a * regionColor.a;
+                    var color = this.tempColor;
+                    color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
                     var att = attachment;
                     var bone = slot.bone;
                     var w = region.width;
@@ -251,10 +261,14 @@ var spine;
                     ctx.scale(1, -1);
                     ctx.translate(-w / 2, -h / 2);
                     ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
+                    if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
+                        ctx.globalAlpha = color.a;
+                    }
                     if (this.debugRendering)
                         ctx.strokeRect(0, 0, w, h);
                     ctx.restore();
                 }
+                ctx.restore();
             };
             SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
                 var blendMode = null;

spine-ts/canvas/example/index.html

@@ -18,7 +18,7 @@ var skeleton, state, bounds;
 var skeletonRenderer;
 
 var skelName = "spineboy";
-var animName = "idle";
+var animName = "test";
 
 function init () {
 	canvas = document.getElementById("canvas");

spine-ts/canvas/src/SkeletonRenderer.ts

@@ -37,6 +37,8 @@ module spine.canvas {
 		public triangleRendering = false;
 		public debugRendering = false;
 
+		private tempColor = new Color(0, 0, 0, 1);
+
 		constructor (context: CanvasRenderingContext2D) {
 			this.ctx = context;
 		}
@@ -52,17 +54,30 @@ module spine.canvas {
 
 			if (this.debugRendering) ctx.strokeStyle = "green";
 
+			ctx.save();
 			for (let i = 0, n = drawOrder.length; i < n; i++) {
 				let slot = drawOrder[i];
 				let attachment = slot.getAttachment();
+				let regionAttachment: RegionAttachment = null;
 				let region: TextureAtlasRegion = null;
 				let image: HTMLImageElement = null;
 				if (attachment instanceof RegionAttachment) {
-					let regionAttachment = <RegionAttachment>attachment;
+					regionAttachment = <RegionAttachment>attachment;
 					region = <TextureAtlasRegion>regionAttachment.region;
 					image = (<CanvasTexture>region.texture).getImage();
 				} else continue;
 
+				let skeleton = slot.bone.skeleton;
+				let skeletonColor = skeleton.color;
+				let slotColor = slot.color;
+				let regionColor = regionAttachment.color;
+				let alpha = skeletonColor.a * slotColor.a * regionColor.a;
+				let color = this.tempColor;
+				color.set(skeletonColor.r * slotColor.r * regionColor.r,
+					skeletonColor.g * slotColor.g * regionColor.g,
+					skeletonColor.b * slotColor.b * regionColor.b,
+					alpha);
+
 				let att = <RegionAttachment>attachment;
 				let bone = slot.bone;
 				let w = region.width;
@@ -76,9 +91,18 @@ module spine.canvas {
 				ctx.scale(1, -1);
 				ctx.translate(-w / 2, -h / 2);
 				ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
+				if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
+					ctx.globalAlpha = color.a;
+					// experimental tinting via compositing, doesn't work
+					// ctx.globalCompositeOperation = "source-atop";
+					// ctx.fillStyle = "rgba(" + (color.r * 255 | 0) + ", " + (color.g * 255 | 0)  + ", " + (color.b * 255 | 0) + ", " + color.a + ")";
+					// ctx.fillRect(0, 0, w, h);
+				}
 				if (this.debugRendering) ctx.strokeRect(0, 0, w, h);
 				ctx.restore();
 			}
+
+			ctx.restore();
 		}
 
 		private drawTriangles (skeleton: Skeleton) {