New examples HTML page added.

This commit is contained in:
photonstorm
2013-10-08 12:52:20 +01:00
parent fa692653e3
commit ebc4e5dc3d
52 changed files with 1657 additions and 525 deletions
+4 -4
View File
@@ -727,8 +727,8 @@ Phaser.InputHandler.prototype = {
if (this.snapOnDrag)
{
this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY;
}
return true;
@@ -941,8 +941,8 @@ Phaser.InputHandler.prototype = {
if (this.snapOnRelease)
{
this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY;
}
this.sprite.events.onDragStop.dispatch(this.sprite, pointer);
-519
View File
@@ -1,134 +1,5 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @module Phaser.Tilemap
*/
/**
* Create a new <code>Tilemap</code>.
* @class Phaser.Tilemap
* @classdesc This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size.
* Internally it creates a TilemapLayer for each layer in the tilemap.
* @constructor
* @param {Phaser.Game} game - Current game instance.
* @param {string} key - Asset key for this map.
* @param {object} x - Description.
* @param {object} y - Description.
* @param {boolean} resizeWorld - Resize the world bound automatically based on this tilemap?
* @param {number} tileWidth - Width of tiles in this map (used for CSV maps).
* @param {number} tileHeight - Height of tiles in this map (used for CSV maps).
*/
Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight) {
if (typeof resizeWorld === "undefined") { resizeWorld = true; }
if (typeof tileWidth === "undefined") { tileWidth = 0; }
if (typeof tileHeight === "undefined") { tileHeight = 0; }
/**
* @property {Phaser.Game} game - A reference to the currently running game.
*/
this.game = game;
/**
* @property {Description} group - Description.
*/
this.group = null;
/**
* @property {string} name - The user defined name given to this Description.
* @default
*/
this.name = '';
/**
* @property {Description} key - Description.
*/
this.key = key;
/**
* @property {number} renderOrderID - Render iteration counter
* @default
*/
this.renderOrderID = 0;
/**
* @property {boolean} collisionCallback - Tilemap collision callback.
* @default
*/
this.collisionCallback = null;
/**
* @property {boolean} exists - Description.
* @default
*/
this.exists = true;
/**
* @property {boolean} visible - Description.
* @default
*/
this.visible = true;
this.width = 0;
this.height = 0;
/**
* @property {boolean} tiles - Description.
* @default
*/
this.tiles = [];
/**
* @property {boolean} layers - Description.
* @default
*/
this.layers = [];
var map = this.game.cache.getTilemap(key);
PIXI.DisplayObjectContainer.call(this);
/**
* @property {Description} position - Description.
*/
this.position.x = x;
this.position.y = y;
/**
* @property {Description} type - Description.
*/
this.type = Phaser.TILEMAP;
/**
* @property {Description} renderer - Description.
*/
this.renderer = new Phaser.TilemapRenderer(this.game);
this.fixedToCamera = true;
/**
* @property {Description} mapFormat - Description.
*/
this.mapFormat = map.format;
switch (this.mapFormat)
{
case Phaser.Tilemap.CSV:
this.parseCSV(map.mapData, key, tileWidth, tileHeight);
break;
case Phaser.Tilemap.JSON:
this.parseTiledJSON(map.mapData, key);
break;
}
if (this.currentLayer && resizeWorld)
{
this.game.world.setBounds(0, 0, this.width, this.heightIn);
}
};
// Needed to keep the PIXI.Sprite constructor in the prototype chain (as the core pixi renderer uses an instanceof check sadly)
@@ -138,393 +9,3 @@ Phaser.Tilemap.prototype.constructor = Phaser.Tilemap;
Phaser.Tilemap.CSV = 0;
Phaser.Tilemap.JSON = 1;
/**
* Parse csv map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseCSV
* @param {string} data - CSV map data.
* @param {string} key - Asset key for tileset image.
* @param {number} tileWidth - Width of its tile.
* @param {number} tileHeight - Height of its tile.
*/
Phaser.Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight) {
var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
var rows = data.split("\n");
for (var i = 0; i < rows.length; i++)
{
var column = rows[i].split(",");
if (column.length > 0)
{
layer.addColumn(column);
}
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this.collisionLayer = layer;
this.layers.push(layer);
this.width = this.currentLayer.widthInPixels;
this.height = this.currentLayer.heightInPixels;
this.generateTiles(tileQuantity);
};
/**
* Parse JSON map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseTiledJSON
* @param {string} data - JSON map data.
* @param {string} key - Asset key for tileset image.
*/
Phaser.Tilemap.prototype.parseTiledJSON = function (json, key) {
for (var i = 0; i < json.layers.length; i++)
{
var layer = new Phaser.TilemapLayer(this, i, key, Phaser.Tilemap.JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Check it's a data layer
if (!json.layers[i].data)
{
continue;
}
// layer.createQuadTree(json.tilewidth * json.layers[i].width, json.tileheight * json.layers[i].height);
layer.alpha = json.layers[i].opacity;
layer.visible = json.layers[i].visible;
layer.tileMargin = json.tilesets[0].margin;
layer.tileSpacing = json.tilesets[0].spacing;
var c = 0;
var row;
for (var t = 0; t < json.layers[i].data.length; t++)
{
if (c == 0)
{
row = [];
}
row.push(json.layers[i].data[t]);
c++;
if (c == json.layers[i].width)
{
layer.addColumn(row);
c = 0;
}
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this.collisionLayer = layer;
this.layers.push(layer);
if (this.currentLayer.widthInPixels > this.width)
{
this.width = this.currentLayer.widthInPixels;
}
if (this.currentLayer.heightInPixels > this.height)
{
this.height = this.currentLayer.heightInPixels;
}
}
this.generateTiles(tileQuantity);
};
/**
* Create tiles of given quantity.
* @method Phaser.Tilemap.prototype.generateTiles
* @param {number} qty - Quantity of tiles to be generated.
*/
Phaser.Tilemap.prototype.generateTiles = function (qty) {
for (var i = 0; i < qty; i++)
{
this.tiles.push(new Phaser.Tile(this.game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight));
}
};
/**
* Set callback to be called when this tilemap collides.
*
* @method Phaser.Tilemap.prototype.setCollisionCallback
* @param {object} context - Callback will be called with this context.
* @param {Function} callback - Callback function.
*/
Phaser.Tilemap.prototype.setCollisionCallback = function (context, callback) {
this.collisionCallbackContext = context;
this.collisionCallback = callback;
};
/**
* Set collision configs of tiles in a range index.
*
* @method Phaser.Tilemap.prototype.setCollisionRange
* @param {number} start - First index of tiles.
* @param {number} end - Last index of tiles.
* @param {number} collision - Bit field of flags. (see Tile.allowCollision)
* @param {boolean} resetCollisions - Reset collision flags before set.
* @param {boolean} separateX - Enable separate at x-axis.
* @param {boolean} separateY - Enable separate at y-axis.
*/
Phaser.Tilemap.prototype.setCollisionRange = function (start, end, left, right, up, down, resetCollisions, separateX, separateY) {
if (typeof resetCollisions === "undefined") { resetCollisions = false; }
if (typeof separateX === "undefined") { separateX = true; }
if (typeof separateY === "undefined") { separateY = true; }
for (var i = start; i < end; i++)
{
this.tiles[i].setCollision(left, right, up, down, resetCollisions, separateX, separateY);
}
};
/**
* Set collision configs of tiles with given index.
* @param {number[]} values - Index array which contains all tile indexes. The tiles with those indexes will be setup with rest parameters.
* @param {number} collision - Bit field of flags (see Tile.allowCollision).
* @param {boolean} resetCollisions - Reset collision flags before set.
* @param {boolean} left - Indicating collide with any object on the left.
* @param {boolean} right - Indicating collide with any object on the right.
* @param {boolean} up - Indicating collide with any object on the top.
* @param {boolean} down - Indicating collide with any object on the bottom.
* @param {boolean} separateX - Enable separate at x-axis.
* @param {boolean} separateY - Enable separate at y-axis.
*/
Phaser.Tilemap.prototype.setCollisionByIndex = function (values, left, right, up, down, resetCollisions, separateX, separateY) {
if (typeof resetCollisions === "undefined") { resetCollisions = false; }
if (typeof separateX === "undefined") { separateX = true; }
if (typeof separateY === "undefined") { separateY = true; }
for (var i = 0; i < values.length; i++)
{
this.tiles[values[i]].setCollision(left, right, up, down, resetCollisions, separateX, separateY);
}
};
// Tile Management
/**
* Get the tile by its index.
* @param {number} value - Index of the tile you want to get.
* @return {Tile} The tile with given index.
*/
Phaser.Tilemap.prototype.getTileByIndex = function (value) {
if (this.tiles[value])
{
return this.tiles[value];
}
return null;
};
/**
* Get the tile located at specific position and layer.
* @param {number} x - X position of this tile located.
* @param {number} y - Y position of this tile located.
* @param {number} [layer] - layer of this tile located.
* @return {Tile} The tile with specific properties.
*/
Phaser.Tilemap.prototype.getTile = function (x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileIndex(x, y)];
};
/**
* 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.
*/
Phaser.Tilemap.prototype.getTileFromWorldXY = function (x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
};
/**
* Gets the tile underneath the Input.x/y position.
* @param {number} layer - The layer to check, defaults to 0.
* @return {Tile}
*/
Phaser.Tilemap.prototype.getTileFromInputXY = function (layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)];
};
/**
* Get tiles overlaps the given object.
* @param {GameObject} object - Tiles you want to get that overlaps this.
* @return {array} Array with tiles information (Each contains x, y and the tile).
*/
Phaser.Tilemap.prototype.getTileOverlaps = function (object) {
return this.currentLayer.getTileOverlaps(object);
};
// COLLIDE
/**
* Check whether this tilemap collides with the given game object or group of objects.
* @param {Function} objectOrGroup - Target object of group you want to check.
* @param {Function} callback - This is called if objectOrGroup collides the tilemap.
* @param {object} context - Callback will be called with this context.
* @return {boolean} Return true if this collides with given object, otherwise return false.
*/
Phaser.Tilemap.prototype.collide = function (objectOrGroup, callback, context) {
objectOrGroup = objectOrGroup || this.game.world.group;
callback = callback || null;
context = context || null;
if (callback && context)
{
this.collisionCallback = callback;
this.collisionCallbackContext = context;
}
if (objectOrGroup instanceof Phaser.Group)
{
objectOrGroup.forEachAlive(this.collideGameObject, this);
}
else
{
this.collideGameObject(objectOrGroup);
}
};
/**
* Check whether this tilemap collides with the given game object.
* @param {GameObject} object - Target object you want to check.
* @return {boolean} Return true if this collides with given object, otherwise return false.
*/
Phaser.Tilemap.prototype.collideGameObject = function (object) {
if (object instanceof Phaser.Group || object instanceof Phaser.Tilemap)
{
return false;
}
if (object.exists && object.body.allowCollision.none == false)
{
this._tempCollisionData = this.collisionLayer.getTileOverlaps(object);
if (this.collisionCallback && this._tempCollisionData.length > 0)
{
this.collisionCallback.call(this.collisionCallbackContext, object, this._tempCollisionData);
}
return true;
}
else
{
return false;
}
};
/**
* Set a tile to a specific layer.
* @param {number} x - X position of this tile.
* @param {number} y - Y position of this tile.
* @param {number} index - The index of this tile type in the core map data.
* @param {number} [layer] - Which layer you want to set the tile to.
*/
Phaser.Tilemap.prototype.putTile = function (x, y, index, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
this.layers[layer].putTile(x, y, index);
};
/**
* Calls the renderer.
*/
Phaser.Tilemap.prototype.update = function () {
this.renderer.render(this);
if (this.fixedToCamera)
{
// this.displayObject.position.x = this.game.camera.view.x + this.x;
// this.displayObject.position.y = this.game.camera.view.y + this.y;
this.position.x = this.game.camera.view.x + 0;
this.position.y = this.game.camera.view.y + 0;
}
};
/**
* Description.
*/
Phaser.Tilemap.prototype.destroy = function () {
this.tiles.length = 0;
this.layers.length = 0;
};
/**
* Get width in pixels.
* @return {number}
*/
Object.defineProperty(Phaser.Tilemap.prototype, "widthInPixels", {
get: function () {
return this.currentLayer.widthInPixels;
}
});
/**
* Get height in pixels.
* @return {number}
*/
Object.defineProperty(Phaser.Tilemap.prototype, "heightInPixels", {
get: function () {
return this.currentLayer.heightInPixels;
}
});
+530
View File
@@ -0,0 +1,530 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @module Phaser.Tilemap
*/
/**
* Create a new <code>Tilemap</code>.
* @class Phaser.Tilemap
* @classdesc This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size.
* Internally it creates a TilemapLayer for each layer in the tilemap.
* @constructor
* @param {Phaser.Game} game - Current game instance.
* @param {string} key - Asset key for this map.
* @param {object} x - Description.
* @param {object} y - Description.
* @param {boolean} resizeWorld - Resize the world bound automatically based on this tilemap?
* @param {number} tileWidth - Width of tiles in this map (used for CSV maps).
* @param {number} tileHeight - Height of tiles in this map (used for CSV maps).
*/
Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight) {
if (typeof resizeWorld === "undefined") { resizeWorld = true; }
if (typeof tileWidth === "undefined") { tileWidth = 0; }
if (typeof tileHeight === "undefined") { tileHeight = 0; }
/**
* @property {Phaser.Game} game - A reference to the currently running game.
*/
this.game = game;
/**
* @property {Description} group - Description.
*/
this.group = null;
/**
* @property {string} name - The user defined name given to this Description.
* @default
*/
this.name = '';
/**
* @property {Description} key - Description.
*/
this.key = key;
/**
* @property {number} renderOrderID - Render iteration counter
* @default
*/
this.renderOrderID = 0;
/**
* @property {boolean} collisionCallback - Tilemap collision callback.
* @default
*/
this.collisionCallback = null;
/**
* @property {boolean} exists - Description.
* @default
*/
this.exists = true;
/**
* @property {boolean} visible - Description.
* @default
*/
this.visible = true;
this.width = 0;
this.height = 0;
/**
* @property {boolean} tiles - Description.
* @default
*/
this.tiles = [];
/**
* @property {boolean} layers - Description.
* @default
*/
this.layers = [];
var map = this.game.cache.getTilemap(key);
PIXI.DisplayObjectContainer.call(this);
/**
* @property {Description} position - Description.
*/
this.position.x = x;
this.position.y = y;
/**
* @property {Description} type - Description.
*/
this.type = Phaser.TILEMAP;
/**
* @property {Description} renderer - Description.
*/
this.renderer = new Phaser.TilemapRenderer(this.game);
this.fixedToCamera = true;
/**
* @property {Description} mapFormat - Description.
*/
this.mapFormat = map.format;
switch (this.mapFormat)
{
case Phaser.Tilemap.CSV:
this.parseCSV(map.mapData, key, tileWidth, tileHeight);
break;
case Phaser.Tilemap.JSON:
this.parseTiledJSON(map.mapData, key);
break;
}
if (this.currentLayer && resizeWorld)
{
this.game.world.setBounds(0, 0, this.width, this.heightIn);
}
};
// Needed to keep the PIXI.Sprite constructor in the prototype chain (as the core pixi renderer uses an instanceof check sadly)
Phaser.Tilemap.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
Phaser.Tilemap.prototype.constructor = Phaser.Tilemap;
Phaser.Tilemap.CSV = 0;
Phaser.Tilemap.JSON = 1;
/**
* Parse csv map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseCSV
* @param {string} data - CSV map data.
* @param {string} key - Asset key for tileset image.
* @param {number} tileWidth - Width of its tile.
* @param {number} tileHeight - Height of its tile.
*/
Phaser.Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight) {
var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
var rows = data.split("\n");
for (var i = 0; i < rows.length; i++)
{
var column = rows[i].split(",");
if (column.length > 0)
{
layer.addColumn(column);
}
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this.collisionLayer = layer;
this.layers.push(layer);
this.width = this.currentLayer.widthInPixels;
this.height = this.currentLayer.heightInPixels;
this.generateTiles(tileQuantity);
};
/**
* Parse JSON map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseTiledJSON
* @param {string} data - JSON map data.
* @param {string} key - Asset key for tileset image.
*/
Phaser.Tilemap.prototype.parseTiledJSON = function (json, key) {
for (var i = 0; i < json.layers.length; i++)
{
var layer = new Phaser.TilemapLayer(this, i, key, Phaser.Tilemap.JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Check it's a data layer
if (!json.layers[i].data)
{
continue;
}
// layer.createQuadTree(json.tilewidth * json.layers[i].width, json.tileheight * json.layers[i].height);
layer.alpha = json.layers[i].opacity;
layer.visible = json.layers[i].visible;
layer.tileMargin = json.tilesets[0].margin;
layer.tileSpacing = json.tilesets[0].spacing;
var c = 0;
var row;
for (var t = 0; t < json.layers[i].data.length; t++)
{
if (c == 0)
{
row = [];
}
row.push(json.layers[i].data[t]);
c++;
if (c == json.layers[i].width)
{
layer.addColumn(row);
c = 0;
}
}
layer.updateBounds();
layer.createCanvas();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this.collisionLayer = layer;
this.layers.push(layer);
if (this.currentLayer.widthInPixels > this.width)
{
this.width = this.currentLayer.widthInPixels;
}
if (this.currentLayer.heightInPixels > this.height)
{
this.height = this.currentLayer.heightInPixels;
}
}
this.generateTiles(tileQuantity);
};
/**
* Create tiles of given quantity.
* @method Phaser.Tilemap.prototype.generateTiles
* @param {number} qty - Quantity of tiles to be generated.
*/
Phaser.Tilemap.prototype.generateTiles = function (qty) {
for (var i = 0; i < qty; i++)
{
this.tiles.push(new Phaser.Tile(this.game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight));
}
};
/**
* Set callback to be called when this tilemap collides.
*
* @method Phaser.Tilemap.prototype.setCollisionCallback
* @param {object} context - Callback will be called with this context.
* @param {Function} callback - Callback function.
*/
Phaser.Tilemap.prototype.setCollisionCallback = function (context, callback) {
this.collisionCallbackContext = context;
this.collisionCallback = callback;
};
/**
* Set collision configs of tiles in a range index.
*
* @method Phaser.Tilemap.prototype.setCollisionRange
* @param {number} start - First index of tiles.
* @param {number} end - Last index of tiles.
* @param {number} collision - Bit field of flags. (see Tile.allowCollision)
* @param {boolean} resetCollisions - Reset collision flags before set.
* @param {boolean} separateX - Enable separate at x-axis.
* @param {boolean} separateY - Enable separate at y-axis.
*/
Phaser.Tilemap.prototype.setCollisionRange = function (start, end, left, right, up, down, resetCollisions, separateX, separateY) {
if (typeof resetCollisions === "undefined") { resetCollisions = false; }
if (typeof separateX === "undefined") { separateX = true; }
if (typeof separateY === "undefined") { separateY = true; }
for (var i = start; i < end; i++)
{
this.tiles[i].setCollision(left, right, up, down, resetCollisions, separateX, separateY);
}
};
/**
* Set collision configs of tiles with given index.
* @param {number[]} values - Index array which contains all tile indexes. The tiles with those indexes will be setup with rest parameters.
* @param {number} collision - Bit field of flags (see Tile.allowCollision).
* @param {boolean} resetCollisions - Reset collision flags before set.
* @param {boolean} left - Indicating collide with any object on the left.
* @param {boolean} right - Indicating collide with any object on the right.
* @param {boolean} up - Indicating collide with any object on the top.
* @param {boolean} down - Indicating collide with any object on the bottom.
* @param {boolean} separateX - Enable separate at x-axis.
* @param {boolean} separateY - Enable separate at y-axis.
*/
Phaser.Tilemap.prototype.setCollisionByIndex = function (values, left, right, up, down, resetCollisions, separateX, separateY) {
if (typeof resetCollisions === "undefined") { resetCollisions = false; }
if (typeof separateX === "undefined") { separateX = true; }
if (typeof separateY === "undefined") { separateY = true; }
for (var i = 0; i < values.length; i++)
{
this.tiles[values[i]].setCollision(left, right, up, down, resetCollisions, separateX, separateY);
}
};
// Tile Management
/**
* Get the tile by its index.
* @param {number} value - Index of the tile you want to get.
* @return {Tile} The tile with given index.
*/
Phaser.Tilemap.prototype.getTileByIndex = function (value) {
if (this.tiles[value])
{
return this.tiles[value];
}
return null;
};
/**
* Get the tile located at specific position and layer.
* @param {number} x - X position of this tile located.
* @param {number} y - Y position of this tile located.
* @param {number} [layer] - layer of this tile located.
* @return {Tile} The tile with specific properties.
*/
Phaser.Tilemap.prototype.getTile = function (x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileIndex(x, y)];
};
/**
* 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.
*/
Phaser.Tilemap.prototype.getTileFromWorldXY = function (x, y, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
};
/**
* Gets the tile underneath the Input.x/y position.
* @param {number} layer - The layer to check, defaults to 0.
* @return {Tile}
*/
Phaser.Tilemap.prototype.getTileFromInputXY = function (layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)];
};
/**
* Get tiles overlaps the given object.
* @param {GameObject} object - Tiles you want to get that overlaps this.
* @return {array} Array with tiles information (Each contains x, y and the tile).
*/
Phaser.Tilemap.prototype.getTileOverlaps = function (object) {
return this.currentLayer.getTileOverlaps(object);
};
// COLLIDE
/**
* Check whether this tilemap collides with the given game object or group of objects.
* @param {Function} objectOrGroup - Target object of group you want to check.
* @param {Function} callback - This is called if objectOrGroup collides the tilemap.
* @param {object} context - Callback will be called with this context.
* @return {boolean} Return true if this collides with given object, otherwise return false.
*/
Phaser.Tilemap.prototype.collide = function (objectOrGroup, callback, context) {
objectOrGroup = objectOrGroup || this.game.world.group;
callback = callback || null;
context = context || null;
if (callback && context)
{
this.collisionCallback = callback;
this.collisionCallbackContext = context;
}
if (objectOrGroup instanceof Phaser.Group)
{
objectOrGroup.forEachAlive(this.collideGameObject, this);
}
else
{
this.collideGameObject(objectOrGroup);
}
};
/**
* Check whether this tilemap collides with the given game object.
* @param {GameObject} object - Target object you want to check.
* @return {boolean} Return true if this collides with given object, otherwise return false.
*/
Phaser.Tilemap.prototype.collideGameObject = function (object) {
if (object instanceof Phaser.Group || object instanceof Phaser.Tilemap)
{
return false;
}
if (object.exists && object.body.allowCollision.none == false)
{
this._tempCollisionData = this.collisionLayer.getTileOverlaps(object);
if (this.collisionCallback && this._tempCollisionData.length > 0)
{
this.collisionCallback.call(this.collisionCallbackContext, object, this._tempCollisionData);
}
return true;
}
else
{
return false;
}
};
/**
* Set a tile to a specific layer.
* @param {number} x - X position of this tile.
* @param {number} y - Y position of this tile.
* @param {number} index - The index of this tile type in the core map data.
* @param {number} [layer] - Which layer you want to set the tile to.
*/
Phaser.Tilemap.prototype.putTile = function (x, y, index, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
this.layers[layer].putTile(x, y, index);
};
/**
* Calls the renderer.
*/
Phaser.Tilemap.prototype.update = function () {
this.renderer.render(this);
if (this.fixedToCamera)
{
// this.displayObject.position.x = this.game.camera.view.x + this.x;
// this.displayObject.position.y = this.game.camera.view.y + this.y;
this.position.x = this.game.camera.view.x + 0;
this.position.y = this.game.camera.view.y + 0;
}
};
/**
* Description.
*/
Phaser.Tilemap.prototype.destroy = function () {
this.tiles.length = 0;
this.layers.length = 0;
};
/**
* Get width in pixels.
* @return {number}
*/
Object.defineProperty(Phaser.Tilemap.prototype, "widthInPixels", {
get: function () {
return this.currentLayer.widthInPixels;
}
});
/**
* Get height in pixels.
* @return {number}
*/
Object.defineProperty(Phaser.Tilemap.prototype, "heightInPixels", {
get: function () {
return this.currentLayer.heightInPixels;
}
});
+662
View File
@@ -0,0 +1,662 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @module Phaser.TilemapLayer
*/
/**
* Create a new <code>TilemapLayer</code>.
* @class Phaser.TilemapLayer
* @classdesc A Tilemap Layer. Tiled format maps can have multiple overlapping layers.
* @constructor
* @param parent {Tilemap} The tilemap that contains this layer.
* @param id {number} The ID of this layer within the Tilemap array.
* @param key {string} Asset key for this map.
* @param mapformat {number} Format of this map data, available: Tilemap.CSV or Tilemap.JSON.
* @param name {string} Name of this layer, so you can get this layer by its name.
* @param tileWidth {number} Width of tiles in this map.
* @param tileHeight {number} Height of tiles in this map.
*/
Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, tileHeight) {
/**
* @property {boolean} exists - Controls whether update() and draw() are automatically called.
* @default
*/
this.exists = true;
/**
* @property {boolean} visible - Controls whether draw() are automatically called.
* @default
*/
this.visible = true;
/**
* How many tiles in each row.
* Read-only variable, do NOT recommend changing after the map is loaded!
* @property {number} widthInTiles
* @default
*/
this.widthInTiles = 0;
/**
* How many tiles in each column.
* Read-only variable, do NOT recommend changing after the map is loaded!
* @property {number} heightInTiles
* @default
*/
this.heightInTiles = 0;
/**
* Read-only variable, do NOT recommend changing after the map is loaded!
* @property {number} widthInPixels
* @default
*/
this.widthInPixels = 0;
/**
* Read-only variable, do NOT recommend changing after the map is loaded!
* @property {number} heightInPixels
* @default
*/
this.heightInPixels = 0;
/**
* Distance between REAL tiles to the tileset texture bound.
* @property {number} tileMargin
* @default
*/
this.tileMargin = 0;
/**
* Distance between every 2 neighbor tile in the tileset texture.
* @property {number} tileSpacing
* @default
*/
this.tileSpacing = 0;
/**
* @property {Description} parent - Description.
*/
this.parent = parent;
/**
* @property {Phaser.Game} game - Description.
*/
this.game = parent.game;
/**
* @property {Description} ID - Description.
*/
this.ID = id;
/**
* @property {Description} name - Description.
*/
this.name = name;
/**
* @property {Description} key - Description.
*/
this.key = key;
/**
* @property {Description} type - Description.
*/
this.type = Phaser.TILEMAPLAYER;
/**
* @property {tileWidth} mapFormat - Description.
*/
this.mapFormat = mapFormat;
/**
* @property {Description} tileWidth - Description.
*/
this.tileWidth = tileWidth;
/**
* @property {Description} tileHeight - Description.
*/
this.tileHeight = tileHeight;
/**
* @property {Phaser.Rectangle} boundsInTiles - Description.
*/
this.boundsInTiles = new Phaser.Rectangle();
var map = this.game.cache.getTilemap(key);
/**
* @property {Description} tileset - Description.
*/
this.tileset = map.data;
/**
* @property {Description} _alpha - Description.
* @private
* @default
*/
this._alpha = 1;
/**
* @property {Description} canvas - Description.
* @default
*/
this.canvas = null;
/**
* @property {Description} context - Description.
* @default
*/
this.context = null;
/**
* @property {Description} baseTexture - Description.
* @default
*/
this.baseTexture = null;
/**
* @property {Description} texture - Description.
* @default
*/
this.texture = null;
/**
* @property {Description} sprite - Description.
* @default
*/
this.sprite = null;
/**
* @property {array} mapData - Description.
*/
this.mapData = [];
/**
* @property {array} _tempTileBlock - Description.
* @private
*/
this._tempTileBlock = [];
/**
* @property {array} _tempBlockResults - Description.
* @private
*
*/
this._tempBlockResults = [];
};
Phaser.TilemapLayer.prototype = {
/**
* Set a specific tile with its x and y in tiles.
* @method putTileWorldXY
* @param {number} x - X position of this tile in world coordinates.
* @param {number} y - Y position of this tile in world coordinates.
* @param {number} index - The index of this tile type in the core map data.
*/
putTileWorldXY: function (x, y, index) {
x = this.game.math.snapToFloor(x, this.tileWidth) / this.tileWidth;
y = this.game.math.snapToFloor(y, this.tileHeight) / this.tileHeight;
if (y >= 0 && y < this.mapData.length)
{
if (x >= 0 && x < this.mapData[y].length)
{
this.mapData[y][x] = index;
}
}
},
/**
* Set a specific tile with its x and y in tiles.
* @method putTile
* @param {number} x - X position of this tile.
* @param {number} y - Y position of this tile.
* @param {number} index - The index of this tile type in the core map data.
*/
putTile: function (x, y, index) {
if (y >= 0 && y < this.mapData.length)
{
if (x >= 0 && x < this.mapData[y].length)
{
this.mapData[y][x] = index;
}
}
},
/**
* 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.
*/
swapTile: function (tileA, tileB, x, y, width, height) {
x = x || 0;
y = y || 0;
width = width || this.widthInTiles;
height = height || this.heightInTiles;
this.getTempBlock(x, y, width, height);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
// First sweep marking tileA as needing a new index
if (this._tempTileBlock[r].tile.index == tileA)
{
this._tempTileBlock[r].newIndex = true;
}
// In the same pass we can swap tileB to tileA
if (this._tempTileBlock[r].tile.index == tileB)
{
this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileA;
}
}
for (var r = 0; r < this._tempTileBlock.length; r++)
{
// And now swap our newIndex tiles for tileB
if (this._tempTileBlock[r].newIndex == true)
{
this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB;
}
}
},
/**
* Fill a tile block with a specific tile index.
* @method fillTile
* @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.
*/
fillTile: function (index, x, y, width, height) {
x = x || 0;
y = y || 0;
width = width || this.widthInTiles;
height = height || this.heightInTiles;
this.getTempBlock(x, y, width, height);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = index;
}
},
/**
* Set random tiles to a specific tile block.
* @method randomiseTiles
* @param {number[]} tiles - Tiles with indexes in this array will be randomly set to the given block.
* @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.
*/
randomiseTiles: function (tiles, x, y, width, height) {
x = x || 0;
y = y || 0;
width = width || this.widthInTiles;
height = height || this.heightInTiles;
this.getTempBlock(x, y, width, height);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = this.game.math.getRandom(tiles);
}
},
/**
* Replace one kind of tiles to another kind.
* @method replaceTile
* @param {number} tileA - First tile index.
* @param {number} tileB - Second tile index.
* @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.
*/
replaceTile: function (tileA, tileB, x, y, width, height) {
x = x || 0;
y = y || 0;
width = width || this.widthInTiles;
height = height || this.heightInTiles;
this.getTempBlock(x, y, width, height);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
if (this._tempTileBlock[r].tile.index == tileA)
{
this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB;
}
}
},
/**
* Get a tile block with specific position and size (both are in tiles).
* @method getTileBlock
* @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.
*/
getTileBlock: function (x, y, width, height) {
var output = [];
this.getTempBlock(x, y, width, height);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
output.push({
x: this._tempTileBlock[r].x,
y: this._tempTileBlock[r].y,
tile: this._tempTileBlock[r].tile
});
}
return output;
},
/**
* Get a tile with specific position (in world coordinate). (thus you give a position of a point which is within the tile)
* @method getTileFromWorldXY
* @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.
*/
getTileFromWorldXY: function (x, y) {
x = Phaser.Math.snapToFloor(x, this.tileWidth) / this.tileWidth;
y = Phaser.Math.snapToFloor(y, this.tileHeight) / this.tileHeight;
return this.getTileIndex(x, y);
},
/**
* Get tiles overlaps the given object.
* @method getTileOverlaps
* @param {GameObject} object - Tiles you want to get that overlaps this.
* @return {array} Array with tiles informations (each contains x, y, and the tile).
*/
getTileOverlaps: function (object) {
this._tempBlockResults.length = 0;
// If the object is outside of the world coordinates then abort the check (tilemap has to exist within world bounds)
if (object.body.x < 0 || object.body.x > this.widthInPixels || object.body.y < 0 || object.body.bottom > this.heightInPixels)
{
return this._tempBlockResults;
}
// What tiles do we need to check against?
this._tempTileX = this.game.math.snapToFloor(object.body.x, this.tileWidth) / this.tileWidth;
this._tempTileY = this.game.math.snapToFloor(object.body.y, this.tileHeight) / this.tileHeight;
this._tempTileW = (this.game.math.snapToCeil(object.body.width, this.tileWidth) + this.tileWidth) / this.tileWidth;
this._tempTileH = (this.game.math.snapToCeil(object.body.height, this.tileHeight) + this.tileHeight) / this.tileHeight;
// Loop through the tiles we've got and check overlaps accordingly (the results are stored in this._tempTileBlock)
this.getTempBlock(this._tempTileX, this._tempTileY, this._tempTileW, this._tempTileH, true);
for (var r = 0; r < this._tempTileBlock.length; r++)
{
// separateTile: function (object, x, y, width, height, mass, collideLeft, collideRight, collideUp, collideDown, separateX, separateY)
if (this.game.physics.separateTile(object, this._tempTileBlock[r].x * this.tileWidth, this._tempTileBlock[r].y * this.tileHeight, this.tileWidth, this.tileHeight, this._tempTileBlock[r].tile.mass, this._tempTileBlock[r].tile.collideLeft, this._tempTileBlock[r].tile.collideRight, this._tempTileBlock[r].tile.collideUp, this._tempTileBlock[r].tile.collideDown, this._tempTileBlock[r].tile.separateX, this._tempTileBlock[r].tile.separateY))
{
this._tempBlockResults.push({ x: this._tempTileBlock[r].x, y: this._tempTileBlock[r].y, tile: this._tempTileBlock[r].tile });
}
}
return this._tempBlockResults;
},
/**
* Get a tile block with its position and size (this method does not return, it'll set result to _tempTileBlock).
* @method getTempBlock
* @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.
* @param {boolean} collisionOnly - Whethor or not ONLY return tiles which will collide (its allowCollisions value is not Collision.NONE).
*/
getTempBlock: function (x, y, width, height, collisionOnly) {
if (typeof collisionOnly === "undefined") { collisionOnly = false; }
if (x < 0)
{
x = 0;
}
if (y < 0)
{
y = 0;
}
if (width > this.widthInTiles)
{
width = this.widthInTiles;
}
if (height > this.heightInTiles)
{
height = this.heightInTiles;
}
this._tempTileBlock = [];
for (var ty = y; ty < y + height; ty++)
{
for (var tx = x; tx < x + width; tx++)
{
if (collisionOnly)
{
// We only want to consider the tile for checking if you can actually collide with it
if (this.mapData[ty] && this.mapData[ty][tx] && this.parent.tiles[this.mapData[ty][tx]].collideNone == false)
{
this._tempTileBlock.push({
x: tx,
y: ty,
tile: this.parent.tiles[this.mapData[ty][tx]]
});
}
}
else
{
if (this.mapData[ty] && this.mapData[ty][tx])
{
this._tempTileBlock.push({
x: tx,
y: ty,
tile: this.parent.tiles[this.mapData[ty][tx]]
});
}
}
}
}
},
/**
* Get the tile index of specific position (in tiles).
* @method getTileIndex
* @param {number} x - X position of the tile.
* @param {number} y - Y position of the tile.
* @return {number} Index of the tile at that position. Return null if there isn't a tile there.
*/
getTileIndex: function (x, y) {
if (y >= 0 && y < this.mapData.length)
{
if (x >= 0 && x < this.mapData[y].length)
{
return this.mapData[y][x];
}
}
return null;
},
/**
* Add a column of tiles into the layer.
* @method addColumn
* @param {string[]|number[]} column - An array of tile indexes to be added.
*/
addColumn: function (column) {
var data = [];
for (var c = 0; c < column.length; c++)
{
data[c] = parseInt(column[c]);
}
if (this.widthInTiles == 0)
{
this.widthInTiles = data.length;
this.widthInPixels = this.widthInTiles * this.tileWidth;
}
this.mapData.push(data);
this.heightInTiles++;
this.heightInPixels += this.tileHeight;
},
/**
* Description.
* @method createCanvas
*/
createCanvas: function () {
var width = this.game.width;
var height = this.game.height;
if (this.widthInPixels < width)
{
width = this.widthInPixels;
}
if (this.heightInPixels < height)
{
height = this.heightInPixels;
}
this.canvas = Phaser.Canvas.create(width, height);
this.context = this.canvas.getContext('2d');
this.baseTexture = new PIXI.BaseTexture(this.canvas);
this.texture = new PIXI.Texture(this.baseTexture);
this.sprite = new PIXI.Sprite(this.texture);
this.parent.addChild(this.sprite);
},
createQuadTree: function (width, height) {
this.quadTree = new Phaser.QuadTree(this, 0, 0, width, height, 20, 4);
},
/**
* Update boundsInTiles with widthInTiles and heightInTiles.
* @method updateBounds
*/
updateBounds: function () {
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
},
/**
* Parse tile offsets from map data.
* Basically this creates a large array of objects that contain the x/y coordinates to grab each tile from
* for the entire map. Yes we could calculate this at run-time by using the tile index and some math, but we're
* trading a quite small bit of memory here to not have to process that in our main render loop.
* @method parseTileOffsets
* @return {number} Length of tileOffsets array.
*/
parseTileOffsets: function () {
this.tileOffsets = [];
var i = 0;
if (this.mapFormat == Phaser.Tilemap.JSON)
{
// For some reason Tiled counts from 1 not 0
this.tileOffsets[0] = null;
i = 1;
}
for (var ty = this.tileMargin; ty < this.tileset.height; ty += (this.tileHeight + this.tileSpacing))
{
for (var tx = this.tileMargin; tx < this.tileset.width; tx += (this.tileWidth + this.tileSpacing))
{
this.tileOffsets[i] = {
x: tx,
y: ty
};
i++;
}
}
return this.tileOffsets.length;
}
};
/**
* Get
* @return {Description}
*//**
* Set
* @param {Description} value - Description.
*/
Object.defineProperty(Phaser.TilemapLayer.prototype, 'alpha', {
get: function() {
return this._alpha;
},
set: function(value) {
if (this.sprite)
{
this.sprite.alpha = value;
}
this._alpha = value;
}
});