Loading and Displaying Images

Handling Different Image Resolutions

How do I handle different image resolutions for various screen sizes?

Abstract art representing computer programming

Handling different image resolutions for various screen sizes is a common challenge in game development. Here's a practical approach using SDL2.

Scaling Images

One way to handle different resolutions is to scale your images at runtime. You can use SDL_BlitScaled() instead of SDL_BlitSurface() to achieve this. Here's how you might modify our Image class to support scaling:

1#include <SDL.h>
2
3#include <iostream>
4#include <string>
5
6class Image {
7public:
8  Image(std::string File,
9        SDL_PixelFormat* PreferredFormat =
10          nullptr)
11    : ImageSurface{SDL_LoadBMP(File.c_str())} {
12    // Constructor code remains the same
13  }
14
15  void Render(SDL_Surface* DestinationSurface,
16              SDL_Rect* DestRect = nullptr) {
17    SDL_BlitScaled(ImageSurface, nullptr,
18                   DestinationSurface,
19                   DestRect); 
20  }
21
22  // Rest of the class remains unchanged
23};
24
25int main() {
26  SDL_Init(SDL_INIT_VIDEO);
27  SDL_Window* window = SDL_CreateWindow(
28    "Scaled Image", SDL_WINDOWPOS_UNDEFINED,
29    SDL_WINDOWPOS_UNDEFINED, 800, 600, 0);
30  SDL_Surface* screenSurface =
31    SDL_GetWindowSurface(window);
32
33  Image img{
34    "example.bmp", screenSurface->format};
35
36  // Scale to half the window size
37  SDL_Rect destRect{0, 0, 400, 300};
38  
39  img.Render(screenSurface, &destRect);
40
41  SDL_UpdateWindowSurface(window);
42  SDL_Delay(5000);
43
44  SDL_DestroyWindow(window);
45  SDL_Quit();
46  return 0;
47}

Responsive Design

For a more responsive approach, you can calculate the scaling factor based on the screen size:

1float scaleX = static_cast<float>(screenWidth) /
2  originalImageWidth;
3float scaleY = static_cast<float>(screenHeight)
4  / originalImageHeight;
5float scale = std::min(scaleX, scaleY);
6// Maintain aspect ratio
7
8int newWidth = static_cast<int>(
9  originalImageWidth * scale);
10int newHeight = static_cast<int>(
11  originalImageHeight * scale);
12
13SDL_Rect destRect{
14  // Center horizontally
15  (screenWidth - newWidth) / 2,
16  // Center vertically
17  (screenHeight - newHeight) / 2,
18  newWidth, newHeight};

This approach scales the image to fit the screen while maintaining its aspect ratio.

Remember, scaling images at runtime can be computationally expensive. For better performance, consider pre-scaling your images for common resolutions and loading the appropriate one at runtime.

This Question is from the Lesson: