CullTiles recoded to use Camera worldView - finally, properly culling, regardless of layer scale or camera zoom! Fix phaserjs#3818

Author: photonstorm

src/tilemaps/components/CullTiles.js

@@ -4,6 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var SnapFloor = require('../../math/snap/SnapFloor');
+var SnapCeil = require('../../math/snap/SnapCeil');
+
 /**
  * Returns the tiles in the given layer that are within the camera's viewport. This is used
  * internally.
@@ -24,53 +27,21 @@ var CullTiles = function (layer, camera, outputArray)
 
     outputArray.length = 0;
 
-    // var zoom = camera.zoom;
-    // var originX = camera.width / 2;
-    // var originY = camera.height / 2;
-
-    // var matrix = camera.matrix;
-
-    // matrix.applyITRS(camera.x, camera.y, camera.rotation, zoom, zoom);
-
-    // camera.matrix.loadIdentity();
-    // camera.matrix.translate(camera.x + originX, camera.y + originY);
-    // camera.matrix.rotate(camera.rotation);
-    // camera.matrix.scale(zoom, zoom);
-    // camera.matrix.translate(-originX, -originY);
-    // camera.matrix.invert();
-
-    // camera.shakeEffect.preRender();
-
     var tilemapLayer = layer.tilemapLayer;
 
-    // var tileW = layer.tileWidth;
-    // var tileH = layer.tileHeight;
-
-    // var cullX = ((camera.scrollX * tilemapLayer.scrollFactorX) - tileW);
-    // var cullY = ((camera.scrollY * tilemapLayer.scrollFactorY) - tileH);
-    // var cullW = (cullX + (camera.width + tileW * 2));
-    // var cullH = (cullY + (camera.height + tileH * 2));
+    var tileW = Math.floor(layer.tileWidth * tilemapLayer.scaleX);
+    var tileH = Math.floor(layer.tileHeight * tilemapLayer.scaleY);
 
     var mapData = layer.data;
     var mapWidth = layer.width;
     var mapHeight = layer.height;
 
-    var boundsLeft = camera.worldBounds.left;
-    var boundsRight = camera.worldBounds.right;
-    var boundsTop = camera.worldBounds.top;
-    var boundsBottom = camera.worldBounds.bottom;
-
-    // var cameraMatrix = camera.matrix.matrix;
-    // var a = cameraMatrix[0];
-    // var b = cameraMatrix[1];
-    // var c = cameraMatrix[2];
-    // var d = cameraMatrix[3];
-    // var e = cameraMatrix[4];
-    // var f = cameraMatrix[5];
-    // var tCullX = cullX * a + cullY * c + e;
-    // var tCullY = cullX * b + cullY * d + f;
-    // var tCullW = cullW * a + cullH * c + e;
-    // var tCullH = cullW * b + cullH * d + f;
+    //  Camera world view bounds, snapped for tile size
+
+    var boundsLeft = SnapFloor(camera.worldView.x, tileW);
+    var boundsRight = SnapCeil(camera.worldView.right, tileW);
+    var boundsTop = SnapFloor(camera.worldView.y, tileH);
+    var boundsBottom = SnapCeil(camera.worldView.bottom, tileH);
 
     var i = 0;
 
@@ -85,67 +56,21 @@ var CullTiles = function (layer, camera, outputArray)
                 continue;
             }
 
-            var tilePixelX = (tile.pixelX + tilemapLayer.x);
-            var tilePixelY = (tile.pixelY + tilemapLayer.y);
+            var tilePixelX = (tile.pixelX + tilemapLayer.x) * tilemapLayer.scaleX;
+            var tilePixelY = (tile.pixelY + tilemapLayer.y) * tilemapLayer.scaleY;
 
-            if (tilePixelX >= boundsLeft && tilePixelX < boundsRight && tilePixelY >= boundsTop && tilePixelY < boundsBottom)
+            if (tilePixelX >= boundsLeft && tilePixelX + tileW <= boundsRight && tilePixelY >= boundsTop && tilePixelY + tileH <= boundsBottom)
             {
                 outputArray.push(tile);
             }
 
             i++;
-
-            // var tileX = (tilePixelX * a + tilePixelY * c + e);
-            // var tileY = (tilePixelX * b + tilePixelY * d + f);
-
-            // if (tile.visible &&
-            //     tileX >= tCullX &&
-            //     tileY >= tCullY &&
-            //     tileX + tileW <= tCullW &&
-            //     tileY + tileH <= tCullH
-            // )
-            // {
-            //     outputArray.push(tile);
-            // }
         }
     }
 
     window.noCull = i;
     window.cull = outputArray.length;
 
-    /* var tilemapLayer = layer.tilemapLayer;
-    var mapData = layer.data;
-    var mapWidth = layer.width;
-    var mapHeight = layer.height;
-    var left = (camera.scrollX * camera.zoom * tilemapLayer.scrollFactorX) - tilemapLayer.x;
-    var top = (camera.scrollY * camera.zoom * tilemapLayer.scrollFactorY) - tilemapLayer.y;
-    var sx = tilemapLayer.scaleX;
-    var sy = tilemapLayer.scaleY;
-    var tileWidth = layer.tileWidth * sx;
-    var tileHeight = layer.tileHeight * sy;
-
-    for (var row = 0; row < mapHeight; ++row)
-    {
-        for (var col = 0; col < mapWidth; ++col)
-        {
-            var tile = mapData[row][col];
-
-            if (tile === null || tile.index === -1) { continue; }
-
-            var tileX = tile.pixelX * sx - left;
-            var tileY = tile.pixelY * sy - top;
-            var cullW = camera.width + tileWidth;
-            var cullH = camera.height + tileHeight;
-
-            if (tile.visible &&
-                tileX > -tileWidth && tileY > -tileHeight &&
-                tileX < cullW && tileY < cullH)
-            {
-                outputArray.push(tile);
-            }
-        }
-    } */
-
     return outputArray;
 };