Added support for cull padding

Author: photonstorm

CHANGELOG.md

@@ -115,6 +115,7 @@ There is a new Game Object Component called `TextureCrop`. It replaces the Textu
 * `DynamicTilemapLayer.tilesTotal` is a read-only property that contains the total number of tiles in the layer, updated every frame.
 * `DynamicTilemapLayer.skipCull` and its associated chainable method `setSkipCull` allows you to control if the cameras should cull the layer tiles before rendering them or not. By default they will cull, to avoid over-rendering, but in some circumstances you may wish to disable this and can now do so by toggling this property.
 * The `CullTiles` component, as used by the Dynamic Tilemap, has been recoded from scratch to take advantage of updates in the Camera system. It will now properly cull tiles, irrespective of the layer scale, or camera zoom. It also now supports the layers `skipCull` property, allowing you to override the culling. The Dungeon Generator labs demo now works again as a result of this fix, and has been updated with a debug mode and camera control UI. You can edit the example source to swap between 4 different dungeon layouts, from 2500 tiles up to 1 million tiles. There are limitations to the way the culling works though. If you rotate the camera you may find you see the cull edge. You can disable this using the new `skipCull` property. Fixing this also fixed #3818 (thanks @Mursaat)
+* `DynamicTilemapLayer.cullPadding` and its associated chainable method `setCullPadding` allows you to control how many additional tiles are added into the cull rectangle when it is calculated. If you find that your camera size and zoom settings are causing tiles to get prematurely culled, resulting in clipping during scrolling, then set the `cullPadding` values to add extra layers of tiles to the calculations in both directions.
 
 ### New Features
 

src/tilemaps/components/CullTiles.js

@@ -39,10 +39,10 @@ var CullTiles = function (layer, camera, outputArray)
 
     //  Camera world view bounds, snapped for tile size
 
-    var boundsLeft = SnapFloor(camera.worldView.x, tileW) - tileW;
-    var boundsRight = SnapCeil(camera.worldView.right, tileW) + tileW;
-    var boundsTop = SnapFloor(camera.worldView.y, tileH) - tileH;
-    var boundsBottom = SnapCeil(camera.worldView.bottom, tileH) + tileH;
+    var boundsLeft = SnapFloor(camera.worldView.x, tileW) - (tilemapLayer.cullPadding.x * tileW);
+    var boundsRight = SnapCeil(camera.worldView.right, tileW) + (tilemapLayer.cullPadding.x * tileW);
+    var boundsTop = SnapFloor(camera.worldView.y, tileH) - (tilemapLayer.cullPadding.y * tileH);
+    var boundsBottom = SnapCeil(camera.worldView.bottom, tileH) + (tilemapLayer.cullPadding.y * tileH);
 
     for (var y = 0; y < mapHeight; y++)
     {

src/tilemaps/dynamiclayer/DynamicTilemapLayer.js

@@ -9,6 +9,7 @@ var Components = require('../../gameobjects/components');
 var DynamicTilemapLayerRender = require('./DynamicTilemapLayerRender');
 var GameObject = require('../../gameobjects/GameObject');
 var TilemapComponents = require('../components');
+var Vector2 = require('../../math/Vector2');
 
 /**
  * @classdesc
@@ -164,6 +165,17 @@ var DynamicTilemapLayer = new Class({
          */
         this.tilesTotal = this.layer.width * this.layer.height;
 
+        /**
+         * The amount of tiles to add into the cull rectangle.
+         * 
+         * See the method `setCullPadding` for more details.
+         *
+         * @name Phaser.Tilemaps.DynamicTilemapLayer#cullPadding
+         * @type {Phaser.Math.Vector2}
+         * @since 3.11.0
+         */
+        this.cullPadding = new Vector2(1, 1);
+
         this.setAlpha(this.layer.alpha);
         this.setPosition(x, y);
         this.setOrigin();
@@ -797,6 +809,31 @@ var DynamicTilemapLayer = new Class({
         return this;
     },
 
+    /**
+     * When a Camera culls the tiles in this layer it does so using its view into the world, building up a 
+     * rectangle inside which the tiles must exist or they will be culled. Sometimes you may need to expand the size
+     * of this 'cull rectangle', especially if you plan on rotating the Camera viewing the layer. Do so
+     * by providing the padding values. The values given are in tiles, not pixels. So if the tile width was 32px
+     * and you set `paddingX` to be 4, it would add 32px x 4 to the cull rectangle (adjusted for scale)
+     * 
+     * @method Phaser.Tilemaps.DynamicTilemapLayer#setCullPadding
+     * @since 3.11.0
+     *
+     * @param {number} [paddingX=1] - The amount of extra horizontal tiles to add to the cull check padding.
+     * @param {number} [paddingY=1] - The amount of extra vertical tiles to add to the cull check padding.
+     *
+     * @return {this} This Tilemap Layer object.
+     */
+    setCullPadding: function (paddingX, paddingY)
+    {
+        if (paddingX === undefined) { paddingX = 1; }
+        if (paddingY === undefined) { paddingY = 1; }
+
+        this.cullPadding.set(paddingX, paddingY);
+
+        return this;
+    },
+
     /**
      * Sets collision on the given tile or tiles within a layer by index. You can pass in either a
      * single numeric index or an array of indexes: [2, 3, 15, 20]. The `collides` parameter controls if