Support for Spine objects inside a container and no skeletons

Author: photonstorm

plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -22,51 +24,73 @@
 var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     var pipeline = renderer.currentPipeline;
+    var plugin = src.plugin;
+    var mvp = plugin.mvp;
+
+    var shader = plugin.shader;
+    var batcher = plugin.batcher;
+    var runtime = src.runtime;
+    var skeleton = src.skeleton;
+    var skeletonRenderer = plugin.skeletonRenderer;
+
+    if (!skeleton)
+    {
+        return;
+    }
 
     renderer.clearPipeline();
 
     var camMatrix = renderer._tempMatrix1;
     var spriteMatrix = renderer._tempMatrix2;
     var calcMatrix = renderer._tempMatrix3;
 
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+    //  - 90 degrees to account for the difference in Spine vs. Phaser rotation
+    spriteMatrix.applyITRS(src.x, src.y, src.rotation - 1.5707963267948966, src.scaleX, src.scaleY);
 
     camMatrix.copyFrom(camera.matrix);
 
-    spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-    spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
 
-    //  Multiply by the Sprite matrix, store result in calcMatrix
-    camMatrix.multiply(spriteMatrix, calcMatrix);
+        //  Undo the camera scroll
+        spriteMatrix.e = src.x;
+        spriteMatrix.f = src.y;
 
-    var plugin = src.plugin;
-    var mvp = plugin.mvp;
-
-    var shader = plugin.shader;
-    var batcher = plugin.batcher;
-    var runtime = src.runtime;
-    var skeleton = src.skeleton;
-    var skeletonRenderer = plugin.skeletonRenderer;
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
+    else
+    {
+        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
+        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
 
-    // skeleton.flipX = src.flipX;
-    // skeleton.flipY = src.flipY;
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
 
-    mvp.ortho(0, renderer.width, 0, renderer.height, 0, 1);
+    var width = renderer.width;
+    var height = renderer.height;
 
     var data = calcMatrix.decomposeMatrix();
 
-    mvp.translateXYZ(data.translateX, renderer.height - data.translateY, 0);
-    mvp.rotateZ(data.rotation * -1);
+    mvp.ortho(0, width, 0, height, 0, 1);
+    mvp.translateXYZ(data.translateX, height - data.translateY, 0);
+    mvp.rotateZ(CounterClockwise(data.rotation));
     mvp.scaleXYZ(data.scaleX, data.scaleY, 1);
 
-    // skeleton.updateWorldTransform();
-
+    //  For a Stage 1 release we'll handle it like this:
     shader.bind();
     shader.setUniformi(runtime.webgl.Shader.SAMPLER, 0);
     shader.setUniform4x4f(runtime.webgl.Shader.MVP_MATRIX, mvp.val);
 
+    //  For Stage 2, we'll move to using a custom pipeline, so Spine objects are batched
+
     batcher.begin(shader);
 
+    skeletonRenderer.premultipliedAlpha = true;
+
     skeletonRenderer.draw(batcher, skeleton);
 
     batcher.end();