Both Static and Dynamic Tilemaps support the new property skipIndexZero which allows them to skip over index 0 tiles. Works in both canvas and webgl. Fix phaserjs#3052

Author: photonstorm

v3/src/gameobjects/tilemap/dynamic/Tile.js

@@ -4,36 +4,47 @@ function Tile (properties)
     this.id = properties.id;
     this.x = properties.x;
     this.y = properties.y;
+
     this.width = properties.width;
     this.height = properties.height;
+
     this.frameX = properties.frameX;
     this.frameY = properties.frameY;
     this.frameWidth = properties.frameWidth;
     this.frameHeight = properties.frameHeight;
+
     this.alpha = 1.0;
     this.tint = 0xFFFFFF;
     this.visible = true;
+
     this.textureWidth = properties.textureWidth;
     this.textureHeight = properties.textureHeight;
+
     this.border = properties.border;
-    this.center = properties.center; 
+    this.center = properties.center;
 }
 
 Tile.prototype.setId = function (id)
 {
     var tileId = this.id = id;
+
     var tileWidth = this.width;
     var tileHeight = this.height;
+
     var setWidth = this.textureWidth / tileWidth;
+
     var tileWidthBorder = (tileWidth + this.border * 2);
     var tileHeightBorder = (tileHeight + this.border * 2);
+
     var halfTileWidth = tileWidthBorder * 0.5;
     var halfTileHeight = tileHeightBorder * 0.5;
+
     if (!this.center)
     {
         halfTileWidth = 0;
         halfTileHeight = 0;
     }
+
     var rectx = (((tileId % setWidth)|0) * tileWidthBorder) + halfTileWidth;
     var recty = (((tileId / setWidth)|0) * tileHeightBorder) + halfTileHeight;
 

v3/src/gameobjects/tilemap/dynamic/Tilemap.js

@@ -31,18 +31,24 @@ var Tilemap = new Class({
         GameObject.call(this, scene, 'Tilemap');
 
         this.mapData = (mapData !== null) ? new Uint32Array(mapData) : new Uint32Array(mapWidth * mapHeight);
-        this.tileWidth = tileWidth;
-        this.tileHeight = tileHeight;
         this.mapWidth = mapWidth;
         this.mapHeight = mapHeight;
+
+        this.tileWidth = tileWidth;
+        this.tileHeight = tileHeight;
+
         this.tileArray = [];
         this.culledTiles = [];
         this.tileBorder = tileBorder;
+
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();
         this.setOrigin();
         this.setSize(tileWidth * mapWidth, tileHeight * mapHeight);
+
+        this.skipIndexZero = false;
+
         this.buildTilemap(!!scene.sys.game.renderer.gl);
     },
 
@@ -61,15 +67,19 @@ var Tilemap = new Class({
         var tileArray = this.tileArray;
         var mapData = this.mapData;
         var border = this.tileBorder;
+
         var tileWidth = this.tileWidth;
         var tileHeight = this.tileHeight;
         var tileWidthBorder = tileWidth + border * 2;
         var tileHeightBorder = tileHeight + border * 2;
+
         var width = this.texture.source[0].width;
         var height = this.texture.source[0].height;
+
         var mapWidth = this.mapWidth;
         var mapHeight = this.mapHeight;
         var setWidth = width / tileWidth;
+
         var tileWidthBorderHalf = tileWidthBorder * 0.5;
         var tileHeightBorderHalf = tileHeightBorder * 0.5;
 
@@ -157,7 +167,7 @@ var Tilemap = new Class({
     //      frameX
     //      frameY
     //      id
-    //      index = the tile in the tilset to render
+    //      index = the tile in the tileset to render
     //      textureWidth = tileset texture size
     //      textureHeight
     //      tint

v3/src/gameobjects/tilemap/dynamic/TilemapCanvasRenderer.js

@@ -12,9 +12,11 @@ var TilemapCanvasRenderer = function (renderer, gameObject, interpolationPercent
     var tiles = gameObject.culledTiles;
     var tileCount = tiles.length;
     var image = gameObject.frame.source.image;
-    var scrollFactorX = gameObject.scrollFactorX;
-    var scrollFactorY = gameObject.scrollFactorY;
-    var alpha = gameObject.alpha;
+
+    // var scrollFactorX = gameObject.scrollFactorX;
+    // var scrollFactorY = gameObject.scrollFactorY;
+    // var alpha = gameObject.alpha;
+
     var tx = gameObject.x - camera.scrollX * gameObject.scrollFactorX;
     var ty = gameObject.y - camera.scrollY * gameObject.scrollFactorY;
     var ctx = renderer.gameContext;
@@ -29,11 +31,16 @@ var TilemapCanvasRenderer = function (renderer, gameObject, interpolationPercent
     {
         var tile = tiles[index];
 
+        if (tile.id <= 0 && gameObject.skipIndexZero)
+        {
+            continue;
+        }
+
         ctx.drawImage(
-            image, 
-            tile.frameX, tile.frameY, 
-            tile.frameWidth, tile.frameHeight, 
-            tile.x, tile.y, 
+            image,
+            tile.frameX, tile.frameY,
+            tile.frameWidth, tile.frameHeight,
+            tile.x, tile.y,
             tile.frameWidth, tile.frameHeight
         );
     }

v3/src/gameobjects/tilemap/dynamic/TilemapWebGLRenderer.js

@@ -25,6 +25,12 @@ var TilemapWebGLRenderer = function (renderer, gameObject, interpolationPercenta
     for (var index = 0; index < length; ++index)
     {
         var tile = renderTiles[index];
+
+        if (tile.id <= 0 && gameObject.skipIndexZero)
+        {
+            continue;
+        }
+
         batch.addTileTextureRect(
             texture,
             x + tile.x, y + tile.y, tile.width, tile.height, alpha * tile.alpha, tile.tint,