Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Since you have infinite levels I'd suggest a structure similar to what you already have, with a slight tweak.</p> <p>Instead of storing everything in one big array, and moving stuff around inside that array every time the user moves (ouch) instead store 9 chunks of map (each one a size such that it's roughly twice the size of the screen), when the user approaches the edge of the current chunk, dispose the chunks which are offscreen, move all the chunks left, and load new ones into the gap.</p> <p>Hopefully that was clear, but just in case, here's a diagram:</p> <p><img src="https://i.stack.imgur.com/kXGK1.png" alt="Chunking"></p> <p>The lettered squares are the chunks of map, and the red square is the viewport (I drew it slightly too large, remember the viewport is smaller than the black squares). As the viewport moves right, you unload chunks A B and C, move all the others left, and load new data into the right most ones. Since a chunk is twice the width of the screen, you have the time it takes the user to cross the screen to generate/load the level into those chunks. If the user moves around the world fast, you can have a 4x4 set of chunks for extra buffering.</p> <p>To address the returning to previous chunks of map. there are a couple of ways to do that:</p> <ul> <li>Write out the chunks to hard disk when they're no longer in use (or whatever the equivalent would be in javascript)</li> <li>Expand your chunk set infinitely in memory. Rather than an array of chunks have an assosciative array which takes x/y position of the chunk, and returns the chunk (or null, which indicates that the user has never been here before and you need to generate it).</li> <li>Procedurally generate your levels, that's complex but means that once a chunk goes off screen you can just dispose it, and be confident you can regenerate exactly the same chunk again later</li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload