wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-07-17 11:31:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improved TilemapLayer rendering and debug rendering significantly. Cleared out some old assets and added a new map.

Browse Source
This commit is contained in:
photonstorm
2013-12-18 00:44:04 +00:00
parent dd7ae12271
commit 50eee95c99
20 changed files with 3400 additions and 17525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tilemap/TilemapLayer.js
+76 -47
View File
@@ -101,6 +101,12 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset,
*/
this.debug = false;
/**
* @property {number} debugAlpha - If debug is true then the tileset is rendered with this alpha level, to make the tile edges clearer.
* @default
*/
this.debugAlpha = 0.5;
/**
* @property {number} widthInPixels - Do NOT recommend changing after the map is loaded!
* @readonly
@@ -791,7 +797,6 @@ Phaser.TilemapLayer.prototype.render = function () {
this.dirty = true;
}
// if (!this.dirty || !this.tileset || !this.tilemap || !this.visible)
if (!this.dirty || !this.tilemap || !this.visible)
{
return;
@@ -800,14 +805,9 @@ Phaser.TilemapLayer.prototype.render = function () {
this._prevX = this._dx;
this._prevY = this._dy;
// console.log('render', this._x);
this._dx = -(this._x - (this._startX * this.tileWidth));
this._dy = -(this._y - (this._startY * this.tileHeight));
// this._dx = Math.floor(this._dx);
// this._dy = Math.floor(this._dy);
this._tx = this._dx;
this._ty = this._dy;
@@ -815,8 +815,7 @@ Phaser.TilemapLayer.prototype.render = function () {
if (this.debug)
{
this.context.fillStyle = 'rgba(0,255,0,0.3)';
this.context.strokeStyle = 'rgba(0,255,0,0.9)';
this.context.globalAlpha = this.debugAlpha;
}
for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++)
@@ -842,45 +841,6 @@ Phaser.TilemapLayer.prototype.render = function () {
);
}
if (this.debug)
{
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)
{
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);
}
}
this._tx += this.tileWidth;
}
@@ -890,6 +850,12 @@ Phaser.TilemapLayer.prototype.render = function () {
}
if (this.debug)
{
this.context.globalAlpha = 1;
this.renderDebug();
}
// Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
if (this.game.renderType === Phaser.WEBGL)
{
@@ -907,6 +873,69 @@ Phaser.TilemapLayer.prototype.render = function () {
}
Phaser.TilemapLayer.prototype.renderDebug = function () {
this._tx = this._dx;
this._ty = this._dy;
this.context.fillStyle = 'rgba(0, 255, 0, 0.3)';
this.context.strokeStyle = 'rgb(0, 255, 0)';
for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++)
{
this._column = this.layer.data[y];
for (var x = this._startX, lenX = this._startX + this._maxX; x < lenX; x++)
{
var tile = this._column[x];
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)
{
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);
}
this._tx += this.tileWidth;
}
this._tx = this._dx;
this._ty += this.tileHeight;
}
}
/**
* Returns the absolute delta x value.
* @method Phaser.TilemapLayer#deltaAbsX
src/tilemap/TilemapParser.js
+17 -23
View File
@@ -16,46 +16,44 @@ Phaser.TilemapParser = {
* @method Phaser.TilemapParser.tileset
* @param {Phaser.Game} game - Game reference to the currently running game.
* @param {string} key - The Cache key of this tileset.
* @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} tileWidth - Width of each single tile in pixels.
* @param {number} tileHeight - Height of each single tile in pixels.
* @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.
* @param {number} [rows=-1] - How many tiles are placed horizontally in each row? If -1 it will calculate rows by dividing the image width by tileWidth.
* @param {number} [columns=-1] - How many tiles are placed vertically in each column? If -1 it will calculate columns by dividing the image height by tileHeight.
* @param {number} [total=-1] - The maximum number of tiles to extract from the image. If -1 it will extract `rows * columns` worth. You can also set a value lower than the actual number of tiles.
* @return {Phaser.Tileset} Generated Tileset object.
*/
tileset: function (game, key, tileWidth, tileHeight, tileMax, tileMargin, tileSpacing) {
tileset: function (game, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
// How big is our image?
var img = game.cache.getTilesetImage(key);
if (img == null)
if (img === null)
{
console.warn("Phaser.TilemapParser.tileSet: Invalid image key given");
return null;
}
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)
if (rows === -1)
{
tileWidth = Math.floor(-width / Math.min(-1, tileWidth));
rows = Math.round(width / tileWidth);
}
if (tileHeight <= 0)
if (columns === -1)
{
tileHeight = Math.floor(-height / Math.min(-1, tileHeight));
columns = Math.round(height / tileHeight);
}
var row = Math.round(width / tileWidth);
var column = Math.round(height / tileHeight);
var total = row * column;
if (total === -1)
{
total = rows * columns;
}
if (tileMax !== -1)
{
total = tileMax;
}
// Zero or smaller than tile sizes?
if (width === 0 || height === 0 || width < tileWidth || height < tileHeight || total === 0)
{
@@ -63,11 +61,7 @@ Phaser.TilemapParser = {
return null;
}
//Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, tileMargin, tileSpacing) {
return new Phaser.Tileset(img, key, total, tileWidth, tileHeight, 1, tileMargin, tileSpacing);
// tileset.build();
// return tileset;
return new Phaser.Tileset(img, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total);
},
src/tilemap/Tileset.js
+48 -16
View File
@@ -6,23 +6,21 @@
/**
* A Tile set is a combination of an image containing the tiles and collision data per tile.
* You should not normally instantiate this class directly.
*
* @class Phaser.Tileset
* @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} [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.
* @param {number} tileWidth - Width of each tile in pixels.
* @param {number} tileHeight - Height of each tile in pixels.
* @param {number} tileMargin - The amount of margin around the tilesheet.
* @param {number} tileSpacing - The amount of spacing between each tile in the sheet.
* @param {number} rows - How many tiles are placed horizontally in each row.
* @param {number} columns - How many tiles are placed vertically in each column.
* @param {number} total - The maximum number of tiles to extract from the image.
*/
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; }
Phaser.Tileset = function (image, key, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) {
/**
* @property {string} key - The cache ID.
@@ -34,15 +32,26 @@ Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, t
*/
this.image = image;
/**
* @property {number} rows - The number of rows in the tile sheet.
*/
this.rows = rows;
/**
* @property {number} columns - The number of columns in the tile sheet.
*/
this.columns = columns;
/**
* @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.
* @property {number} firstgid - The Tiled firstgid value.
* @default
*/
this.firstgid = firstgid;
this.firstgid = 1;
/**
* @property {number} tileWidth - The width of a tile in pixels.
@@ -76,7 +85,7 @@ Phaser.Tileset = function (image, key, total, tileWidth, tileHeight, firstgid, t
Phaser.Tileset.prototype = {
/**
* Builds the tile data
* Builds the tileset data.
*
* @method Phaser.Tileset#build
*/
@@ -85,6 +94,12 @@ Phaser.Tileset.prototype = {
var x = this.tileMargin;
var y = this.tileMargin;
var count = 0;
var countX = 0;
var countY = 0;
console.log('Building tileset', this.rows, 'x', this.columns, 'total', this.total);
for (var i = this.firstgid; i < this.firstgid + this.total; i++)
{
// Can add extra properties here as needed
@@ -92,14 +107,31 @@ Phaser.Tileset.prototype = {
x += this.tileWidth + this.tileSpacing;
if (x === this.image.width)
count++;
if (count === this.total)
{
break;
}
countX++;
if (countX === this.rows)
{
x = this.tileMargin;
y += this.tileHeight + this.tileSpacing;
countX = 0;
countY++;
if (countY === this.columns)
{
break;
}
}
}
// console.table(this.tiles);
console.table(this.tiles);
},