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])