Handling Retina Displays in SDL2 on macOS

When developing an SDL2 application for macOS, you may notice that the graphics appear blurry or pixelated on Retina displays. This is because Retina displays have a higher pixel density, and SDL2 needs to be configured to handle this properly.

Here's how you can ensure your SDL2 application looks sharp on Retina displays:

Step 1: Enable high DPI support in SDL2 by setting the SDL_HINT_VIDEO_HIGHDPI_DISABLED hint to "0" before creating the window:

1SDL_SetHint(SDL_HINT_VIDEO_HIGHDPI_DISABLED, "0");

Step 2: Create the SDL2 window with the SDL_WINDOW_ALLOW_HIGHDPI flag:

1SDL_Window* window = SDL_CreateWindow(
2    "My Application",
3    SDL_WINDOWPOS_CENTERED,
4    SDL_WINDOWPOS_CENTERED,
5    800, 600,
6    SDL_WINDOW_SHOWN | SDL_WINDOW_ALLOW_HIGHDPI);

Step 3: After creating the window, get the actual drawable size of the window using SDL_GL_GetDrawableSize or SDL_GetRendererOutputSize:

1int drawableWidth, drawableHeight;
2SDL_GL_GetDrawableSize(window,
3  &drawableWidth, &drawableHeight);

Step 4: Use the drawable size to create your rendering context (e.g., SDL_Renderer or OpenGL context) and scale your graphics accordingly.

Here's a complete example:

1#include <SDL.h>
2#include <SDL_image.h>
3#include <iostream>
4
5int main(int argc, char** argv) {
6  SDL_Init(SDL_INIT_VIDEO);
7  SDL_Window* window = SDL_CreateWindow(
8    "My Application",
9    SDL_WINDOWPOS_CENTERED,
10    SDL_WINDOWPOS_CENTERED,
11    800, 600,
12    SDL_WINDOW_SHOWN | SDL_WINDOW_ALLOW_HIGHDPI);
13
14  if (window == nullptr) {
15    // Handle error
16    return 1;
17  }
18
19  int drawableWidth, drawableHeight;
20  SDL_GL_GetDrawableSize(window,
21    &drawableWidth, &drawableHeight);
22
23  SDL_Renderer* renderer = SDL_CreateRenderer(
24    window, -1, SDL_RENDERER_ACCELERATED);
25
26  if (renderer == nullptr) {
27    return 1;
28  }
29
30  SDL_RenderSetLogicalSize(renderer, 800, 600);
31
32  // Render your game content
33  // ...
34
35  SDL_DestroyRenderer(renderer);
36  SDL_DestroyWindow(window);
37  SDL_Quit();
38
39  return 0;
40}

In this example:

1. We enable high DPI support by setting the SDL_HINT_VIDEO_HIGHDPI_DISABLED hint to "0".
2. We create the window with the SDL_WINDOW_ALLOW_HIGHDPI flag.
3. We get the actual drawable size of the window using SDL_GL_GetDrawableSize.
4. We create the renderer using the drawable size and set the logical size to the original window size using SDL_RenderSetLogicalSize. This ensures that the rendering is scaled correctly for Retina displays.

By following these steps, your SDL2 application will appear sharp and crisp on Retina displays, providing a better visual experience for users on macOS.