Skip to content

Commit dbaf726

Browse files
photonstormphotonstorm
committed
Promoted the Tilemap to a DisplayObject and vastly simplified the load process.
1 parent 3d22d0e commit dbaf726

10 files changed

Lines changed: 478 additions & 334 deletions

File tree

‎examples/mario.php‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,38 +16,20 @@
1616

1717
function preload() {
1818

19-
// First we load our map data (a csv file)
20-
game.load.text('marioMap', 'assets/maps/mario1.json');
21-
22-
// Then we load the actual tile sheet image
23-
game.load.image('marioTiles', 'assets/maps/mario1.png');
19+
game.load.tilemap('mario', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
2420

2521
}
2622

27-
var r;
28-
var t;
29-
3023
function create() {
3124

3225
game.stage.backgroundColor = '#787878';
3326

34-
// game, key, mapData, format, resizeWorld, tileWidth, tileHeight
35-
36-
// This creates the tilemap using the csv and tile sheet we loaded.
37-
// We tell it use to CSV format parser. The 16x16 are the tile sizes.
38-
// The 4th parameter (true) tells the game world to resize itself based on the map dimensions or not.
39-
40-
t = new Phaser.Tilemap(game, 'marioTiles', 'marioMap', Phaser.Tilemap.FORMAT_TILED_JSON);
41-
42-
// SHould be added to the World and rendered automatically :)
43-
r = new Phaser.TilemapRenderer(game);
27+
game.add.tilemap(0, 0, 'mario');
4428

4529
}
4630

4731
function update() {
4832

49-
r.render(t);
50-
5133
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
5234
{
5335
game.camera.x -= 8;

‎examples/tilemap.php‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,22 @@
1616

1717
function preload() {
1818

19-
// CSV Tilemap Test
20-
21-
// First we load our map data (a csv file)
22-
game.load.text('csvtest', 'assets/maps/catastrophi_level2.csv');
23-
24-
// Then we load the actual tile sheet image
25-
game.load.image('csvtiles', 'assets/tiles/catastrophi_tiles_16.png');
19+
game.load.tilemap('catastrophi', 'assets/tiles/catastrophi_tiles_16.png', 'assets/maps/catastrophi_level2.csv', null, Phaser.Tilemap.CSV);
2620

2721
}
2822

29-
var canvas;
30-
var context;
31-
var baseTexture;
32-
var texture;
33-
var s;
34-
var r;
35-
var t;
36-
3723
function create() {
3824

39-
// game, key, mapData, format, resizeWorld, tileWidth, tileHeight
40-
4125
// This creates the tilemap using the csv and tile sheet we loaded.
4226
// We tell it use to CSV format parser. The 16x16 are the tile sizes.
4327
// The 4th parameter (true) tells the game world to resize itself based on the map dimensions or not.
4428

45-
t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
46-
47-
// SHould be added to the World and rendered automatically :)
48-
r = new Phaser.TilemapRenderer(game);
29+
game.add.tilemap(0, 0, 'catastrophi', true, 16, 16);
4930

5031
}
5132

5233
function update() {
5334

54-
r.render(t);
55-
5635
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
5736
{
5837
game.camera.x -= 8;

‎src/core/Game.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,8 @@ Phaser.Game.prototype = {
351351
}
352352
else
353353
{
354-
// They must have requested WebGL and their browser supports it
354+
// They requested WebGL, and their browser supports it
355+
this.renderType = Phaser.WEBGL;
355356
this.renderer = new PIXI.WebGLRenderer(this.width, this.height, this.stage.canvas, this.transparent, this.antialias);
356357
this.canvas = this.renderer.view;
357358
this.context = null;

‎src/core/Group.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,12 @@ Phaser.Group.prototype = {
5252
if (child.group !== this)
5353
{
5454
child.group = this;
55-
child.events.onAddedToGroup.dispatch(child, this);
55+
56+
if (child.events)
57+
{
58+
child.events.onAddedToGroup.dispatch(child, this);
59+
}
60+
5661
this._container.addChild(child);
5762
}
5863

@@ -65,7 +70,12 @@ Phaser.Group.prototype = {
6570
if (child.group !== this)
6671
{
6772
child.group = this;
68-
child.events.onAddedToGroup.dispatch(child, this);
73+
74+
if (child.events)
75+
{
76+
child.events.onAddedToGroup.dispatch(child, this);
77+
}
78+
6979
this._container.addChildAt(child, index);
7080
}
7181

@@ -82,9 +92,16 @@ Phaser.Group.prototype = {
8292
create: function (x, y, key, frame) {
8393

8494
var child = new Phaser.Sprite(this.game, x, y, key, frame);
95+
8596
child.group = this;
86-
child.events.onAddedToGroup.dispatch(child, this);
97+
98+
if (child.events)
99+
{
100+
child.events.onAddedToGroup.dispatch(child, this);
101+
}
102+
87103
this._container.addChild(child);
104+
88105
return child;
89106

90107
},

‎src/gameobjects/GameObjectFactory.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@ Phaser.GameObjectFactory.prototype = {
108108

109109
},
110110

111+
tilemap: function (x, y, key, resizeWorld, tileWidth, tileHeight) {
112+
113+
return this.world.group.add(new Phaser.Tilemap(this.game, key, resizeWorld, tileWidth, tileHeight));
114+
115+
},
116+
111117
renderTexture: function (key, width, height) {
112118

113119
var texture = new Phaser.RenderTexture(this.game, key, width, height);

‎src/loader/Cache.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ Phaser.Cache = function (game) {
4747
*/
4848
this._text = {};
4949

50+
/**
51+
* Tilemap key-value container.
52+
* @type {object}
53+
*/
54+
this._tilemaps = {};
55+
5056
this.addDefaultImage();
5157

5258
this.onSoundUnlock = new Phaser.Signal;
@@ -100,6 +106,22 @@ Phaser.Cache.prototype = {
100106

101107
},
102108

109+
/**
110+
* Add a new tilemap.
111+
* @param key {string} Asset key for the texture atlas.
112+
* @param url {string} URL of this texture atlas file.
113+
* @param data {object} Extra texture atlas data.
114+
* @param atlasData {object} Texture atlas frames data.
115+
*/
116+
addTilemap: function (key, url, data, mapData, format) {
117+
118+
this._tilemaps[key] = { url: url, data: data, spriteSheet: true, mapData: mapData, format: format };
119+
120+
PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
121+
PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
122+
123+
},
124+
103125
/**
104126
* Add a new texture atlas.
105127
* @param key {string} Asset key for the texture atlas.
@@ -315,6 +337,21 @@ Phaser.Cache.prototype = {
315337
return null;
316338
},
317339

340+
/**
341+
* Get tilemap data by key.
342+
* @param key Asset key of the tilemap you want.
343+
* @return {object} The tilemap data. The tileset image is in the data property, the map data in mapData.
344+
*/
345+
getTilemap: function (key) {
346+
347+
if (this._tilemaps[key])
348+
{
349+
return this._tilemaps[key];
350+
}
351+
352+
return null;
353+
},
354+
318355
/**
319356
* Get frame data by key.
320357
* @param key Asset key of the frame data you want.

‎src/loader/Loader.js‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,52 @@ Phaser.Loader.prototype = {
217217

218218
},
219219

220+
/**
221+
* Add a new tilemap loading request.
222+
* @param key {string} Unique asset key of the tilemap data.
223+
* @param tilesetURL {string} The url of the tile set image file.
224+
* @param [mapDataURL] {string} The url of the map data file (csv/json)
225+
* @param [mapData] {object} An optional JSON data object (can be given in place of a URL).
226+
* @param [format] {string} The format of the map data.
227+
*/
228+
tilemap: function (key, tilesetURL, mapDataURL, mapData, format) {
229+
230+
if (typeof mapDataURL === "undefined") { mapDataURL = null; }
231+
if (typeof mapData === "undefined") { mapData = null; }
232+
if (typeof format === "undefined") { format = Phaser.Tilemap.CSV; }
233+
234+
if (this.checkKeyExists(key) === false)
235+
{
236+
// A URL to a json/csv file has been given
237+
if (mapDataURL)
238+
{
239+
this.addToFileList('tilemap', key, tilesetURL, { mapDataURL: mapDataURL, format: format });
240+
}
241+
else
242+
{
243+
switch (format)
244+
{
245+
// A csv string or object has been given
246+
case Phaser.Tilemap.CSV:
247+
break;
248+
249+
// An xml string or object has been given
250+
case Phaser.Tilemap.JSON:
251+
252+
if (typeof mapData === 'string')
253+
{
254+
mapData = JSON.parse(mapData);
255+
}
256+
break;
257+
}
258+
259+
this.addToFileList('tilemap', key, tilesetURL, { mapDataURL: null, mapData: mapData, format: format });
260+
261+
}
262+
}
263+
264+
},
265+
220266
/**
221267
* Add a new bitmap font loading request.
222268
* @param key {string} Unique asset key of the bitmap font.
@@ -437,6 +483,7 @@ Phaser.Loader.prototype = {
437483
case 'spritesheet':
438484
case 'textureatlas':
439485
case 'bitmapfont':
486+
case 'tilemap':
440487
file.data = new Image();
441488
file.data.name = file.key;
442489
file.data.onload = function () {
@@ -572,14 +619,50 @@ Phaser.Loader.prototype = {
572619
switch (file.type)
573620
{
574621
case 'image':
622+
575623
this.game.cache.addImage(file.key, file.url, file.data);
576624
break;
577625

578626
case 'spritesheet':
627+
579628
this.game.cache.addSpriteSheet(file.key, file.url, file.data, file.frameWidth, file.frameHeight, file.frameMax);
580629
break;
581630

631+
case 'tilemap':
632+
633+
if (file.mapDataURL == null)
634+
{
635+
this.game.cache.addTilemap(file.key, file.url, file.data, file.mapData, file.format);
636+
}
637+
else
638+
{
639+
// Load the JSON or CSV before carrying on with the next file
640+
loadNext = false;
641+
this._xhr.open("GET", this.baseURL + file.mapDataURL, true);
642+
this._xhr.responseType = "text";
643+
644+
if (file.format == Phaser.Tilemap.JSON)
645+
{
646+
this._xhr.onload = function () {
647+
return _this.jsonLoadComplete(file.key);
648+
};
649+
}
650+
else if (file.format == Phaser.Tilemap.CSV)
651+
{
652+
this._xhr.onload = function () {
653+
return _this.csvLoadComplete(file.key);
654+
};
655+
}
656+
657+
this._xhr.onerror = function () {
658+
return _this.dataLoadError(file.key);
659+
};
660+
this._xhr.send();
661+
}
662+
break;
663+
582664
case 'textureatlas':
665+
583666
if (file.atlasURL == null)
584667
{
585668
this.game.cache.addTextureAtlas(file.key, file.url, file.data, file.atlasData, file.format);
@@ -612,6 +695,7 @@ Phaser.Loader.prototype = {
612695
break;
613696

614697
case 'bitmapfont':
698+
615699
if (file.xmlURL == null)
616700
{
617701
this.game.cache.addBitmapFont(file.key, file.url, file.data, file.xmlData);
@@ -686,7 +770,29 @@ Phaser.Loader.prototype = {
686770
var data = JSON.parse(this._xhr.response);
687771
var file = this._fileList[key];
688772

689-
this.game.cache.addTextureAtlas(file.key, file.url, file.data, data, file.format);
773+
if (file.type == 'tilemap')
774+
{
775+
this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
776+
}
777+
else
778+
{
779+
this.game.cache.addTextureAtlas(file.key, file.url, file.data, data, file.format);
780+
}
781+
782+
this.nextFile(key, true);
783+
784+
},
785+
786+
/**
787+
* Successfully loaded a CSV file.
788+
* @param key {string} Key of the loaded CSV file.
789+
*/
790+
csvLoadComplete: function (key) {
791+
792+
var data = this._xhr.response;
793+
var file = this._fileList[key];
794+
795+
this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
690796

691797
this.nextFile(key, true);
692798

0 commit comments

Comments
 (0)