Open andrew-peng-144 opened 3 years ago
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?
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