Runners Map Implementation

Up til now I’ve just been developing on a testbed 20×20 tile grid. This has been fine for testing but I wasn’t sure how well it’d run with the real map size of 254×212.

Method #1 – one big canvas

The original method was using one big canvas and drawing each tile to it which was fine for the small number of tiles used for testing. For the final number of tiles however resulted in instant failure due to bitmap size restrictions. I had considered using multiple smaller bitmaps but went on to trying the next method

Method #2 – individual tiles

The second method was using a separate sprite for each individual tile instead of one giant one. This had marginal success as in it didn’t fall over instantly. Instead it was just horrifically slow and made the game unusable. I spent quite a bit of time diagnosing bottlenecks and trying to speed things up. The main idea was to stop rendering all the tiles which were off screen but there was still the overhead of the tiles existing in the first place. This led me to come up with the final method

Method #3 – reusable tiles

The final method came from the idea: what if I didn’t need all the tiles created at once, all I need is enough tiles to cover the screen then reuse them when they’re out of sight. So now if a tile moves too far to the left and off the screen, it redraws and repositions itself to be the next tile on the right.

map-2017-11-22

In this example, there’s only ever 80 tiles (8×10) yet I’m able to create a map of all 53,848 tiles with minimal overhead.