How do you create images that work for multiple resolutions?

Question

I'm currently doing some game development and I've been curious about this situation for many years.

Let's say your game has two resolutions: 640x480 and 800x600 (using small numbers just for simplicity). I have an image that I want to, no matter, take up 1/4 of the screen. For 640x480 resolution, it would be 320x240; while 800x600 resolution, it would be 400x300. There's a few ways I think of that this could be accomplished:

1. Make the image 320x240 and scale it up on the larger resolution (will look pixelated)
2. Make the image 400x300 and scale it down on the smaller resolution (loss of detail)
3. Create two separate images for each resolution (size bloat)

Just for 4:3 aspect ration, you probably have 5-6 resolutions that are commonly found in more professional games; plus additional ones for 16:10 and 16:9. Creating separate assets for each aspect ratio makes sense, but doing it for each resolution sounds like overkill and a huge size jump.

How do developers normally handle this sort of situation?

Thanks!

UPDATE: This information would be used for a 2D platformer.

Part of the reason that I'm interested in this is trying to keep a "level playing field" for all players no matter what resolution they are at. I don't want the 800x600 resolution player to be able to see more of the level than the 640x480 player can.

Additionally, since I really have no graphics experience, I'm not sure how much the resolution changes would affect the integrity of the images.

Answer 1

You've covered the basic ideas in your question. Which method you use depends on your requirements. You might use a combination of approaches.

1. Make the image 320x240 and scale it up on the larger resolution (will look pixelated)
Do this if you don't need higher detail and just need to show the image larger. Good for low detail images like old-style sprites.

2. Make the image 400x300 and scale it down on the smaller resolution (loss of detail)
Even if you were to create a separate image for lower resolutions you will still lose detail, but in many cases it doesn't really matter much. It's a compromise.

3. Create two separate images for each resolution (size bloat)
This one is not quite right, but close. I can't think of any game that has different images for each resolution unless it only supports a couple sizes. Once you start dealing with many screen sizes, this is unfeasible. What some games do though is create a high-res and a low-res version of the images and choose the best match depending on the screen resolution.

What you are missing however is mipmaps, which is similar to #3 but a mipmap is stored in a single file and follows the mipmap format which is supported on the graphics hardware. Mostly these are just scaled computationally but you can edit them like any other image to fix loss of detail and other oddities that come up because of scaling. The mipmapping also doesn't correspond to screen sizes. Each level of the mipmap is 1/2 the size of the last, so it still uses a best-match approach. This is what most modern games do if they need different image resolutions.

Answer 2

The fourth option is to generate the image when you know the resolution (after startup).

This means having enough information in the game to properly render the image to texture on startup (and maybe caching it for future play sessions). This needs to be debugged carefully to ensure all resolutions come out correctly. But for things like text it's just about the only way to keep it sharp for all resolutions.

Answer 3

It can depend on the kind of game you are making. It sounds like you may have some kind of 2d, non scaling sprites display. If you are doing something like a 3d fps then you will most likely be scaling up or down. The optimization in this case is how you make this efficient. Mipmaps can help but then you need to try and make the selection optimal. Here's some good idea's on that kind of thing

Answer 4

I normally do all three. You make it sound like you need to choose 1 method and use it for all graphics, but that's not true. Each method has different pros and cons, so I use different methods on different images.

For example, my UI generally needs to be super-sharp, but it's also not full of important tiny details; perfect candidate for #2. On the other hand, background images are naturally large (often fullscreen) but can be blurry, so on those I use #1.

Answer 5

You can also make an image that has a frame of not-so-important-pixels which you can sacrifice. That way you can crop the important center part cutting the borders differently for each resolution and aspect ratio.