Commit current state of development before trying something different (see last note in the progress doc). Will revert to previous commits if this attempt fails.

Author: pjbaron

docs/_phaser_tilemap_GL_progress.txt

@@ -150,3 +150,9 @@ Some notes for later:
 
 So, I can't create new TilemapLayer objects in TilemapParser because it will preempt Tilemap.createLayer.  Or maybe I can, these TilemapLayer objects will be internal (hidden)...?  There aren't any later calls in the Examples which I can extend or adapt, so that might have to be the solution.
 
+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.
+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?)

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);
+    var data = Phaser.TilemapParser.parse(this.game, key, tileWidth, tileHeight, width, height, this);
     this.data = data;
 
     if (data === null)
@@ -568,6 +568,8 @@ 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; }
@@ -579,7 +581,9 @@ Phaser.Tilemap.prototype = {
             index = this.getLayerIndex(layer);
         }
 
-        if (index === null || index > this.layers.length)
+        // 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))
         {
             console.warn('Tilemap.createLayer: Invalid layer ID given: ' + index);
             return;

src/tilemap/TilemapParser.js

@@ -26,7 +26,7 @@ Phaser.TilemapParser = {
     INSERT_NULL: false,
 
     /**
-    * Parse tilemap data from the cache and creates a Tilemap object.
+    * Parse tilemap data from the cache and creates data for a Tilemap object.
     *
     * @method Phaser.TilemapParser.parse
     * @param {Phaser.Game} game - Game reference to the currently running game.
@@ -35,14 +35,16 @@ Phaser.TilemapParser = {
     * @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
     * @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
     * @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
+    * @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) {
+    parse: function (game, key, tileWidth, tileHeight, width, height, tileMap) {
 
         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)
         {
@@ -64,7 +66,7 @@ Phaser.TilemapParser = {
             }
             else if (!map.format || map.format === Phaser.Tilemap.TILED_JSON)
             {
-                return this.parseTiledJSON(map.data);
+                return this.parseTiledJSON(map.data, tileMap);
             }
         }
         else
@@ -198,9 +200,10 @@ 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) {
+    parseTiledJSON: function (json, tileMap) {
 
         if (json.orientation !== 'orthogonal')
         {
@@ -646,12 +649,15 @@ Phaser.TilemapParser = {
         var tile;
         var sid;
         var set;
+        var setLayers = [];
 
-        // go through each of the map layers
+        // go through each of the map data layers
         for (var i = 0; i < map.layers.length; i++)
         {
             layer = map.layers[i];
 
+            set = null;
+
             // rows of tiles
             for (var j = 0; j < layer.data.length; j++)
             {
@@ -670,14 +676,28 @@ 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];
 
+
                     // if that tile type has any properties, add them to the tile object
 
                     if (set.tileProperties && set.tileProperties[tile.index - set.firstgid])
                     {
                         tile.properties = Phaser.Utils.mixin(set.tileProperties[tile.index - set.firstgid], tile.properties);
                     }
+
                 }
             }
         }