Updated the canvas tilemap layer renderers to support parent matrix and tidied up the internal flow

Author: photonstorm

src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js

@@ -17,60 +17,96 @@
  * @param {Phaser.Tilemaps.DynamicTilemapLayer} src - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
     src.cull(camera);
 
     var renderTiles = src.culledTiles;
-    var length = renderTiles.length;
-    var image = src.tileset.image.getSourceImage();
-    var tileset = this.tileset;
+    var tileCount = renderTiles.length;
 
-    var tx = src.x - camera.scrollX * src.scrollFactorX;
-    var ty = src.y - camera.scrollY * src.scrollFactorY;
-    var ctx = renderer.currentContext;
+    if (tileCount === 0)
+    {
+        return;
+    }
 
-    ctx.save();
-    ctx.translate(tx, ty);
-    ctx.rotate(src.rotation);
-    ctx.scale(src.scaleX, src.scaleY);
-    ctx.scale(src.flipX ? -1 : 1, src.flipY ? -1 : 1);
+    var camMatrix = renderer._tempMatrix1;
+    var layerMatrix = renderer._tempMatrix2;
+    var calcMatrix = renderer._tempMatrix3;
+
+    layerMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+
+    camMatrix.copyFrom(camera.matrix);
 
-    for (var index = 0; index < length; ++index)
+    if (parentMatrix)
     {
-        var tile = renderTiles[index];
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
 
-        var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
-        if (tileTexCoords === null) { continue; }
+        //  Undo the camera scroll
+        layerMatrix.e = src.x;
+        layerMatrix.f = src.y;
 
-        var halfWidth = tile.width / 2;
-        var halfHeight = tile.height / 2;
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(layerMatrix, calcMatrix);
+    }
+    else
+    {
+        layerMatrix.e -= camera.scrollX * src.scrollFactorX;
+        layerMatrix.f -= camera.scrollY * src.scrollFactorY;
 
-        ctx.save();
-        ctx.translate(tile.pixelX + halfWidth, tile.pixelY + halfHeight);
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(layerMatrix, calcMatrix);
+    }
 
-        if (tile.rotation !== 0)
-        {
-            ctx.rotate(tile.rotation);
-        }
+    var tileset = src.tileset;
+    var ctx = renderer.currentContext;
+    var image = tileset.image.getSourceImage();
 
-        if (tile.flipX || tile.flipY)
-        {
-            ctx.scale(tile.flipX ? -1 : 1, tile.flipY ? -1 : 1);
-        }
+    ctx.save();
+
+    calcMatrix.copyToContext(ctx);
 
-        ctx.globalAlpha = camera.alpha * src.alpha * tile.alpha;
+    var alpha = camera.alpha * src.alpha;
 
-        ctx.drawImage(
-            image,
-            tileTexCoords.x, tileTexCoords.y,
-            tile.width, tile.height,
-            -halfWidth, -halfHeight,
-            tile.width, tile.height
-        );
+    for (var i = 0; i < tileCount; i++)
+    {
+        var tile = renderTiles[i];
 
-        ctx.restore();
+        var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
+
+        if (tileTexCoords)
+        {
+            var halfWidth = tile.width / 2;
+            var halfHeight = tile.height / 2;
+    
+            ctx.save();
+
+            ctx.translate(tile.pixelX + halfWidth, tile.pixelY + halfHeight);
+    
+            if (tile.rotation !== 0)
+            {
+                ctx.rotate(tile.rotation);
+            }
+    
+            if (tile.flipX || tile.flipY)
+            {
+                ctx.scale((tile.flipX) ? -1 : 1, (tile.flipY) ? -1 : 1);
+            }
+    
+            ctx.globalAlpha = alpha * tile.alpha;
+    
+            ctx.drawImage(
+                image,
+                tileTexCoords.x, tileTexCoords.y,
+                tile.width, tile.height,
+                -halfWidth, -halfHeight,
+                tile.width, tile.height
+            );
+    
+            ctx.restore();
+        }
     }
 
     ctx.restore();

src/tilemaps/staticlayer/StaticTilemapLayerCanvasRenderer.js

@@ -70,9 +70,9 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
 
     ctx.globalAlpha = camera.alpha * src.alpha;
 
-    for (var index = 0; index < tileCount; ++index)
+    for (var i = 0; i < tileCount; i++)
     {
-        var tile = renderTiles[index];
+        var tile = renderTiles[i];
 
         var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);