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

TilemapLayers now render tiles correctly, with our without debugging overlay. Collision working well across single and index ranges.

Browse Source
This commit is contained in:
photonstorm
2013-12-17 05:07:00 +00:00
parent 7917eac255
commit 896e9af9f5
18 changed files with 3500 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tilemap/Tilemap.js
+79 -41
View File
@@ -122,14 +122,38 @@ Phaser.Tilemap.prototype = {
},
createTilemapLayer: function (x, y, renderWidth, renderHeight, tileset, layer) {
/**
* Sets collision values on a range of tiles in the set.
*
* @method Phaser.Tileset#createTilemapLayer
* @param {number} x - X position of the new tilemapLayer.
* @param {number} y - Y position of the new tilemapLayer.
* @param {number} width - the width of the tilemapLayer.
* @param {number} height - the height of the tilemapLayer.
* @param {Phaser.Tileset|string} tileset - The tile set used for rendering.
* @param {number|string} [layer=0] - The layer within the tilemap this TilemapLayer represents.
* @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
*/
createTilemapLayer: function (x, y, renderWidth, renderHeight, tileset, layer, group) {
return this.game.world.add(new Phaser.TilemapLayer(this.game, x, y, renderWidth, renderHeight, tileset, this, layer));
if (typeof group === 'undefined') { group = this.game.world; }
return group.add(new Phaser.TilemapLayer(this.game, x, y, renderWidth, renderHeight, tileset, this, layer));
},
/**
* Sets collision values on a range of tiles in the set.
*
* @method Phaser.Tileset#setCollisionByIndexRange
* @param {number} start - The first index of the tile on the layer.
* @param {number} stop - The last index of the tile on the layer.
* @param {number} layer - The layer to operate on.
*/
setCollisionByIndexRange: function (start, stop, layer) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
if (start > stop)
{
return;
@@ -137,21 +161,26 @@ Phaser.Tilemap.prototype = {
for (var i = start; i <= stop; i++)
{
this.setCollisionByIndex(i, layer);
this.setCollisionByIndex(i, layer, false);
}
// Now re-calculate interesting faces
this.calculateFaces(layer);
},
/**
* Sets collision values on a tile in the set.
*
* @method Phaser.Tileset#setCollision
* @method Phaser.Tileset#setCollisionByIndex
* @param {number} index - The index of the tile on the layer.
* @param {number} layer - The layer to operate on.
* @param {boolean} [recalculate=true] - Recalculates the tile faces after the update.
*/
setCollisionByIndex: function (index, layer) {
setCollisionByIndex: function (index, layer, recalculate) {
if (typeof layer === "undefined") { layer = this.currentLayer; }
if (typeof recalculate === "undefined") { recalculate = true; }
for (var y = 0; y < this.layers[layer].height ; y++)
{
@@ -170,14 +199,20 @@ 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);
if (recalculate)
{
// Now re-calculate interesting faces
this.calculateFaces(layer);
}
},
/**
* Internal function.
*
* @method Phaser.Tileset#calculateFaces
* @param {number} layer - The layer to operate on.
*/
calculateFaces: function (layer) {
var above = null;
@@ -185,9 +220,9 @@ 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++)
for (var y = 0; y < this.layers[layer].height; y++)
{
for (var x = 0; x < this.layers[layer].width; x++)
{
@@ -229,6 +264,14 @@ Phaser.Tilemap.prototype = {
},
/**
* Internal function.
*
* @method Phaser.Tileset#getTileAbove
* @param {number} layer - The layer to operate on.
* @param {number} x - X.
* @param {number} y - Y.
*/
getTileAbove: function (layer, x, y) {
if (y > 0)
@@ -240,6 +283,14 @@ Phaser.Tilemap.prototype = {
},
/**
* Internal function.
*
* @method Phaser.Tileset#getTileBelow
* @param {number} layer - The layer to operate on.
* @param {number} x - X.
* @param {number} y - Y.
*/
getTileBelow: function (layer, x, y) {
if (y < this.layers[layer].height - 1)
@@ -251,6 +302,14 @@ Phaser.Tilemap.prototype = {
},
/**
* Internal function.
*
* @method Phaser.Tileset#getTileLeft
* @param {number} layer - The layer to operate on.
* @param {number} x - X.
* @param {number} y - Y.
*/
getTileLeft: function (layer, x, y) {
if (x > 0)
@@ -262,6 +321,14 @@ Phaser.Tilemap.prototype = {
},
/**
* Internal function.
*
* @method Phaser.Tileset#getTileRight
* @param {number} layer - The layer to operate on.
* @param {number} x - X.
* @param {number} y - Y.
*/
getTileRight: function (layer, x, y) {
if (x < this.layers[layer].width - 1)
@@ -273,35 +340,6 @@ Phaser.Tilemap.prototype = {
},
/**
* Internal function that calculates the tile indexes for the map data.
*
* @method Phaser.Tilemap#calculateIndexes
*/
calculateIndexes: function () {
/*
for (var layer = 0; layer < this.layers.length; layer++)
{
this.layers[layer].indexes = [];
for (var y = 0; y < this.layers[layer].height ; y++)
{
for (var x = 0; x < this.layers[layer].width; x++)
{
var idx = this.layers[layer].data[y][x];
if (this.layers[layer].indexes.indexOf(idx) === -1)
{
this.layers[layer].indexes.push(idx);
}
}
}
}
*/
},
/**
* Sets the current layer to the given index.
*
src/tilemap/TilemapLayer.js
+168 -64
View File
@@ -12,8 +12,8 @@
* @param {Phaser.Game} game - Game reference to the currently running game.
* @param {number} x - The x coordinate of this layer.
* @param {number} y - The y coordinate of this layer.
* @param {number} renderWidth - Width of the layer.
* @param {number} renderHeight - Height of the layer.
* @param {number} renderWidth - Width of the renderable area of the layer.
* @param {number} renderHeight - Height of the renderable area 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|string} [layer=0] - The layer within the tilemap this TilemapLayer represents.
@@ -26,7 +26,7 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
this.game = game;
/**
* @property {HTMLCanvasElement} canvas - The canvas to which this BitmapData draws.
* @property {HTMLCanvasElement} canvas - The canvas to which this TilemapLayer draws.
*/
this.canvas = Phaser.Canvas.create(renderWidth, renderHeight);
@@ -59,12 +59,17 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
this.type = Phaser.TILEMAPLAYER;
/**
* A layer that is fixed to the camera ignores the position of any ancestors in the display list and uses its x/y coordinates as offsets from the top left of the camera.
* @property {boolean} fixedToCamera - Fixes this layer to the Camera.
* An object that is fixed to the camera ignores the position of any ancestors in the display list and uses its x/y coordinates as offsets from the top left of the camera.
* @property {boolean} fixedToCamera - Fixes this object to the Camera.
* @default
*/
this.fixedToCamera = true;
/**
* @property {Phaser.Point} cameraOffset - If this object is fixed to the camera then use this Point to specify how far away from the Camera x/y it's rendered.
*/
this.cameraOffset = new Phaser.Point(x, y);
/**
* @property {Phaser.Tileset} tileset - The tile set used for rendering.
*/
@@ -90,6 +95,12 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
*/
this.tileSpacing = 0;
/**
* @property {boolean} debug - If set to true the collideable tile edges path will be rendered.
* @default
*/
this.debug = false;
/**
* @property {number} widthInPixels - Do NOT recommend changing after the map is loaded!
* @readonly
@@ -505,17 +516,108 @@ Phaser.TilemapLayer.prototype.getTileXY = function (x, y, point) {
}
/**
* Get the tiles within the given area.
* Get all tiles that exist within the given area, defined by the top-left corner, width and height. Values given are in pixels, not tiles.
* @method Phaser.TilemapLayer#getTiles
* @memberof Phaser.TilemapLayer
* @param {number} x - X position of the top left of the area to copy (given in tiles, not pixels)
* @param {number} y - Y position of the top left of the area to copy (given in tiles, not pixels)
* @param {number} width - The width of the area to copy (given in tiles, not pixels)
* @param {number} height - The height of the area to copy (given in tiles, not pixels)
* @param {number} x - X position of the top left corner.
* @param {number} y - Y position of the top left corner.
* @param {number} width - Width of the area to get.
* @param {number} height - Height of the area to get.
* @param {boolean} [collides=false] - If true only return tiles that collide on one or more faces.
* @return {array} Array with tiles informations (each contains x, y, and the tile).
*/
Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides, debug) {
Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides) {
if (this.tilemap === null)
{
return;
}
// Should we only get tiles that have at least one of their collision flags set? (true = yes, false = no just get them all)
if (typeof collides === 'undefined') { collides = false; }
// adjust the x,y coordinates for scrollFactor
x = this._fixX(x);
y = this._fixY(y);
if (width > this.widthInPixels)
{
width = this.widthInPixels;
}
if (height > this.heightInPixels)
{
height = this.heightInPixels;
}
var tileWidth = this.tileWidth * this.scale.x;
var tileHeight = this.tileHeight * this.scale.y;
// Convert the pixel values into tile coordinates
this._tx = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
this._ty = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
this._tw = (this.game.math.snapToCeil(width, tileWidth) + tileWidth) / tileWidth;
this._th = (this.game.math.snapToCeil(height, tileHeight) + tileHeight) / tileHeight;
// This should apply the layer x/y here
this._results.length = 0;
// var _index = 0;
var _tile = null;
// var sx = 0;
// var sy = 0;
for (var wy = this._ty; wy < this._ty + this._th; wy++)
{
for (var wx = this._tx; wx < this._tx + this._tw; wx++)
{
if (this.layer.data[wy] && this.layer.data[wy][wx])
{
_tile = this.layer.data[wy][wx];
if (_tile)
{
// sx = this.tileWidth * this.scale.x;
// sy = this.tileHeight * this.scale.y;
if (collides === false || (collides && _tile.collides))
{
// convert tile coordinates back to camera space for return
var _wx = this._unfixX(wx * tileWidth) / this.tileWidth;
var _wy = this._unfixY(wy * tileHeight) / this.tileHeight;
this._results.push({
x: _wx * tileWidth,
y: _wy * tileHeight,
right: (_wx * tileWidth) + tileWidth,
bottom: (_wy * tileHeight) + tileHeight,
tile: _tile
});
}
}
}
}
}
return this._results;
}
/**
* Get all tiles that exist within the given area, defined by the top-left corner, width and height. Values given are in pixels, not tiles.
* This function also draws to the context all of the debug areas.
* @method Phaser.TilemapLayer#debugGetTiles
* @memberof Phaser.TilemapLayer
* @param {number} x - X position of the top left corner.
* @param {number} y - Y position of the top left corner.
* @param {number} width - Width of the area to get.
* @param {number} height - Height of the area to get.
* @param {boolean} [collides=false] - If true only return tiles that collide on one or more faces.
* @return {array} Array with tiles informations (each contains x, y, and the tile).
*/
Phaser.TilemapLayer.prototype.debugGetTiles = function (x, y, width, height, collides) {
if (this.tilemap === null)
{
@@ -616,7 +718,6 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides
this.context.fillRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight);
}
// this.context.strokeRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight);
// convert tile coordinates back to camera space for return
@@ -674,7 +775,7 @@ Phaser.TilemapLayer.prototype.updateMax = function () {
this.dirty = true;
console.log('updateMax', this._maxX, this._maxY, 'px', this.widthInPixels, this.heightInPixels, 'rwh', this.width, this.height);
// console.log('updateMax', this._maxX, this._maxY, 'px', this.widthInPixels, this.heightInPixels, 'rwh', this.width, this.height);
}
@@ -711,8 +812,12 @@ Phaser.TilemapLayer.prototype.render = function () {
this._ty = this._dy;
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = 'rgba(0,255,0,0.3)';
this.context.strokeStyle = 'rgba(0,255,0,0.9)';
if (this.debug)
{
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++)
{
@@ -722,59 +827,58 @@ Phaser.TilemapLayer.prototype.render = function () {
{
var tile = this._column[x];
// var tile = this.tileset.tiles[this._column[x] - 1];
// 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))
if (tile && this.tileset)
{
this._tx = Math.floor(this._tx);
this.context.drawImage(
this.tileset.image,
this.tileset.getTileX(tile.index),
this.tileset.getTileY(tile.index),
this.tileWidth,
this.tileHeight,
Math.floor(this._tx),
Math.floor(this._ty),
this.tileWidth,
this.tileHeight
);
}
this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
this.context.beginPath();
if (tile.faceTop)
if (this.debug)
{
if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
{
this.context.moveTo(this._tx, this._ty);
this.context.lineTo(this._tx + this.tileWidth, this._ty);
this._tx = Math.floor(this._tx);
// this.context.fillRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
this.context.beginPath();
if (tile.faceTop)
{
this.context.moveTo(this._tx, this._ty);
this.context.lineTo(this._tx + this.tileWidth, this._ty);
}
if (tile.faceBottom)
{
this.context.moveTo(this._tx, this._ty + this.tileHeight);
this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
}
if (tile.faceLeft)
{
this.context.moveTo(this._tx, this._ty);
this.context.lineTo(this._tx, this._ty + this.tileHeight);
}
if (tile.faceRight)
{
this.context.moveTo(this._tx + this.tileWidth, this._ty);
this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
}
this.context.stroke();
// this.context.strokeRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
}
if (tile.faceBottom)
{
this.context.moveTo(this._tx, this._ty + this.tileHeight);
this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
}
if (tile.faceLeft)
{
this.context.moveTo(this._tx, this._ty);
this.context.lineTo(this._tx, this._ty + this.tileHeight);
}
if (tile.faceRight)
{
this.context.moveTo(this._tx + this.tileWidth, this._ty);
this.context.lineTo(this._tx + this.tileWidth, this._ty + this.tileHeight);
}
// this.context.closePath();
this.context.stroke();
// this.context.strokeRect(this._tx, this._ty, this.tileWidth, this.tileHeight);
}
this._tx += this.tileWidth;
src/tilemap/TilemapParser.js
+4 -19
View File
@@ -63,26 +63,11 @@ Phaser.TilemapParser = {
return null;
}
// Let's create some tiles
var x = tileMargin;
var y = tileMargin;
//Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, tileMargin, tileSpacing) {
return new Phaser.Tileset(img, key, total, tileWidth, tileHeight, 1, tileMargin, tileSpacing);
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 + tileSpacing;
if (x === width)
{
x = tileMargin;
y += tileHeight + tileSpacing;
}
}
return tileset;
// tileset.build();
// return tileset;
},
src/tilemap/Tileset.js
+72 -22
View File
@@ -11,13 +11,16 @@
* @constructor
* @param {Image} image - The Image object from the Cache.
* @param {string} key - The key of the tileset in the cache.
* @param {number} total - The total number of tiles in the tilesheet.
* @param {number} tileWidth - The width of the tile in pixels.
* @param {number} tileHeight - The height of the tile in pixels.
* @param {number} [tileMargin] - The margin around the tiles in the sheet.
* @param {number} [tileSpacing] - The spacing between the tiles in the sheet.
* @param {number} [firstgid=0] - The first index number (as specified by Tiled, otherwise set to zero)
* @param {number} [tileMargin=0] - The margin around the tiles in the sheet.
* @param {number} [tileSpacing=0] - The spacing between the tiles in the sheet.
*/
Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSpacing) {
Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, tileMargin, tileSpacing) {
if (typeof firstgid === "undefined") { firstgid = 0; }
if (typeof tileMargin === "undefined") { tileMargin = 0; }
if (typeof tileSpacing === "undefined") { tileSpacing = 0; }
@@ -31,6 +34,16 @@ Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSp
*/
this.image = image;
/**
* @property {number} total - The total number of tiles in the tilesheet.
*/
this.total = total;
/**
* @property {number} firstgid - The total number of tiles in the tilesheet.
*/
this.firstgid = firstgid;
/**
* @property {number} tileWidth - The width of a tile in pixels.
*/
@@ -44,33 +57,49 @@ Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSp
/**
* @property {number} tileMargin - The margin around the tiles in the sheet.
*/
this.margin = tileMargin;
this.tileMargin = tileMargin;
/**
* @property {number} tileSpacing - The margin around the tiles in the sheet.
*/
this.spacing = tileSpacing;
this.tileSpacing = tileSpacing;
/**
* @property {array} tiles - An array of the tile collision data.
* @property {array} tiles - An array of the tile data.
*/
this.tiles = [];
this.build();
}
Phaser.Tileset.prototype = {
/**
* Adds a Tile into this set.
* Builds the tile data
*
* @method Phaser.Tileset#addTile
* @param {Phaser.Tile} tile - The tile to add to this set.
* @method Phaser.Tileset#build
*/
addTile: function (tile) {
build: function () {
this.tiles.push(tile);
var x = this.tileMargin;
var y = this.tileMargin;
return tile;
for (var i = this.firstgid; i < this.firstgid + this.total; i++)
{
// Can add extra properties here as needed
this.tiles[i] = [x, y];
x += this.tileWidth + this.tileSpacing;
if (x === this.image.width)
{
x = this.tileMargin;
y += this.tileHeight + this.tileSpacing;
}
}
// console.table(this.tiles);
},
@@ -79,16 +108,37 @@ Phaser.Tileset.prototype = {
*
* @method Phaser.Tileset#getTile
* @param {number} index - The index of the tile within the set.
* @return {Phaser.Tile} The tile.
* @return {object} The tile object.
*/
getTile: function (index) {
if (this.tiles[index])
{
return this.tiles[index];
}
return this.tiles[index];
return null;
},
/**
* Gets a Tile from this set.
*
* @method Phaser.Tileset#getTileX
* @param {number} index - The index of the tile within the set.
* @return {object} The tile object.
*/
getTileX: function (index) {
return this.tiles[index][0];
},
/**
* Gets a Tile from this set.
*
* @method Phaser.Tileset#getTileY
* @param {number} index - The index of the tile within the set.
* @return {object} The tile object.
*/
getTileY: function (index) {
return this.tiles[index][1];
},
@@ -112,7 +162,6 @@ Phaser.Tileset.prototype = {
* @method Phaser.Tileset#canCollide
* @param {number} index - The index of the tile within the set.
* @return {boolean} True or false depending on the tile collision or null if no tile was found at the given index.
*/
canCollide: function (index) {
if (this.tiles[index])
@@ -123,6 +172,7 @@ Phaser.Tileset.prototype = {
return null;
},
*/
/**
* Checks if the tile at the given index exists.
@@ -147,7 +197,6 @@ Phaser.Tileset.prototype = {
* @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?
*/
setCollisionRange: function (start, stop, left, right, up, down) {
if (this.tiles[start] && this.tiles[stop] && start < stop)
@@ -159,6 +208,7 @@ Phaser.Tileset.prototype = {
}
},
*/
/**
* Sets collision values on a tile in the set.
@@ -169,7 +219,6 @@ Phaser.Tileset.prototype = {
* @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?
*/
setCollision: function (index, left, right, up, down) {
if (this.tiles[index])
@@ -178,6 +227,7 @@ Phaser.Tileset.prototype = {
}
}
*/
}
@@ -186,7 +236,7 @@ Phaser.Tileset.prototype = {
* @property {number} total - The total number of tiles in this Tileset.
* @readonly
*/
Object.defineProperty(Phaser.Tileset.prototype, "total", {
Object.defineProperty(Phaser.Tileset.prototype, "XXXtotal", {
get: function () {
return this.tiles.length;