diff --git a/plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js b/plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js index a9286de50..7bda2613f 100644 --- a/plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js +++ b/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,23 +24,6 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix) { var pipeline = renderer.currentPipeline; - - 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); - - camMatrix.copyFrom(camera.matrix); - - 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); - var plugin = src.plugin; var mvp = plugin.mvp; @@ -48,25 +33,64 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent var skeleton = src.skeleton; var skeletonRenderer = plugin.skeletonRenderer; - // skeleton.flipX = src.flipX; - // skeleton.flipY = src.flipY; + if (!skeleton) + { + return; + } - mvp.ortho(0, renderer.width, 0, renderer.height, 0, 1); + renderer.clearPipeline(); + + var camMatrix = renderer._tempMatrix1; + var spriteMatrix = renderer._tempMatrix2; + var calcMatrix = renderer._tempMatrix3; + + // - 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); + + 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 + { + 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); + } + + 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();