Improved TilemapLayer rendering and debug rendering significantly. Cleared out some old assets and added a new map.

README.md

@@ -44,6 +44,11 @@ Change Log
 
 Version 1.1.4 - "Kandor" - In development
 
+Significant API changes:
+
+* Loader.tileset has a new method signature. Please use the new format: load.tileset(key, url, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total).
+
+
 New features:
 
 * Added a stage.fullScreenScaleMode property to determine scaling when fullscreen (thanks oysterCrusher)

build/phaser.d.ts

@@ -1424,9 +1424,10 @@ declare module Phaser {
             addToFileList(type: string, key: string, url: string, properties: Array<any>): void;
             image(key: string, url: string, overwrite?: boolean): void;
             text(key: string, url: string, overwrite?: boolean): void;
-            spritesheet(key: string, url: string, frameWidth: number, frameHeight: number, frameMax: number): void;
+            spritesheet(key: string, url: string, frameWidth: number, frameHeight: number, frameMax?: number, margin?: number, spacing?: number): void;
             audio(key: string, urls: string[], autoDecode?: boolean): void;
             tilemap(key: string, tilesetURL: string, mapDataURL?: string, mapData?: Object, format?: string): void;
+            tileset(key: string, url: string, tileWidth: number, tileHeight: number, tileMargin?: number, tileSpacing?: number, rows?: number, columns?: number, limit?: number): void;
             bitmapFont(key: string, textureURL: string, xmlURL?: string, xmlData?: Object): void;
             atlasJSONArray(key: string, textureURL: string, atlasURL: string, atlasData: Object): void;
             atlasJSONHash(key: string, textureURL: string, atlasURL: string, atlasData: Object): void;

examples/wip/tilemap.js

@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('map', 'assets/maps/mario1.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.tilemap('map', 'assets/maps/super_mario.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('tiles', 'assets/maps/mario1.png', 16, 16);
+    game.load.tileset('tiles', 'assets/maps/super_mario.png', 16, 16);
 
     // game.load.tilemap('map', 'assets/maps/newtest.json', null, Phaser.Tilemap.TILED_JSON);
     // game.load.tileset('tiles', 'assets/maps/ground_1x1.png', 32, 32);
@@ -24,16 +24,13 @@ var sprite;
 
 function create() {
 
-    // game.stage.backgroundColor = '#5c94fc';
-
     map = game.add.tilemap('map');
 
-    map.setCollisionByIndexRange(80, 97); // mario
+    map.setCollisionByIndex(15);
-    map.setCollisionByIndexRange(14, 18); // mario
+    map.setCollisionByIndex(40);
-    
+    map.setCollisionByIndexRange(14, 16);
-
+    map.setCollisionByIndexRange(20, 25);
-
+    map.setCollisionByIndexRange(27, 29);
-    // map.setCollisionByIndex(1);  // newtest
 
 
 
@@ -41,6 +38,9 @@ function create() {
     //  Need to get the x,y values working (adjust cameraOffset values)
     layer = game.add.tilemapLayer(0, 0, 800, 600, 'tiles', map, 0);
     layer.debug = true;
+    layer.debugAlpha = 0.3;
+
+
 
     // layer2 = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0);
     // layer.cameraOffset.x = 400;

src/loader/Cache.js

@@ -154,20 +154,22 @@ Phaser.Cache.prototype = {
     * @param {string} key - The unique key by which you will reference this object.
     * @param {string} url - URL of this tile set file.
     * @param {object} data - Extra tile set data.
-    * @param {number} tileWidth - Width of the sprite sheet.
+    * @param {number} tileWidth - Width of each single tile in pixels.
-    * @param {number} tileHeight - Height of the sprite sheet.
+    * @param {number} tileHeight - Height of each single tile in pixels.
-    * @param {number} tileMax - How many tiles stored in the sprite sheet.
     * @param {number} [tileMargin=0] - If the tiles have been drawn with a margin, specify the amount here.
     * @param {number} [tileSpacing=0] - If the tiles have been drawn with spacing between them, specify the amount here.
+    * @param {number} [rows=-1] - How many tiles are placed horizontally in each row? If -1 it will calculate rows by dividing the image width by tileWidth.
+    * @param {number} [columns=-1] - How many tiles are placed vertically in each column? If -1 it will calculate columns by dividing the image height by tileHeight.
+    * @param {number} [total=-1] - The maximum number of tiles to extract from the image. If -1 it will extract `rows * columns` worth. You can also set a value lower than the actual number of tiles.
     */
-    addTileset: function (key, url, data, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
+    addTileset: function (key, url, data, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
 
-        this._tilesets[key] = { url: url, data: data, tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing };
+        this._tilesets[key] = { url: url, data: data, tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing, rows: rows, columns: columns, total: total };
 
         PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
         PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
 
-        this._tilesets[key].tileData = Phaser.TilemapParser.tileset(this.game, key, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing);
+        this._tilesets[key].tileData = Phaser.TilemapParser.tileset(this.game, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total);
 
     },
 

src/loader/Loader.js

@@ -400,18 +400,18 @@ Phaser.Loader.prototype = {
     * @param {number} [tileSpacing=0] - If the tiles have been drawn with spacing between them, specify the amount here.
     * @param {number} [rows=-1] - How many tiles are placed horizontally in each row? If -1 it will calculate rows by dividing the image width by tileWidth.
     * @param {number} [columns=-1] - How many tiles are placed vertically in each column? If -1 it will calculate columns by dividing the image height by tileHeight.
-    * @param {number} [limit=-1] - The maximum number of tiles to extract from the image. If -1 it will extract rows * columns worth, otherwise you can set a lower limit value.
+    * @param {number} [total=-1] - The maximum number of tiles to extract from the image. If -1 it will extract `rows * columns` worth. You can also set a value lower than the actual number of tiles.
     * @return {Phaser.Loader} This Loader instance.
     */
-    tileset: function (key, url, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, limit) {
+    tileset: function (key, url, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
 
         if (typeof tileMargin === "undefined") { tileMargin = 0; }
         if (typeof tileSpacing === "undefined") { tileSpacing = 0; }
         if (typeof rows === "undefined") { rows = -1; }
         if (typeof columns === "undefined") { columns = -1; }
-        if (typeof limit === "undefined") { limit = -1; }
+        if (typeof total === "undefined") { total = -1; }
 
-        this.addToFileList('tileset', key, url, { tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing, rows: rows, columns: columns, limit: limit });
+        this.addToFileList('tileset', key, url, { tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing, rows: rows, columns: columns, total: total });
 
         return this;
 
@@ -963,7 +963,7 @@ Phaser.Loader.prototype = {
 
             case 'tileset':
 
-                this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMax, file.tileMargin, file.tileSpacing);
+                this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMargin, file.tileSpacing, file.rows, file.columns, file.total);
                 break;
 
             case 'textureatlas':

src/tilemap/TilemapLayer.js

@@ -101,6 +101,12 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
     */
     this.debug = false;
 
+    /**
+    * @property {number} debugAlpha - If debug is true then the tileset is rendered with this alpha level, to make the tile edges clearer.
+    * @default
+    */
+    this.debugAlpha = 0.5;
+
     /**
     * @property {number} widthInPixels - Do NOT recommend changing after the map is loaded!
     * @readonly
@@ -791,7 +797,6 @@ Phaser.TilemapLayer.prototype.render = function () {
         this.dirty = true;
     }
 
-    // if (!this.dirty || !this.tileset || !this.tilemap || !this.visible)
     if (!this.dirty || !this.tilemap || !this.visible)
     {
         return;
@@ -800,14 +805,9 @@ Phaser.TilemapLayer.prototype.render = function () {
     this._prevX = this._dx;
     this._prevY = this._dy;
 
-    // console.log('render', this._x);
-
     this._dx = -(this._x - (this._startX * this.tileWidth));
     this._dy = -(this._y - (this._startY * this.tileHeight));
 
-    // this._dx = Math.floor(this._dx);
-    // this._dy = Math.floor(this._dy);
-
     this._tx = this._dx;
     this._ty = this._dy;
 
@@ -815,8 +815,7 @@ Phaser.TilemapLayer.prototype.render = function () {
 
     if (this.debug)
     {
-        this.context.fillStyle = 'rgba(0,255,0,0.3)';
+        this.context.globalAlpha = this.debugAlpha;
-        this.context.strokeStyle = 'rgba(0,255,0,0.9)';
     }
 
     for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++)
@@ -842,45 +841,6 @@ Phaser.TilemapLayer.prototype.render = function () {
                 );
             }
 
-            if (this.debug)
-            {
-                if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
-                {
-                    this._tx = Math.floor(this._tx);
-
-                    // this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
-
-                    this.context.beginPath();
-
-                    if (tile.faceTop)
-                    {
-                        this.context.moveTo(this._tx, this._ty);
-                        this.context.lineTo(this._tx + this.tileWidth, this._ty);
-                    }
-
-                    if (tile.faceBottom)
-                    {
-                        this.context.moveTo(this._tx, this._ty + this.tileHeight);
-                        this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
-                    }
-
-                    if (tile.faceLeft)
-                    {
-                        this.context.moveTo(this._tx, this._ty);
-                        this.context.lineTo(this._tx, this._ty + this.tileHeight);
-                    }
-
-                    if (tile.faceRight)
-                    {
-                        this.context.moveTo(this._tx + this.tileWidth, this._ty);
-                        this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
-                    }
-
-                    this.context.stroke();
-                    // this.context.strokeRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
-                }
-            }
-
             this._tx += this.tileWidth;
 
         }
@@ -890,6 +850,12 @@ Phaser.TilemapLayer.prototype.render = function () {
 
     }
 
+    if (this.debug)
+    {
+        this.context.globalAlpha = 1;
+        this.renderDebug();
+    }
+
     //  Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
     if (this.game.renderType === Phaser.WEBGL)
     {
@@ -907,6 +873,69 @@ Phaser.TilemapLayer.prototype.render = function () {
 
 }
 
+Phaser.TilemapLayer.prototype.renderDebug = function () {
+
+    this._tx = this._dx;
+    this._ty = this._dy;
+
+    this.context.fillStyle = 'rgba(0, 255, 0, 0.3)';
+    this.context.strokeStyle = 'rgb(0, 255, 0)';
+
+    for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++)
+    {
+        this._column = this.layer.data[y];
+
+        for (var x = this._startX, lenX = this._startX + this._maxX; x < lenX; x++)
+        {
+            var tile = this._column[x];
+
+            if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
+            {
+                this._tx = Math.floor(this._tx);
+
+                // this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
+
+                this.context.beginPath();
+
+                if (tile.faceTop)
+                {
+                    this.context.moveTo(this._tx, this._ty);
+                    this.context.lineTo(this._tx + this.tileWidth, this._ty);
+                }
+
+                if (tile.faceBottom)
+                {
+                    this.context.moveTo(this._tx, this._ty + this.tileHeight);
+                    this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
+                }
+
+                if (tile.faceLeft)
+                {
+                    this.context.moveTo(this._tx, this._ty);
+                    this.context.lineTo(this._tx, this._ty + this.tileHeight);
+                }
+
+                if (tile.faceRight)
+                {
+                    this.context.moveTo(this._tx + this.tileWidth, this._ty);
+                    this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
+                }
+
+                this.context.stroke();
+                // this.context.strokeRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
+            }
+
+            this._tx += this.tileWidth;
+
+        }
+
+        this._tx = this._dx;
+        this._ty += this.tileHeight;
+
+    }
+
+}
+
 /**
 * Returns the absolute delta x value.
 * @method Phaser.TilemapLayer#deltaAbsX

src/tilemap/TilemapParser.js

@@ -16,46 +16,44 @@ Phaser.TilemapParser = {
     * @method Phaser.TilemapParser.tileset
     * @param {Phaser.Game} game - Game reference to the currently running game.
     * @param {string} key - The Cache key of this tileset.
-    * @param {number} tileWidth - Width of the sprite sheet.
+    * @param {number} tileWidth - Width of each single tile in pixels.
-    * @param {number} tileHeight - Height of the sprite sheet.
+    * @param {number} tileHeight - Height of each single tile in pixels.
-    * @param {number} tileMax - How many tiles stored in the sprite sheet.
     * @param {number} [tileMargin=0] - If the tiles have been drawn with a margin, specify the amount here.
     * @param {number} [tileSpacing=0] - If the tiles have been drawn with spacing between them, specify the amount here.
+    * @param {number} [rows=-1] - How many tiles are placed horizontally in each row? If -1 it will calculate rows by dividing the image width by tileWidth.
+    * @param {number} [columns=-1] - How many tiles are placed vertically in each column? If -1 it will calculate columns by dividing the image height by tileHeight.
+    * @param {number} [total=-1] - The maximum number of tiles to extract from the image. If -1 it will extract `rows * columns` worth. You can also set a value lower than the actual number of tiles.
     * @return {Phaser.Tileset} Generated Tileset object.
     */
-    tileset: function (game, key, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
+    tileset: function (game, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
 
         //  How big is our image?
         var img = game.cache.getTilesetImage(key);
 
-        if (img == null)
+        if (img === null)
         {
+            console.warn("Phaser.TilemapParser.tileSet: Invalid image key given");
             return null;
         }
 
         var width = img.width;
         var height = img.height;
 
-        //  If no tile width/height is given, try and figure it out (won't work if the tileset has margin/spacing)
+        if (rows === -1)
-        if (tileWidth <= 0)
         {
-            tileWidth = Math.floor(-width / Math.min(-1, tileWidth));
+            rows = Math.round(width / tileWidth);
         }
 
-        if (tileHeight <= 0)
+        if (columns === -1)
         {
-            tileHeight = Math.floor(-height / Math.min(-1, tileHeight));
+            columns = Math.round(height / tileHeight);
         }
 
-        var row = Math.round(width / tileWidth);
+        if (total === -1)
-        var column = Math.round(height / tileHeight);
+        {
-        var total = row * column;
+            total = rows * columns;
+        }
         
-        if (tileMax !== -1)
-        {
-            total = tileMax;
-        }
-
         //  Zero or smaller than tile sizes?
         if (width === 0 || height === 0 || width < tileWidth || height < tileHeight || total === 0)
         {
@@ -63,11 +61,7 @@ Phaser.TilemapParser = {
             return null;
         }
 
-        //Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, tileMargin, tileSpacing) {
+        return new Phaser.Tileset(img, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total);
-        return new Phaser.Tileset(img, key, total, tileWidth, tileHeight, 1, tileMargin, tileSpacing);
-
-        // tileset.build();
-        // return tileset;
 
     },
 

src/tilemap/Tileset.js

@@ -6,23 +6,21 @@
 
 /**
 * A Tile set is a combination of an image containing the tiles and collision data per tile.
+* You should not normally instantiate this class directly.
 *
 * @class Phaser.Tileset
 * @constructor
 * @param {Image} image - The Image object from the Cache.
 * @param {string} key - The key of the tileset in the cache.
-* @param {number} total - The total number of tiles in the tilesheet.
+* @param {number} tileWidth - Width of each tile in pixels.
-* @param {number} tileWidth - The width of the tile in pixels.
+* @param {number} tileHeight - Height of each tile in pixels.
-* @param {number} tileHeight - The height of the tile in pixels.
+* @param {number} tileMargin - The amount of margin around the tilesheet.
-* @param {number} [firstgid=0] - The first index number (as specified by Tiled, otherwise set to zero)
+* @param {number} tileSpacing - The amount of spacing between each tile in the sheet.
-* @param {number} [tileMargin=0] - The margin around the tiles in the sheet.
+* @param {number} rows - How many tiles are placed horizontally in each row.
-* @param {number} [tileSpacing=0] - The spacing between the tiles in the sheet.
+* @param {number} columns - How many tiles are placed vertically in each column.
+* @param {number} total - The maximum number of tiles to extract from the image.
 */
-Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, tileMargin, tileSpacing) {
+Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
-
-    if (typeof firstgid === "undefined") { firstgid = 0; }
-    if (typeof tileMargin === "undefined") { tileMargin = 0; }
-    if (typeof tileSpacing === "undefined") { tileSpacing = 0; }
 
     /**
     * @property {string} key - The cache ID.
@@ -34,15 +32,26 @@ Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, t
     */
     this.image = image;
 
+    /**
+    * @property {number} rows - The number of rows in the tile sheet.
+    */
+    this.rows = rows;
+
+    /**
+    * @property {number} columns - The number of columns in the tile sheet.
+    */
+    this.columns = columns;
+
     /**
     * @property {number} total - The total number of tiles in the tilesheet.
     */
     this.total = total;
 
     /**
-    * @property {number} firstgid - The total number of tiles in the tilesheet.
+    * @property {number} firstgid - The Tiled firstgid value.
+    * @default
     */
-    this.firstgid = firstgid;
+    this.firstgid = 1;
 
     /**
     * @property {number} tileWidth - The width of a tile in pixels.
@@ -76,7 +85,7 @@ Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, t
 Phaser.Tileset.prototype = {
 
     /**
-    * Builds the tile data
+    * Builds the tileset data.
     *
     * @method Phaser.Tileset#build
     */
@@ -85,6 +94,12 @@ Phaser.Tileset.prototype = {
         var x = this.tileMargin;
         var y = this.tileMargin;
 
+        var count = 0;
+        var countX = 0;
+        var countY = 0;
+
+        console.log('Building tileset', this.rows, 'x', this.columns, 'total', this.total);
+
         for (var i = this.firstgid; i < this.firstgid + this.total; i++)
         {
             //  Can add extra properties here as needed
@@ -92,14 +107,31 @@ Phaser.Tileset.prototype = {
 
             x += this.tileWidth + this.tileSpacing;
 
-            if (x === this.image.width)
+            count++;
+
+            if (count === this.total)
+            {
+                break;
+            }
+
+            countX++;
+
+            if (countX === this.rows)
             {
                 x = this.tileMargin;
                 y += this.tileHeight + this.tileSpacing;
+
+                countX = 0;
+                countY++;
+
+                if (countY === this.columns)
+                {
+                    break;
+                }
             }
         }
 
-        // console.table(this.tiles);
+        console.table(this.tiles);
 
     },