SetTransform is a new Canvas Renderer function that consolidates the process of preparing a Game Object for rendering, without actually rendering it. This is used internally by the Graphics and Bitmap Text classes.

Author: photonstorm

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * 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.
@@ -24,7 +26,9 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
     var text = src.text;
     var textLength = text.length;
 
-    if (textLength === 0)
+    var ctx = renderer.currentContext;
+
+    if (textLength === 0 || !SetTransform(renderer, ctx, src, camera, parentMatrix))
     {
         return;
     }
@@ -57,7 +61,7 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
     var lastGlyph = null;
     var lastCharCode = 0;
 
-    var ctx = renderer.currentContext;
+    // var ctx = renderer.currentContext;
     var image = src.frame.source.image;
 
     var textureX = textureFrame.cutX;
@@ -66,35 +70,6 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
     var rotation = 0;
     var scale = (src.fontSize / src.fontData.size);
 
-    var alpha = camera.alpha * src.alpha;
-
-    if (alpha === 0)
-    {
-        //  Nothing to see, so abort early
-        return;
-    }
-
-    //  Blend Mode
-    ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
-
-    //  Alpha
-    ctx.globalAlpha = alpha;
-
-    ctx.save();
-
-    if (parentMatrix)
-    {
-        parentMatrix.copyToContext(ctx);
-    }
-
-    ctx.translate(src.x, src.y);
-
-    ctx.rotate(src.rotation);
-
-    ctx.translate(-src.displayOriginX, -src.displayOriginY);
-
-    ctx.scale(src.scaleX, src.scaleY);
-
     if (src.cropWidth > 0 && src.cropHeight > 0)
     {
         ctx.save();

src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * 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.
@@ -24,7 +26,9 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
     var text = src._text;
     var textLength = text.length;
 
-    if (textLength === 0)
+    var ctx = renderer.currentContext;
+
+    if (textLength === 0 || !SetTransform(renderer, ctx, src, camera, parentMatrix))
     {
         return;
     }
@@ -52,7 +56,6 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
     var lastGlyph = null;
     var lastCharCode = 0;
 
-    var ctx = renderer.currentContext;
     var image = src.frame.source.image;
 
     var textureX = textureFrame.cutX;
@@ -78,6 +81,7 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
         lineOffsetX = (lineData.longest - lineData.lengths[0]);
     }
 
