Modified Phaser.Tilemap and PIXI.Tilemap to support the new Phaser.TilemapLayerGL objects.

The PIXI file has a reverse dependency on Phaser for it's 'layer' parameter which contains a Phaser.Tilemap (which holds the map data).  The other changes adapt it to the new data source (previously this expected a raw JSON object encoded like the Mario.json map is).

The Phaser file now keeps a reference to the data parsed from the original map, and adds a branch in createLayer to build a TilemapLayerGL instead of a TilemapLayer.

Author: pjbaron

src/pixi/extras/Tilemap.js

@@ -1,6 +1,11 @@
 
-
-PIXI.Tilemap = function(texture, map)
+/**
+ * Tilemap - constructor
+ * 
+ * @param {Array} layer - layer data from the map, arranged in mapheight lists of mapwidth Phaser.Tile objects (2d array)
+ * 
+ */
+PIXI.Tilemap = function(texture, mapwidth, mapheight, tilewidth, tileheight, layer)
 {
     PIXI.DisplayObjectContainer.call(this);
 
@@ -12,17 +17,11 @@ PIXI.Tilemap = function(texture, map)
      */
     this.texture = texture;
 
-    /**
-     * The tilemap object
-     *
-     * @property map
-     * @type Object
-     */
-    this.map = map;
-
     // faster access to the tile dimensions
-    this.tileWide = this.map.tilewidth;
-    this.tileHigh = this.map.tileheight;
+    this.tileWide = tilewidth;
+    this.tileHigh = tileheight;
+    this.mapWide = mapwidth;
+    this.mapHigh = mapheight;
 
     // precalculate the width of the source texture in entire tile units
     this.texTilesWide = Math.ceil(this.texture.width / this.tileWide);
@@ -33,8 +32,10 @@ PIXI.Tilemap = function(texture, map)
     this.sy = this.tileHigh / this.texture.height;
 
     // TODO: switch here to create DisplayObjectContainer at correct size for the render mode
-    this.width = this.map.width * this.tileWide;
-    this.height = this.map.height * this.tileHigh;
+    this.width = this.mapWide * this.tileWide;
+    this.height = this.mapHigh * this.tileHigh;
+
+    this.layer = layer;
 
     /**
      * Remember last tile drawn to avoid unnecessary set-up
@@ -216,33 +217,26 @@ PIXI.Tilemap.prototype._renderWholeTilemap = function(renderSession)
   // bind the source buffer
   gl.bindBuffer( gl.ARRAY_BUFFER, this.positionBuffer );
 
-  // draw all map layers
-  for(var l = 0; l < this.map.layers.length; l++)
-  {
-    // draw an entire map layer
-    this._renderLayer(l, renderSession);
-  }
+  // draw the entire map layer
+  this._renderLayer(this.layer, renderSession);
 };
 
 
-PIXI.Tilemap.prototype._renderLayer = function( _which, renderSession )
+PIXI.Tilemap.prototype._renderLayer = function( _layer, renderSession )
 {
   var gl = renderSession.gl;
   var shader = renderSession.shaderManager.tilemapShader;
 
-  var layer = this.map.layers[_which];
-  if ( layer )
+  var wide = _layer.width, high = _layer.height;
+  for(var y = 0; y < high; y++)
   {
-    var wide = layer.width, high = layer.height;
-    for(var y = 0; y < high; y++)
+    var layerRow = _layer.data[y];
+    for(var x = 0; x < wide; x++)
     {
-      for(var x = 0; x < wide; x++)
-      {
-        this._renderTile(gl, shader, x * this.tileWide, y * this.tileHigh, layer.data[x + y * wide] - 1);
-      }
+      this._renderTile(gl, shader, x * this.tileWide, y * this.tileHigh, layerRow[x].index - 1);
     }
-
   }
+
 };
 
 
@@ -326,9 +320,9 @@ PIXI.Tilemap.prototype.getBounds = function(matrix)
 
     var vertices = [
       0, 0,
-      this.map.width * this.tileWide, 0,
-      this.map.width * this.tileWide, this.map.height * this.tileHigh,
-      0, this.map.height * this.tileHigh
+      this.mapWide * this.tileWide, 0,
+      this.mapWide * this.tileWide, this.mapHigh * this.tileHigh,
+      0, this.mapHigh * this.tileHigh
     ];
     for (var i = 0, n = vertices.length; i < n; i += 2)
     {

src/tilemap/Tilemap.js

@@ -35,6 +35,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.data = data;
 
     if (data === null)
     {
@@ -561,9 +562,10 @@ Phaser.Tilemap.prototype = {
     * @param {number} [width] - The rendered width of the layer, should never be wider than Game.width. If not given it will be set to Game.width.
     * @param {number} [height] - The rendered height of the layer, should never be wider than Game.height. If not given it will be set to Game.height.
     * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
+    * @param {boolean} [pixiTest] - Temporary additional flag to enable tests of the PIXI.Tilemap renderer
     * @return {Phaser.TilemapLayer} The TilemapLayer object. This is an extension of Phaser.Sprite and can be moved around the display list accordingly.
     */
-    createLayer: function (layer, width, height, group) {
+    createLayer: function (layer, width, height, group, pixiTest) {
 
         //  Add Buffer support for the left of the canvas
 
@@ -584,6 +586,11 @@ Phaser.Tilemap.prototype = {
             return;
         }
 
+        if ( pixiTest )
+        {
+            return group.add(new Phaser.TilemapLayerGL(this.game, this, index, width, height));
+        }
+
         return group.add(new Phaser.TilemapLayer(this.game, this, index, width, height));
 
     },