3
\$\begingroup\$

I would like to know which idea is better in terms of performance.

The map is 5000x5000 tiles and I plan to expand it even more. It is split into 50x50 regions and camera doesn't move with player, the map just switches to next one when player reaches border of the screen.

I have few possible approaches to store and load a big map like this.

Case 1: I store every 50x50 region in a seperate JSON file, and just load them dynamically with XHR when player reaches border of the screen (native not jquery, since it is much faster)

Case 2: I store every 50x50 region in a seperate bitmap files, and then load that image dynamically using canvas and read it's pixels to generate map.

Case 3: I store images in bigger chunks (ex. 1000x1000) and preload them all at the beginning of game and also read pixel by pixel when needed.

Which case is possible/best? I need performance, it comes first before code readability etc. My main concerns are the memory leak of XHR, and also which is faster: XHR loading and parsing JSON or loading and reading image pixel by pixel.

Thank you!

Improve this question
\$\endgroup\$
2
  • \$\begingroup\$ How many possible values do you have for your tiles ? In a similar case I use an image and I compress it as PNG. For a 255 possible values per tile map, 5k*5k compressed as PNG isn't really big. This has many advantages, among them the possible direct use as a unzoomed representation of the map and the use of graphical routines to merge maps (war fogs, and so on). See gamedev.stackexchange.com/questions/47608/… \$\endgroup\$
    – Denys Séguret
    Sep 2, 2013 at 14:43
  • \$\begingroup\$ Why wrap your binary data in a PNG header when you can just compress the bytes using the deflate-algorithm yourself? \$\endgroup\$
    – Philipp
    Sep 2, 2013 at 15:05

1 Answer 1

Reset to default
1
\$\begingroup\$

A two-dimensional JSON array with integer values for all tiles would have quite a lot of overhead, but abusing an image to transfer binary information would also add some wrapping information you don't need.

To reduce the amount of data which needs to be sent over the network, you could use XHR, but return a single BLOB or arrayBuffer with the binary map data. This data could be compressed with an algorithm like DEFLATE (which is the same compression algorithm used by PNG) to reduce the size. Depending on how your maps are designed, another stock algorithm might have better results, or you could even try to create your own when you think you can create something more appropriate.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ This sounds like what I was looking for without all that image hacking. Should I use multiple BLOBS and do XHR everytime user changes map? I still wonder about that memory leak. I heard that XHR leaves some junk in memory that is not picked up. Is it old news? \$\endgroup\$
    – user2701428
    Sep 2, 2013 at 15:51
  • \$\begingroup\$ @user2701428 I never heard about that, but when there ever was such an issue, it was likely browser-specific. To make change-time as short as possible you should request the map data before the user switches the region. When a user enters a region, you could already request the data for all adjacent regions in the background so the data is available as soon as it is needed. \$\endgroup\$
    – Philipp
    Sep 2, 2013 at 17:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .