Performance issues with high-resolution maps in 2D strategy games

Question

I'm currently developing a 2D strategy game, and I've encountered some issues with the game map.

My idea is to use a single 2D image as the strategic map for the game. similar to this (Supremacy 1914) but in a 2D version:

However, I'd like players to be able to zoom in to see the details of the map or zoom out to view the entire map. Therefore, the image might have a high resolution (e.g., 10000x8000).

Now, my concern is that loading the entire image into memory would incur unacceptable memory overhead. One approach I'm considering is to divide this high-resolution image into blocks and only load the blocks within the player's view.

However, there's a drawback to this approach as well. If I need to zoom out to view the entire map, I'd still have to load all the blocks, resulting in excessive memory usage. Alternatively, I could prepare a low-resolution version of the image and load it when viewing the full map, but I'm not sure if this approach is elegant.

Do you have any suggestions? Your help would be greatly appreciated.

Answer 1

You can do something similar to what Google Maps does (at least visually):

Have different quality versions of your map. When zoomed out, your entire map loads on low quality (let's say 1920x1080), but because you are zoomed out it looks good.

When zooming in, load only that part of the map in high quality. As an example, when you zoom in on the top-left quarter of the map, it will load a new 1920x1080 texture that only shows the top-left quarter of the map, so the whole map would be 7920x4320, but only one quarter of it would be loaded.

You can have different quality levels, so the more the user zooms in, the more quality is revealed. Dividing the map into quarters was just an example, you might need to come up with a way that best works for your project.

This might require to organise the map into a grid, or something similar, depending on your project. Tt's up to you to decide if you want to show this loading process to the users as they zoom in, or attempt to pre-load sections of the map, which might be more complex to do but have smoother results.

Hopefully this gives you at least some idea on how to proceed.

Answer 2

Another trick you can use is to compose this map in a shader from lower-resolution inputs.

You could use a signed distance field texture for the territory lines to get crisp vector-like edges even zoomed in tightly without spending a lot of texture memory or juggling different sets of tile textures at different zooms (we used this for the topographic contours on our planet maps on Starlink: Battle for Atlas).

This also makes it easy to control the line thickness, if you want to keep borders from vanishing into hairlines when zoomed out or looking to chunky zoomed in: you can dynamically re-draw them with your desired thickness for the current view.

Then the paper surface can be filled in by tiling "detail maps" that you layer based on the zoom level, fading in more detailed/higher frequency tiling when you zoom in, and mipping away as you zoom out.

Answer 3

I personally dont think you need to worry, you can split it into smaller images, but the main reason is that even a high res image probably wont take up that much.

From google:

A standard 32-bit color depth (8 bits per channel for red, green, blue, and alpha) would require approximately 8,100 kilobytes (KB) of VRAM for a 1920x1080 resolution image.

8MB for a 1080p image is really not a lot, if we round 1080 to 1000 and 1920 to 2000, 1000 x 10 = 10000, 2000 x 10 = 20000, and 8 x 10 = 80, that means an image with a size of 20000 x 10000 would only take up about 80MB, not as much as you'd think. If you're still worried splitting them up into chunks and loading/unloading could also help.

The main reason modern games use so much VRAM, is because they are loading loads of textures for all the different parts of the game. Just one high res texture shouldn't effect it much.