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

And Tilemaps are rendering again - and much better than ever before :) Just one final optimisation pass to do and then it's on to collision.

Browse Source
This commit is contained in:
photonstorm
2013-10-11 18:18:27 +01:00
parent cf414394c3
commit 0201baef11
10 changed files with 304 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tilemap/Tilemap.js
+129 -6
View File
@@ -1,11 +1,134 @@
Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight) {
Phaser.Tilemap = function (game, key) {
/**
* @property {Phaser.Game} game - Description.
*/
this.game = game;
/**
* @property {array} layers - Description.
*/
this.layers;
if (typeof key === 'string')
{
this.key = key;
this.layers = game.cache.getTilemapData(key).layers;
}
else
{
this.layers = [];
}
this.currentLayer = 0;
this.debugMap = [];
};
// 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;
Phaser.Tilemap.TILED_JSON = 1;
Phaser.Tilemap.prototype = {
create: function (name, width, height) {
var data = [];
for (var y = 0; y < height; y++)
{
data[y] = [];
for (var x = 0; x < width; x++)
{
data[y][x] = 0;
}
}
this.currentLayer = this.layers.push({
name: name,
width: width,
height: height,
alpha: 1,
visible: true,
tileMargin: 0,
tileSpacing: 0,
format: Phaser.Tilemap.CSV,
data: data
});
},
setLayer: function (layer) {
if (this.layers[layer])
{
this.currentLayer = layer;
}
},
createLayerSprite: function (tilset) {
// Creates a TilemapLayer which you can add to the display list
// Hooked to a specific layer within the map data
},
/**
* 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 (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
{
this.layers[this.currentLayer].data[y][x] = index;
}
},
dump: function () {
var txt = '';
var args = [''];
for (var y = 0; y < this.layers[this.currentLayer].height; y++)
{
for (var x = 0; x < this.layers[this.currentLayer].width; x++)
{
txt += "%c ";
if (this.layers[this.currentLayer].data[y][x] > 1)
{
if (this.debugMap[this.layers[this.currentLayer].data[y][x]])
{
args.push("background: " + this.debugMap[this.layers[this.currentLayer].data[y][x]]);
}
else
{
args.push("background: #ffffff");
}
}
else
{
args.push("background: rgb(0, 0, 0)");
}
}
txt += "\n";
}
args[0] = txt;
console.log.apply(console, args);
}
};
src/tilemap/TilemapLayer.js
+99 -95
View File
@@ -30,16 +30,14 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
*/
this.texture = new PIXI.Texture(this.baseTexture);
// index, x, y, width, height, name, uuid
this.frame = new Phaser.Frame(0, 0, 0, renderWidth, renderHeight, 'tilemaplayer', game.rnd.uuid());
/**
* @property {Description} sprite - Description.
* @default
*/
this.sprite = new PIXI.Sprite(this.texture);
/**
* @property {array} mapData - Description.
*/
this.mapData = [];
this.sprite = new Phaser.Sprite(this.game, x, y, this.texture, this.frame);
/**
* @property {Description} tileset - Description.
@@ -127,46 +125,32 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
*/
this._startY = 0;
this.tilemap;
this.layer;
this._x = 0;
this._y = 0;
this._prevX = 0;
this._prevY = 0;
this.dirty = true;
};
Phaser.TilemapLayer.prototype = {
create: function (width, height) {
updateMapData: function (tilemap, layerID) {
this.mapData = [];
this.tilemap = tilemap;
this.layer = this.tilemap.layers[layerID];
var data;
for (var y = 0; y < height; y++)
if (this._maxX > this.layer.width)
{
this.mapData[y] = [];
for (var x = 0; x < width; x++)
{
this.mapData[y][x] = 0;
}
this._maxX = this.layer.width;
}
this.widthInTiles = width;
this.heightInTiles = height;
},
/**
* 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 (this._maxY > this.layer.height)
{
if (x >= 0 && x < this.mapData[y].length)
{
this.mapData[y][x] = index;
}
this._maxY = this.layer.height;
}
},
@@ -177,22 +161,26 @@ Phaser.TilemapLayer.prototype = {
this.tileWidth = this.tileset.tileWidth;
this.tileHeight = this.tileset.tileHeight;
// This don't need to be calculated every frame!
this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
},
render: function () {
if (this.visible == false)
if (this.visible == false || this.dirty == false)
{
return;
}
// Work out how many tiles we can fit into our canvas and round it up for the edges
this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
// this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
// this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
// And now work out where in the tilemap the camera actually is
this._startX = this.game.math.floor(this.game.camera.x / this.tileWidth);
this._startY = this.game.math.floor(this.game.camera.y / this.tileHeight);
this._startX = this.game.math.floor(this._x / this.tileWidth);
this._startY = this.game.math.floor(this._y / this.tileHeight);
// Tilemap bounds check
if (this._startX < 0)
@@ -205,47 +193,40 @@ Phaser.TilemapLayer.prototype = {
this._startY = 0;
}
if (this._maxX > this.widthInTiles)
if (this._startX + this._maxX > this.layer.width)
{
this._maxX = this.widthInTiles;
this._startX = this.layer.width - this._maxX;
}
if (this._maxY > this.heightInTiles)
if (this._startY + this._maxY > this.layer.height)
{
this._maxY = this.heightInTiles;
}
if (this._startX + this._maxX > this.widthInTiles)
{
this._startX = this.widthInTiles - this._maxX;
}
if (this._startY + this._maxY > this.heightInTiles)
{
this._startY = this.heightInTiles - this._maxY;
this._startY = this.layer.height - this._maxY;
}
// Finally get the offset to avoid the blocky movement
this._dx = -(this.game.camera.x - (this._startX * this.tileWidth));
this._dy = -(this.game.camera.y - (this._startY * this.tileHeight));
this._dx = -(this._x - (this._startX * this.tileWidth));
this._dy = -(this._y - (this._startY * this.tileHeight));
this._tx = this._dx;
this._ty = this._dy;
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
for (var row = this._startY; row < this._startY + this._maxY; row++)
for (var y = this._startY; y < this._startY + this._maxY; y++)
{
this._columnData = this.mapData[row];
this._column = this.layer.data[y];
for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
for (var x = this._startX; x < this._startX + this._maxX; x++)
{
if (this.tileset.checkTileIndex(this._columnData[tile]))
{
// only -1 on TILED maps, not CSV
var tile = this.tileset.tiles[this._column[x]-1];
// if (this.tileset.checkTileIndex(tile))
// {
this.context.drawImage(
this.tileset.image,
this.tileset.tiles[this._columnData[tile]].x,
this.tileset.tiles[this._columnData[tile]].y,
tile.x,
tile.y,
this.tileWidth,
this.tileHeight,
this._tx,
@@ -253,7 +234,7 @@ Phaser.TilemapLayer.prototype = {
this.tileWidth,
this.tileHeight
);
}
// }
this._tx += this.tileWidth;
@@ -269,39 +250,62 @@ Phaser.TilemapLayer.prototype = {
PIXI.texturesToUpdate.push(this.baseTexture);
}
this.dirty = false;
return true;
},
dump: function () {
var txt = '';
var args = [''];
for (var y = 0; y < this.heightInTiles; y++)
{
for (var x = 0; x < this.widthInTiles; x++)
{
txt += "%c ";
if (this.mapData[y][x] > 0)
{
args.push("background: rgb(50, 50, 50)");
}
else
{
args.push("background: rgb(0, 0, 0)");
}
}
txt += "\n";
}
args[0] = txt;
console.log.apply(console, args);
}
};
Phaser.TilemapLayer.prototype.deltaAbsX = function () {
return (this.deltaX() > 0 ? this.deltaX() : -this.deltaX());
}
Phaser.TilemapLayer.prototype.deltaAbsY = function () {
return (this.deltaY() > 0 ? this.deltaY() : -this.deltaY());
}
Phaser.TilemapLayer.prototype.deltaX = function () {
return this._x - this._prevX;
}
Phaser.TilemapLayer.prototype.deltaY = function () {
return this._y - this._prevY;
}
Object.defineProperty(Phaser.TilemapLayer.prototype, "x", {
get: function () {
return this._x;
},
set: function (value) {
if (value !== this._x)
{
this._x = value;
this.dirty = true;
}
}
});
Object.defineProperty(Phaser.TilemapLayer.prototype, "y", {
get: function () {
return this._y;
},
set: function (value) {
if (value !== this._y)
{
this._y = value;
this.dirty = true;
}
}
});
src/tilemap/TilemapParser.js
+17 -8
View File
@@ -64,11 +64,11 @@ Phaser.TilemapParser = {
parse: function (game, data, format) {
if (format == Phaser.Tilemap.CSV)
if (format === Phaser.Tilemap.CSV)
{
return this.parseCSV(data);
}
else if (format == Phaser.Tilemap.TILED_JSON)
else if (format === Phaser.Tilemap.TILED_JSON)
{
return this.parseTiledJSON(data);
}
@@ -87,8 +87,9 @@ Phaser.TilemapParser = {
data = data.trim();
var output = [];
var rows = data.split("\n");
var height = rows.length;
var width = 0;
for (var i = 0; i < rows.length; i++)
{
@@ -100,9 +101,14 @@ Phaser.TilemapParser = {
{
output[i][c] = parseInt(column[c]);
}
if (width == 0)
{
width = column.length;
}
}
return [{ name: 'csv', alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
},
@@ -131,10 +137,13 @@ Phaser.TilemapParser = {
var layer = {
name: json.layers[i].name,
width: json.layers[i].width,
height: json.layers[i].height,
alpha: json.layers[i].opacity,
visible: json.layers[i].visible,
tileMargin: json.tilesets[0].margin,
tileSpacing: json.tilesets[0].spacing
tileSpacing: json.tilesets[0].spacing,
};
@@ -155,13 +164,13 @@ Phaser.TilemapParser = {
if (c == json.layers[i].width)
{
output.push(row);
// layer.addColumn(row);
c = 0;
}
}
layers.data = output;
this.layers.push(layer);
layer.data = output;
layers.push(layer);
}
src/tilemap/Tileset.js
-2
View File
@@ -38,8 +38,6 @@ Phaser.Tileset.prototype = {
checkTileIndex: function (index) {
console.log('checking tile', index);
return (this.tiles[index]);
}