First working demo of multiple tileset sources specified in a single Tiled map layer being rendered as separate Batch drawing lists by the webgl renderer.

Phaser.Tilemap now creates internal map layers for each tileset except the first one (which will be handled by the createLayer call from the game).  It also stores a reference to each tileset where the new map layers can access it.
Phaser.TilemapLayerGL uses the new tileset reference to ensure the correct base image and tile sizes are used for each new layer.
PIXI.Tilemap: added initialisation of glBatch to null in c'tor.
Phaser.TilemapParser was cleaned up to remove the now unnecessary tilemap parameter and the attempt to create layers while parsing.

Author: pjbaron

docs/_phaser_tilemap_GL_progress.txt

@@ -144,7 +144,7 @@ Attempted a quick hack to test the new layers approach but got bogged down in th
 Some notes for later:
 - Tilemap creates TilemapLayer objects (Sprites). It keeps no reference to them after adding them to a group (or the world group), the new layer object gets a 'map' reference.
 - Tilemap contains a layers member variable, it contains bespoke objects (see createBlankLayer) with some information about layers in the map data (which do not correspond to TilemapLayer objects at all)
-- TilemapParser parses raw map data into the Tilemap.data member.  It creates Tileset objects and populates them for each tile set used in the raw map.  It creates Tile objects for each tile in the map data.
+- TilemapParser parses raw map data into a local 'map' variable which is returned to be set as the Tilemap.data member.  It creates Tileset objects and populates them for each tile set used in the raw map.  It creates Tile objects for each tile in the map data.
 - Tileset contains information about separate tile sources, including the image, the first tile, tile layout in the image.  It contains the draw function to render a tile on the canvas.
 - Tilemap.createLayer is called by Examples after the Tilemap has been created and parsed.
 
@@ -153,6 +153,20 @@ So, I can't create new TilemapLayer objects in TilemapParser because it will pre
 day seven:
 
 Read through the above and took a good look at the code.  It's a messy solution in this context.
-A better idea... parse the map as previously, on return to Tilemap create layers for each 'unique' entry in tilesets array.
+A better idea... parse the map as originally, on return to Tilemap create layers for each 'unique' entry in tilesets array.
 This avoids the circular calls to and from tilemap and parse, allows map to have a populated data member after parse, and still creates the required new layers before the example calls createLayer.
 (Check if this process can be added to createLayer?)
+Added createInternalLayer to Phaser.Tilemap which creates a new internal layer for each non-zero member of the base Tilemap's tilesets list when createLayer is called.  (The zero tileset is drawn by the layer created by createLayer).
+
+The Tile objects have incorrect data... in the "create from objects" example the "tiles2" tiles which are 70x70 pixels have a width/height of 32x32 (the same as the base tiles from the "ground_1x1" set).  I'll take a look at that in a minute after I get this to draw something (the tile used is in the top-left of the image so it should draw even through the sizes are wrong).
+
+The image texture appears to also be incorrect in Tile objects that use different tilesets.  This might explain why we get garbage drawn to screen, however looking at the phaser.io example I'm seeing the correct tiles being drawn.  Need to check all my new code to find how it has got the wrong values.
+
+Bug found in TilemapLayerGL where it sets the PIXI baseTexture.  I'm seeing the top-left corner of the 70x70 tiles.
+
+Added a tileset parameter to the map's layer data objects when creating an 'internal' layer.
+Made TilemapLayerGL grab the tile dimensions from the new tileset parameter instead of relying on the map containing only one size.
+
+First working demo with multiple webgl layers each batching tiles from separate tilesets which were all attached to one map layer in the Tiled program.
+Tiles are still turning off too soon at the map edges (exactly like the Canvas version) but that should be fixable with this 'internal layer' approach.
+

src/pixi/extras/Tilemap.js

@@ -37,6 +37,9 @@ PIXI.Tilemap = function(texture, mapwidth, mapheight, tilewidth, tileheight, lay
 
     this.layer = layer;
 
+    // store the list of batch drawing instructions (for use with WebGL rendering)
+    this.glBatch = null;
+
     /**
      * Remember last tile drawn to avoid unnecessary set-up
      *

src/tilemap/Tilemap.js

@@ -34,7 +34,7 @@ Phaser.Tilemap = function (game, key, tileWidth, tileHeight, width, height) {
     */
     this.key = key;
 
-    var data = Phaser.TilemapParser.parse(this.game, key, tileWidth, tileHeight, width, height, this);
+    var data = Phaser.TilemapParser.parse(this.game, key, tileWidth, tileHeight, width, height);
     this.data = data;
 
     if (data === null)
@@ -101,7 +101,12 @@ Phaser.Tilemap = function (game, key, tileWidth, tileHeight, width, height) {
     * @property {array} tilesets - An array of Tilesets.
     */
     this.tilesets = data.tilesets;
-    
+
+    /**
+    * @property {array} tilesetLayers - An array of internal layers used to separate multiple tilesets from a single map layer.
+    */
+    this.tilesetLayers = null;
+
     /**
     * @property {array} imagecollections - An array of Image Collections.
     */
@@ -312,6 +317,20 @@ Phaser.Tilemap.prototype = {
         if (this.tilesets[idx])
         {
             this.tilesets[idx].setImage(img);
+
+            // create an empty layer for the map parts corresponding to this tileset
+            // if ( !this.tilesetLayers )
+            // {
+            //     // for the first tileset, don't create a layer because createLayer will be called to do that
+            //     this.tilesetLayers = [];
+            // }
+            // else
+            // {
+            //     // for all the rest, go ahead and make a (currently) blank layer
+            //     // name, width, height, tileWidth, tileHeight, group
+            //     this.tilesetLayers.push( this.createBlankLayer( "_internal" + this.tilesetLayers.length.toString() ) );
+            // }
+
             return this.tilesets[idx];
         }
         else
@@ -360,6 +379,17 @@ Phaser.Tilemap.prototype = {
                 }
             }
 
+            // create an empty layer for the map parts corresponding to this tileset
+            // if ( !this.tilesetLayers )
+            // {
+            //     this.tilesetLayers = [];
+            // }
+            // else
+            // {
+            //     // name, width, height, tileWidth, tileHeight, group
+            //     this.tilesetLayers.push( this.createBlankLayer( "_internal" + this.tilesetLayers.length.toString() ) );
+            // }
+
             return newSet;
 
         }
@@ -568,37 +598,151 @@ Phaser.Tilemap.prototype = {
 
         //  Add Buffer support for the left of the canvas
 
-        console.log("Tilemap.createLayer", layer, width, height);
-        
         if (width === undefined) { width = this.game.width; }
         if (height === undefined) { height = this.game.height; }
         if (group === undefined) { group = this.game.world; }
 
+        console.log("Tilemap.createLayer", layer, width, height);
+
         var index = layer;
 
         if (typeof layer === 'string')
         {
             index = this.getLayerIndex(layer);
         }
 
-        // createLayer can be called by TilemapParser.parseTiledJSON so this.layers is undefined because we called parse to populate it
-        // TODO: this creates an ugly circularity in the class relationship, parse/tilemap should be reworked to be cleaner
-        if (index === null || (this.layers && index > this.layers.length))
+        if (index === null || index > this.layers.length)
         {
             console.warn('Tilemap.createLayer: Invalid layer ID given: ' + index);
             return;
         }
 
+        // create the internal layers for different tilesets using this one as a base description
+        for (var i = 1, l = this.tilesets.length; i < l; i++)
+        {
+            var ts = this.tilesets[i];
+            var li = this.layers[index];
+            this.createInternalLayer( "_internal" + i.toString(), ts, li.width, li.height, ts.tileWidth, ts.tileHeight, group );
+        }
+
         if ( this.game.renderType === Phaser.WEBGL )
         {
-            // use WebGL variant of TilemapLayer when pixiTest is true
+            // use WebGL variant of TilemapLayer
             return group.add(new Phaser.TilemapLayerGL(this.game, this, index, width, height));
         }
 
         return group.add(new Phaser.TilemapLayer(this.game, this, index, width, height));
 
     },
 
+    /**
+    * Creates a new internal layer on this Tilemap. By default TilemapLayers are fixed to the camera.
+    *
+    * @method Phaser.Tilemap#createBlankLayer
+    * @param {string} name - The name of this layer. Must be unique within the map.
+    * @param {Phaser.Tileset} tileset - The tileset whose data is to be added to this layer.
+    * @param {number} width - The width of the layer in tiles.
+    * @param {number} height - The height of the layer in tiles.
+    * @param {number} tileWidth - The width of the tiles the layer uses for calculations.
+    * @param {number} tileHeight - The height of the tiles the layer uses for calculations.
+    * @param {Phaser.Group} [group] - Optional Group to add the layer to. If not specified it will be added to the World group.
+    * @return {Phaser.TilemapLayer} The TilemapLayer object. This is an extension of Phaser.Image and can be moved around the display list accordingly.
+    */
+    createInternalLayer: function (name, tileset, width, height, tileWidth, tileHeight, group) {
+
+        console.log("Tilemap.createInternalLayer", name, width, height);
+
+        if (group === undefined) { group = this.game.world; }
+
+        if (this.getLayerIndex(name) !== null)
+        {
+            console.warn('Tilemap.createBlankLayer: Layer with matching name already exists');
+            return;
+        }
+
+        var layer = {
+
+            name: name,
+            x: 0,
+            y: 0,
+            width: width,
+            height: height,
+            widthInPixels: width * tileWidth,
+            heightInPixels: height * tileHeight,
+            alpha: 1,
+            visible: true,
+            properties: {},
+            indexes: [],
+            callbacks: [],
+            bodies: [],
+            data: null,
+            tileset: tileset
+
+        };
+
+        var row;
+        var output = [];
+
+        for (var y = 0; y < height; y++)
+        {
+            row = [];
+            for (var x = 0; x < width; x++)
+            {
+                // get the equivalent tile from this Tilemap
+                var tile = this.layers[0].data[y][x];
+                // find out which tileset it is in
+                var setIndex = this.tiles[tile.index] && this.tiles[tile.index][2];
+                var ts = this.tilesets[setIndex];
+                // is it one of the ones we want to move?
+                if ( ts == tileset )
+                {
+                    // move the tile to this new layer
+                    row.push( tile );
+                    // erase it from the original (mixed tileset) layer
+                    this.layers[0].data[y][x] = new Phaser.Tile(layer, -1, x, y, tileWidth, tileHeight);
+                }
+                else
+                {
+                    // add an empty tile
+                    row.push(new Phaser.Tile(layer, -1, x, y, tileWidth, tileHeight));
+                }
+            }
+
+            output.push(row);
+        }
+
+        layer.data = output;
+
+        this.layers.push(layer);
+
+        var w = layer.widthInPixels;
+        var h = layer.heightInPixels;
+
+        if (w > this.game.width)
+        {
+            w = this.game.width;
+        }
+
+        if (h > this.game.height)
+        {
+            h = this.game.height;
+        }
+
+        var output;
+        if ( this.game.renderType === Phaser.WEBGL )
+        {
+            output = new Phaser.TilemapLayerGL(this.game, this, this.layers.length - 1, w, h);
+        }
+        else
+        {
+            output = new Phaser.TilemapLayer(this.game, this, this.layers.length - 1, w, h);
+        }
+        output.name = name;
+
+        return group.add(output);
+
+    },
+
     /**
     * Creates a new and empty layer on this Tilemap. By default TilemapLayers are fixed to the camera.
     *
@@ -611,9 +755,10 @@ Phaser.Tilemap.prototype = {
     * @param {Phaser.Group} [group] - Optional Group to add the layer to. If not specified it will be added to the World group.
     * @return {Phaser.TilemapLayer} The TilemapLayer object. This is an extension of Phaser.Image and can be moved around the display list accordingly.
     */
-    createBlankLayer: function (name, width, height, tileWidth, tileHeight, group, pixiTest) {
+    createBlankLayer: function (name, width, height, tileWidth, tileHeight, group) {
+
+        console.log("Tilemap.createBlankLayer", name, width, height);
 
-        if (pixiTest === undefined) { pixiTest = true; }     // TODO: disable test of TilemapLayerGL unless requested
         if (group === undefined) { group = this.game.world; }
 
         if (this.getLayerIndex(name) !== null)
@@ -677,7 +822,7 @@ Phaser.Tilemap.prototype = {
         }
 
         var output;
-        if ( pixiTest )
+        if ( this.game.renderType === Phaser.WEBGL )
         {
             output = new Phaser.TilemapLayerGL(this.game, this, this.layers.length - 1, w, h);
         }

src/tilemap/TilemapLayerGL.js

@@ -22,6 +22,8 @@
 */
 Phaser.TilemapLayerGL = function (game, tilemap, index, width, height) {
 
+    console.log( "Phaser.TilemapLayerGL", index, width, height);
+
     this.game = game;
 
     width |= 0;
@@ -220,9 +222,10 @@ Phaser.TilemapLayerGL = function (game, tilemap, index, width, height) {
     */
     this._results = [];
 
-    // TODO: need PIXI textures for each tileset source image
-    var baseTexture = new PIXI.BaseTexture(this.map.tilesets[0].image);
-    PIXI.Tilemap.call(this, new PIXI.Texture(baseTexture), this.map.width, this.map.height, this.map.tileWidth, this.map.tileHeight, this.layer);
+    // get PIXI textures for each tileset source image
+    var tileset = this.layer.tileset || this.map.tilesets[0];
+    var baseTexture = new PIXI.BaseTexture( tileset.image );
+    PIXI.Tilemap.call(this, new PIXI.Texture(baseTexture), this.map.width, this.map.height, tileset.tileWidth, tileset.tileHeight, this.layer);
 
     Phaser.Component.Core.init.call(this, game, 0, 0, null, null);
 

src/tilemap/TilemapParser.js

@@ -38,13 +38,12 @@ Phaser.TilemapParser = {
     * @param {Phaser.Tilemap} [tileMap=null] - The Phaser.Tilemap this data is created for (used for createLayer to add new layers when mixed tilesets are used).
     * @return {object} The parsed map object.
     */
-    parse: function (game, key, tileWidth, tileHeight, width, height, tileMap) {
+    parse: function (game, key, tileWidth, tileHeight, width, height) {
 
         if (tileWidth === undefined) { tileWidth = 32; }
         if (tileHeight === undefined) { tileHeight = 32; }
         if (width === undefined) { width = 10; }
         if (height === undefined) { height = 10; }
-        if (tileMap === undefined) { tileMap = null; }
 
         if (key === undefined)
         {
@@ -66,7 +65,7 @@ Phaser.TilemapParser = {
             }
             else if (!map.format || map.format === Phaser.Tilemap.TILED_JSON)
             {
-                return this.parseTiledJSON(map.data, tileMap);
+                return this.parseTiledJSON(map.data);
             }
         }
         else
@@ -200,10 +199,9 @@ Phaser.TilemapParser = {
     * Parses a Tiled JSON file into valid map data.
     * @method Phaser.TilemapParser.parseJSON
     * @param {object} json - The JSON map data.
-    * @param {Phaser.Tilemap} [tileMap=null] - The Phaser.Tilemap object which has the createLayer functionality.
     * @return {object} Generated and parsed map data.
     */
-    parseTiledJSON: function (json, tileMap) {
+    parseTiledJSON: function (json) {
 
         if (json.orientation !== 'orthogonal')
         {
@@ -649,7 +647,6 @@ Phaser.TilemapParser = {
         var tile;
         var sid;
         var set;
-        var setLayers = [];
 
         // go through each of the map data layers
         for (var i = 0; i < map.layers.length; i++)
@@ -676,18 +673,6 @@ Phaser.TilemapParser = {
                     // find the relevant tileset
 
                     sid = map.tiles[tile.index][2];
-
-                    // if this is a different tileset to the one already being used by this layer...
-                    // TODO: check if the tileset has changed size, we can probably skip this if it's identical
-                    if ( set && set.name !== map.tilesets[sid].name )
-                    {
-                        // if there's no layer for this tileset, create a clone of this layer and attach the tileset to it
-                        if ( !setLayers[set.name] )
-                        {
-                            setLayers[set.name] = tileMap.createLayer();
-                        }
-                        // TODO: add the tile to the layer which holds this tileset, and make it an invalid tile in this layer
-                    }
                     set = map.tilesets[sid];