Tidying up the examples and more Tilemap work.

This commit is contained in:
photonstorm
2013-12-10 12:23:42 +00:00
parent af5847e8e4
commit 669570c701
115 changed files with 372 additions and 11768 deletions
+28 -12
View File
@@ -21,7 +21,7 @@ Phaser.Tilemap = function (game, key) {
this.game = game;
/**
* @property {array} layers - An array of Tilemap layers.
* @property {array} layers - An array of Tilemap layer data.
*/
this.layers = null;
@@ -30,7 +30,6 @@ Phaser.Tilemap = function (game, key) {
this.key = key;
this.layers = game.cache.getTilemapData(key).layers;
this.calculateIndexes();
}
else
{
@@ -45,7 +44,6 @@ Phaser.Tilemap = function (game, key) {
/**
* @property {array} debugMap - Map data used for debug values only.
*/
this.debugMap = [];
/**
@@ -117,25 +115,40 @@ Phaser.Tilemap.prototype = {
data: data,
indexes: [],
dirty: true
});
this.currentLayer = this.layers.length - 1;
},
createTilemapLayer: function (x, y, renderWidth, renderHeight, tileset, layer) {
return this.game.world.add(new Phaser.TilemapLayer(this.game, x, y, renderWidth, renderHeight, tileset, this, layer));
},
setCollisionByIndexRange: function (start, stop, layer) {
if (start > stop)
{
return;
}
for (var i = start; i <= stop; i++)
{
this.setCollisionByIndex(i, layer);
}
},
/**
* Sets collision values on a tile in the set.
*
* @method Phaser.Tileset#setCollision
* @param {number} index - The index of the tile within the set.
* @param {boolean} left - Should the tile collide on the left?
* @param {boolean} right - Should the tile collide on the right?
* @param {boolean} up - Should the tile collide on the top?
* @param {boolean} down - Should the tile collide on the bottom?
* @param {number} index - The index of the tile on the layer.
* @param {number} layer - The layer to operate on.
*/
// Sets all tiles matching the given index to collide on the given faces
// Recalculates the collision map
setCollisionByIndex: function (index, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
@@ -157,6 +170,9 @@ Phaser.Tilemap.prototype = {
}
}
// Sets all tiles matching the given index to collide on the given faces
// Recalculates the collision map
// Now re-calculate interesting faces
this.calculateFaces(layer);
@@ -169,7 +185,7 @@ Phaser.Tilemap.prototype = {
var left = null;
var right = null;
console.log(this.layers[layer].width, 'x', this.layers[layer].height);
// console.log(this.layers[layer].width, 'x', this.layers[layer].height);
for (var y = 0; y < this.layers[layer].height ; y++)
{
+30 -29
View File
@@ -16,7 +16,7 @@
* @param {number} renderHeight - Height of the layer.
* @param {Phaser.Tileset|string} tileset - The tile set used for rendering.
* @param {Phaser.Tilemap} tilemap - The tilemap to which this layer belongs.
* @param {number} layer - The layer index within the map.
* @param {number|string} [layer=0] - The layer within the tilemap this TilemapLayer represents.
*/
Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset, tilemap, layer) {
@@ -48,7 +48,7 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
/**
* @property {Phaser.Frame} textureFrame - Dimensions of the renderable area.
*/
this.textureFrame = new Phaser.Frame(0, 0, 0, renderWidth, renderHeight, 'tilemaplayer', game.rnd.uuid());
this.textureFrame = new Phaser.Frame(0, 0, 0, renderWidth, renderHeight, 'tilemapLayer', game.rnd.uuid());
Phaser.Sprite.call(this, this.game, x, y, this.texture, this.textureFrame);
@@ -248,12 +248,12 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
this.tilemap = null;
/**
* @property {number} layer - Tilemap layer index.
* @property {object} layer - The layer object within the Tilemap that this layer represents.
*/
this.layer = null;
/**
* @property {number} index
* @property {number} index - The index of this layer within the Tilemap.
*/
this.index = 0;
@@ -349,13 +349,13 @@ Phaser.TilemapLayer.prototype.updateTileset = function (tileset) {
*/
Phaser.TilemapLayer.prototype.updateMapData = function (tilemap, layer) {
if (typeof layer === 'undefined')
{
layer = 0;
}
if (tilemap instanceof Phaser.Tilemap)
{
if (typeof layer === 'undefined')
{
layer = 0;
}
this.tilemap = tilemap;
this.layer = this.tilemap.layers[layer];
this.tileWidth = this.layer.tileWidth;
@@ -690,7 +690,8 @@ Phaser.TilemapLayer.prototype.render = function () {
this.dirty = true;
}
if (!this.dirty || !this.tileset || !this.tilemap || !this.visible)
// if (!this.dirty || !this.tileset || !this.tilemap || !this.visible)
if (!this.dirty || !this.tilemap || !this.visible)
{
return;
}
@@ -710,10 +711,8 @@ Phaser.TilemapLayer.prototype.render = function () {
this._ty = this._dy;
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
// this.context.fillStyle = '#000000';
// this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.context.strokeStyle = '#00ff00';
this.context.fillStyle = 'rgba(0,255,0,0.3)';
this.context.strokeStyle = 'rgba(0,255,0,0.9)';
for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++)
{
@@ -725,25 +724,27 @@ Phaser.TilemapLayer.prototype.render = function () {
// var tile = this.tileset.tiles[this._column[x] - 1];
if (tile)
{
// this.context.drawImage(
// this.tileset.image,
// tile.x,
// tile.y,
// this.tileWidth,
// this.tileHeight,
// Math.floor(this._tx),
// Math.floor(this._ty),
// this.tileWidth,
// this.tileHeight
// );
}
// if (tile && this.tileset)
// {
// this.context.drawImage(
// this.tileset.image,
// tile.x,
// tile.y,
// this.tileWidth,
// this.tileHeight,
// Math.floor(this._tx),
// Math.floor(this._ty),
// this.tileWidth,
// this.tileHeight
// );
// }
if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
{
this._tx = Math.floor(this._tx);
this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
this.context.beginPath();
if (tile.faceTop)
@@ -770,9 +771,9 @@ Phaser.TilemapLayer.prototype.render = function () {
this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
}
// this.context.closePath();
this.context.stroke();
// this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
// this.context.strokeRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
}