Faster Map Rendering - HTML5 Game Development Insights - page 259

Because the img.onload function callbacks occur async style, you need to create a method that polls the state of
gMap.imgLoadCount to determine if all the images are loaded.
The checkWait function is a nice little helper that will kick off a timer to check for the results of a function
periodically. Once the test function returns TRUE , it will call the result function. Again, in your simple example, you
allow onMapDataLoaded to be a function defined outside the TILEDMap object. In this way, you can define the postload
function for the examples in this chapter and reuse the TILEDMap.js file:
//images load in an async nature, so kick off a function which will poll
//to see if they are all loaded
checkWait(
function() //this is the condition function that's called every instance
{
return gMap.imgLoadCount == gMap.tileSets.length;
},
function () //this is the function called once the above is true
{
onMapDataLoaded();
});
}
};//end of map object
For your simple example, once all the images are loaded, you allow yourself to say that the map is “loaded,” and
rendering logic can start working:
//0-forward.html
//these functions are specific to this approach
function onMapDataLoaded()
{
gMap.fullyLoaded = true;
}
Rendering Tiled Data
Once you understand the layout of a Tiled file, you can quickly see how the rendering process occurs. The file consists
of a set of layers that are stacked on top of each other. (The first layer in the array is the lowest, or first to be drawn, and
subsequent layers replace the pixels drawn by previous layers.) Each layer contains a list of “tiles” that occupy it, in
which the tile points to the index of the texture used to render it.
With this in mind, rendering the map is pretty straightforward. You walk through each layer, and each tile in that
layer, and draw the specified sprite on the screen. Generally, the most complex piece of logic that you have to deal
with here is to determine where the tile should reside in world-space, given that you only have an index to its location
in the layer data.
Understanding the Data Format to Render
The Tiled editor expects you to load into it a series of texture atlases to use for adding texture information to your map.
In addition, Tiled also expects the tiles for a map to be homogenous in size across atlases, such that you can index a
specific tile in a specific atlas simply by having the ( x , y ) coordinate of the tile in tilespace. To distinguish between two
atlases, Tiled will define a range of IDs for the tiles that belong to the atlases. In this way, every tile in your map will
have a unique ID that you can quickly reference; even better, you can determine which atlas each tile came from.