Tilemap - Tiled image size calculation

Addresses phaserjs#1371 - where Tiled
used floor calculations and Phaser used round calculations.

There are no breaking changes with the demos; however, if there was code
that relied on behavior that _deviated_ from the defactor Tilemap behavior
then may be prone to "incorrect results" if using tileset images that are
not correctly aligned to tilesize multiples.

This also adds/corrects some warnings:
- A warning when the tileset size is not an even multiple (it was
  suppressed due to using `round` prior to the checks.
- A warning if loading an image changes the cols/rows of a Tileset
- A specific warning for Tileset Image Collections which are not yet
  supported

Author: pnstickne

src/tilemap/TilemapParser.js

@@ -189,7 +189,7 @@ Phaser.TilemapParser = {
 
         if (json.orientation !== 'orthogonal')
         {
-            console.warn('TilemapParser.parseTiledJSON: Only orthogonal map types are supported in this version of Phaser');
+            console.warn('TilemapParser.parseTiledJSON - Only orthogonal map types are supported in this version of Phaser');
             return null;
         }
 
@@ -320,25 +320,27 @@ Phaser.TilemapParser = {
         {
             //  name, firstgid, width, height, margin, spacing, properties
             var set = json.tilesets[i];
-            var newSet = new Phaser.Tileset(set.name, set.firstgid, set.tilewidth, set.tileheight, set.margin, set.spacing, set.properties);
 
-            if (set.tileproperties)
+            if (!set.tiles)
             {
-                newSet.tileProperties = set.tileproperties;
-            }
+                var newSet = new Phaser.Tileset(set.name, set.firstgid, set.tilewidth, set.tileheight, set.margin, set.spacing, set.properties);
 
-            newSet.rows = Math.round((set.imageheight - set.margin) / (set.tileheight + set.spacing));
-            newSet.columns = Math.round((set.imagewidth - set.margin) / (set.tilewidth + set.spacing));
-            newSet.total = newSet.rows * newSet.columns;
+                if (set.tileproperties)
+                {
+                    newSet.tileProperties = set.tileproperties;
+                }
 
-            if (newSet.rows % 1 !== 0 || newSet.columns % 1 !== 0)
-            {
-                console.warn('TileSet image dimensions do not match expected dimensions. Tileset width/height must be evenly divisible by Tilemap tile width/height.');
+                // For a normal sliced tileset the row/count/size information is computed when updated.
+                // This is done (again) after the image is set.
+                newSet.updateTileData(set.imagewidth, set.imageheight);
+                tilesets.push(newSet);
             }
             else
             {
-                tilesets.push(newSet);
+                // TODO: Handle Tileset Image Collections (multiple images in a tileset, no slicing into each image)
+                console.warn("Phaser.TilemapParser - Image Collection Tilesets are not support");
             }
+
         }
 
         map.tilesets = tilesets;

src/tilemap/Tileset.js

@@ -66,6 +66,7 @@ Phaser.Tileset = function (name, firstgid, width, height, margin, spacing, prope
     * The spacing between each tile in the sheet (in pixels).
     * Use `setSpacing` to change.
     * @property {integer} tileSpacing
+    * @readonly
     */
     this.tileSpacing = spacing | 0;
 
@@ -76,31 +77,31 @@ Phaser.Tileset = function (name, firstgid, width, height, margin, spacing, prope
     this.properties = properties || {};
 
     /**
-    * The cached image that contains the individual tiles. Use `setImage` to set.
+    * The cached image that contains the individual tiles. Use {@link Phaser.Tileset.setImage setImage} to set.
     * @property {?object} image
     * @readonly
     */
     // Modified internally
     this.image = null;
 
     /**
-    * The number of rows in the tile sheet.
+    * The number of tile rows in the the tileset.
     * @property {integer}
     * @readonly
     */
     // Modified internally
     this.rows = 0;
 
     /**
-    * The number of columns in the sheet.
+    * The number of tile columns in the tileset.
     * @property {integer} columns
     * @readonly
     */
     // Modified internally
     this.columns = 0;
 
     /**
-    * The total number of tiles in the sheet.
+    * The total number of tiles in the tileset.
     * @property {integer} total
     * @readonly
     */
@@ -178,7 +179,7 @@ Phaser.Tileset.prototype = {
     setImage: function (image) {
 
         this.image = image;
-        this.updateTileData();
+        this.updateTileData(image.width, image.height);
 
     },
 
@@ -195,7 +196,10 @@ Phaser.Tileset.prototype = {
         this.tileMargin = margin | 0;
         this.tileSpacing = spacing | 0;
 
-        this.updateTileData();
+        if (this.image)
+        {
+            this.updateTileData(this.image.width, this.image.height);
+        }
 
     },
 
@@ -204,13 +208,33 @@ Phaser.Tileset.prototype = {
     *
     * @method Phaser.Tileset#updateTileData
     * @private
+    * @param {integer} imageWidth - The (expected) width of the image to slice.
+    * @param {integer} imageHeight - The (expected) height of the image to slice.
     */
-    updateTileData: function () {
+    updateTileData: function (imageWidth, imageHeight) {
+
+        // May be fractional values
+        var rowCount = (imageHeight - this.tileMargin) / (this.tileHeight + this.tileSpacing);
+        var colCount = (imageWidth - this.tileMargin) / (this.tileWidth + this.tileSpacing);
+
+        if (rowCount % 1 !== 0 || colCount % 1 !== 0)
+        {
+            console.warn("Phaser.Tileset - image tile area is not an even multiple of tile size");
+        }
+
+        // In Tiled a tileset image that is not an even multiple of the tile dimensions
+        // is truncated - hence the floor when calculating the rows/columns.
+        rowCount = Math.floor(rowCount);
+        colCount = Math.floor(colCount);
+
+        if ((this.rows && this.rows !== rowCount) || (this.columns && this.columns !== colCount))
+        {
+            console.warn("Phaser.Tileset - actual and expected number of tile rows and columns differ");
+        }
 
-        var image = this.image;
-        this.rows = Math.round((image.height - this.tileMargin) / (this.tileHeight + this.tileSpacing));
-        this.columns = Math.round((image.width - this.tileMargin) / (this.tileWidth + this.tileSpacing));
-        this.total = this.rows * this.columns;
+        this.rows = rowCount;
+        this.columns = colCount;
+        this.total = rowCount * colCount;
 
         this.drawCoords.length = 0;