Fixed Spine Canvas rendering

Author: photonstorm

plugins/spine/src/SpinePlugin.js

@@ -53,6 +53,7 @@ var SpinePlugin = new Class({
         this.gl;
         this.renderer;
         this.sceneRenderer;
+        this.skeletonRenderer;
         this.skeletonDebugRenderer;
 
         this.plugin = Spine;
@@ -88,16 +89,14 @@ var SpinePlugin = new Class({
         if (this.isWebGL)
         {
             this.bootWebGL();
+            this.onResize();
+            this.game.scale.on(ResizeEvent, this.onResize, this);
         }
         else
         {
             this.bootCanvas();
         }
 
-        this.onResize();
-
-        this.game.scale.on(ResizeEvent, this.onResize, this);
-
         var eventEmitter = this.systems.events;
 
         eventEmitter.once('shutdown', this.shutdown, this);
@@ -106,14 +105,14 @@ var SpinePlugin = new Class({
 
     bootCanvas: function ()
     {
-        this.skeletonRenderer = new this.runtime.SkeletonRenderer(this.scene.sys.context);
+        this.skeletonRenderer = new Spine.canvas.SkeletonRenderer(this.scene.sys.context);
     },
 
     getAtlasCanvas: function (key)
     {
-        var atlasData = this.cache.get(key);
+        var atlasEntry = this.cache.get(key);
 
-        if (!atlasData)
+        if (!atlasEntry)
         {
             console.warn('No atlas data for: ' + key);
             return;
@@ -124,7 +123,7 @@ var SpinePlugin = new Class({
 
         if (spineTextures.has(key))
         {
-            atlas = new Spine.TextureAtlas(atlasData, function ()
+            atlas = new Spine.TextureAtlas(atlasEntry.data, function ()
             {
                 return spineTextures.get(key);
             });
@@ -133,7 +132,7 @@ var SpinePlugin = new Class({
         {
             var textures = this.textures;
 
-            atlas = new Spine.TextureAtlas(atlasData, function (path)
+            atlas = new Spine.TextureAtlas(atlasEntry.data, function (path)
             {
                 var canvasTexture = new Spine.canvas.CanvasTexture(textures.get(path).getSourceImage());
 
@@ -172,6 +171,7 @@ var SpinePlugin = new Class({
         this.sceneRenderer.batcher.setBlendMode = setBlendMode;
         this.sceneRenderer.shapes.setBlendMode = setBlendMode;
 
+        this.skeletonRenderer = this.sceneRenderer.skeletonRenderer;
         this.skeletonDebugRenderer = this.sceneRenderer.skeletonDebugRenderer;
 
         this.temp1 = new Spine.webgl.Vector3(0, 0, 0);
@@ -567,6 +567,7 @@ var SpinePlugin = new Class({
         this.json = null;
         this.textures = null;
         this.sceneRenderer = null;
+        this.skeletonRenderer = null;
         this.gl = null;
     }
 

plugins/spine/src/gameobject/SpineGameObjectCanvasRenderer.js

@@ -4,7 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
-var SetTransform = require('../../../../src/renderer/canvas/utils/SetTransform');
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var RadToDeg = require('../../../../src/math/RadToDeg');
+var Wrap = require('../../../../src/math/Wrap');
 
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
@@ -29,27 +31,93 @@ var SpineGameObjectCanvasRenderer = function (renderer, src, interpolationPercen
     var skeleton = src.skeleton;
     var skeletonRenderer = plugin.skeletonRenderer;
 
-    if (!skeleton || !SetTransform(renderer, context, src, camera, parentMatrix))
+    var GameObjectRenderMask = 15;
+
+    var willRender = !(GameObjectRenderMask !== src.renderFlags || (src.cameraFilter !== 0 && (src.cameraFilter & camera.id)));
+
+    if (!skeleton || !willRender)
     {
         return;
     }
 
-    skeletonRenderer.ctx = context;
+    var camMatrix = renderer._tempMatrix1;
+    var spriteMatrix = renderer._tempMatrix2;
+    var calcMatrix = renderer._tempMatrix3;
 
-    context.save();
+    spriteMatrix.applyITRS(src.x, src.y, src.rotation, Math.abs(src.scaleX), Math.abs(src.scaleY));
 
-    skeletonRenderer.draw(skeleton);
+    camMatrix.copyFrom(camera.matrix);
 
-    if (plugin.drawDebug || src.drawDebug)
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        spriteMatrix.e = src.x;
+        spriteMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
+    else
     {
-        context.strokeStyle = '#00ff00';
-        context.beginPath();
-        context.moveTo(-1000, 0);
-        context.lineTo(1000, 0);
-        context.moveTo(0, -1000);
-        context.lineTo(0, 1000);
-        context.stroke();
+        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
+        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
+
+    skeleton.x = calcMatrix.tx;
+    skeleton.y = calcMatrix.ty;
+
+    skeleton.scaleX = calcMatrix.scaleX;
+
+    //  Inverse or we get upside-down skeletons
+    skeleton.scaleY = calcMatrix.scaleY * -1;
+
+    if (src.scaleX < 0)
+    {
+        skeleton.scaleX *= -1;
+
+        src.root.rotation = RadToDeg(calcMatrix.rotationNormalized);
     }
+    else
+    {
+        //  +90 degrees to account for the difference in Spine vs. Phaser rotation
+        src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
+    }
+
+    if (src.scaleY < 0)
+    {
+        skeleton.scaleY *= -1;
+
+        if (src.scaleX < 0)
+        {
+            src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+        else
+        {
+            src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+    }
+
+    if (camera.renderToTexture)
+    {
+        skeleton.y = calcMatrix.ty;
+        skeleton.scaleY *= -1;
+    }
+
+    //  Add autoUpdate option
+    skeleton.updateWorldTransform();
+
+    skeletonRenderer.ctx = context;
+    skeletonRenderer.debugRendering = (plugin.drawDebug || src.drawDebug);
+
+    context.save();
+
+    skeletonRenderer.draw(skeleton);
 
     context.restore();
 };