Image Scaling and Aspect Ratios

Preserving Aspect Ratio in Fullscreen Mode

What's the best way to handle aspect ratio preservation for fullscreen modes?

Abstract art representing computer programming

Preserving aspect ratio in fullscreen mode is crucial for maintaining the visual integrity of your game across different screen sizes. Here's a comprehensive approach to handle this in SDL2:

Calculate the Aspect Ratio

First, determine the aspect ratio of your game's native resolution:

1const int GAME_WIDTH = 1280;
2const int GAME_HEIGHT = 720;
3const float GAME_ASPECT_RATIO = GAME_WIDTH /
4  static_cast<float>(GAME_HEIGHT);

Create a Fullscreen Window

Create a borderless fullscreen window that covers the entire screen:

1SDL_Window* window = SDL_CreateWindow(
2  "Fullscreen Game", SDL_WINDOWPOS_UNDEFINED,
3  SDL_WINDOWPOS_UNDEFINED, 0, 0,
4  SDL_WINDOW_FULLSCREEN_DESKTOP);

Calculate Scaling Factors

Determine the scaling factors to fit the game resolution into the screen while preserving aspect ratio:

1int screenWidth, screenHeight;
2SDL_GetWindowSize(window, &screenWidth,
3                  &screenHeight);
4
5float scaleX = screenWidth / static_cast<float>(
6  GAME_WIDTH);
7float scaleY = screenHeight / static_cast<float>
8  (GAME_HEIGHT);
9float scale = std::min(scaleX, scaleY);
10
11int scaledWidth = static_cast<int>(GAME_WIDTH *
12  scale);
13int scaledHeight = static_cast<int>(GAME_HEIGHT
14  * scale);

Calculate Letterbox or Pillarbox Dimensions

Determine the size and position of black bars to maintain aspect ratio:

1int xOffset = (screenWidth - scaledWidth) / 2;
2int yOffset = (screenHeight - scaledHeight) / 2;
3
4SDL_Rect gameViewport = {
5  xOffset, yOffset, scaledWidth, scaledHeight};

Set Up Rendering

Create a renderer and set the viewport:

1SDL_Renderer* renderer =
2  SDL_CreateRenderer(window, -1,
3                     SDL_RENDERER_ACCELERATED);
4SDL_RenderSetViewport(renderer, &gameViewport);
5
6// Clear the entire screen (including
7// letterbox/pillarbox areas)
8SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
9SDL_RenderClear (renderer);

Render Your Game

Render your game content within the viewport:

1void RenderGame(SDL_Renderer* renderer) {
2  // Clear only the game area
3  SDL_SetRenderDrawColor(renderer, 50, 50, 50,
4                         255);
5  SDL_Rect fullViewport = {
6    0, 0, GAME_WIDTH, GAME_HEIGHT};
7  SDL_RenderFillRect(renderer, &fullViewport);
8
9  // Render game content here
10  SDL_SetRenderDrawColor(renderer, 255, 0, 0,
11                         255);
12  SDL_Rect rect = {100, 100, 200, 200};
13  SDL_RenderFillRect(renderer, &rect);
14
15  SDL_RenderPresent(renderer);
16}

Handle Window Resize Events

Recalculate the viewport when the window is resized:

1void HandleWindowResize(SDL_Window* window,
2                        SDL_Renderer*
3                        renderer) {
4  int screenWidth, screenHeight;
5  SDL_GetWindowSize(window, &screenWidth,
6                    &screenHeight);
7
8  float scaleX = screenWidth / static_cast<
9    float>(GAME_WIDTH);
10  float scaleY = screenHeight / static_cast<
11    float>(GAME_HEIGHT);
12  float scale = std::min(scaleX, scaleY);
13
14  int scaledWidth = static_cast<int>(GAME_WIDTH
15    * scale);
16  int scaledHeight = static_cast<int>(
17    GAME_HEIGHT * scale);
18  int xOffset = (screenWidth - scaledWidth) / 2;
19  int yOffset = (screenHeight - scaledHeight) /
20    2;
21
22  SDL_Rect gameViewport = {
23    xOffset, yOffset, scaledWidth,
24    scaledHeight};
25
26  SDL_RenderSetViewport(renderer,
27                        &gameViewport);
28}

1// In your event loop:
2SDL_Event event;
3while (SDL_PollEvent(&event)) {
4  if (event.type == SDL_WINDOWEVENT &&
5      event.window.event ==
6        SDL_WINDOWEVENT_RESIZED) {
7    HandleWindowResize(window, renderer);
8  }
9  // Handle other events...
10}

By implementing this approach, your game will maintain its aspect ratio in fullscreen mode across different screen sizes. The game content will be scaled to fit the screen as large as possible while preserving its original proportions, and black bars (letterboxing or pillarboxing) will be added as needed to fill the remaining space.

This method ensures that your game looks consistent and visually appealing regardless of the display's aspect ratio, providing a professional fullscreen experience for your players.

This Question is from the Lesson: