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

Tileset working, map coming next.

Browse Source
This commit is contained in:
photonstorm
2013-10-11 06:30:28 +01:00
parent b868c2cb1b
commit cf414394c3
12 changed files with 7427 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tilemap/Tile.js
+3 -1
View File
@@ -109,7 +109,9 @@ Phaser.Tile.prototype = {
* @method destroy
*/
destroy: function () {
this.tilemap = null;
this.tileset = null;
},
/**
src/tilemap/TilemapLayer.js
+179 -1
View File
@@ -44,7 +44,10 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
/**
* @property {Description} tileset - Description.
*/
this.tileset = tileset;
this.tileset = null;
this.tileWidth = 0;
this.tileHeight = 0;
this.widthInTiles = 0;
this.heightInTiles = 0;
@@ -52,6 +55,78 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
this.renderWidth = renderWidth;
this.renderHeight = renderHeight;
/**
* @property {number} _ga - Local render loop var to help avoid gc spikes.
* @private
*/
this._ga = 1;
/**
* @property {number} _dx - Local render loop var to help avoid gc spikes.
* @private
*/
this._dx = 0;
/**
* @property {number} _dy - Local render loop var to help avoid gc spikes.
* @private
*/
this._dy = 0;
/**
* @property {number} _dw - Local render loop var to help avoid gc spikes.
* @private
*/
this._dw = 0;
/**
* @property {number} _dh - Local render loop var to help avoid gc spikes.
* @private
*/
this._dh = 0;
/**
* @property {number} _tx - Local render loop var to help avoid gc spikes.
* @private
*/
this._tx = 0;
/**
* @property {number} _ty - Local render loop var to help avoid gc spikes.
* @private
*/
this._ty = 0;
/**
* @property {number} _tl - Local render loop var to help avoid gc spikes.
* @private
*/
this._tl = 0;
/**
* @property {number} _maxX - Local render loop var to help avoid gc spikes.
* @private
*/
this._maxX = 0;
/**
* @property {number} _maxY - Local render loop var to help avoid gc spikes.
* @private
*/
this._maxY = 0;
/**
* @property {number} _startX - Local render loop var to help avoid gc spikes.
* @private
*/
this._startX = 0;
/**
* @property {number} _startY - Local render loop var to help avoid gc spikes.
* @private
*/
this._startY = 0;
};
Phaser.TilemapLayer.prototype = {
@@ -96,6 +171,109 @@ Phaser.TilemapLayer.prototype = {
},
updateTileset: function (tileset) {
this.tileset = this.game.cache.getTileset(tileset);
this.tileWidth = this.tileset.tileWidth;
this.tileHeight = this.tileset.tileHeight;
},
render: function () {
if (this.visible == 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;
// 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);
// Tilemap bounds check
if (this._startX < 0)
{
this._startX = 0;
}
if (this._startY < 0)
{
this._startY = 0;
}
if (this._maxX > this.widthInTiles)
{
this._maxX = this.widthInTiles;
}
if (this._maxY > this.heightInTiles)
{
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;
}
// 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._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++)
{
this._columnData = this.mapData[row];
for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
{
if (this.tileset.checkTileIndex(this._columnData[tile]))
{
this.context.drawImage(
this.tileset.image,
this.tileset.tiles[this._columnData[tile]].x,
this.tileset.tiles[this._columnData[tile]].y,
this.tileWidth,
this.tileHeight,
this._tx,
this._ty,
this.tileWidth,
this.tileHeight
);
}
this._tx += this.tileWidth;
}
this._tx = this._dx;
this._ty += this.tileHeight;
}
// Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
if (this.game.renderType == Phaser.WEBGL)
{
PIXI.texturesToUpdate.push(this.baseTexture);
}
return true;
},
dump: function () {
var txt = '';
src/tilemap/TilemapParser.js
+81 -29
View File
@@ -1,16 +1,5 @@
Phaser.TilemapParser = {
/**
* Parse a Sprite Sheet and extract the animation frame data from it.
*
* @method Phaser.AnimationParser.spriteSheet
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {string} key - The Game.Cache asset key of the Sprite Sheet image.
* @param {number} frameWidth - The fixed width of each frame of the animation.
* @param {number} frameHeight - The fixed height of each frame of the animation.
* @param {number} [frameMax=-1] - The total number of animation frames to extact from the Sprite Sheet. The default value of -1 means "extract all frames".
* @return {Phaser.FrameData} A FrameData object containing the parsed frames.
*/
tileset: function (game, key, tileWidth, tileHeight, tileMax) {
// How big is our image?
@@ -54,7 +43,7 @@ Phaser.TilemapParser = {
var x = 0;
var y = 0;
var tileset = new Phaser.Tileset(key, tileWidth, tileHeight);
var tileset = new Phaser.Tileset(img, key, tileWidth, tileHeight);
for (var i = 0; i < total; i++)
{
@@ -73,47 +62,110 @@ Phaser.TilemapParser = {
},
parse: function (game, data, format) {
if (format == Phaser.Tilemap.CSV)
{
return this.parseCSV(data);
}
else if (format == Phaser.Tilemap.TILED_JSON)
{
return this.parseTiledJSON(data);
}
},
/**
* Parse csv map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseCSV
* @param {string} data - CSV map data.
* @param {string} key - Asset key for tileset image.
* @param {number} tileWidth - Width of its tile.
* @param {number} tileHeight - Height of its tile.
*/
parseCSV: function (data, key, tileWidth, tileHeight) {
// var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
parseCSV: function (data) {
// Trim any rogue whitespace from the data
data = data.trim();
var output = [];
var rows = data.split("\n");
for (var i = 0; i < rows.length; i++)
{
output[i] = [];
var column = rows[i].split(",");
if (column.length > 0)
for (var c = 0; c < column.length; c++)
{
// layer.addColumn(column);
output[i][c] = parseInt(column[c]);
}
}
// layer.updateBounds();
// layer.createCanvas();
return [{ name: 'csv', alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
// var tileQuantity = layer.parseTileOffsets();
},
// this.currentLayer = layer;
// this.collisionLayer = layer;
// this.layers.push(layer);
/**
* Parse JSON map data and generate tiles.
*
* @method Phaser.Tilemap.prototype.parseTiledJSON
* @param {string} data - JSON map data.
* @param {string} key - Asset key for tileset image.
*/
parseTiledJSON: function (json) {
// this.width = this.currentLayer.widthInPixels;
// this.height = this.currentLayer.heightInPixels;
var layers = [];
// this.generateTiles(tileQuantity);
for (var i = 0; i < json.layers.length; i++)
{
// Check it's a data layer
if (!json.layers[i].data)
{
continue;
}
// json.tilewidth
// json.tileheight
var layer = {
name: json.layers[i].name,
alpha: json.layers[i].opacity,
visible: json.layers[i].visible,
tileMargin: json.tilesets[0].margin,
tileSpacing: json.tilesets[0].spacing
};
var output = [];
var c = 0;
var row;
for (var t = 0; t < json.layers[i].data.length; t++)
{
if (c == 0)
{
row = [];
}
row.push(json.layers[i].data[t]);
c++;
if (c == json.layers[i].width)
{
output.push(row);
// layer.addColumn(row);
c = 0;
}
}
layers.data = output;
this.layers.push(layer);
}
return layers;
}
src/tilemap/Tileset.js
+17 -7
View File
@@ -1,15 +1,17 @@
Phaser.Tileset = function (key, tileWidth, tileHeight) {
Phaser.Tileset = function (image, key, tileWidth, tileHeight) {
/**
* @property {string} key - The cache ID.
*/
this.key = key;
this.tilewidth = tileWidth;
this.image = image;
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this._tiles = [];
this.tiles = [];
}
@@ -17,7 +19,7 @@ Phaser.Tileset.prototype = {
addTile: function (tile) {
this._tiles.push(tile);
this.tiles.push(tile);
return tile;
@@ -25,13 +27,21 @@ Phaser.Tileset.prototype = {
getTile: function (index) {
if (this._tiles[index])
if (this.tiles[index])
{
return this._tiles[index];
return this.tiles[index];
}
return null;
},
checkTileIndex: function (index) {
console.log('checking tile', index);
return (this.tiles[index]);
}
}
@@ -44,7 +54,7 @@ Phaser.Tileset.prototype = {
Object.defineProperty(Phaser.Tileset.prototype, "total", {
get: function () {
return this._ties.length;
return this.tiles.length;
}
});