More tilemap examples

examples/tilemaps/fill tiles.php

@@ -0,0 +1,88 @@
+<?php
+    $title = "Filling a region of a tilemap";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    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('car', 'assets/sprites/car90.png');
+
+    }
+
+    var map;
+    var tileset;
+    var layer;
+
+    var cursors;
+    var sprite;
+
+    function create() {
+
+        map = game.add.tilemap('desert');
+
+        tileset = game.add.tileset('tiles');
+        
+        layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+ 
+        layer.resizeWorld();
+
+        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(fillTiles, this);
+
+    }
+
+    function fillTiles() {
+
+        map.fill(31, layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+
+    }
+
+    function update() {
+
+        game.physics.collide(sprite, layer);
+
+        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 fill 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)');
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tilemaps/randomise tiles.php

@@ -0,0 +1,93 @@
+<?php
+    $title = "Set tiles in an area to be random";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    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('car', 'assets/sprites/car90.png');
+
+    }
+
+    var map;
+    var tileset;
+    var layer;
+
+    var cursors;
+    var sprite;
+
+    function create() {
+
+        map = game.add.tilemap('desert');
+
+        tileset = game.add.tileset('tiles');
+        
+        layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+ 
+        layer.resizeWorld();
+
+        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() {
+
+        //  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.random(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+
+    }
+
+    function update() {
+
+        game.physics.collide(sprite, layer);
+
+        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)');
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tilemaps/replace tiles.php

@@ -0,0 +1,93 @@
+<?php
+    $title = "Replacing one kind of tile with another";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    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('car', 'assets/sprites/car90.png');
+
+    }
+
+    var map;
+    var tileset;
+    var layer;
+
+    var cursors;
+    var sprite;
+
+    function create() {
+
+        map = game.add.tilemap('desert');
+
+        tileset = game.add.tileset('tiles');
+        
+        layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+ 
+        layer.resizeWorld();
+
+        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.addOnce(replaceTiles, this);
+
+    }
+
+    function replaceTiles() {
+
+        //  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.replace(31, 46);
+
+    }
+
+    function update() {
+
+        game.physics.collide(sprite, layer);
+
+        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 replace 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)');
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tilemaps/swap tiles.php

@@ -0,0 +1,93 @@
+<?php
+    $title = "Swapping the places of two tiles across the map";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    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('car', 'assets/sprites/car90.png');
+
+    }
+
+    var map;
+    var tileset;
+    var layer;
+
+    var cursors;
+    var sprite;
+
+    function create() {
+
+        map = game.add.tilemap('desert');
+
+        tileset = game.add.tileset('tiles');
+        
+        layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+ 
+        layer.resizeWorld();
+
+        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.addOnce(swapTiles, this);
+
+    }
+
+    function swapTiles() {
+
+        //  This will swap every instance of tile 30 (empty ground) with tile 31 (the cactus plant), it also does the opposite,
+        //  so tile 31 (cactus plants) will become empty ground (tile 30). It does this across the whole layer of the map.
+
+        //  You can also pass in x, y, width, height values to control the area in which the swap happens
+
+        map.swap(30, 31);
+
+    }
+
+    function update() {
+
+        game.physics.collide(sprite, layer);
+
+        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 swap 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)');
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

src/loader/Cache.js

@@ -133,15 +133,17 @@ Phaser.Cache.prototype = {
     * @param {number} tileWidth - Width of the sprite sheet.
     * @param {number} tileHeight - Height of the sprite sheet.
     * @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.
     */
-    addTileset: function (key, url, data, tileWidth, tileHeight, tileMax) {
+    addTileset: function (key, url, data, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
 
-        this._tilesets[key] = { url: url, data: data, tileWidth: tileWidth, tileHeight: tileHeight };
+        this._tilesets[key] = { url: url, data: data, tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing };
 
         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);
+        this._tilesets[key].tileData = Phaser.TilemapParser.tileset(this.game, key, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing);
 
     },
 

src/loader/Loader.js

@@ -308,14 +308,18 @@ Phaser.Loader.prototype = {
 	* @param {number} tileWidth - Width of each single tile in pixels.
 	* @param {number} tileHeight - Height of each single tile in pixels.
 	* @param {number} [tileMax=-1] - How many tiles in this tileset. If not specified it will divide the whole image into tiles.
+	* @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.
 	*/
-	tileset: function (key, url, tileWidth, tileHeight, tileMax) {
+	tileset: function (key, url, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
 
 		if (typeof tileMax === "undefined") { tileMax = -1; }
+		if (typeof tileMargin === "undefined") { tileMargin = 0; }
+		if (typeof tileSpacing === "undefined") { tileSpacing = 0; }
 
 		if (this.checkKeyExists(key) === false)
 		{
-			this.addToFileList('tileset', key, url, { tileWidth: tileWidth, tileHeight: tileHeight, tileMax: tileMax });
+			this.addToFileList('tileset', key, url, { tileWidth: tileWidth, tileHeight: tileHeight, tileMax: tileMax, tileMargin: tileMargin, tileSpacing: tileSpacing });
 		}
 
 		return this;
@@ -840,47 +844,9 @@ Phaser.Loader.prototype = {
 
 			case 'tileset':
 
-				this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMax);
+				this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMax, file.tileMargin, file.tileSpacing);
 				break;
 
-				/*
-			case 'tilemap':
-
-				file.data = this._xhr.response;
-				this.game.cache.addTilemap(file.key, file.url, file.data, file.format);
-
-				if (file.mapDataURL == null)
-				{
-					this.game.cache.addTilemap(file.key, file.url, file.data, file.mapData, file.format);
-				}
-				else
-				{
-					//  Load the JSON or CSV before carrying on with the next file
-					loadNext = false;
-					this._xhr.open("GET", this.baseURL + file.mapDataURL, true);
-					this._xhr.responseType = "text";
-
-					if (file.format == Phaser.Tilemap.JSON)
-					{
-						this._xhr.onload = function () {
-							return _this.jsonLoadComplete(file.key);
-						};
-					}
-					else if (file.format == Phaser.Tilemap.CSV)
-					{
-						this._xhr.onload = function () {
-							return _this.csvLoadComplete(file.key);
-						};
-					}
-
-					this._xhr.onerror = function () {
-						return _this.dataLoadError(file.key);
-					};
-					this._xhr.send();
-				}
-				break;
-				*/
-
 			case 'textureatlas':
 
 				if (file.atlasURL == null)

src/tilemap/Tilemap.js

@@ -25,6 +25,12 @@ Phaser.Tilemap = function (game, key) {
 
     this.debugMap = [];
 
+    this.dirty = false;
+
+    this._results = [];
+    this._tempA = 0;
+    this._tempB = 0;
+
 };
 
 Phaser.Tilemap.CSV = 0;
@@ -60,6 +66,8 @@ Phaser.Tilemap.prototype = {
 
         });
 
+        this.dirty = true;
+
     },
 
     setLayer: function (layer) {
@@ -71,31 +79,6 @@ Phaser.Tilemap.prototype = {
 
     },
 
-    createLayerSprite: function (tilset) {
-
-    	//	Creates a TilemapLayer which you can add to the display list
-    	//	Hooked to a specific layer within the map data
-
-
-    },
-
-    /**
-    * Get the tile located at specific position (in world coordinate) and layer (thus you give a position of a point which is within the tile).
-    * @param {number} x - X position of the point in target tile.
-    * @param {number} y - Y position of the point in target tile.
-    * @param {number} [layer] - layer of this tile located.
-    * @return {Tile} The tile with specific properties.
-    */
-    getTileFromWorldXY: function (x, y, layer) {
-
-        if (typeof layer === "undefined") { layer = this.currentLayer; }
-
-
-
-        // return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
-
-    },
-
     /**
     * Set a specific tile with its x and y in tiles.
     * @method putTile
@@ -110,6 +93,8 @@ Phaser.Tilemap.prototype = {
     		this.layers[this.currentLayer].data[y][x] = index;
     	}
 
+        this.dirty = true;
+
     },
 
     /**
@@ -129,13 +114,237 @@ Phaser.Tilemap.prototype = {
             this.layers[this.currentLayer].data[y][x] = index;
         }
 
+        this.dirty = true;
+
     },
 
+    //  Values are in TILEs, not pixels.
+    getTiles: function (x, y, width, height, layer) {
 
-    //  swapTile
-    //  fillTile
-    //  randomiseTiles
-    //  replaceTiles
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        if (!this.layers[layer])
+        {
+            this._results.length = 0;
+            return;
+        }
+
+        if (typeof x === "undefined") { x = 0; }
+        if (typeof y === "undefined") { y = 0; }
+        if (typeof width === "undefined") { width = this.layers[layer].width; }
+        if (typeof height === "undefined") { height = this.layers[layer].height; }
+
+        if (x < 0)
+        {
+            x = 0;
+        }
+
+        if (y < 0)
+        {
+            y = 0;
+        }
+
+        if (width > this.layers[layer].width)
+        {
+            width = this.layers[layer].width;
+        }
+
+        if (height > this.layers[layer].height)
+        {
+            height = this.layers[layer].height;
+        }
+
+        this._results.length = 0;
+
+        this._results.push( { x: x, y: y, width: width, height: height, layer: layer });
+
+        for (var ty = y; ty < y + height; ty++)
+        {
+            for (var tx = x; tx < x + width; tx++)
+            {
+                this._results.push({ x: tx, y: ty, index: this.layers[layer].data[ty][tx] });
+            }
+        }
+
+        return this._results;
+
+    },
+
+    putTiles: function (x, y, tileblock, layer) {
+
+        if (typeof x === "undefined") { x = 0; }
+        if (typeof y === "undefined") { y = 0; }
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        if (!tileblock || tileblock.length < 2)
+        {
+            return;
+        }
+
+        //  Find out the difference between tileblock[1].x/y and x/y and use it as an offset, as it's the top left of the block to paste
+        var diffX = tileblock[1].x - x;
+        var diffY = tileblock[1].y - y;
+
+        for (var i = 1; i < tileblock.length; i++)
+        {
+            this.layers[layer].data[ diffY + tileblock[i].y ][ diffX + tileblock[i].x ] = tileblock[i].index;
+        }
+
+        this.dirty = true;
+
+    },
+
+    /**
+    * Swap tiles with 2 kinds of indexes.
+    * @method swapTile
+    * @param {number} tileA - First tile index.
+    * @param {number} tileB - Second tile index.
+    * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
+    * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
+    * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
+    * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
+    */
+    swap: function (tileA, tileB, x, y, width, height, layer) {
+
+        this.getTiles(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        this._tempA = tileA;
+        this._tempB = tileB;
+
+        this._results.forEach(this.swapHandler, this);
+
+        this.putTiles(x, y, this._results);
+
+    },
+
+    swapHandler: function (value, index, array) {
+
+        if (value.index === this._tempA)
+        {
+            this._results[index].index = this._tempB;
+        }
+        else if (value.index === this._tempB)
+        {
+            this._results[index].index = this._tempA;
+        }
+
+    },
+
+    /**
+    * Swap tiles with 2 kinds of indexes.
+    * @method swapTile
+    * @param {number} tileA - First tile index.
+    * @param {number} tileB - Second tile index.
+    * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
+    * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
+    * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
+    * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
+    */
+    forEach: function (callback, context, x, y, width, height, layer) {
+
+        this.getTiles(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        this._results.forEach(callback, context);
+
+        this.putTiles(x, y, this._results);
+
+    },
+
+    /**
+    * Replaces one type of tile with another.
+    * @method replace
+    * @param {number} tileA - First tile index.
+    * @param {number} tileB - Second tile index.
+    * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
+    * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
+    * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
+    * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
+    */
+    replace: function (tileA, tileB, x, y, width, height, layer) {
+
+        this.getTiles(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        for (var i = 1; i < this._results.length; i++)
+        {
+            if (this._results[i].index === tileA)
+            {
+                this._results[i].index = tileB;
+            }
+        }
+
+        this.putTiles(x, y, this._results);
+
+    },
+
+    /**
+    * Randomises a set of tiles in a given area.
+    * @method replace
+    * @param {number} tileA - First tile index.
+    * @param {number} tileB - Second tile index.
+    * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
+    * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
+    * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
+    * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
+    */
+    random: function (x, y, width, height, layer) {
+
+        this.getTiles(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        for (var i = 1; i < this._results.length; i++)
+        {
+            this._results[i].index = this.game.rnd.integerInRange(0, this.layers[layer].tileset.total);
+        }
+
+        this.putTiles(x, y, this._results);
+
+    },
+
+    /**
+    * Fill a tile block with a specific tile index.
+    * @method fill
+    * @param {number} index - Index of tiles you want to fill with.
+    * @param {number} [x] - X position (in tiles) of block's left-top corner.
+    * @param {number} [y] - Y position (in tiles) of block's left-top corner.
+    * @param {number} [width] - width of block.
+    * @param {number} [height] - height of block.
+    */
+    fill: function (index, x, y, width, height, layer) {
+
+        this.getTiles(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        for (var i = 1; i < this._results.length; i++)
+        {
+            this._results[i].index = index;
+        }
+
+        this.putTiles(x, y, this._results);
+
+    },
 
     removeAllLayers: function () {
 

src/tilemap/TilemapLayer.js

@@ -45,6 +45,8 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
 
     this.tileWidth = 0;
     this.tileHeight = 0;
+    this.tileMargin = 0;
+    this.tileSpacing = 0;
 
     /**
     * Read-only variable, do NOT recommend changing after the map is loaded!
@@ -143,6 +145,7 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
 
     this.tilemap = null;
     this.layer = null;
+    this.index = 0;
 
     this._x = 0;
     this._y = 0;
@@ -199,6 +202,8 @@ Phaser.TilemapLayer.prototype.updateTileset = function (tileset) {
 
     this.tileWidth = this.tileset.tileWidth;
     this.tileHeight = this.tileset.tileHeight;
+    this.tileMargin = this.tileset.tileMargin;
+    this.tileSpacing = this.tileset.tileSpacing;
 
     this.updateMax();
 
@@ -215,11 +220,50 @@ Phaser.TilemapLayer.prototype.updateMapData = function (tilemap, layer) {
     {
         this.tilemap = tilemap;
         this.layer = this.tilemap.layers[layer];
+        this.index = layer;
         this.updateMax();
+        this.tilemap.dirty = true;
     }
 
 }
 
+/**
+* Convert a pixel value to a tile coordinate.
+* @param {number} x - X position of the point in target tile.
+* @param {number} [layer] - layer of this tile located.
+* @return {number} The tile with specific properties.
+*/
+Phaser.TilemapLayer.prototype.getTileX = function (x) {
+
+    var tileWidth = this.tileWidth * this.scale.x;
+
+    return this.game.math.snapToFloor(x, tileWidth) / tileWidth;
+
+}
+
+/**
+* Convert a pixel value to a tile coordinate.
+* @param {number} x - X position of the point in target tile.
+* @param {number} [layer] - layer of this tile located.
+* @return {number} The tile with specific properties.
+*/
+Phaser.TilemapLayer.prototype.getTileY = function (y) {
+
+    var tileHeight = this.tileHeight * this.scale.y;
+
+    return this.game.math.snapToFloor(y, tileHeight) / tileHeight;
+
+}
+
+Phaser.TilemapLayer.prototype.getTileXY = function (x, y, point) {
+
+    point.x = this.getTileX(x);
+    point.y = this.getTileY(y);
+
+    return point;
+
+}
+
 /**
 * 
 * @method getTileOverlaps
@@ -269,6 +313,7 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides
 
     this._results.length = 0;
 
+    //  pretty sure we don't use this any more?
     this._results.push( { x: x, y: y, width: width, height: height, tx: this._tx, ty: this._ty, tw: this._tw, th: this._th });
 
     var _index = 0;
@@ -291,7 +336,6 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides
 
                 if (collides == false || (collides && _tile.collideNone == false))
                 {
-                    // this._results.push({ x: wx * _tile.width, right: (wx * _tile.width) + _tile.width, y: wy * _tile.height, bottom: (wy * _tile.height) + _tile.height, width: _tile.width, height: _tile.height, tx: wx, ty: wy, tile: _tile });
                     this._results.push({ x: wx * sx, right: (wx * sx) + sx, y: wy * sy, bottom: (wy * sy) + sy, width: sx, height: sy, tx: wx, ty: wy, tile: _tile });
                 }
             }
@@ -329,6 +373,11 @@ Phaser.TilemapLayer.prototype.updateMax = function () {
 
 Phaser.TilemapLayer.prototype.render = function () {
 
+    if (this.tilemap && this.tilemap.dirty)
+    {
+        this.dirty = true;
+    }
+
     if (!this.dirty || !this.tileset || !this.tilemap || !this.visible)
     {
         return;
@@ -354,7 +403,6 @@ Phaser.TilemapLayer.prototype.render = function () {
             //  only -1 on TILED maps, not CSV
             var tile = this.tileset.tiles[this._column[x]-1];
 
-            // if (this.tileset.checkTileIndex(tile))
             if (tile)
             {
                 this.context.drawImage(
@@ -386,6 +434,11 @@ Phaser.TilemapLayer.prototype.render = function () {
 
     this.dirty = false;
 
+    if (this.tilemap.dirty)
+    {
+        this.tilemap.dirty = false;
+    }
+
     return true;
 
 }

src/tilemap/TilemapParser.js

@@ -1,6 +1,6 @@
 Phaser.TilemapParser = {
 
-	tileset: function (game, key, tileWidth, tileHeight, tileMax) {
+	tileset: function (game, key, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
 
 	    //  How big is our image?
 	    var img = game.cache.getTilesetImage(key);
@@ -13,6 +13,7 @@ Phaser.TilemapParser = {
 	    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 (tileWidth <= 0)
 	    {
 	        tileWidth = Math.floor(-width / Math.min(-1, tileWidth));
@@ -40,21 +41,21 @@ Phaser.TilemapParser = {
 	    }
 
 	    //  Let's create some tiles
-	    var x = 0;
-	    var y = 0;
+	    var x = tileMargin;
+	    var y = tileMargin;
 
-	    var tileset = new Phaser.Tileset(img, key, tileWidth, tileHeight);
+	    var tileset = new Phaser.Tileset(img, key, tileWidth, tileHeight, tileMargin, tileSpacing);
 
 	    for (var i = 0; i < total; i++)
 	    {
 	        tileset.addTile(new Phaser.Tile(tileset, i, x, y, tileWidth, tileHeight));
 
-	        x += tileWidth;
+	        x += tileWidth + tileSpacing;
 
 	        if (x === width)
 	        {
-	            x = 0;
-	            y += tileHeight;
+	            x = tileMargin;
+	            y += tileHeight + tileSpacing;
 	        }
 	    }
 

src/tilemap/Tileset.js

@@ -1,5 +1,8 @@
 
-Phaser.Tileset = function (image, key, tileWidth, tileHeight) {
+Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSpacing) {
+
+    if (typeof tileMargin === "undefined") { tileMargin = 0; }
+    if (typeof tileSpacing === "undefined") { tileSpacing = 0; }
 
     /**
     * @property {string} key - The cache ID.
@@ -10,6 +13,8 @@ Phaser.Tileset = function (image, key, tileWidth, tileHeight) {
 
     this.tileWidth = tileWidth;
     this.tileHeight = tileHeight;
+    this.margin = tileMargin;
+    this.spacing = tileSpacing;
 
     this.tiles = [];
 
@@ -36,6 +41,13 @@ Phaser.Tileset.prototype = {
 
     },
 
+    setSpacing: function (margin, spacing) {
+
+        this.tileMargin = margin;
+        this.tileSpacing = spacing;
+
+    },
+
     canCollide: function (index) {
 
         if (this.tiles[index])