Proper support for multiple tile sizes in a tilemap

- Adds base tile size to Tile class. Tiled positions tiles based on the base size.
- Supports proper translation of Tiled's bottom left coord system to Phaser's top left coord for tiles that are bigger or smaller than the base tile size.
- Update static renderer to read position/size from tile

Author: mikewesthad

v3/src/gameobjects/tilemap/Tile.js

@@ -25,8 +25,14 @@ var Tile = new Class({
      * @param {integer} y - The y coordinate of this tile in tile coordinates.
      * @param {integer} width - Width of the tile in pixels.
      * @param {integer} height - Height of the tile in pixels.
+     * @param {integer} baseWidth - The base width a tile in the map (in pixels). Tiled maps support
+     * multiple tileset sizes within one map, but they are still placed at intervals of the base
+     * tile width.
+     * @param {integer} baseHeight - The base height of the tile in pixels (in pixels). Tiled maps
+     * support multiple tileset sizes within one map, but they are still placed at intervals of the
+     * base tile height.
      */
-    function Tile (layer, index, x, y, width, height)
+    function Tile (layer, index, x, y, width, height, baseWidth, baseHeight)
     {
         /**
          * The LayerData in the Tilemap data that this tile belongs to.
@@ -53,20 +59,6 @@ var Tile = new Class({
          */
         this.y = y;
 
-        /**
-         * The world x coordinate of this tile in pixels. This does not factor in camera scroll,
-         * layer scale or layer position.
-         * @property {number} x
-         */
-        this.worldX = x * width;
-
-        /**
-         * The world y coordinate of this tile in pixels. This does not factor in camera scroll,
-         * layer scale or layer position.
-         * @property {number} y
-         */
-        this.worldY = y * height;
-
         /**
          * The width of the tile in pixels.
          * @property {integer} width
@@ -79,6 +71,37 @@ var Tile = new Class({
          */
         this.height = height;
 
+        /**
+         * The map's base width of a tile in pixels. Tiled maps support multiple tileset sizes
+         * within one map, but they are still placed at intervals of the base tile size.
+         * @property {integer} baseWidth
+         */
+        this.baseWidth = (baseWidth !== undefined) ? baseWidth : width;
+
+        /**
+         * The map's base height of a tile in pixels. Tiled maps support multiple tileset sizes
+         * within one map, but they are still placed at intervals of the base tile size.
+         * @property {integer} baseHeight
+         */
+        this.baseHeight = (baseHeight !== undefined) ? baseHeight : height;
+
+
+        /**
+         * The world x coordinate of the top left of this tile in pixels. This does not factor in
+         * camera scroll, layer scale or layer position.
+         * @property {number} x
+         */
+        this.worldX = 0;
+
+        /**
+         * The world y coordinate of the top left of this tile in pixels. This does not factor in
+         * camera scroll, layer scale or layer position.
+         * @property {number} y
+         */
+        this.worldY = 0;
+
+        this.updateWorldXY();
+
         /**
          * Tile specific properties. These usually come from Tiled.
          * @property {object} properties
@@ -321,14 +344,34 @@ var Tile = new Class({
      *
      * @param {integer} tileWidth - The width of the tile in pixels.
      * @param {integer} tileHeight - The height of the tile in pixels.
+     * @param {integer} baseWidth - The base width a tile in the map (in pixels).
+     * @param {integer} baseHeight - The base height of the tile in pixels (in pixels).
+     * @returns {this}
+     */
+    setSize: function (tileWidth, tileHeight, baseWidth, baseHeight)
+    {
+        if (tileWidth !== undefined) { this.width = tileWidth; }
+        if (tileHeight !== undefined) { this.height = tileHeight; }
+        if (baseWidth !== undefined) { this.baseWidth = baseWidth; }
+        if (baseHeight !== undefined) { this.baseHeight = baseHeight; }
+
+        this.updateWorldXY();
+
+        return this;
+    },
+
+    /**
+     * Used internally. Updates the tile's world XY position based on the current tile size.
+     *
      * @returns {this}
      */
-    setSize: function (tileWidth, tileHeight)
+    updateWorldXY: function ()
     {
-        this.worldX = this.x * tileWidth;
-        this.worldY = this.y * tileHeight;
-        this.width = tileWidth;
-        this.height = tileHeight;
+        // Tiled places tiles on a grid of baseWidth x baseHeight. The origin for a tile is the
+        // bottom left, while the Phaser renderer assumes the origin is the top left. The y
+        // coordinate needs to be adjusted by the difference.
+        this.worldX = this.x * this.baseWidth;
+        this.worldY = this.y * this.baseHeight - (this.height - this.baseHeight);
 
         return this;
     },

v3/src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js

@@ -125,8 +125,6 @@ var StaticTilemapLayer = new Class({
         var tileset = this.tileset;
         var mapWidth = this.layer.width;
         var mapHeight = this.layer.height;
-        var tileWidth = this.layer.tileWidth;
-        var tileHeight = this.layer.tileHeight;
         var width = this.texture.source[0].width;
         var height = this.texture.source[0].height;
         var mapData = this.layer.data;
@@ -170,19 +168,19 @@ var StaticTilemapLayer = new Class({
                         tile = mapData[row][col];
                         if (tile === null || (tile.index <= 0 && this.skipIndexZero)) { continue; }
 
-                        var tx = col * tileWidth;
-                        var ty = row * tileHeight;
-                        var txw = tx + tileWidth;
-                        var tyh = ty + tileHeight;
+                        var tx = tile.worldX;
+                        var ty = tile.worldY;
+                        var txw = tx + tile.width;
+                        var tyh = ty + tile.height;
 
                         texCoords = tileset.getTileTextureCoordinates(tile.index);
                         if (texCoords === null) { continue; }
 
                         // Inset UV coordinates by 0.5px to prevent tile bleeding
                         var u0 = (texCoords.x + 0.5) / width;
                         var v0 = (texCoords.y + 0.5) / height;
-                        var u1 = (texCoords.x + tileWidth - 0.5) / width;
-                        var v1 = (texCoords.y + tileHeight - 0.5) / height;
+                        var u1 = (texCoords.x + tile.width - 0.5) / width;
+                        var v1 = (texCoords.y + tile.height - 0.5) / height;
 
                         var tx0 = tx;
                         var ty0 = ty;