Samuli Natri
Software Developer
Updated March 29, 2021

C/C++ & SDL - Window & Renderer (Game Programming Tutorial)

How to create a window and paint the client area grey.

Quickstart

main.cpp

#include <SDL.h>

struct Game {
    int width, height;
    bool running;
    SDL_Window *window;
    SDL_Renderer *renderer;
};

int main(int argc, char *argv[])
{
    SDL_Init(SDL_INIT_VIDEO);

    Game game = {0};

    game.width = 640;
    game.height = 640;
    game.running = true;

    SDL_CreateWindowAndRenderer(game.width,
                                game.height,
                                0,
                                &game.window,
                                &game.renderer);

    SDL_Event event;

    while(game.running)
    {
        while(SDL_PollEvent(&event))
        {
            switch(event.type)
            {
                case SDL_QUIT:
                {
                    game.running = false;
                } break;

                default: {} break;
            }
        }

        // clear screen

        SDL_SetRenderDrawColor(game.renderer, 
                               200, 200, 200, 255);
        SDL_RenderClear(game.renderer);

        // update
        // render

        // flip buffers

        SDL_RenderPresent(game.renderer);

    }

    SDL_Quit();

    return 0;
}

build.bat

@echo off
cl main.cpp /Fegame.exe /nologo ^
/ISDL2-2.0.14\include ^
/link ^
/LIBPATH:SDL2-2.0.14\lib\x64 ^
/subsystem:console ^
SDL2.lib SDL2main.lib shell32.lib

Full tutorial

SDL library

  • Visit https://www.libsdl.org/download-2.0.php and download the Windows development library (SDL2-devel-2.0.14-VC.zip). Unzip it in the project directory.
  • Copy SDL2.dll from the SDL2-2.0.14\lib\x64 directory to the project root.

Program details

  • I'm bundling data and pointers that we might want to pass around in one game instance.
  • SDL_Init(SDL_INIT_VIDEO) initializes the video subsystem so we can draw things on the screen.
  • SDL_CreateWindowAndRenderer() creates a window and renderer with one command. Use SDL_CreateWindow() and SDL_CreateRenderer() if you need more control (for example you can pass in SDL_RENDERER_PRESENTVSYNC flag to SDL_CreateRenderer() to limit frame rate).

Renderer is like a canvas. Each loop iteration we prepare and paint one image (frame) to it.

  • while(game.running) { } keeps the program running until we set game.running to false.
  • while(SDL_PollEvent(&event)) fetches an event from the event queue and stores it in the event structure.
  • We react to the SDL_QUIT event by setting game.running to false. This event is triggered when we close the window.
  • SDL_SetRenderDrawColor() sets a color for rendering.
  • SDL_RenderClear() clears the canvas with the render color.
  • SDL_RenderPresent() displays the rendered image on the screen.

Double-buffering

  • We operate on multiple buffers, in this case, the back- and frontbuffer.
  • SDL_RenderClear() clears the backbuffer with light grey pixels.
  • SDL_RenderPresent() flips the back- and frontbuffer pointers. The backbuffer becomes the frontbuffer and the frontbuffer becomes the backbuffer.
  • Whatever is in the frontbuffer is displayed to the user.

So, each loop iteration we prepare the next frame by painting it to the backbuffer while the image from the frontbuffer is displayed on the screen.

The build script

Installing Visual Studio is an easy way to get the The Microsoft C++ (MSVC) compiler toolset.

  • Use the Windows search tool to find Developer Command Prompt for VS 2019.
  • Click "Open file location".
  • Open the "VC" directory.
  • Double-click the x64 Native Tools Command Prompt for VS 2019 shortcut.
  • You can now use the cl command to compile programs.
  • Create a file called build.bat and add these lines to it:
@echo off
cl main.cpp /Fegame.exe /nologo ^
/ISDL2-2.0.14\include ^
/link ^
/LIBPATH:SDL2-2.0.14\lib\x64 ^
/subsystem:console ^
SDL2.lib SDL2main.lib shell32.lib
  • @echo off doesn't show the commands we run on the screen.
  • cl main.cpp compiles the source file.
  • /Fegame.exe specifies the output file.
  • /nologo hides the Microsoft banner.
  • /I searches include files from the specified directory.
  • /link passes linker options to the linker.
  • /LIBPATH: adds a path for the linker to search for libraries.
  • /subsystem:console allows us to use printf() to print out stuff to the command line.
  • SDL2.lib SDL2main.lib shell32.lib lists the project dependencies.

Use build.bat to build the program. game.exe runs it.

Comments

Add code blocks with 3 backticks: ```print("Hello")```