Faster Map Rendering - HTML5 Game Development Insights - page 271

//---------------------------
fetchFreeCanvas:function()
{
//do we have a free canvas?
for(var i =0; i < this.canvasTileArray.length; i++)
{
if(this.canvasTileArray[i].isFree)
{
this.canvasTileArray[i].isFree = false;
return this.canvasTileArray[i];
}
}
//no free canvas yet, find one of the used canvases..
//pick the one with the highest age
var oldest = 0;
var winner = null;
for(var i =0; i < this.canvasTileArray.length; i++)
{
if(this.canvasTileArray[i].isFree) continue;
if(this.canvasTileArray[i].numFramesNoVisible > oldest)
{
oldest = this.canvasTileArray[i].numFramesNoVisible;
winner = this.canvasTileArray[i];
}
}
winner.isFree = false;
return winner;
},
Drawing the Map
To draw your map, you first need to update all your canvasTiles in order to make any necessary adjustments to their
ages and potentially allow them to free themselves from the cache. It is important to do this step first, because you're
about to start walking the map and reusing tiles where you can get your hands on them:
function onDrawMap(ctx)
{
//do an update of our canvas arrays
for(var i =0; i < gMap.canvasTileArray.length; i++)
gMap.canvasTileArray[i].update();
The real chaos of this function comes from knowing which tiles have been cached and which haven't. In effect,
you must segment the map and determine which of the larger segmented areas have active residency in your cache.
Once you know your canvasTile coordinates, you can walk through the cache and try to find a tile that has already been
filled with that data. If you find one, you can continue on and use it during rendering. If you don't find a canvasTile
that contains information, then you need to go through the cache and populate it with the map information:
//determine what canvasTilings would be visible here, expand our view rect to smooth tiling artifacts..
var xTileMin = Math.floor((gMap.viewRect.x) / gMap.canvasTileSize.x);
var xTileMax = Math.floor((gMap.viewRect.x+gMap.viewRect.w) / gMap.canvasTileSize.x);