HTML and CSS Reference
This technique lands midway between the two previous techniques for two reasons:
The technique will place an upper limit on the amount of memory needed for your
canvasTiles; regardless of the map size, you will only ever eat up the same data.
The technique requires some additional processing overhead, as each canvasTile will need
to be filled in as it moves in and out of the view-rect.
As any hard-core computer scientist will tell you, the most important thing about a caching system is how the
objects are evicted and retained within it. Simple caching systems, such as Least Recently Used (LRU), will keep a
counter on an object, and once the cache is filled, will use the oldest object, repurposing it to be filled with the new
aGe aND COSt CONSIDeratIONS
You should take into account age and cost when deciding which cache textures to reuse. Cost represents
the work value associated with refilling an object with information. in your example some tiles may be more
expensive to regenerate than others. as such, evicting the high-cost objects from the cache can represent a
worst-performance burden, as opposed to evicting younger textures, which may be faster to repopulate. this
trade-off is important for any type of texture-caching system.
shameless plug: you can read more on this topic in my essay “efficient Cache replacement Using age and
Cost Metrics,” in Game Programming Gems 7 (Cengage Learning, 2008).
A New CanvasTile
Because users can run around your map quite randomly (especially in the case of teleporter fights), the oldest
canvasTile (that is, the tile that was created the longest time ago) is not a good enough metric. The oldest tile may
be the one currently visible on screen, which is a less-than-ideal choice for eviction. As such, you need a way to
determine the oldest unseen tile. For our purposes, you allow a canvasTile to chart how old it is, relative to not being
visible in the viewport:
this.isFree=true; //is this tile being used currently?
this.numFramesNoVisible=0; //how many frames has this NOT been visible?
You add an update function to each canvasTile, which will check how long it has been visible to the user. Once a
threshold is reached, you consider this tile to be evicted from the cache and available for use in the future:
//if this tile is free, then there's no logic to be done here