HTML and CSS Reference
In-Depth Information
Filling the Cache
Once the map data have been parsed, and the images have been loaded, you can continue filling your cache:
function onMapDataLoaded()
{
preDrawCache();
}
Now that you have the basic object, you must create a two-dimensional array of canvasTiles that covers the
world-space map correctly. To do this, you divide the size of the map (on each axis) by the size of each canvasTile
(which is tunable) to get the number of canvasTiles along that axis. You store these in an array for retrieval later.
Most important, once you create the array, you call
fillCanvasTile
,
which will do all the work of filling in the
canvas with the proper tile data:
function preDrawCache()
{
//determine the number of canvases across, and down for the given map
//dividing the overall pixel size of the map by the size of your canvas tiles does this
var xCanvasCount = 1 + Math.floor(gMap.pixelSize.x / gMap.canvasTileSize.x);
var yCanvasCount = 1 + Math.floor(gMap.pixelSize.y / gMap.canvasTileSize.y);
var numSubCanv = xCanvasCount*yCanvasCount;
//now for each 'cache tile' go through, create it, and fill it with graphics information
for(var yC = 0; yC <yCanvasCount; yC ++)
{
for(var xC = 0; xC <xCanvasCount; xC ++)
{
var k = new CanvasTile();
k.create(gMap.canvasTileSize.x,gMap.canvasTileSize.y);
k.x = xC * gMap.canvasTileSize.x;
k.y = yC * gMap.canvasTileSize.y;
gMap.canvasTileArray.push(k);
//draw this region of the map into this canvas
fillCanvasTile(k);
}
}
//once we've filled the cache, we're loaded!
gMap.fullyLoaded = true;
};
To fill the
canvasTile
object, you need to modify your rendering function from the last article. Before, you were
taking into account the entire view-rect when rendering. Now, you can extend this concept by culling against the
suggested canvasTile bounds rather than the view-rect itself. This lets you easily reuse your existing code to fill your
new canvasTiles:
