Fixed a few things in Tilemap and optimised the renderer a little bit.

This commit is contained in:
Richard Davey 2013-08-08 06:29:21 +01:00
parent 48f6d850c8
commit 73745e5720
7 changed files with 106 additions and 156 deletions

View file

@ -17,20 +17,13 @@ module Phaser.Renderer.Canvas {
// Local rendering related temp vars to help avoid gc spikes through constant var creation
private _ga: number = 1;
private _sx: number = 0;
private _sy: number = 0;
private _sw: number = 0;
private _sh: number = 0;
private _dx: number = 0;
private _dy: number = 0;
private _dw: number = 0;
private _dh: number = 0;
private _fx: number = 1;
private _fy: number = 1;
private _tx: number = 0;
private _ty: number = 0;
private _sin: number = 0;
private _cos: number = 1;
private _tl: number = 0;
private _maxX: number = 0;
private _maxY: number = 0;
private _startX: number = 0;
@ -44,15 +37,18 @@ module Phaser.Renderer.Canvas {
public render(camera: Camera, tilemap: Tilemap): bool {
// Loop through the layers
for (var i = 0; i < tilemap.layers.length; i++)
{
var layer: TilemapLayer = tilemap.layers[i];
if (layer.visible == false || layer.alpha < 0.1)
this._tl = tilemap.layers.length;
for (var i = 0; i < this._tl; i++)
{
if (tilemap.layers[i].visible == false || tilemap.layers[i].alpha < 0.1)
{
continue;
}
var layer: TilemapLayer = tilemap.layers[i];
// Work out how many tiles we can fit into our camera and round it up for the edges
this._maxX = this.game.math.ceil(camera.width / layer.tileWidth) + 1;
this._maxY = this.game.math.ceil(camera.height / layer.tileHeight) + 1;

View file

@ -117,11 +117,6 @@ module Phaser {
*/
public transform: Phaser.Components.TransformManager;
/**
* The Events component
*/
//public events: Phaser.Components.Sprite.Events;
/**
* z order value of the object.
*/
@ -132,10 +127,6 @@ module Phaser {
*/
public renderOrderID: number = 0;
/**
* Tilemap data format enum: CSV.
* @type {number}
@ -189,21 +180,6 @@ module Phaser {
*/
public mapFormat: number;
/**
* Inherited methods for overriding.
*/
public preUpdate() {
}
public update() {
}
public postUpdate() {
}
public destroy() {
}
/**
* Parset csv map data and generate tiles.
* @param data {string} CSV map data.
@ -213,7 +189,7 @@ module Phaser {
*/
private parseCSV(data: string, key: string, tileWidth: number, tileHeight: number) {
var layer: TilemapLayer = new TilemapLayer(this.game, this, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
var layer: TilemapLayer = new TilemapLayer(this, 0, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
@ -257,7 +233,7 @@ module Phaser {
for (var i = 0; i < json.layers.length; i++)
{
var layer: TilemapLayer = new TilemapLayer(this.game, this, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
var layer: TilemapLayer = new TilemapLayer(this, i, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Check it's a data layer
if (!json.layers[i].data)
@ -401,7 +377,7 @@ module Phaser {
* @param [layer] {number} layer of this tile located.
* @return {Tile} The tile with specific properties.
*/
public getTile(x: number, y: number, layer?: number = 0):Tile {
public getTile(x: number, y: number, layer?: number = this.currentLayer.ID):Tile {
return this.tiles[this.layers[layer].getTileIndex(x, y)];
@ -414,7 +390,7 @@ module Phaser {
* @param [layer] {number} layer of this tile located.
* @return {Tile} The tile with specific properties.
*/
public getTileFromWorldXY(x: number, y: number, layer?: number = 0):Tile {
public getTileFromWorldXY(x: number, y: number, layer?: number = this.currentLayer.ID):Tile {
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
@ -425,7 +401,7 @@ module Phaser {
* @param layer The layer to check, defaults to 0
* @returns {Tile}
*/
public getTileFromInputXY(layer?: number = 0):Tile {
public getTileFromInputXY(layer?: number = this.currentLayer.ID):Tile {
return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)];
@ -507,16 +483,21 @@ module Phaser {
* @param index {number} The index of this tile type in the core map data.
* @param [layer] {number} which layer you want to set the tile to.
*/
public putTile(x: number, y: number, index: number, layer?: number = 0) {
public putTile(x: number, y: number, index: number, layer?: number = this.currentLayer.ID) {
this.layers[layer].putTile(x, y, index);
}
// Set current layer
// Set layer order?
// Delete tiles of certain type
// Erase tiles
public destroy() {
this.texture = null;
this.transform = null;
this.tiles.length = 0;
this.layers.length = 0;
}
}

View file

@ -16,19 +16,20 @@ module Phaser {
* TilemapLayer constructor
* Create a new <code>TilemapLayer</code>.
*
* @param game {Phaser.Game} Current game instance.
* @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.FORMAT_CSV or Tilemap.FORMAT_TILED_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.
*/
constructor(game: Game, parent:Tilemap, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
constructor(parent:Tilemap, id:number, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
this.game = game;
this.parent = parent;
this.game = parent.game;
this.ID = id;
this.name = name;
this.mapFormat = mapFormat;
this.tileWidth = tileWidth;
@ -97,6 +98,12 @@ module Phaser {
*/
public name: string;
/**
* The ID of the layer within the Tilemap.
* @type {number}
*/
public ID: number;
/**
* Controls whether update() and draw() are automatically called.
* @type {boolean}
@ -109,11 +116,6 @@ module Phaser {
*/
public visible: bool = true;
/**
* @type {string}
*/
//public orientation: string;
/**
* Properties of this map layer. (normally set by map editors)
*/
@ -131,7 +133,7 @@ module Phaser {
public mapFormat: number;
/**
* It's width and height are in tiles instead of pixels.
* Map bounds (width and height) in tiles not pixels.
* @type {Rectangle}
*/
public boundsInTiles: Rectangle;

View file

@ -29,14 +29,12 @@ Future Plans
* Add ability to create extra <div>s within the game container, layered above/below the canvas
* Basic Window UI component (maybe a propogating Group?)
* Add clip support + shape options to Texture Component.
* Tilemap: remove tiles of a certain type, replace tile with sprite, change layer order
ToDo before release
-------------------
* Tilemap.render - move layers length to var
* Tilemap.destroy needs doing
* Investigate bug re: tilemap collision and animation frames
* Need to be able to set the current tilemap layer, then the getTileXY default layer uses that one if no other given
* Allow camera to directly render to the stage rather than hidden ctx (maybe does this by default? or have under Mobile Optimisations list)
* Sprite collision events
* Check bounds/edge points when sprite is only 1x1 sized :)
@ -49,6 +47,7 @@ ToDo before release
* Pixel-perfect click check
* Check Flash atlas export is supported
* DynamicTexture.setPixel needs to be swapped for a proper pixel put, not the filledRect it currently is.
* TypeScript 0.9.1 update!
Latest Update
-------------

View file

@ -11521,15 +11521,15 @@ var Phaser;
* TilemapLayer constructor
* Create a new <code>TilemapLayer</code>.
*
* @param game {Phaser.Game} Current game instance.
* @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.FORMAT_CSV or Tilemap.FORMAT_TILED_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.
*/
function TilemapLayer(game, parent, key, mapFormat, name, tileWidth, tileHeight) {
function TilemapLayer(parent, id, key, mapFormat, name, tileWidth, tileHeight) {
/**
* Controls whether update() and draw() are automatically called.
* @type {boolean}
@ -11572,8 +11572,9 @@ var Phaser;
* @type {number}
*/
this.tileSpacing = 0;
this.game = game;
this.parent = parent;
this.game = parent.game;
this.ID = id;
this.name = name;
this.mapFormat = mapFormat;
this.tileWidth = tileWidth;
@ -12028,10 +12029,6 @@ var Phaser;
if (typeof tileWidth === "undefined") { tileWidth = 0; }
if (typeof tileHeight === "undefined") { tileHeight = 0; }
/**
* The Events component
*/
//public events: Phaser.Components.Sprite.Events;
/**
* z order value of the object.
*/
this.z = -1;
@ -12072,17 +12069,6 @@ var Phaser;
}
Tilemap.FORMAT_CSV = 0;
Tilemap.FORMAT_TILED_JSON = 1;
Tilemap.prototype.preUpdate = /**
* Inherited methods for overriding.
*/
function () {
};
Tilemap.prototype.update = function () {
};
Tilemap.prototype.postUpdate = function () {
};
Tilemap.prototype.destroy = function () {
};
Tilemap.prototype.parseCSV = /**
* Parset csv map data and generate tiles.
* @param data {string} CSV map data.
@ -12091,7 +12077,7 @@ var Phaser;
* @param tileHeight {number} Height of its tile.
*/
function (data, key, tileWidth, tileHeight) {
var layer = new Phaser.TilemapLayer(this.game, this, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
var layer = new Phaser.TilemapLayer(this, 0, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
var rows = data.split("\n");
@ -12118,7 +12104,7 @@ var Phaser;
data = data.trim();
var json = JSON.parse(data);
for(var i = 0; i < json.layers.length; i++) {
var layer = new Phaser.TilemapLayer(this.game, this, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
var layer = new Phaser.TilemapLayer(this, i, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Check it's a data layer
if(!json.layers[i].data) {
continue;
@ -12236,7 +12222,7 @@ var Phaser;
* @return {Tile} The tile with specific properties.
*/
function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileIndex(x, y)];
};
Tilemap.prototype.getTileFromWorldXY = /**
@ -12247,7 +12233,7 @@ var Phaser;
* @return {Tile} The tile with specific properties.
*/
function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
};
Tilemap.prototype.getTileFromInputXY = /**
@ -12256,7 +12242,7 @@ var Phaser;
* @returns {Tile}
*/
function (layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)];
};
Tilemap.prototype.getTileOverlaps = /**
@ -12317,16 +12303,18 @@ var Phaser;
* @param [layer] {number} which layer you want to set the tile to.
*/
function (x, y, index, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
this.layers[layer].putTile(x, y, index);
};
Tilemap.prototype.destroy = function () {
this.texture = null;
this.transform = null;
this.tiles.length = 0;
this.layers.length = 0;
};
return Tilemap;
})();
Phaser.Tilemap = Tilemap;
// Set current layer
// Set layer order?
// Delete tiles of certain type
// Erase tiles
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/// <reference path="../tweens/Tween.ts" />
@ -18011,20 +17999,21 @@ var Phaser;
function TilemapRenderer(game) {
// Local rendering related temp vars to help avoid gc spikes through constant var creation
this._ga = 1;
this._sx = 0;
this._sy = 0;
this._sw = 0;
this._sh = 0;
//private _sx: number = 0;
//private _sy: number = 0;
//private _sw: number = 0;
//private _sh: number = 0;
this._dx = 0;
this._dy = 0;
this._dw = 0;
this._dh = 0;
this._fx = 1;
this._fy = 1;
//private _fx: number = 1;
//private _fy: number = 1;
this._tx = 0;
this._ty = 0;
this._sin = 0;
this._cos = 1;
this._tl = 0;
//private _sin: number = 0;
//private _cos: number = 1;
this._maxX = 0;
this._maxY = 0;
this._startX = 0;
@ -18037,11 +18026,12 @@ var Phaser;
*/
function (camera, tilemap) {
// Loop through the layers
for(var i = 0; i < tilemap.layers.length; i++) {
var layer = tilemap.layers[i];
if(layer.visible == false || layer.alpha < 0.1) {
this._tl = tilemap.layers.length;
for(var i = 0; i < this._tl; i++) {
if(tilemap.layers[i].visible == false || tilemap.layers[i].alpha < 0.1) {
continue;
}
var layer = tilemap.layers[i];
// Work out how many tiles we can fit into our camera and round it up for the edges
this._maxX = this.game.math.ceil(camera.width / layer.tileWidth) + 1;
this._maxY = this.game.math.ceil(camera.height / layer.tileHeight) + 1;

28
build/phaser.d.ts vendored
View file

@ -5867,15 +5867,15 @@ module Phaser {
* TilemapLayer constructor
* Create a new <code>TilemapLayer</code>.
*
* @param game {Phaser.Game} Current game instance.
* @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.FORMAT_CSV or Tilemap.FORMAT_TILED_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.
*/
constructor(game: Game, parent: Tilemap, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number);
constructor(parent: Tilemap, id: number, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number);
private _tempTileX;
private _tempTileY;
private _tempTileW;
@ -5910,6 +5910,11 @@ module Phaser {
*/
public name: string;
/**
* The ID of the layer within the Tilemap.
* @type {number}
*/
public ID: number;
/**
* Controls whether update() and draw() are automatically called.
* @type {boolean}
*/
@ -5933,7 +5938,7 @@ module Phaser {
*/
public mapFormat: number;
/**
* It's width and height are in tiles instead of pixels.
* Map bounds (width and height) in tiles not pixels.
* @type {Rectangle}
*/
public boundsInTiles: Rectangle;
@ -6310,13 +6315,6 @@ module Phaser {
*/
public mapFormat: number;
/**
* Inherited methods for overriding.
*/
public preUpdate(): void;
public update(): void;
public postUpdate(): void;
public destroy(): void;
/**
* Parset csv map data and generate tiles.
* @param data {string} CSV map data.
* @param key {string} Asset key for tileset image.
@ -6418,6 +6416,7 @@ module Phaser {
* @param [layer] {number} which layer you want to set the tile to.
*/
public putTile(x: number, y: number, index: number, layer?: number): void;
public destroy(): void;
}
}
/**
@ -9381,20 +9380,13 @@ module Phaser.Renderer.Canvas {
*/
public game: Game;
private _ga;
private _sx;
private _sy;
private _sw;
private _sh;
private _dx;
private _dy;
private _dw;
private _dh;
private _fx;
private _fy;
private _tx;
private _ty;
private _sin;
private _cos;
private _tl;
private _maxX;
private _maxY;
private _startX;

View file

@ -11521,15 +11521,15 @@ var Phaser;
* TilemapLayer constructor
* Create a new <code>TilemapLayer</code>.
*
* @param game {Phaser.Game} Current game instance.
* @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.FORMAT_CSV or Tilemap.FORMAT_TILED_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.
*/
function TilemapLayer(game, parent, key, mapFormat, name, tileWidth, tileHeight) {
function TilemapLayer(parent, id, key, mapFormat, name, tileWidth, tileHeight) {
/**
* Controls whether update() and draw() are automatically called.
* @type {boolean}
@ -11572,8 +11572,9 @@ var Phaser;
* @type {number}
*/
this.tileSpacing = 0;
this.game = game;
this.parent = parent;
this.game = parent.game;
this.ID = id;
this.name = name;
this.mapFormat = mapFormat;
this.tileWidth = tileWidth;
@ -12028,10 +12029,6 @@ var Phaser;
if (typeof tileWidth === "undefined") { tileWidth = 0; }
if (typeof tileHeight === "undefined") { tileHeight = 0; }
/**
* The Events component
*/
//public events: Phaser.Components.Sprite.Events;
/**
* z order value of the object.
*/
this.z = -1;
@ -12072,17 +12069,6 @@ var Phaser;
}
Tilemap.FORMAT_CSV = 0;
Tilemap.FORMAT_TILED_JSON = 1;
Tilemap.prototype.preUpdate = /**
* Inherited methods for overriding.
*/
function () {
};
Tilemap.prototype.update = function () {
};
Tilemap.prototype.postUpdate = function () {
};
Tilemap.prototype.destroy = function () {
};
Tilemap.prototype.parseCSV = /**
* Parset csv map data and generate tiles.
* @param data {string} CSV map data.
@ -12091,7 +12077,7 @@ var Phaser;
* @param tileHeight {number} Height of its tile.
*/
function (data, key, tileWidth, tileHeight) {
var layer = new Phaser.TilemapLayer(this.game, this, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
var layer = new Phaser.TilemapLayer(this, 0, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
var rows = data.split("\n");
@ -12118,7 +12104,7 @@ var Phaser;
data = data.trim();
var json = JSON.parse(data);
for(var i = 0; i < json.layers.length; i++) {
var layer = new Phaser.TilemapLayer(this.game, this, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
var layer = new Phaser.TilemapLayer(this, i, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Check it's a data layer
if(!json.layers[i].data) {
continue;
@ -12236,7 +12222,7 @@ var Phaser;
* @return {Tile} The tile with specific properties.
*/
function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileIndex(x, y)];
};
Tilemap.prototype.getTileFromWorldXY = /**
@ -12247,7 +12233,7 @@ var Phaser;
* @return {Tile} The tile with specific properties.
*/
function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
};
Tilemap.prototype.getTileFromInputXY = /**
@ -12256,7 +12242,7 @@ var Phaser;
* @returns {Tile}
*/
function (layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)];
};
Tilemap.prototype.getTileOverlaps = /**
@ -12317,16 +12303,18 @@ var Phaser;
* @param [layer] {number} which layer you want to set the tile to.
*/
function (x, y, index, layer) {
if (typeof layer === "undefined") { layer = 0; }
if (typeof layer === "undefined") { layer = this.currentLayer.ID; }
this.layers[layer].putTile(x, y, index);
};
Tilemap.prototype.destroy = function () {
this.texture = null;
this.transform = null;
this.tiles.length = 0;
this.layers.length = 0;
};
return Tilemap;
})();
Phaser.Tilemap = Tilemap;
// Set current layer
// Set layer order?
// Delete tiles of certain type
// Erase tiles
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/// <reference path="../tweens/Tween.ts" />
@ -18011,20 +17999,21 @@ var Phaser;
function TilemapRenderer(game) {
// Local rendering related temp vars to help avoid gc spikes through constant var creation
this._ga = 1;
this._sx = 0;
this._sy = 0;
this._sw = 0;
this._sh = 0;
//private _sx: number = 0;
//private _sy: number = 0;
//private _sw: number = 0;
//private _sh: number = 0;
this._dx = 0;
this._dy = 0;
this._dw = 0;
this._dh = 0;
this._fx = 1;
this._fy = 1;
//private _fx: number = 1;
//private _fy: number = 1;
this._tx = 0;
this._ty = 0;
this._sin = 0;
this._cos = 1;
this._tl = 0;
//private _sin: number = 0;
//private _cos: number = 1;
this._maxX = 0;
this._maxY = 0;
this._startX = 0;
@ -18037,11 +18026,12 @@ var Phaser;
*/
function (camera, tilemap) {
// Loop through the layers
for(var i = 0; i < tilemap.layers.length; i++) {
var layer = tilemap.layers[i];
if(layer.visible == false || layer.alpha < 0.1) {
this._tl = tilemap.layers.length;
for(var i = 0; i < this._tl; i++) {
if(tilemap.layers[i].visible == false || tilemap.layers[i].alpha < 0.1) {
continue;
}
var layer = tilemap.layers[i];
// Work out how many tiles we can fit into our camera and round it up for the edges
this._maxX = this.game.math.ceil(camera.width / layer.tileWidth) + 1;
this._maxY = this.game.math.ceil(camera.height / layer.tileHeight) + 1;