HTML and CSS Reference
In-Depth Information
//if i'm not visible, age me, and see if we can free me from the cache
if(!this.isVisible())
{
this.numFramesNoVisible++;
if(this.numFramesNoVisible > 100) //promote to freed
{
this.isFree=true;
this.x = -1;
this.y = -1;
}
}
};
Because you're caching your tiles, you need to generate a pool of them once all the content has been loaded. You
can create the objects themselves, but you do not fill them in at load time; you wait until you have validation from the
viewport to start the cycles.
You'll also notice in the code that follows that the size of the tiles has been changed. In the previous example, you
used large, 1,024×1,024 textures, as they represented a good compromise between allocation and draws per frame.
(Depending on hardware restrictions, ideally you'd precache the entire static background into one large texture, but
that may cause additional memory pressure.) In the case of using a free list, you can get away with a smaller tile size,
as you'll be reusing them often:
gMap.canvasTileSize={"x":256,"y":256};
function onMapDataLoaded()
{
//preallocate a small pool of canvases to use
numCanvases=30;
for(var i =0; i < gMap.numCanvases; i++)
{
var k = new CanvasTile();
k.create(gMap.canvasTileSize.x,gMap.canvasTileSize.y);
gMap.canvasTileArray.push(k);
}
gMap.fullyLoaded = true;
}
When the viewport tests visibility against the world, it needs to determine if the targeted section of the map has
been cached by the tiling system. If so, you have to use the canvasTile to render. If the section has not been cached,
you must find a valid texture from the cache to use. You do this in two steps:
1.
Cycle the canvases to see if any of them are free for use; these textures are easy to grab and
quick to track down.
2.
If the cache is full (that is, all the textures have been allocated), then you need to go
through it and decide which is the oldest and repurpose that texture for your new needs.
