Faster Map Rendering - HTML5 Game Development Insights - page 260

Table 17-1. An Example GID-to-Range Table for Textures Used in a Map: the Number of Tiles a Texture Defines Is
Related to Its Dimensions, Which Determine what Ranges Are Described

Texture Name firstgid ID Range

No tile here 0 0

base_tiles.jpg 1 1-127

ground_accents.png

128 128-255

ground_foliage.png 256 256-1023

static_objects.png 1024 1024-2047

Rendering the entire tiled map becomes somewhat straightforward if you keep the following in mind:

• Walk through each layer.

• Walk through each tile on that layer.

• If the tile value is nonzero, do the following tasks:

• Walk through all the atlases, and find out which atlas the index belongs to.

• Draw the tile on the screen.

Let's do that again, but in code form. First, let's talk about how, given an ID from a tile, you can determine what
atlas it's from and what its pixel coordinates are in that atlas:

//---------------------------
this.getTilePacket= function (tileIndex) {
//this is the packet we'll return after fetching
var pkt = {
"img": null,
"px": 0,
"py": 0
};

//walk through the tile-sets and determine what 'bucket' this index is landing in
//TILED defines this by providing a 'firstgid' object which defines where this tile's indexes start
var i = 0;
for (i = this.tileSets.length - 1; i >= 0; i--)
{
if (this.tileSets[i].firstgid <= tileIndex)
break; //FOUND it!
}

//copy the information from this tileset
pkt.img = this.tileSets[i].image;
//we need to define what the 'local' index is, that is, what the index is in the atlas image for this tile
//we do this by subtracting the global id for this tileset, which gives us a relative number.
var localIdx = tileIndex - this.tileSets[i].firstgid;
/ var lTileX = Math.floor(localIdx % this.tileSets[i].numXTiles);
var lTileY = Math.floor(localIdx / this.tileSets[i].numXTiles);
pkt.px = (lTileX * this.tileSize.x);
pkt.py = (lTileY * this.tileSize.y);