Image Scaling and Aspect Ratios

Handling High DPI Displays in SDL2

What's the best approach for handling high DPI displays with SDL2?

Abstract art representing computer programming

Handling high DPI (HiDPI) displays in SDL2 is crucial for ensuring your game looks crisp on modern screens. SDL2 provides built-in support for HiDPI, but you need to set it up correctly. Here's a comprehensive approach:

Enable HiDPI Support

First, enable HiDPI support when creating your window:

1#include <SDL.h>
2
3#include <iostream>
4
5int main() {
6  SDL_Init(SDL_INIT_VIDEO);
7
8  // Enable HiDPI support
9  SDL_SetHint(
10    SDL_HINT_VIDEO_HIGHDPI_DISABLED, "0");
11
12  SDL_Window* window = SDL_CreateWindow(
13    "HiDPI Game", SDL_WINDOWPOS_UNDEFINED,
14    SDL_WINDOWPOS_UNDEFINED, 800, 600,
15    SDL_WINDOW_ALLOW_HIGHDPI |
16    SDL_WINDOW_RESIZABLE);
17
18  if (!window) {
19    std::cout << "Failed to create window: " <<
20      SDL_GetError() << "\n";
21    return 1;
22  }
23
24  SDL_Renderer* renderer = SDL_CreateRenderer(
25    window, -1,
26    SDL_RENDERER_ACCELERATED |
27    SDL_RENDERER_PRESENTVSYNC);
28
29  if (!renderer) {
30    std::cout << "Failed to create renderer: "
31      << SDL_GetError() << "\n";
32    return 1;
33  }
34
35  // Rest of the code...
36
37  SDL_DestroyRenderer(renderer);
38  SDL_DestroyWindow(window);
39  SDL_Quit();
40  return 0;
41}

Get the Correct Window Size

The window size reported by SDL might not match the actual pixel size on HiDPI displays. Use SDL_GetRendererOutputSize() to get the true pixel size:

1int windowWidth, windowHeight,
2  renderWidth, renderHeight;
3SDL_GetWindowSize(
4  window, &windowWidth, &windowHeight);
5SDL_GetRendererOutputSize(
6  renderer, &renderWidth, &renderHeight);
7
8float scaleX = renderWidth
9  / static_cast<float>(windowWidth);
10float scaleY = renderHeight
11  / static_cast<float>(windowHeight);
12
13std::cout << "Window size: " << windowWidth
14  << "x" << windowHeight << "\n";
15std::cout << "Render size: " << renderWidth
16  << "x" << renderHeight << "\n";
17std::cout << "Scale factor: " << scaleX
18  << "x" << scaleY << "\n";

Scale Your Rendering

Use the scale factor when rendering:

1SDL_Rect GetScaledRect(int x, int y, int w,
2                       int h, float scaleX,
3                       float scaleY) {
4  return SDL_Rect{
5    static_cast<int>(x * scaleX),
6    static_cast<int>(y * scaleY),
7    static_cast<int>(w * scaleX),
8    static_cast<int>(h * scaleY)};
9}
10
11// In your render loop:
12SDL_Rect rect = GetScaledRect(
13  100, 100, 200, 200, scaleX, scaleY);
14SDL_RenderFillRect(renderer, &rect);

Handle Input

Mouse input coordinates are already adjusted by SDL2, but you might need to scale other input values:

1int mouseX, mouseY;
2SDL_GetMouseState(&mouseX, &mouseY);
3float gameX = mouseX / scaleX;
4float gameY = mouseY / scaleY;

Load HiDPI Assets

For the best visual quality, provide high-resolution versions of your assets and scale them down as needed:

1SDL_Surface* LoadScaledSurface(
2  const char* path, float scale) {
3  SDL_Surface* original = SDL_LoadBMP(path);
4  if (!original) return nullptr;
5
6  int newWidth = static_cast<int>(original->w *
7    scale);
8  int newHeight = static_cast<int>(original->h *
9    scale);
10
11  SDL_Surface* scaled =
12    SDL_CreateRGBSurface(0, newWidth, newHeight,
13                         32, 0, 0, 0, 0);
14
15  SDL_BlitScaled(original, nullptr, scaled,
16                 nullptr);
17  SDL_FreeSurface(original);
18
19  return scaled;
20}

By following these steps, your SDL2 game will look great on both standard and HiDPI displays, providing a consistent experience across different screen resolutions.

This Question is from the Lesson: