Create CullTiles component to allow static and dynamic layers to cull when needed

Fixes performance issue with canvas static tile renderer on large maps

Author: mikewesthad

v3/src/gameobjects/tilemap/components/CullTiles.js

@@ -0,0 +1,39 @@
+var CullTiles = function (layer, camera, outputArray)
+{
+    if (outputArray === undefined) { outputArray = []; }
+
+    outputArray.length = 0;
+
+    var tilemapLayer = layer.tilemapLayer;
+    var mapData = layer.data;
+    var mapWidth = layer.width;
+    var mapHeight = layer.height;
+    var left = (camera.scrollX * tilemapLayer.scrollFactorX) - tilemapLayer.x;
+    var top = (camera.scrollY * tilemapLayer.scrollFactorY) - tilemapLayer.y;
+
+    for (var row = 0; row < mapHeight; ++row)
+    {
+        for (var col = 0; col < mapWidth; ++col)
+        {
+            var tile = mapData[row][col];
+
+            if (tile === null || (tile.index <= 0 && tilemapLayer.skipIndexZero)) { continue; }
+
+            var tileX = tile.worldX - left;
+            var tileY = tile.worldY - top;
+            var cullW = camera.width + tile.width;
+            var cullH = camera.height + tile.height;
+
+            if (tile.visible &&
+                tileX > -tile.width && tileY > -tile.height &&
+                tileX < cullW && tileY < cullH)
+            {
+                outputArray.push(tile);
+            }
+        }
+    }
+
+    return outputArray;
+};
+
+module.exports = CullTiles;

v3/src/gameobjects/tilemap/components/index.js

@@ -1,6 +1,7 @@
 module.exports = {
 
     Copy: require('./Copy'),
+    CullTiles: require('./CullTiles'),
     Fill: require('./Fill'),
     FindByIndex: require('./FindByIndex'),
     ForEachTile: require('./ForEachTile'),

v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayer.js

@@ -49,54 +49,9 @@ var DynamicTilemapLayer = new Class({
         this.skipIndexZero = false;
     },
 
-    getTotalTileCount: function ()
-    {
-        return this.tileArray.length;
-    },
-
-    getVisibleTileCount: function (camera)
-    {
-        return this.cull(camera).length;
-    },
-
     cull: function (camera)
     {
-        var mapData = this.layer.data;
-        var mapWidth = this.layer.width;
-        var mapHeight = this.layer.height;
-        var culledTiles = this.culledTiles;
-        var cameraW = camera.width;
-        var cameraH = camera.height;
-        var left = this.worldToTileX(0, camera);
-        var top = this.worldToTileY(0, camera);
-
-        culledTiles.length = 0;
-
-        for (var row = 0; row < mapHeight; ++row)
-        {
-            for (var col = 0; col < mapWidth; ++col)
-            {
-                var tile = mapData[row][col];
-
-                if (tile === null || (tile.index <= 0 && this.skipIndexZero)) { continue; }
-
-                var tileX = tile.worldX - left;
-                var tileY = tile.worldY - top;
-                var tileW = tile.width;
-                var tileH = tile.height;
-                var cullW = cameraW + tileW;
-                var cullH = cameraH + tileH;
-
-                if (tile.visible &&
-                    tileX > -tileW && tileY > -tileH &&
-                    tileX < cullW && tileY < cullH)
-                {
-                    culledTiles.push(tile);
-                }
-            }
-        }
-
-        return culledTiles;
+        TilemapComponents.CullTiles(this.layer, camera, this.culledTiles);
     },
 
     copy: function (srcTileX, srcTileY, width, height, destTileX, destTileY)

v3/src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js

@@ -47,9 +47,7 @@ var StaticTilemapLayer = new Class({
 
         this.dirty = true;
         this.vertexCount = 0;
-        this.cullStart = 0;
-        this.cullEnd = 0;
-        this.canvasTiles = [];
+        this.culledTiles = [];
 
         this.setTexture(tileset.image.key);
         this.setPosition(x, y);
@@ -85,7 +83,6 @@ var StaticTilemapLayer = new Class({
         var tile;
         var row;
         var col;
-        var tileIndex;
         var texCoords;
 
         if (this.gl)
@@ -186,6 +183,7 @@ var StaticTilemapLayer = new Class({
 
                 this.dirty = false;
             }
+
             var renderer = this.tilemapRenderer;
 
             renderer.shader.setConstantFloat2(renderer.scrollLocation, camera.scrollX, camera.scrollY);
@@ -203,70 +201,11 @@ var StaticTilemapLayer = new Class({
                 ]
             );
         }
-        else if (this.dirty && !this.gl)
-        {
-            this.canvasTiles.length = 0;
-
-            for (row = 0; row < mapHeight; ++row)
-            {
-                for (col = 0; col < mapWidth; ++col)
-                {
-                    tile = mapData[row][col];
-                    if (tile === null || (tile.index <= 0 && this.skipIndexZero)) { continue; }
-
-                    this.canvasTiles.push(tile);
-                }
-            }
-
-            this.dirty = false;
-        }
-    },
-
-    getTotalTileCount: function ()
-    {
-        return this.mapData.length;
-    },
-
-    getVisibleTileCount: function (camera)
-    {
-        this.cull(camera);
-
-        return (this.cullEnd - this.cullStart) / 6;
     },
 
     cull: function (camera)
     {
-        this.cullStart = 0;
-        this.cullEnd = 0;
-
-        var tileWidth = this.map.tileWidth;
-        var tileHeight = this.map.tileHeight;
-
-        var pixelX = this.x - (camera.scrollX * this.scrollFactorX);
-        var pixelY = this.y - (camera.scrollY * this.scrollFactorY);
-        var pixelWidth = this.layer.width * tileWidth;
-        var pixelHeight = this.layer.height * tileHeight;
-
-        if (pixelX < camera.x + camera.width + (tileWidth * 2) &&
-            pixelX + pixelWidth > camera.x + -(tileWidth * 2) &&
-            pixelY < camera.y + camera.height + (tileHeight * 2) &&
-            pixelY + pixelHeight > camera.y + -(tileHeight * 2))
-        {
-            var interX = Math.max(pixelX, camera.x + -(tileWidth * 2));
-            var interY = Math.max(pixelY, camera.y + -(tileHeight * 2));
-
-            var interWidth = Math.min(pixelX + pixelWidth, camera.x + camera.width + (tileWidth * 2)) - interX;
-            var interHeight = Math.min(pixelY + pixelHeight, camera.y + camera.height + (tileHeight * 2)) - interY;
-
-            interX = ((interX + (camera.scrollX * this.scrollFactorX)) / tileWidth) | 0;
-            interY = ((interY + (camera.scrollY * this.scrollFactorY)) / tileHeight) | 0;
-
-            interWidth = (interWidth / tileWidth) | 0;
-            interHeight = (interHeight / tileHeight) | 0;
-
-            this.cullStart = (interY * this.layer.width + interX) * 6;
-            this.cullEnd = ((interY + interHeight) * this.layer.height + interX) * 6;
-        }
+        TilemapComponents.CullTiles(this.layer, camera, this.culledTiles);
     },
 
     destroy: function ()
@@ -275,7 +214,6 @@ var StaticTilemapLayer = new Class({
         this.map = undefined;
         this.layer = undefined;
         this.tileset = undefined;
-        this.canvasTiles.length = 0;
         GameObject.prototype.destroy.call(this);
     },
 

v3/src/gameobjects/tilemap/staticlayer/StaticTilemapLayerCanvasRenderer.js

@@ -7,15 +7,14 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, gameObject, interpola
         return;
     }
 
-    gameObject.upload(camera);
+    gameObject.cull(camera);
 
-    var tiles = gameObject.canvasTiles;
-    var tileWidth = gameObject.map.tileWidth;
-    var tileHeight = gameObject.map.tileHeight;
+
+    var renderTiles = gameObject.culledTiles;
     var tileset = this.tileset;
     var frame = gameObject.frame;
     var ctx = renderer.gameContext;
-    var tileCount = tiles.length;
+    var tileCount = renderTiles.length;
     var image = frame.source.image;
     var tx = gameObject.x - camera.scrollX * gameObject.scrollFactorX;
     var ty = gameObject.y - camera.scrollY * gameObject.scrollFactorY;
@@ -25,16 +24,15 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, gameObject, interpola
     ctx.rotate(gameObject.rotation);
     ctx.scale(gameObject.scaleX, gameObject.scaleY);
     ctx.scale(gameObject.flipX ? -1 : 1, gameObject.flipY ? -1 : 1);
+    renderer.setAlpha(gameObject.alpha);
 
     for (var index = 0; index < tileCount; ++index)
     {
-        var tile = tiles[index];
+        var tile = renderTiles[index];
 
         var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
         if (tileTexCoords === null) { continue; }
 
-        renderer.setAlpha(gameObject.alpha * tile.alpha);
-
         ctx.drawImage(
             image,
             tileTexCoords.x, tileTexCoords.y,