diff --git a/examples/tilemaps/fill tiles.php b/examples/tilemaps/fill tiles.php
new file mode 100644
index 00000000..c69d07b9
--- /dev/null
+++ b/examples/tilemaps/fill tiles.php
@@ -0,0 +1,88 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/tilemaps/randomise tiles.php b/examples/tilemaps/randomise tiles.php
new file mode 100644
index 00000000..d23a7e27
--- /dev/null
+++ b/examples/tilemaps/randomise tiles.php
@@ -0,0 +1,93 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/tilemaps/replace tiles.php b/examples/tilemaps/replace tiles.php
new file mode 100644
index 00000000..27bf4ecd
--- /dev/null
+++ b/examples/tilemaps/replace tiles.php
@@ -0,0 +1,93 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/tilemaps/swap tiles.php b/examples/tilemaps/swap tiles.php
new file mode 100644
index 00000000..82627c98
--- /dev/null
+++ b/examples/tilemaps/swap tiles.php
@@ -0,0 +1,93 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/loader/Cache.js b/src/loader/Cache.js
index a644a4ec..65a9336c 100644
--- a/src/loader/Cache.js
+++ b/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);
},
diff --git a/src/loader/Loader.js b/src/loader/Loader.js
index f672c48c..4402f1ac 100644
--- a/src/loader/Loader.js
+++ b/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)
diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js
index 9666a8ec..15fa2c17 100644
--- a/src/tilemap/Tilemap.js
+++ b/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 () {
diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js
index 5454b121..c49afbd3 100644
--- a/src/tilemap/TilemapLayer.js
+++ b/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;
}
diff --git a/src/tilemap/TilemapParser.js b/src/tilemap/TilemapParser.js
index b80a5df0..176c862b 100644
--- a/src/tilemap/TilemapParser.js
+++ b/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;
}
}
diff --git a/src/tilemap/Tileset.js b/src/tilemap/Tileset.js
index 6a0f781a..5d3b3fe1 100644
--- a/src/tilemap/Tileset.js
+++ b/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])