Scaling Retro Games
If I'm making a retro-style game that uses a low resolution, how can I make it look good on modern high-resolution displays?
When developing retro-style games, we typically want to render at a low resolution but scale up cleanly to modern displays. Here's how to achieve this:
Integer Scaling
The cleanest approach is to use integer scaling, where we multiply our game's resolution by whole numbers:
#include <SDL.h>
#include <iostream>
int main(int argc, char* argv[]) {
SDL_Init(SDL_INIT_VIDEO);
// Classic retro resolution
constexpr int GameWidth{320};
constexpr int GameHeight{240};
// Create a window that's 3x our
// game's resolution
constexpr int Scale{3};
SDL_Window* Window{SDL_CreateWindow(
"Retro Game",
SDL_WINDOWPOS_UNDEFINED,
SDL_WINDOWPOS_UNDEFINED,
GameWidth * Scale, GameHeight * Scale,
0
)};
// Create a renderer that will handle the scaling
SDL_Renderer* Renderer{SDL_CreateRenderer(
Window, -1, SDL_RENDERER_ACCELERATED
)};
// Set logical size - SDL will handle scaling
SDL_RenderSetLogicalSize(
Renderer, GameWidth, GameHeight);
// Create a texture to render to at our
// game's resolution
SDL_Texture* GameTexture{SDL_CreateTexture(
Renderer,
SDL_PIXELFORMAT_RGBA8888,
SDL_TEXTUREACCESS_TARGET,
GameWidth, GameHeight
)};
// Clean up
SDL_DestroyTexture(GameTexture);
SDL_DestroyRenderer(Renderer);
SDL_DestroyWindow(Window);
SDL_Quit();
return 0;
}Pixel-Perfect Rendering
To maintain that crisp, retro look, we want to avoid scaling artifacts. SDL provides SDL_HINT_RENDER_SCALE_QUALITY to control this:
#include <SDL.h>
int main(int argc, char* argv[]) {
SDL_Init(SDL_INIT_VIDEO);
// Set nearest-neighbor scaling for crisp pixels
SDL_SetHint(SDL_HINT_RENDER_SCALE_QUALITY, "0");
// Rest of initialization...
SDL_Quit();
return 0;
}This approach ensures your retro-style game maintains its pixel art aesthetic while still filling modern high-resolution displays effectively.
Display Modes
Learn how to manage screen resolutions and refresh rates in SDL games using display modes.