Getting started with SDL

SDL, or Simple Directmedia Layer, is a cross-platform C library for handling graphics, audio, and user input and is frequently used for game development. This series of tutorials will familiarize you with many of the functions the library has to offer and will prepare you to build your own games or applications.

These tutorials assume you already know how to code with C++ and that you understand how classes work. If you are not familiar with C++, then the first step is to read the C++ Tutorial first.

After coding basic text-based programs, the natural next step is to create something with a Graphical User Interface (GUI). Few modern programs are run through a terminal interface like the command prompt, so learning how to use some sort of GUI library or framework is essential, and that's where SDL comes in.

SDL simplifies much of the standard processes needed to build software with graphics. Without it, you would need to write dozens of lines of code just to get a window open, and then it would only work on a single operating system. Using SDL reduces the code you have to write to a single function call, and it will be work on Windows, MacOS, Linux, Android, and iOS.

But before we can start writing code, we'll first have to set things up. The next sections cover how to do this depending on your operating system.

Windows Visual Studio

Go to the SDL download page. Under Development Libraries, select the Visual C++ zip file for Windows. Open the archive and extract the files. The location doesn't really matter, but it should be somewhere easy to find and memorable. My own files are directly in C:/ in a folder called VisualStudioLibraries. This will work just as well on a different drive, on the desktop, or anywhere else.

Once extracted, start Visual Studio and create a new, empty C++ project. Create a new .cpp file (ctrl+shift+a) and copy/paste the code from SDL Basics into the empty file.

If your default build setting is Debug x86, change it to Debug x64, since we'll be compiling for 64 bit systems. If you try to compile and run this code, you should see this error:

Cannot open include file: 'SDL.h': No such file or directory

To solve this, we need to add the library folder to the list of included directories.

  1. From the top menu, go to Project -> Properties
  2. At the top, change Configuration to All Configurations
  3. Go to Configuration Properties -> VC++ Directories -> Include Directories
  4. Click the drop down arrow, and select <Edit...>
  5. In the top box, add the include directory location of the SDL folder you extracted.
    It should look similar to this: C:\VisualStudioLibraries\SDL2-2.0.12\include

Next we have to update the library directory. From the same area in VC++ Directories:

  1. Select Library Directories
  2. In the top box, add the library directory. It should look similar to this:

Next we need to configure the Linker input.

  1. Go to Configuration Properties -> Linker -> Input -> Additional Dependencies
  2. Click the drop down arrow, and select <Edit...>
  3. In the top box, type in SDL2.lib; SDL2main.lib;
You'll need to come back to reference this process a few times throughout the tutorials for several other libraries. It's best to wait to set those up so you can practice the process later. You may also want to run through this setup each time you make a new project until its easy to do and you understand the process.

There's one last part to this setup for Windows that involves editing the system environment variables. Assuming you're on Windows 10, you can type Environment Variables into the search bar and it should come up. Click on 'Edit the system environment variables' and a window will come up.

In the bottom right, click Environment Variables. Under System Variables, find the Path variable. Highlight it, and click the Edit button. Click the New button at the top, and then Browse. Navigate to where you put the SDL folder, find lib under that, and finally x64 under that.

Finally, with that done, restart Visual Studio and compile the code. A blank window should pop up titled "SDL2 Tutorial". If that works, continue to SDL Basics to start learning how this code functions.

Linux Terminal

The setup for Linux is rather simple with most of the work being done for you by a package manager. This does require root access, so preface each command with "su" or "sudo" or be logged in as root.

First check what packaging tool your distro is using. The most common is probably apt, which is used by Ubuntu and Debian. There's also yum which is standard with Fedora and CentOS. From the command line, enter the following depending on which package manager you have:

Advanced Packaging Tool (apt)
  apt-get install libsdl2-dev

Yellow dog Updater, Modified (yum)
  yum install SDL2-devel

If you don't have either of those, or a different package manager, you can install SDL manually. First, go to the SDL download page. Under Source Code, select the file with the .tar.gz extension. Extract the files and open the terminal in the file location. Configure the installation, compile the source code, and install it using these commands in this order:

make all
make install

Once you've installed SDL, either with a package manager or manually, copy the code from SDL Basics and save it as main.cpp. The line #include <SDL.h> will need to be changed to #include <SDL2/SDL.h> to work properly.

Open the terminal where you saved the code, and compile it using this line:

g++ main.cpp -lSDL2 -o SDL_Tutorial

Here's what each part of that means

// Name of the compiler

// File(s) to be compiled

// Linker flag indicating SDL2 needs to be linked

// Output flag, indicates the next word is the output file name

// Output file name

For now, save that line in a file and name it makefile with no extension. Then in the terminal, you can simply type Make and it will compile the file. Then run ./SDL_Tutorial from the terminal to run the program.

I would recommend spending some time learning how makefiles work if you're going to be coding on a Linux platform using the terminal. Especially as your projects grow to include dozens to hundreds of files, makefiles become essential. But for the purposes of these tutorials, this line is all you'll actually need since everything can easily be managed in a single file.

Once you've successfully set everything up, continue to SDL Basics to learn how this code functions.