More efficient tile rendering

[andrew-peng-144]

Try rendering in batches. Then to handle moving around the map, move the batch entirely, instead of redrawing each tile. That means loading a batch is many draw calls (256 draw calls if each batch is 16x16) but happens sparingly

[andrew-peng-144]

need constants CHUNK_SIZE = 16 (number of tiles for batch's side length), viewport width/height, TILE_SIZE=16 (#pixels for a single tile's side length, not accounting for zoom), zoom factor = 2 (how many times larger is each sprite and tile graphic)

First calculate how many global chunks, this happens per game viewport resize (not a native browser function, game viewport resize is self coded). This is calculated based on game viewport size (and zoom) and splitting it into chunks based on CHUNK_SIZE. Store these chunks into a array of canvas as chunk "frames": a frame can hold drawn tiles in it

Then in the render method, draw tiles inside each chunk frame based on current camera position. For example: if camera at (146, 233) and CHUNK_SIZE=16, and viewport width=800, height=600, zoom factor = 2. Then # of chunk frames = ceil(800/(16162)) + ceil(600/(16162))= 2*2 = 4. (2 on x axis, 2 on y) then draw tiles from 128 to 128+256 for the (0,0) chunk draw tiles from 128+256 to 128+512 for the (1,0) chunk etc. for (1,0) and (1,1) chunks. how to know when to draw the new chunk?