Slow Tilemap creation

[spencerTL]

I am creating a tilemap from dynamically generated data held in an array that holds tile coords in Phaser Point objects.  This following function then populates the map with the appropriate tile based on this.  The platforms are all pairs of tiles representing the numbers 01 to 99 hence the tracking the tens and units.  The full tilemap is 30 by 142.

 

Unfortunately this function is really inefficient and on ipad it adds at least 5 seconds to the start of the state it is in.  Even if i separate it out it always holds up the app for ages.  

 

I can't find any way to meaningfully optimise it so does anyone have any ideas or can confirm that this just to many expensive operations in a loop and I'll just have to disguise the delay?  

 

One possibility is to suffer the delay once at the start of the state and then, once created, not rebuild it so that the delay only happens once but I'm not certain how to do that yet and it'd be nice to have the state completely cleaned up on exit without retaining anything.  It is also enough of a delay, even once, that it feels like a crash.  

 

All help gratefully received.  Thanks.

 populateMap: function() {  var tens = 9;  var units= 9;//**this.TOTAL_PLATFORMS = 100;**  for(var i=0;i<this.TOTAL_PLATFORMS-1;i++)  {    if(i<90)    {    this.map.putTile(tens, BasicGame.platformPositions_array[i+1].x, BasicGame.platformPositions_array[i+1].y, this.layer1);    }    else    {      this.map.putTile(12, BasicGame.platformPositions_array[i+1].x, BasicGame.platformPositions_array[i+1].y, this.layer1);    }    this.map.putTile(units, BasicGame.platformPositions_array[i+1].x+1, BasicGame.platformPositions_array[i+1].y, this.layer1);    units--;    if(units<0)    {      tens--;      units=9;    }      }    },

[lewster32]

It looks like putTile does a lot of checking and may be quite a heavy function to call to build a map tile-by-tile. Looking at the TilemapParser source, these seem to dump all of the tiles into the underlying array instead. Maybe you need to look at these or perhaps easier still, generate the expected data format and then have Phaser parse it for you, which should then be as quick as it can be.

[spencerTL]

Thanks for the reply -  just what i feared!

 

I thought I'd been clever generating the data in an array to save creating a json file or using Tiler.  At the moment I don't need the tiles to be dynamically generated other than to save effort and for future expansion.  I think I'll set them out manually for now and just use the fixed format way.  

 

Thanks for taking the time to answer.

[jpdev]

You can generate your tilemap dynamically this way:

 

 

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:

 

"0,0,0,0,0\n1,1,0,0,1\n1,12,0,15,1\n"

 

(That would be a tilemap of 5x3 tiles)

 

Works like a charm and has no performance issues.

 

( http://www.html5gamedevs.com/topic/2727-dynamic-tilemap-generation/#entry19674 )

[lewster32]

I'd say creating the JSON representation would be easier than the CSV string, as all you need to do is create an object then use JSON.stringify(), but yeah, this is the sorta thing I'm getting at.

[spencerTL]

Thanks for these suggestions. I've switched to a non-dynamic tilemap now, I was future proofing with that idea - but these these sound a good way to return to it if required. Thanks.