+    /*
     //  Alpha
 
     var alpha = camera.alpha * src.alpha;
@@ -119,6 +123,11 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
     ctx.translate(-src.displayOriginX, -src.displayOriginY);
 
     ctx.scale(src.scaleX, src.scaleY);
+    */
+
+    ctx.translate(-src.displayOriginX, -src.displayOriginY);
+
+    var roundPixels = camera.roundPixels;
 
     for (var i = 0; i < textLength; i++)
     {

src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var Commands = require('./Commands');
+var SetTransform = require('../../renderer/canvas/utils/SetTransform');
 
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
@@ -28,12 +29,13 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     var commandBuffer = src.commandBuffer;
     var commandBufferLength = commandBuffer.length;
 
-    if (commandBufferLength === 0)
+    var ctx = renderTargetCtx || renderer.currentContext;
+
+    if (commandBufferLength === 0 || !SetTransform(renderer, ctx, src, camera, parentMatrix))
     {
         return;
     }
 
-    var ctx = renderTargetCtx || renderer.currentContext;
     var lineAlpha = 1;
     var fillAlpha = 1;
     var lineColor = 0;
@@ -43,53 +45,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     var green = 0;
     var blue = 0;
 
-    var alpha = camera.alpha * src.alpha;
-
-    if (alpha === 0)
-    {
-        //  Nothing to see, so abort early
-        return;
-    }
-
-    //  Blend Mode
-    ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
-
-    //  Alpha
-    ctx.globalAlpha = alpha;
-
-    ctx.save();
-
-    var camMatrix = renderer._tempMatrix1;
-    var graphicsMatrix = renderer._tempMatrix2;
-    var calcMatrix = renderer._tempMatrix3;
-
-    graphicsMatrix.applyITRS(src.x, src.y, src.rotation, 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
-        graphicsMatrix.e = src.x;
-        graphicsMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(graphicsMatrix, calcMatrix);
-    }
-    else
-    {
-        graphicsMatrix.e -= camera.scrollX * src.scrollFactorX;
-        graphicsMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(graphicsMatrix, calcMatrix);
-    }
-
-    calcMatrix.copyToContext(ctx);
-
     ctx.fillStyle = '#fff';
 
     for (var index = 0; index < commandBufferLength; ++index)

src/renderer/canvas/CanvasRenderer.js

@@ -522,6 +522,17 @@ var CanvasRenderer = new Class({
         this.snapshotEncoder = encoderOptions;
     },
 
+    /**
+     * Takes a Sprite Game Object, or any object that extends it, and draws it to the current context.
+     *
+     * @method Phaser.Renderer.Canvas.CanvasRenderer#batchSprite
+     * @since 3.12.0
+     *
+     * @param {Phaser.GameObjects.GameObject} sprite - The texture based Game Object to draw.
+     * @param {Phaser.Textures.Frame} frame - The frame to draw, doesn't have to be that owned by the Game Object.
+     * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera to use for the rendering transform.
+     * @param {Phaser.GameObjects.Components.TransformMatrix} [parentTransformMatrix] - The transform matrix of the parent container, if set.
+     */
     batchSprite: function (sprite, frame, camera, parentTransformMatrix)
     {
         var alpha = camera.alpha * sprite.alpha;

src/renderer/canvas/index.js

@@ -13,6 +13,7 @@ module.exports = {
     BlitImage: require('./utils/BlitImage'),
     CanvasRenderer: require('./CanvasRenderer'),
     DrawImage: require('./utils/DrawImage'),
-    GetBlendModes: require('./utils/GetBlendModes')
+    GetBlendModes: require('./utils/GetBlendModes'),
+    SetTransform: require('./utils/SetTransform')
 
 };

src/renderer/canvas/utils/SetTransform.js

@@ -0,0 +1,78 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Takes a reference to the Canvas Renderer, a Canvas Rendering Context, a Game Object, a Camera and a parent matrix
+ * and then performs the following steps:
+ * 
+ * 1) Checks the alpha of the source combined with the Camera alpha. If 0 or less it aborts.
+ * 2) Takes the Camera and Game Object matrix and multiplies them, combined with the parent matrix if given.
+ * 3) Sets the blend mode of the context to be that used by the Game Object.
+ * 4) Sets the alpha value of the context to be that used by the Game Object combined with the Camera.
+ * 5) Saves the context state.
+ * 6) Sets the final matrix values into the context via setTransform.
+ * 
+ * This function is only meant to be used internally. Most of the Canvas Renderer classes use it.
+ *
+ * @function Phaser.Renderer.Canvas.SetTransform
+ * @since 3.12.0
+ *
+ * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
+ * @param {Phaser.GameObjects.GameObject} src - The Game Object being rendered. Can be any type that extends the base class.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} [parentMatrix] - A parent transform matrix to apply to the Game Object before rendering.
+ * 
+ * @return {boolean} `true` if the Game Object context was set, otherwise `false`.
+ */
+var SetTransform = function (renderer, ctx, src, camera, parentMatrix)
+{
+    var alpha = camera.alpha * src.alpha;
+
+    if (alpha <= 0)
+    {
+        //  Nothing to see, so don't waste time calculating stuff
+        return false;
+    }
+
+    var camMatrix = renderer._tempMatrix1.copyFromArray(camera.matrix.matrix);
+    var gameObjectMatrix = renderer._tempMatrix2.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+    var calcMatrix = renderer._tempMatrix3;
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        gameObjectMatrix.e = src.x;
+        gameObjectMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(gameObjectMatrix, calcMatrix);
+    }
+    else
+    {
+        gameObjectMatrix.e -= camera.scrollX * src.scrollFactorX;
+        gameObjectMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(gameObjectMatrix, calcMatrix);
+    }
+
+    //  Blend Mode
+    ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
+
+    //  Alpha
+    ctx.globalAlpha = alpha;
+
+    ctx.save();
+
+    calcMatrix.setToContext(ctx);
+
+    return true;
+};
+
+module.exports = SetTransform;