Fixed nearly all of the tilemap examples to use the new tilemap system.

examples/tilemaps/fill tiles.js

@@ -3,15 +3,13 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    // game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
-    game.load.image('tiles', 'assets/tiles/tmw_desert_spacing.png');
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
     game.load.image('car', 'assets/sprites/car90.png');
 
 }
 
 var map;
-var tileset;
 var layer;
 
 var cursors;
@@ -21,12 +19,9 @@ function create() {
 
     map = game.add.tilemap('desert');
 
-    //  The two parameters are: 1) The Tiled
-    map.addTilesetImage('ground_1x1');
+    map.addTilesetImage('Desert', 'tiles');
 
-    tileset = game.add.tileset('tiles');
-    
-    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+    layer = map.createLayer('Ground');
 
     layer.resizeWorld();
 
@@ -43,7 +38,7 @@ function create() {
 
 function fillTiles() {
 
-    map.fill(31, layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+    map.fill(31, layer.getTileX(sprite.x), layer.getTileY(sprite.y), 8, 8);
 
 }
 

examples/tilemaps/mapcollide.js

@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('mario', 'assets/maps/mario1.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('marioTiles', 'assets/maps/mario1.png',16,16);
+    game.load.tilemap('mario', 'assets/tilemaps/maps/super_mario.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/super_mario.png');
     game.load.image('player', 'assets/sprites/phaser-dude.png');
 
 }
@@ -21,30 +21,31 @@ function create() {
 
     map = game.add.tilemap('mario');
 
-    tileset = game.add.tileset('marioTiles');
+    map.addTilesetImage('SuperMarioBros-World1-1', 'tiles');
 
-    //  floor
-    tileset.setCollisionRange(80, 97, true, true, true, true);
-
-    //  one-ways
-    tileset.setCollisionRange(15, 17, true, true, false, true);
-
-    layer = game.add.tilemapLayer(0, 0, map.layers[0].width*tileset.tileWidth, 600, tileset, map, 0);
-
-    layer.fixedToCamera=false;
- 
-    layer.resizeWorld();
+    //  14 = ? block
+    // map.setCollisionBetween(14, 15);
 
+    map.setCollisionBetween(15, 16);
+    map.setCollisionBetween(20, 25);
+    map.setCollisionBetween(27, 29);
+    map.setCollision(40);
     
+    layer = map.createLayer('World1');
+
+    //  Un-comment this on to see the collision tiles
+    // layer.debug = true;
+
+    layer.resizeWorld();
 
     p = game.add.sprite(32, 32, 'player');
 
-    p.body.gravity.y = 10;
-    p.body.bounce.y = 0.4;
+    game.physics.gravity.y = 250;
+
+    p.body.bounce.y = 0.2;
+    p.body.friction = 1;
     p.body.collideWorldBounds = true;
 
-
-
     game.camera.follow(p);
 
     cursors = game.input.keyboard.createCursorKeys();
@@ -53,7 +54,7 @@ function create() {
 
 function update() {
 
-    game.physics.collide(p,layer);
+    game.physics.collide(p, layer);
 
     p.body.velocity.x = 0;
 
@@ -61,13 +62,9 @@ function update() {
     {
         if (p.body.touching.down)
         {
-            p.body.velocity.y = -400;
+            p.body.velocity.y = -200;
         }
     }
-    else if (cursors.down.isDown)
-    {
-        // game.camera.y += 4;
-    }
 
     if (cursors.left.isDown)
     {
@@ -82,8 +79,7 @@ function update() {
 
 function render() {
 
-    game.debug.renderCameraInfo(game.camera, 32, 32);
-    // game.debug.renderSpriteCorners(p);
+    game.debug.renderCameraInfo(game.camera, 420, 320);
     game.debug.renderSpriteCollision(p, 32, 320);
 
 }

examples/tilemaps/paint tiles.js

@@ -3,25 +3,26 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
 
 }
 
 var map;
-var tileset;
 var layer;
 
 var marker;
-var currentTile = 0;
+var currentTile;
 
 function create() {
 
     map = game.add.tilemap('desert');
 
-    tileset = game.add.tileset('tiles');
-    
-    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+    map.addTilesetImage('Desert', 'tiles');
+
+    currentTile = map.getTile(2, 3);
+
+    layer = map.createLayer('Ground');
 
     layer.resizeWorld();
 

examples/tilemaps/randomise tiles.js

@@ -3,29 +3,33 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
     game.load.image('car', 'assets/sprites/car90.png');
 
 }
 
 var map;
-var tileset;
 var layer;
 
 var cursors;
 var sprite;
+var marker;
 
 function create() {
 
     map = game.add.tilemap('desert');
 
-    tileset = game.add.tileset('tiles');
-    
-    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+    map.addTilesetImage('Desert', 'tiles');
+
+    layer = map.createLayer('Ground');
 
     layer.resizeWorld();
 
+    marker = game.add.graphics();
+    marker.lineStyle(2, 0x00bff3, 1);
+    marker.drawRect(0, 0, 32 * 6, 32 * 6);
+
     sprite = game.add.sprite(450, 80, 'car');
     sprite.anchor.setTo(0.5, 0.5);
 
@@ -33,24 +37,21 @@ function create() {
 
     cursors = game.input.keyboard.createCursorKeys();
 
+
     game.input.onDown.add(randomiseTiles, this);
 
 }
 
 function randomiseTiles() {
 
-    //  This will replace every instance of tile 31 (cactus plant) with tile 46 (the sign post).
-    //  It does this across the whole layer of the map unless a region is specified.
-
-    //  You can also pass in x, y, width, height values to control the area in which the replace happens
-
-    map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+    map.random(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
 
 }
 
 function update() {
 
-    game.physics.collide(sprite, layer);
+    marker.x = layer.getTileX(sprite.x) * 32;
+    marker.y = layer.getTileY(sprite.y) * 32;
 
     sprite.body.velocity.x = 0;
     sprite.body.velocity.y = 0;

examples/tilemaps/replace tiles.js

@@ -3,14 +3,13 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
     game.load.image('car', 'assets/sprites/car90.png');
 
 }
 
 var map;
-var tileset;
 var layer;
 
 var cursors;
@@ -20,9 +19,9 @@ function create() {
 
     map = game.add.tilemap('desert');
 
-    tileset = game.add.tileset('tiles');
-    
-    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+    map.addTilesetImage('Desert', 'tiles');
+
+    layer = map.createLayer('Ground');
 
     layer.resizeWorld();
 
@@ -50,8 +49,6 @@ function replaceTiles() {
 
 function update() {
 
-    game.physics.collide(sprite, layer);
-
     sprite.body.velocity.x = 0;
     sprite.body.velocity.y = 0;
     sprite.body.angularVelocity = 0;

examples/tilemaps/shuffle tiles.js

@@ -0,0 +1,82 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
+    game.load.image('car', 'assets/sprites/car90.png');
+
+}
+
+var map;
+var layer;
+
+var cursors;
+var sprite;
+var marker;
+
+function create() {
+
+    map = game.add.tilemap('desert');
+
+    map.addTilesetImage('Desert', 'tiles');
+
+    layer = map.createLayer('Ground');
+
+    layer.resizeWorld();
+
+    marker = game.add.graphics();
+    marker.lineStyle(2, 0x00bff3, 1);
+    marker.drawRect(0, 0, 32 * 6, 32 * 6);
+
+    sprite = game.add.sprite(450, 80, 'car');
+    sprite.anchor.setTo(0.5, 0.5);
+
+    game.camera.follow(sprite);
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+
+    game.input.onDown.add(randomiseTiles, this);
+
+}
+
+function randomiseTiles() {
+
+    map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+
+}
+
+function update() {
+
+    marker.x = layer.getTileX(sprite.x) * 32;
+    marker.y = layer.getTileY(sprite.y) * 32;
+
+    sprite.body.velocity.x = 0;
+    sprite.body.velocity.y = 0;
+    sprite.body.angularVelocity = 0;
+
+    if (cursors.left.isDown)
+    {
+        sprite.body.angularVelocity = -200;
+    }
+    else if (cursors.right.isDown)
+    {
+        sprite.body.angularVelocity = 200;
+    }
+
+    if (cursors.up.isDown)
+    {
+        sprite.body.velocity.copyFrom(game.physics.velocityFromAngle(sprite.angle, 300));
+    }
+
+}
+
+function render() {
+
+    game.debug.renderText('Click to randomise tiles', 32, 32, 'rgb(0,0,0)');
+    game.debug.renderText('Tile X: ' + layer.getTileX(sprite.x), 32, 48, 'rgb(0,0,0)');
+    game.debug.renderText('Tile Y: ' + layer.getTileY(sprite.y), 32, 64, 'rgb(0,0,0)');
+
+}

examples/tilemaps/swap tiles.js

@@ -3,14 +3,13 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 
 function preload() {
 
-    game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
+    game.load.tilemap('desert', 'assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.image('tiles', 'assets/tilemaps/tiles/tmw_desert_spacing.png');
     game.load.image('car', 'assets/sprites/car90.png');
 
 }
 
 var map;
-var tileset;
 var layer;
 
 var cursors;
@@ -20,9 +19,9 @@ function create() {
 
     map = game.add.tilemap('desert');
 
-    tileset = game.add.tileset('tiles');
-    
-    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+    map.addTilesetImage('Desert', 'tiles');
+
+    layer = map.createLayer('Ground');
 
     layer.resizeWorld();
 
@@ -50,8 +49,6 @@ function swapTiles() {
 
 function update() {
 
-    game.physics.collide(sprite, layer);
-
     sprite.body.velocity.x = 0;
     sprite.body.velocity.y = 0;
     sprite.body.angularVelocity = 0;

src/physics/arcade/ArcadePhysics.js

@@ -544,6 +544,7 @@ Phaser.Physics.Arcade.prototype = {
         else
         {
             var i = 0;
+
             if (this.separateTile(sprite.body, this._mapData[i]))
             {
                 //  They collided, is there a custom process callback?
@@ -969,8 +970,8 @@ Phaser.Physics.Arcade.prototype = {
     /**
     * The core separation function to separate a physics body and an array of tiles.
     * @method Phaser.Physics.Arcade#separateTiles
-    * @param {Phaser.Physics.Arcade.Body} body1 - The Body object to separate.
-    * @param {Phaser.Tile} tile - The tile to collide against.
+    * @param {Phaser.Physics.Arcade.Body} body - The Body object to separate.
+    * @param {<Phaser.Tile>array} tiles - The array of tiles to collide against.
     * @returns {boolean} Returns true if the bodies were separated, otherwise false.
     */
     separateTiles: function (body, tiles) {
@@ -1068,7 +1069,6 @@ Phaser.Physics.Arcade.prototype = {
             return false;
         }
 
-        // if (body.overlapX !== 0)
         if (body.touching.left || body.touching.right)
         {
             body.x -= body.overlapX;
@@ -1084,7 +1084,6 @@ Phaser.Physics.Arcade.prototype = {
             }
         }
 
-        // if (body.overlapY !== 0)
         if (body.touching.up || body.touching.down)
         {
             body.y -= body.overlapY;

src/tilemap/Tile.js

@@ -19,7 +19,7 @@
 Phaser.Tile = function (index, x, y, width, height) {
 
     /**
-    * @property {number} index - The index of this tile within the map.
+    * @property {number} index - The index of this tile within the map data corresponding to the tileset.
     */
     this.index = index;
     
@@ -127,7 +127,7 @@ Phaser.Tile = function (index, x, y, width, height) {
     this.collisionCallback = null;
 
     /**
-    * @property {boolean} collisionCallback - Tilemap collision callback.
+    * @property {boolean} collisionCallback - Tilemap collision callback context.
     * @default
     */
     this.collisionCallbackContext = this;
@@ -200,6 +200,27 @@ Phaser.Tile.prototype = {
         this.collideUp = false;
         this.collideDown = false;
 
+    },
+
+    /**
+    * Copies the tile data and properties from the given tile to this tile.
+    * @method Phaser.Tile#copy
+    * @param {Phaser.Tile} tile - The tile to copy from.
+    */
+    copy: function (tile) {
+
+        this.index = tile.index;
+        this.alpha = tile.alpha;
+        this.properties = tile.properties;
+        this.collides = tile.collides;
+        this.collideNone = tile.collideNone;
+        this.collideUp = tile.collideUp;
+        this.collideDown = tile.collideDown;
+        this.collideLeft = tile.collideLeft;
+        this.collideRight = tile.collideRight;
+        this.collisionCallback = tile.collisionCallback;
+        this.collisionCallbackContext = tile.collisionCallbackContext;
+
     }
 
 };

src/tilemap/Tilemap.js

@@ -153,6 +153,14 @@ Phaser.Tilemap.prototype = {
 
     },
 
+    /**
+    * Adds an image to the map to be used as a tileset. A single map may use multiple tilesets.
+    * Note that the tileset name can be found in the JSON file exported from Tiled, or in the Tiled editor.
+    *
+    * @method Phaser.Tilemap#addTilesetImage
+    * @param {string} tileset - The name of the tileset as specified in the map data.
+    * @param {string} [key] - The key of the Phaser.Cache image used for this tileset. If not specified it will look for an image with a key matching the tileset parameter.
+    */
     addTilesetImage: function (tileset, key) {
 
         if (typeof key === 'undefined')
@@ -275,9 +283,10 @@ Phaser.Tilemap.prototype = {
     },
 
     /**
-    * Gets the layer index based on a layer name.
+    * Gets the layer index based on the layers name.
     *
     * @method Phaser.Tileset#getIndex
+    * @protected
     * @param {array} location - The local array to search.
     * @param {string} name - The name of the array element to get.
     * @return {number} The index of the element in the array, or null if not found.
@@ -348,8 +357,6 @@ Phaser.Tilemap.prototype = {
 
     },
 
-    //  TODO - set collision in an area, REMOVE collision
-
     /**
     * Sets collision on all tiles in the given layer, except for the IDs of those in the given array.
     *
@@ -489,6 +496,7 @@ Phaser.Tilemap.prototype = {
     * Internal function.
     *
     * @method Phaser.Tileset#calculateFaces
+    * @protected
     * @param {number} layer - The layer to operate on.
     */
     calculateFaces: function (layer) {
@@ -636,31 +644,60 @@ Phaser.Tilemap.prototype = {
     /**
     * Puts a tile of the given index value at the coordinate specified.
     * @method Phaser.Tilemap#putTile
-    * @param {number} index - The index of this tile to set.
+    * @param {Phaser.Tile|number} tile - The index of this tile to set or a Phaser.Tile object.
     * @param {number} x - X position to place the tile (given in tile units, not pixels)
     * @param {number} y - Y position to place the tile (given in tile units, not pixels)
     * @param {number} [layer] - The Tilemap Layer to operate on.
     */
-    putTile: function (index, x, y, layer) {
+    putTile: function (tile, x, y, layer) {
 
         if (typeof layer === "undefined") { layer = this.currentLayer; }
 
         if (x >= 0 && x < this.layers[layer].width && y >= 0 && y < this.layers[layer].height)
         {
-            this.layers[layer].data[y][x] = index;
+            if (tile instanceof Phaser.Tile)
+            {
+                this.layers[layer].data[y][x].copy(tile);
+            }
+            else
+            {
+                this.layers[layer].data[y][x].index = index;
+            }
+
 			this.layers[layer].dirty = true;
             this.calculateFaces(layer);
         }
 
     },
 
+    /**
+    * Puts a tile into the Tilemap layer. The coordinates are given in pixel values.
+    * @method Phaser.Tilemap#putTileWorldXY
+    * @param {Phaser.Tile|number} tile - The index of this tile to set or a Phaser.Tile object.
+    * @param {number} x - X position to insert the tile (given in pixels)
+    * @param {number} y - Y position to insert the tile (given in pixels)
+    * @param {number} tileWidth - The width of the tile in pixels.
+    * @param {number} tileHeight - The height of the tile in pixels.
+    * @param {number} [layer] - The Tilemap Layer to operate on.
+    */
+    putTileWorldXY: function (index, x, y, tileWidth, tileHeight, layer) {
+
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
+        y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
+
+        this.putTile(tile, x, y, layer);
+
+    },
+
     /**
     * Gets a tile from the Tilemap Layer. The coordinates are given in tile values.
     * @method Phaser.Tilemap#getTile
     * @param {number} x - X position to get the tile from (given in tile units, not pixels)
     * @param {number} y - Y position to get the tile from (given in tile units, not pixels)
     * @param {number} [layer] - The Tilemap Layer to operate on.
-    * @return {number} The index of the tile at the given coordinates.
+    * @return {Phaser.Tile} The tile at the given coordinates.
     */
     getTile: function (x, y, layer) {
 
@@ -679,7 +716,7 @@ Phaser.Tilemap.prototype = {
     * @param {number} x - X position to get the tile from (given in pixels)
     * @param {number} y - Y position to get the tile from (given in pixels)
     * @param {number} [layer] - The Tilemap Layer to operate on.
-    * @return {number} The index of the tile at the given coordinates.
+    * @return {Phaser.Tile} The tile at the given coordinates.
     */
     getTileWorldXY: function (x, y, tileWidth, tileHeight, layer) {
 
@@ -695,32 +732,6 @@ Phaser.Tilemap.prototype = {
 
     },
 
-    /**
-    * Puts a tile into the Tilemap layer. The coordinates are given in pixel values.
-    * @method Phaser.Tilemap#putTileWorldXY
-    * @param {number} index - The index of the tile to put into the layer.
-    * @param {number} x - X position to insert the tile (given in pixels)
-    * @param {number} y - Y position to insert the tile (given in pixels)
-    * @param {number} tileWidth - The width of the tile in pixels.
-    * @param {number} tileHeight - The height of the tile in pixels.
-    * @param {number} [layer] - The Tilemap Layer to operate on.
-    */
-    putTileWorldXY: function (index, x, y, tileWidth, tileHeight, layer) {
-
-        if (typeof layer === "undefined") { layer = this.currentLayer; }
-
-        x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
-        y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
-
-        if (x >= 0 && x < this.layers[layer].width && y >= 0 && y < this.layers[layer].height)
-        {
-            this.layers[layer].data[y][x] = index;
-			this.layers[layer].dirty = true;
-            this.calculateFaces(layer);
-        }
-
-    },
-
     /**
     * Copies all of the tiles in the given rectangular block into the tilemap data buffer.
     * @method Phaser.Tilemap#copy
@@ -774,7 +785,7 @@ Phaser.Tilemap.prototype = {
         {
             for (var tx = x; tx < x + width; tx++)
             {
-                this._results.push({ x: tx, y: ty, index: this.layers[layer].data[ty][tx] });
+                this._results.push(this.layers[layer].data[ty][tx]);
             }
         }
 
@@ -807,7 +818,7 @@ Phaser.Tilemap.prototype = {
 
         for (var i = 1; i < tileblock.length; i++)
         {
-            this.layers[layer].data[ diffY + tileblock[i].y ][ diffX + tileblock[i].x ] = tileblock[i].index;
+            this.layers[layer].data[ diffY + tileblock[i].y ][ diffX + tileblock[i].x ].copy(tileblock[i]);
         }
 
 		this.layers[layer].dirty = true;
@@ -827,6 +838,8 @@ Phaser.Tilemap.prototype = {
     */
     swap: function (tileA, tileB, x, y, width, height, layer) {
 
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
         this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
@@ -839,7 +852,7 @@ Phaser.Tilemap.prototype = {
 
         this._results.forEach(this.swapHandler, this);
 
-        this.paste(x, y, this._results);
+        this.paste(x, y, this._results, layer);
 
     },
 
@@ -875,6 +888,8 @@ Phaser.Tilemap.prototype = {
     */
     forEach: function (callback, context, x, y, width, height, layer) {
 
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
         this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
@@ -884,7 +899,7 @@ Phaser.Tilemap.prototype = {
 
         this._results.forEach(callback, context);
 
-        this.paste(x, y, this._results);
+        this.paste(x, y, this._results, layer);
 
     },
 
@@ -901,6 +916,8 @@ Phaser.Tilemap.prototype = {
     */
     replace: function (tileA, tileB, x, y, width, height, layer) {
 
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
         this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
@@ -916,15 +933,13 @@ Phaser.Tilemap.prototype = {
             }
         }
 
-        this.paste(x, y, this._results);
+        this.paste(x, y, this._results, layer);
 
     },
 
     /**
     * Randomises a set of tiles in a given area.
     * @method Phaser.Tilemap#random
-    * @param {number} tileA - First tile index.
-    * @param {number} tileB - Second tile index.
     * @param {number} x - X position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} y - Y position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} width - The width in tiles of the area to operate on.
@@ -946,11 +961,14 @@ Phaser.Tilemap.prototype = {
 
         for (var t = 1; t < this._results.length; t++)
         {
-            var idx = this._results[t].index;
-
-            if (indexes.indexOf(idx) === -1)
+            if (this._results[t].index)
             {
-                indexes.push(idx);
+                var idx = this._results[t].index;
+
+                if (indexes.indexOf(idx) === -1)
+                {
+                    indexes.push(idx);
+                }
             }
         }
 
@@ -959,15 +977,13 @@ Phaser.Tilemap.prototype = {
             this._results[i].index = this.game.rnd.pick(indexes);
         }
 
-        this.paste(x, y, this._results);
+        this.paste(x, y, this._results, layer);
 
     },
 
     /**
     * Shuffles a set of tiles in a given area. It will only randomise the tiles in that area, so if they're all the same nothing will appear to have changed!
     * @method Phaser.Tilemap#shuffle
-    * @param {number} tileA - First tile index.
-    * @param {number} tileB - Second tile index.
     * @param {number} x - X position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} y - Y position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} width - The width in tiles of the area to operate on.
@@ -985,20 +1001,31 @@ Phaser.Tilemap.prototype = {
             return;
         }
 
-        var header = this._results.shift();
+        var indexes = [];
 
-        Phaser.Utils.shuffle(this._results);
+        for (var t = 1; t < this._results.length; t++)
+        {
+            if (this._results[t].index)
+            {
+                indexes.push(this._results[t].index);
+            }
+        }
 
-        this._results.unshift(header);
+        Phaser.Utils.shuffle(indexes);
 
-        this.paste(x, y, this._results);
+        for (var i = 1; i < this._results.length; i++)
+        {
+            this._results[i].index = indexes[i - 1];
+        }
+
+        this.paste(x, y, this._results, layer);
 
     },
 
     /**
-    * Fill a block with a specific tile index.
+    * Fills the given area with the specified tile.
     * @method Phaser.Tilemap#fill
-    * @param {number} index - Index of tiles you want to fill with.
+    * @param {number} index - The index of the tile that the area will be filled with.
     * @param {number} x - X position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} y - Y position of the top left of the area to operate one, given in tiles, not pixels.
     * @param {number} width - The width in tiles of the area to operate on.
@@ -1007,6 +1034,8 @@ Phaser.Tilemap.prototype = {
     */
     fill: function (index, x, y, width, height, layer) {
 
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
         this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
@@ -1019,7 +1048,7 @@ Phaser.Tilemap.prototype = {
             this._results[i].index = index;
         }
 
-        this.paste(x, y, this._results);
+        this.paste(x, y, this._results, layer);
 
     },
 

src/tilemap/TilemapLayer.js

@@ -88,7 +88,7 @@ Phaser.TilemapLayer = function (game, tilemap, index, width, height) {
     this.cameraOffset = new Phaser.Point(0, 0);
 
     /**
-    * @property {string} tileColor - If no tile set is given the tiles will be rendered as rectangles in this color. Provide in hex or rgb/rgba string format.
+    * @property {string} tileColor - If no tileset is given the tiles will be rendered as rectangles in this color. Provide in hex or rgb/rgba string format.
     * @default
     */
     this.tileColor = 'rgb(255, 255, 255)';

src/tilemap/TilemapParser.js

@@ -314,8 +314,8 @@ Phaser.TilemapParser = {
                 newSet.tileProperties = set.tileproperties;
             }
 
-            newSet.rows = set.imageheight / set.tileheight;
-            newSet.columns = set.imagewidth / set.tilewidth;
+            newSet.rows = (set.imageheight - set.margin) / (set.tileheight + set.spacing);
+            newSet.columns = (set.imagewidth - set.margin) / (set.tilewidth + set.spacing);
             newSet.total = newSet.rows * newSet.columns;
 
             tilesets.push(newSet);