Fixed a bug in the canvas rendering of both the Static and Dynamic Tilemap Layers where the camera matrix was being multiplied twice with the layer, causing the scale and placement to be off

Author: photonstorm

CHANGELOG.md

@@ -13,6 +13,8 @@
 
 ### Bug Fixes
 
+* Fixed a bug in the canvas rendering of both the Static and Dynamic Tilemap Layers where the camera matrix was being multiplied twice with the layer, causing the scale and placement to be off (thanks galerijanamar)
+
 ### Examples and TypeScript
 
 Thanks to the following for helping with the Phaser 3 Examples and TypeScript definitions, either by reporting errors, or even better, fixing them:

src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js

@@ -39,6 +39,11 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
 
     camMatrix.copyFrom(camera.matrix);
 
+    var ctx = renderer.currentContext;
+    var gidMap = src.gidMap;
+
+    ctx.save();
+
     if (parentMatrix)
     {
         //  Multiply the camera by the parent matrix
@@ -50,23 +55,17 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
 
         //  Multiply by the Sprite matrix, store result in calcMatrix
         camMatrix.multiply(layerMatrix, calcMatrix);
+
+        calcMatrix.copyToContext(ctx);
     }
     else
     {
         layerMatrix.e -= camera.scrollX * src.scrollFactorX;
         layerMatrix.f -= camera.scrollY * src.scrollFactorY;
 
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(layerMatrix, calcMatrix);
+        layerMatrix.copyToContext(ctx);
     }
 
-    var ctx = renderer.currentContext;
-    var gidMap = src.gidMap;
-
-    ctx.save();
-
-    calcMatrix.copyToContext(ctx);
-
     var alpha = camera.alpha * src.alpha;
 
     for (var i = 0; i < tileCount; i++)

src/tilemaps/staticlayer/StaticTilemapLayerCanvasRenderer.js

@@ -39,6 +39,11 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
 
     camMatrix.copyFrom(camera.matrix);
 
+    var ctx = renderer.currentContext;
+    var gidMap = src.gidMap;
+
+    ctx.save();
+
     if (parentMatrix)
     {
         //  Multiply the camera by the parent matrix
@@ -48,25 +53,19 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
         layerMatrix.e = src.x;
         layerMatrix.f = src.y;
 
-        //  Multiply by the Sprite matrix, store result in calcMatrix
         camMatrix.multiply(layerMatrix, calcMatrix);
+
+        calcMatrix.copyToContext(ctx);
     }
     else
     {
+        //  Undo the camera scroll
         layerMatrix.e -= camera.scrollX * src.scrollFactorX;
         layerMatrix.f -= camera.scrollY * src.scrollFactorY;
 
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(layerMatrix, calcMatrix);
+        layerMatrix.copyToContext(ctx);
     }
 
-    var ctx = renderer.currentContext;
-    var gidMap = src.gidMap;
-
-    ctx.save();
-
-    calcMatrix.copyToContext(ctx);
-
     var alpha = camera.alpha * src.alpha;
 
     ctx.globalAlpha = camera.alpha * src.alpha;