Jump to content

Dynamic Tilemap Generation


Recommended Posts


I've written a game which dynamically generates its tilemap (you can see it at xyrix.org/ld28). The method I used was along the lines of:

createTilemap(w, h) {
    var data = new Array(w * h);

    for (var i = 0; i < data.length; ++i)

        data = 1;

    var tileMap = {

        layers: [


                name: 'foo',

                width: w,

                height: h,

                opacity: 1,

                visible: true,

                data: data



        tilesets: [


                margin: 0,

                spacing: 0




    return tileMap;


Then calling:



game.load.tilemap('foo', null, createTilemap(MAP_WIDTH, MAP_HEIGHT), Phaser.Tilemap.TILED_JSON);

Then, when I create another tilemap (which is potentially of a different width and height), creating a new tilemap asset with the same name (I only realised this is what I did now XD - I was hacking it together pretty quickly).

The JSON object I give is based on the values I saw being used in the JSON tilemap parsing code. I'm guessing here - but I suppose there is a third party tool for creating tilemaps which outputs JSON that phaser has been aimed at loading data from?

Anyway - my question is, for a game which generates a lot of tilemaps (e.g. a roguelike), the method I used looks like it is bound to leak memory - as there is no evidence this is the way the API was intended to be used. What is the preferred method for creating dynamic tilemaps in Phaser? Do I need to load some initial values for its data as an asset?

Link to comment
Share on other sites

That JSON format is the one used by the tilemap editor called Tiled. For dynamic maps the method above will eat more and more memory unless you purge them from the Cache. It would make more sense to not load any data, make a tilemap object and call 'create' on it. Then set the map data to whatever you generate and update it for each level. This will be a lot easier to do in 1.1.4 as I've totally overhauled how tilemaps work, so honestly if you can I would wait for that release - but in the meantime make your map data generate a javascript object that matches what Tiled exports, and you'll have no worries using that in 1.1.4.

Link to comment
Share on other sites

  • 3 weeks later...

Since I wanted to generate "on the fly" tilemaps too, I found this post.

Looking through the Phaser 1.1.3 Code (as far as I know the latest stable, v1.1.3 - Built at: Fri Nov 29 2013 18:20:59 ) I found that the mapparser could also read CSV and has the option to take the csv Data directly in a string.


Since I think those are much easier to recreate, here is my solution:



game.load.tilemap('level', null, generateLevel(), Phaser.Tilemap.CSV );


And generateLevel returns a CSV string looking like this:




(That would be a tilemap of 5x3 tiles)


Works like a charm.

Link to comment
Share on other sites

  • 4 weeks later...

.... so honestly if you can I would wait for that release ...


I was able to wait for the new release. But I am not able to find a nice solution to set dynamic tilemaps without using "Tiled"-Json-Export-Like-Objects (from now: TJELO) ;)


Did I miss something? I was crawling docs.phaser.io and studied many examples. Do I have to start with the TJELO?


Thanks in advance! 

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...