Faster Map Rendering - HTML5 Game Development Insights - page 258

Figure 17-2. An exploded view of the layers of a map (left to right): base layer, accents on the base, walls layer,
additional accents
One of the more important aspects of loading these images is that the loading process is asynchronous , meaning
that it will occur without blocking the execution flow of your application. As such, you can run into a strange situation,
in which your code starts executing the main loop before you have all your content loaded. To address this, you create
an imgLoadCount variable for the map object, which is incremented as each image finalizes its load operation:
//from TILEDmap.js
//load our tilesets if we are a client.
var gMap = this;
gMap.imgLoadCount = 0; //reset our image loading counter
for (var i = 0; i < map.tilesets.length; i++)
{
//load each image and store a handle to it
var img = new Image();
img.onload = new function()
{gMap.imgLoadCount++;}; //once the image is loaded, increase a global counter
//NOTE that the TILED data puts some gnarly relative path data into the file
//let's get rid of that, since our directory structure in the shipping product is not the same
//as in the editor layout.
img.src = "../data/" + map.tilesets[i].image.replace(/^.*[\\\/]/, '');
//store this data in a way that makes it easy to access later:
var ts = {
"firstgid": map.tilesets[i].firstgid,
"image": img,
"imageheight": map.tilesets[i].imageheight,
"imagewidth": map.tilesets[i].imagewidth,
"name": map.tilesets[i].name,
"numXTiles": Math.floor(map.tilesets[i].imagewidth / this.tileSize.x),
"numYTiles": Math.floor(map.tilesets[i].imageheight / this.tileSize.y)
};
this.tileSets.push(ts);