SDL School

How graphics programs work

A program that draws on the screen works differently from a program that prints text. This page explains the ideas behind every SDL program. You need no tools to read it, and it has almost no code.

Each idea has a lesson that puts it into practice. The list at the end of this page shows where.

What SDL is

SDL is a C library. The name means Simple DirectMedia Layer. Each operating system has its own way to open a window, draw, play a sound, and read the keyboard. SDL gives you one set of functions for all of them.

Your C program SDL Windows macOS Linux Browser
Your program calls SDL, and SDL does the work that is different on each system.

SDL is a library, not a game engine. An engine gives you a finished structure, with objects, physics, and scenes. SDL gives you a window, a way to draw, sound, and input. You write the rest in C, so you see how each part works.

Pixels

A screen is a grid of small colored dots, and each dot is a pixel. A window that is 640 pixels wide and 480 pixels high has 307,200 pixels.

Each pixel has one color, and three numbers make that color: red, green, and blue. Each number goes from 0 to 255. Mixed together, they give millions of colors. All three at 0 is black, and all three at 255 is white.

one pixel red 255 green 157 blue 92
Three numbers set the color of each pixel.

To name a pixel, you give its position as two numbers, x and y. The point (0, 0) is the top-left corner. The value of x increases to the right, and the value of y increases downward.

Frames

A screen cannot show movement. It shows still pictures, one after another, very fast. One picture is a frame. A flipbook works the same way, and so does a film.

frame 1 frame 2 frame 3
Each frame is a complete picture. Your eye sees one square that moves.

Most screens show at least 60 frames each second. At that rate, your program has about 16 milliseconds to make each frame.

Nothing on the screen moves

This is the idea that surprises most people. The screen has no objects on it, only pixels. To the computer, the square below is not a thing that slides. It does not exist as a square at all.

Your program holds the real data, such as a number for the position of the square. In each frame, the program changes that number, then draws the complete picture again from the start. The new picture has the square in a slightly different place.

This idea explains many things that you meet later. The computer does not know that two objects touch, so your code must compare their numbers. Old pixels do not go away by themselves, so each frame starts by painting over the full window.

The loop

Every graphics program has one main loop. It does the same four steps for each frame:

Input Update Draw Show again, for each frame
The four steps of the main loop run many times each second.
  1. Input: find out what the user did.
  2. Update: change the data. Move the ball, and add to the score.
  3. Draw: make a new picture from the data.
  4. Show: put the picture on the screen.

A program that prints text runs from top to bottom and ends. A graphics program stays in this loop until you close it.

The loop must not wait for anything. If the program stops to wait for a key, then the picture freezes. So it asks "did anything happen?", handles the answer, and continues at once.

Events

An event is a message that tells your program that something happened. A key press is an event. So is a mouse movement, or a click on the close button.

SDL puts events in a queue, a list that keeps them in order. Your program takes them from the queue on each frame. This is why events never get lost, even in a slow frame.

A program must handle its events all the time. If it does not, the system can mark the program as not responding.

The hidden picture

The program draws each frame in many small steps. A drawing that goes directly to the screen shows half-finished pictures, and the screen flickers.

So the program draws in a hidden picture, the back buffer. After the picture is complete, one call shows all of it at once. SDL names this step present.

back buffer (hidden) screen present your code draws here people see this
You draw in the back buffer, and present puts the finished picture on the screen.

Vsync makes the present step wait for the screen to be ready. This stops the program from drawing frames that nobody can see, and it saves power.

Painting in order

Each drawing call paints over the pixels that are already there. The order of your drawing calls is the order of the layers. So you draw the background first, then the objects, and the top layer last.

The graphics card

The graphics card is a chip that draws very fast. The renderer is the SDL object that sends your drawing commands to it.

An image starts as a file, then goes into main memory as a surface. After that, SDL copies it to the graphics card as a texture. The texture is what you draw in each frame, and it is fast. Text works in the same way: a library turns your words into an image, and you draw that image.

Time

Some computers make more frames each second than others. If an object moves a fixed distance in each frame, it moves faster on a faster computer.

The solution is to give speed in pixels per second. In each frame, the program measures the time since the last frame, and it multiplies the speed by that time. This time is the delta time.

Where to learn each idea