SDL2 with OpenGL

Since the day Valve purchased SDL and revamped most of its source code, SDL 2 has been seen by many as the game changer that will reshape the linux (and Mac OSX) gaming scene by allowing developers to easily port their games to these platforms.

Although there are some other APIs that are equally portable, but none of them are supported by big company with strong financial muscle and development experience like Valve. The major advantage of SDL being used by a company that has had countless experience developing AAA titles is that they can help avoiding ideas that sound good only on paper but not working quite well when applied to real world problems. This is why I think SDL 2 is a library worth studying for long term benefit.

In this tutorial, I’m going to directly use the OpenGL for rendering, instead of using SDL’s own renderer, because OpenGL works better in term of performance and flexibility. You can develop both 2D/3D games with OpenGL but only 2D if you use SDL renderer.

So let’s get it started by opening your favorite C/C++ IDE, which in my case, the Code::Blocks. You have to link your project to several libraries such as OpenGL, GLEW and SDL2. GLEW is basically a library that makes your life easier for connecting to OpenGL extensions. Different IDE has different approach in linking to external libraries, so I will not be explaining it here. Check out other tutorials that are related to your choice of IDE.

Let’s start writing some code. First of all, you need to link all the relevant header files to your main source file, using the #include macro. Notice we used #define GLEW_STATIC before #include in-order to build GLEW statically into your project. Without the macro, you need to provide the dynamic library file for the compiler.

// OpenGL headers
#define GLEW_STATIC
#include <GL/glew.h>
#include <GL/glu.h>
#include <GL/gl.h>

// SDL headers
#include <SDL_main.h>
#include <SDL.h>
#include <SDL_opengl.h>

Next, define all the necessary variables, in this case, a boolean which determines whether the game is still running or not, as well as other pointers/references that are linked to the SDL window, OpenGL context, and SDL event.

bool quit;

SDL_Window* window;
SDL_GLContext glContext;
SDL_Event sdlEvent;

After that, let’s move on to the main() function. Here we define the quit variable as false, so that later on we can use it for the game loop and keep the game running without closing. We also set the OpenGL’s context to 3.1 core profile. Do notice that in version 3.1 above, the fixed-function pipeline is completely deprecated, so you need to be careful when picking the right context for your OpenGL renderer.

int main(int argc, char *argv[])
{
    quit = false;

    //Use OpenGL 3.1 core
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 3);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 1);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_CORE);
}

Next, we call SDL_Init(SDL_INIT_VIDEO) to initiate SDL. If the result returned by the function is -1, it means something is going wrong and you should stop immediately. Otherwise, you are good to go and start creating the rendering window using SDL_CreateWindow(). There are several inputs for this functions, such as:

1. Title
2. Horizontal position
3. Vertical position
4. Width
5. Height
6. Flags

We need to specifically set the type of window as OpenGL rendering window using the SDL_WINDOW_OPENGL flag. Otherwise, SDL will not be able to use OpenGL to do the rendering.

After we have created a window, use it to create the OpenGL context by calling SDL_GL_CreateContext(window). Call glewInit() to automatically load all the relevant extensions based on the OpenGL context you have just set.

// Initialize video subsystem
if(SDL_Init(SDL_INIT_VIDEO) < 0)
{
    // Display error message
    printf("SDL could not initialize! SDL_Error: %s\n", SDL_GetError());
    return false;
}
else
{
    // Create window
    window = SDL_CreateWindow("Hello World!", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 800, 600, SDL_WINDOW_OPENGL | SDL_WINDOW_SHOWN );
    if( window == NULL )
    {
        // Display error message
        printf( "Window could not be created! SDL_Error: %s\n", SDL_GetError() );
        return false;
    }
    else
    {
        // Create OpenGL context
        glContext = SDL_GL_CreateContext(window);

        if( glContext == NULL )
        {
            // Display error message
            printf( "OpenGL context could not be created! SDL Error: %s\n", SDL_GetError() );
            return false;
        }
        else
        {
            // Initialize glew
            glewInit();
        }
    }
}

You have now created an empty window that doesn’t render anything and will be closed once it’s being launched. This happen because we have not yet created the game loop for it. A game loop is basically a while loop that keeps on running repeatedly until the user closes the application. In gaming term, each loop is called a “frame” or a “tick”. Graphics will be rendered and displayed on the screen for several times a second, hence the term for measuring the rate of rendering is called “frame-per-second”.

To create the game loop, we will be using the quit variable that we have defined previously. If the variable quit is true, the window will never be closed and keep the rendering going. Within the game loop, we detect the keyboard event and check if player has pressed the Escape button. If the Escape button is pressed, set quit as true and the application will then be closed.

We also set the background color as cornflower blue, and then ask OpenGL to start rendering the scene by swapping the render buffer. We don’t have anything to be rendered for now so you will just see a blue color background.

