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!