wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-08-12 12:20:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

More tilemap examples

Browse Source
This commit is contained in:
photonstorm
2013-10-16 21:25:51 +01:00
parent 9c1fdb371c
commit 4b2ac6c6c6
10 changed files with 693 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tilemap/Tilemap.js
+238 -29
View File
@@ -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
+55 -2
View File
@@ -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
+8 -7
View File
@@ -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
+13 -1
View File
@@ -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])