// Game loop
while (!quit)
{
    while(SDL_PollEvent(&sdlEvent) != 0)
    {
        // Esc button is pressed
        if(sdlEvent.type == SDL_QUIT)
        {
            quit = true;
        }
    }

    // Set background color as cornflower blue
    glClearColor(0.39f, 0.58f, 0.93f, 1.f);
    // Clear color buffer
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // Update window with OpenGL rendering
    SDL_GL_SwapWindow(window);
}

Lastly, we need to clean everything up if the variable quit is set to true and breaks the game loop. It’s important to quit the application neatly! Destroy the rendering window properly by calling SDL_DestroyWindow(window), then clear the window pointer from the memory by setting the pointer to NULL, and lastly call SDL_Quit() to make sure SDL quits properly.

//Destroy window
SDL_DestroyWindow(window);
window = NULL;

//Quit SDL subsystems
SDL_Quit();

return 0;

For those who are lazy, this is the full source code:

// OpenGL headers
#define GLEW_STATIC
#include <GL/glew.h>
#include <GL/glu.h>
#include <GL/gl.h>

// SDL headers
#include <SDL_main.h>
#include <SDL.h>
#include <SDL_opengl.h>

bool quit;

SDL_Window* window;
SDL_GLContext glContext;
SDL_Event sdlEvent;

int main(int argc, char *argv[])
{
    quit = false;

    //Use OpenGL 3.1 core
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 3);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 1);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_CORE);

    // Initialize video subsystem
    if(SDL_Init(SDL_INIT_VIDEO) < 0)
    {
        // Display error message
        printf("SDL could not initialize! SDL_Error: %s\n", SDL_GetError());
        return false;
    }
    else
    {
        // Create window
        window = SDL_CreateWindow("Hello World!", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 800, 600, SDL_WINDOW_OPENGL | SDL_WINDOW_SHOWN );
        if( window == NULL )
        {
            // Display error message
            printf( "Window could not be created! SDL_Error: %s\n", SDL_GetError() );
            return false;
        }
        else
        {
            // Create OpenGL context
            glContext = SDL_GL_CreateContext(window);

            if( glContext == NULL )
            {
                // Display error message
                printf( "OpenGL context could not be created! SDL Error: %s\n", SDL_GetError() );
                return false;
            }
            else
            {
                // Initialize glew
                glewInit();
            }
        }
    }

    // Game loop
    while (!quit)
    {
        while(SDL_PollEvent(&sdlEvent) != 0)
        {
            // Esc button is pressed
            if(sdlEvent.type == SDL_QUIT)
            {
                quit = true;
            }
        }

        // Set background color as cornflower blue
        glClearColor(0.39f, 0.58f, 0.93f, 1.f);
        // Clear color buffer
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        // Update window with OpenGL rendering
        SDL_GL_SwapWindow(window);
    }

    //Destroy window
    SDL_DestroyWindow(window);
    window = NULL;

    //Quit SDL subsystems
    SDL_Quit();

    return 0;
}

Setting Up Irrlicht Project

In this tutorial, I will guide you step-by-step on how to set up Irrlicht Engine on Code::Blocks so that you can start writing your first 3D game in C/C++ language. Before we start, please make sure that you have installed or downloaded the following programs:

Irrlicht Engine
Code::Blocks with MinGW

Once you have installed Code::Blocks, launch the program and create a new project by calling File->New->Project, like so:

We are not going to use a template for now, so we’ll create an empty project instead:

Now that you have created an empty project, you need to create your first empty source file by going to File->New->Empty file

A window will pop out and ask you whether you want to add the file to your project. Click “Yes” and proceed to save it to your project directory. Make sure that the file type is “C/C++ files”:

Another window will pop out and ask you which target should the file belongs to. In this example, we will tick both options. Occasionally you would want a source file to be included in just a single target but that happens quite rarely.

After that, your file will appear under the “Sources” folder. Double click your source file you just saved (i.e. main.cpp) and it will get launched at the right hand panel.

Now that you have successfully created a working project in Code::Blocks, you need to link your compiler with the Irrlicht Engine so that you can access to its API. In order to do that, go to Project->Build options:

A window will then pop out. Click your project name instead of just “Debug” or “Release” because we are going to adjust the settings that affect both targets. Please do not simply change the project settings unless you know what you are doing. You might not be able to compile your app if you mess the settings up.

In this example, we will change 2 things: the “Linker settings” and “Search directories”. First, go to the “Linker settings” tab and click the “Add” button. A window will pop out and ask you which library file should be included to your project. Normally the library file is located at [irrlicht dir]\lib\Win32-gcc\libIrrlicht.a if you’re running Windows. [irrlicht dir] is the directory where you installed/extracted the Irrlicht Engine.

Now that you have added the library file to your compiler, you will need to link some of the Irrlicht directories to the compiler as well so that it can access to its header files. Click the “Search directories” tab and select the “Add” button under “Compiler” child tab. Add the particular folder which contains all the Irrlicht header files which usually located at [irrlicht dir]\include:

Press the “OK” button and you’re done!