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

You can now load in CSV Tilemaps again and they get created properly (fixes #391)

Browse Source 
You can now create blank Tilemaps and then populate them with data later.
This commit is contained in:
photonstorm
2014-03-03 13:45:47 +00:00
parent 960e8cace6
commit 4a370c82cf
8 changed files with 170 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/Game.js
+1 -1
View File
@@ -197,7 +197,7 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
this.canvas = null;
/**
* @property {Context} context - A handy reference to renderer.context (only set for CANVAS games, not WebGL)
* @property {CanvasRenderingContext2D} context - A handy reference to renderer.context (only set for CANVAS games, not WebGL)
*/
this.context = null;
src/gameobjects/GameObjectCreator.js
+12 -5
View File
@@ -270,15 +270,22 @@ Phaser.GameObjectCreator.prototype = {
},
/**
* Creates a new Tilemap object.
* Creates a new Phaser.Tilemap object. The map can either be populated with data from a Tiled JSON file or from a CSV file.
* To do this pass the Cache key as the first parameter. When using Tiled data you need only provide the key.
* When using CSV data you must provide the key and the tileWidth and tileHeight parameters.
* If creating a blank tilemap to be populated later, you can either specify no parameters at all and then use `Tilemap.create` or pass the map and tile dimensions here.
* Note that all Tilemaps use a base tile size to calculate dimensions from, but that a TilemapLayer may have its own unique tile size that overrides it.
*
* @method Phaser.GameObjectCreator#tilemap
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
* @return {Phaser.Tilemap} The newly created tilemap object.
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map either leave this parameter out or pass `null`.
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
*/
tilemap: function (key) {
tilemap: function (key, tileWidth, tileHeight, width, height) {
return new Phaser.Tilemap(this.game, key);
return new Phaser.Tilemap(this.game, key, tileWidth, tileHeight, width, height);
},
src/gameobjects/GameObjectFactory.js
+12 -4
View File
@@ -301,15 +301,23 @@ Phaser.GameObjectFactory.prototype = {
},
/**
* Creates a new Tilemap object.
* Creates a new Phaser.Tilemap object. The map can either be populated with data from a Tiled JSON file or from a CSV file.
* To do this pass the Cache key as the first parameter. When using Tiled data you need only provide the key.
* When using CSV data you must provide the key and the tileWidth and tileHeight parameters.
* If creating a blank tilemap to be populated later, you can either specify no parameters at all and then use `Tilemap.create` or pass the map and tile dimensions here.
* Note that all Tilemaps use a base tile size to calculate dimensions from, but that a TilemapLayer may have its own unique tile size that overrides it.
*
* @method Phaser.GameObjectFactory#tilemap
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map either leave this parameter out or pass `null`.
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @return {Phaser.Tilemap} The newly created tilemap object.
*/
tilemap: function (key) {
tilemap: function (key, tileWidth, tileHeight, width, height) {
return new Phaser.Tilemap(this.game, key);
return new Phaser.Tilemap(this.game, key, tileWidth, tileHeight, width, height);
},
src/tilemap/Tilemap.js
+31 -8
View File
@@ -5,15 +5,24 @@
*/
/**
* A Tile Map object. A Tile map consists of a set of tile data and tile sets. It is rendered to the display using a TilemapLayer.
* Creates a new Phaser.Tilemap object. The map can either be populated with data from a Tiled JSON file or from a CSV file.
* To do this pass the Cache key as the first parameter. When using Tiled data you need only provide the key.
* When using CSV data you must provide the key and the tileWidth and tileHeight parameters.
* If creating a blank tilemap to be populated later, you can either specify no parameters at all and then use `Tilemap.create` or pass the map and tile dimensions here.
* Note that all Tilemaps use a base tile size to calculate dimensions from, but that a TilemapLayer may have its own unique tile size that overrides it.
* A Tile map is rendered to the display using a TilemapLayer. It is not added to the display list directly itself.
* A map may have multiple layers. You can perform operations on the map data such as copying, pasting, filling and shuffling the tiles around.
*
* @class Phaser.Tilemap
* @constructor
* @param {Phaser.Game} game - Game reference to the currently running game.
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map either leave this parameter out or pass `null`.
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
*/
Phaser.Tilemap = function (game, key) {
Phaser.Tilemap = function (game, key, tileWidth, tileHeight, width, height) {
/**
* @property {Phaser.Game} game - A reference to the currently running Game.
@@ -25,7 +34,7 @@ Phaser.Tilemap = function (game, key) {
*/
this.key = key;
var data = Phaser.TilemapParser.parse(this.game, key);
var data = Phaser.TilemapParser.parse(this.game, key, tileWidth, tileHeight, width, height);
if (data === null)
{
@@ -165,10 +174,8 @@ Phaser.Tilemap.prototype = {
this.width = width;
this.height = height;
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this.widthInPixels = width * tileWidth;
this.heightInPixels = height * tileHeight;
this.setTileSize(tileWidth, tileHeight);
var row;
var output = [];
@@ -208,6 +215,22 @@ Phaser.Tilemap.prototype = {
},
/**
* Sets the base tile size for the map.
*
* @method Phaser.Tilemap#setTileSize
* @param {number} tileWidth - The width of the tiles the map uses for calculations.
* @param {number} tileHeight - The height of the tiles the map uses for calculations.
*/
setTileSize: function (tileWidth, tileHeight) {
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this.widthInPixels = this.width * tileWidth;
this.heightInPixels = this.height * tileHeight;
},
/**
* Adds an image to the map to be used as a tileset. A single map may use multiple tilesets.
* Note that the tileset name can be found in the JSON file exported from Tiled, or in the Tiled editor.
src/tilemap/TilemapParser.js
+52 -12
View File
@@ -67,25 +67,40 @@ Phaser.TilemapParser = {
/**
* Parse tilemap data from the cache and creates a Tilemap object.
*
* @method Phaser.TilemapParser.parse
* @param {Phaser.Game} game - Game reference to the currently running game.
* @param {string} key - The key of the tilemap in the Cache.
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
* @return {object} The parsed map object.
*/
parse: function (game, key) {
parse: function (game, key, tileWidth, tileHeight, width, height) {
if (typeof tileWidth === 'undefined') { tileWidth = 32; }
if (typeof tileHeight === 'undefined') { tileHeight = 32; }
if (typeof width === 'undefined') { width = 10; }
if (typeof height === 'undefined') { height = 10; }
if (typeof key === 'undefined')
{
return this.getEmptyData();
}
if (key === null)
{
return this.getEmptyData(tileWidth, tileHeight, width, height);
}
var map = game.cache.getTilemapData(key);
if (map)
{
if (map.format === Phaser.Tilemap.CSV)
{
return this.parseCSV(map.data);
return this.parseCSV(key, map.data, tileWidth, tileHeight);
}
else if (map.format === Phaser.Tilemap.TILED_JSON)
{
@@ -101,11 +116,16 @@ Phaser.TilemapParser = {
/**
* Parses a CSV file into valid map data.
*
* @method Phaser.TilemapParser.parseCSV
* @param {string} data - The CSV file data.
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
* @return {object} Generated map data.
*/
parseCSV: function (data) {
parseCSV: function (key, data, tileWidth, tileHeight) {
var map = this.getEmptyData();
// Trim any rogue whitespace from the data
data = data.trim();
@@ -115,15 +135,15 @@ Phaser.TilemapParser = {
var height = rows.length;
var width = 0;
for (var i = 0; i < rows.length; i++)
for (var y = 0; y < rows.length; y++)
{
output[i] = [];
output[y] = [];
var column = rows[i].split(",");
var column = rows[y].split(",");
for (var c = 0; c < column.length; c++)
for (var x = 0; x < column.length; x++)
{
output[i][c] = parseInt(column[c], 10);
output[y][x] = new Phaser.Tile(0, parseInt(column[x], 10), x, y, tileWidth, tileHeight);
}
if (width === 0)
@@ -132,9 +152,21 @@ Phaser.TilemapParser = {
}
}
// Build collision map
map.name = key;
map.width = width;
map.height = height;
map.tileWidth = tileWidth;
map.tileHeight = tileHeight;
map.widthInPixels = width * tileWidth;
map.heightInPixels = height * tileHeight;
return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, indexes: [], tileMargin: 0, tileSpacing: 0, data: output }];
map.layers[0].width = width;
map.layers[0].height = height;
map.layers[0].widthInPixels = map.widthInPixels;
map.layers[0].heightInPixels = map.heightInPixels;
map.layers[0].data = output;
return map;
},
@@ -143,7 +175,7 @@ Phaser.TilemapParser = {
* @method Phaser.TilemapParser.getEmptyData
* @return {object} Generated map data.
*/
getEmptyData: function () {
getEmptyData: function (tileWidth, tileHeight, width, height) {
var map = {};
@@ -151,6 +183,12 @@ Phaser.TilemapParser = {
map.height = 0;
map.tileWidth = 0;
map.tileHeight = 0;
if (typeof tileWidth !== 'undefined' && tileWidth !== null) { map.tileWidth = tileWidth; }
if (typeof tileHeight !== 'undefined' && tileHeight !== null) { map.tileHeight = tileHeight; }
if (typeof width !== 'undefined' && width !== null) { map.width = width; }
if (typeof height !== 'undefined' && height !== null) { map.height = height; }
map.orientation = 'orthogonal';
map.version = '1';
map.properties = {};
@@ -177,6 +215,8 @@ Phaser.TilemapParser = {
};
// fill with nulls?
layers.push(layer);
map.layers = layers;
@@ -256,7 +296,7 @@ Phaser.TilemapParser = {
// Loop through the data field in the JSON.
// This is an array containing the tile indexes, one after the other. 0 = no tile, everything else = the tile index (starting at 1)
// This is an array containing the tile indexes, one after the other. null = no tile, everything else = the tile index (starting at 1 for Tiled, 0 for CSV)
// If the map contains multiple tilesets then the indexes are relative to that which the set starts from.
// Need to set which tileset in the cache = which tileset in the JSON, if you do this manually it means you can use the same map data but a new tileset.