The CullTiles updates from 3.11 didn't factor in the position of the Tilemap Layer to its bounds calculations, causing Static layers displayed out of the Camera viewport to never render in Canvas mode. The method has also been optimized further, with less divisions and less checks if culling is disabled.

Author: photonstorm

CHANGELOG.md

@@ -109,6 +109,7 @@ Setting the `resolution` property in the Game Config to a value other than 1 wou
 * The `CameraManager` was accidentally adding extra destroy event calls when a Scene was restarted, causing an `Uncaught TypeError: Cannot read property 'events' of null` when trying to destroy a game instance having swapped from a Scene to another, and back again. Fix #3878 (thanks @mbunby)
 * RenderTextures in WebGL will now set the viewport size, stopping the console warning in Firefox. Fix #3823 (thanks @SBCGames)
 * Particles now take the Cameras alpha value into consideration when calculating their final alpha values in WebGL. They previously ignored it. If you now alpha a Camera out all particles will change accordingly.
+* The `CullTiles` updates from 3.11 didn't factor in the position of the Tilemap Layer to its bounds calculations, causing Static layers displayed out of the Camera viewport to never render in Canvas mode. The method has also been optimized further, with less divisions and less checks if culling is disabled.
 
 ### Examples, Documentation and TypeScript
 

src/tilemaps/components/CullTiles.js

@@ -27,10 +27,6 @@ var CullTiles = function (layer, camera, outputArray)
 
     outputArray.length = 0;
 
-    var y = 0;
-    var x = 0;
-    var tile = null;
-
     var tilemapLayer = layer.tilemapLayer;
 
     var mapData = layer.data;
@@ -40,31 +36,32 @@ var CullTiles = function (layer, camera, outputArray)
     var tileW = Math.floor(layer.tileWidth * tilemapLayer.scaleX);
     var tileH = Math.floor(layer.tileHeight * tilemapLayer.scaleY);
 
-    //  Camera world view bounds, snapped for scaled tile size
-
-    var boundsLeft = SnapFloor(camera.worldView.x, tileW) - (tilemapLayer.cullPaddingX * tileW);
-    var boundsRight = SnapCeil(camera.worldView.right, tileW) + (tilemapLayer.cullPaddingX * tileW);
-    var boundsTop = SnapFloor(camera.worldView.y, tileH) - (tilemapLayer.cullPaddingY * tileH);
-    var boundsBottom = SnapCeil(camera.worldView.bottom, tileH) + (tilemapLayer.cullPaddingY * tileH);
-
     var drawLeft = 0;
     var drawRight = mapWidth;
     var drawTop = 0;
     var drawBottom = mapHeight;
 
     if (!tilemapLayer.skipCull)
     {
-        drawLeft = Math.max(0, boundsLeft / tileW);
-        drawRight = Math.min(mapWidth, boundsRight / tileW);
-        drawTop = Math.max(0, boundsTop / tileH);
-        drawBottom = Math.min(mapHeight, boundsBottom / tileH);
+        //  Camera world view bounds, snapped for scaled tile size
+        //  Cull Padding values are given in tiles, not pixels
+
+        var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
+        var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
+        var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
+        var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
+
+        drawLeft = Math.max(0, boundsLeft);
+        drawRight = Math.min(mapWidth, boundsRight);
+        drawTop = Math.max(0, boundsTop);
+        drawBottom = Math.min(mapHeight, boundsBottom);
     }
 
-    for (y = drawTop; y < drawBottom; y++)
+    for (var y = drawTop; y < drawBottom; y++)
     {
-        for (x = drawLeft; x < drawRight; x++)
+        for (var x = drawLeft; x < drawRight; x++)
         {
-            tile = mapData[y][x];
+            var tile = mapData[y][x];
 
             if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
             {