Multiplatform Arcade Game in 6 steps with SDL and OpenGL

Biicode already has the first adaptations of libraries like SDL, glui or freeglut, which standardize the access to the windows system. With a little bit of design, and aiming to simplify the life of the programmer, I designed some classes that can be very useful for simple 2D games. The following images are screenshots of two examples included in examples/game_utils. The second one corresponds to the shooting game application we’ll develop in this mini-tutorial:


sdl and opengl with biicode

Most of the “Arcade” games contain the same types of elements: scroll-able backgrounds, sprites (static or animated), text info  and sound. With those elements, each game determines the specific logic, with its stages, levels, and interactions. It is also necessary to interact with the game via the keyboard, mouse, joystick etc.

In miguel/game_utils the class OpenglGame is provided to easily design a 2D game simplifying the basic use of SDL and OpenGL libs.

Check the post’s example game immediately by executing:

Let’s take a step by step look into our game:

1. Create a project and a block to hold your code.

Create the file game.cpp into blocks/examples/simple directory and put into it the code below to create a simple window:

Let’s retrieve the dependencies to the OpenglGame:

Biicode uses by default with MinGW, so if you want to build with Visual Studio execute:

Build the example:

If everything worked out properly, a binary file was created into your bin folder: “examples_simple_game” .

Execute and check what happens: a simple window should appear.

If you compiled using Visual Studio, in addition to it, the system console also popups. To remove this unwanted additional window, we have to set the “SUBSYSTEM”  property in Visual Studio for the exe target. We do this by adding the following lines to CMakeLists.txt after the ADD_BIICODE_TARGETS() line:

2. Using the keyboard

Re-act according to keystrokes is quite simple, you only have to overwrite the onKeyboardDown virtual method. The following lines allow to end the application when the ESC key is pressed.

3. Drawing a background  

Managing images and textures has always been a relatively tedious and repetitive  task in OpenGL.

OpenglGame includes a png file reader and the Slide class to create backgrounds easily. The loading of textures, thus the creation of backgrounds and Sprites, must take place within a drawing context. In OpenglGame we do this redefining the setup() method.

Although it is possible to create sophisticated backgrounds, we will make use of the simplicity provided by the OpenglGame class for a basic background:

Download our data folder utils .zip here and place the folder into blocks/username/simple, we’re using three different images and a font in this tutorial. For example this is our background:

Game background using SDL and OpenGL

Although everything compiles correctly, to run the program, it is necessary to maintain the relative path between the executable and the data. Add the following lines to your CMakeLists.txt right after INIT_BIICODE_BLOCK(). With this lines, the files in the data directory will be copied to the binary dir and to the IDE runtime directory:

Also update your dependencies.bii file, located into game/blocks/username/post_game, this tells biicode to also retrieve the local .png and .ttf files on our data folder:

If you compile again, you’d see a window that has our image as background. In this case it has not established any special behavior on the background dimensions, so a default scale of 1:1 in pixels is applied, and the image will stick to the bottom left edges of the window.  OpenglGame class defines its own coordinate system, placing the origin  0,0 at the lower left corner of the window. You have to be careful because events like mouse clicks and images are normalized to this unique coordinate system.

4. Loading, drawing and moving our first sprite:

Let´s include a simple sprite loading a png image.  We add the crosshair variable to MiGame class to allows us to access the sprite attributes later:

In the setup we include the creation of the Sprite, and we add it to the list of Sprites managed by MiGame.

Once created the crosshair, we’ve got to follow the mouse movement over the window. Just define the method onMouseMotion()  and make the position of the sprite to match the mouse position:

If we compile and run the example, we’ll  see that it works, but is little aesthetic that we continue seeing the mouse cursor when moving the crosshair. Therefore, in the setup, we will tell SDL to hide the mouse cursor:

4.1. Adding an animated sprite:

Although there are many ways to define a sequence of images that give the impression of movement in a sprite, one of the most common is to have a matrix of drawings with the consecutive frames of the animation.

To work comfortably with it, we’ve developed the SpriteSequence class as an specialization of the class Sprite. To use it you have to include the header file:

In this case we will add a butterfly, which I have obtained from google searching “butterfly sprite sequence” :

butterfly sprite

The animation is defined by a 1×7 matrix, something that we have to specify when creating the SpriteSequence:

5. Moving the sprite:

As in most games, there is a cyclic method responsible of the game logic that we usually redefine: gameLoop (). Since this method is implented in the base class to manage the sprite animations, when redefined, we’ll include a call to the base class function. We add a very primitive intelligence to the butterfly based on Dice, a game_utils class which allows us to obtain random numbers in a simple way.

6. Printing Scores:

Finally, we will set a score, based on the number of shots and the number of hits. So we declare two integer variables that record these values​​, write the logic of shooting and we printing the result as overlay info of the game. Making use of the supplied font loading class on the method drawGame().


So your game.cpp file should look like this one:

And this is the CMakeLists.txt:

You’re ready to go,  wanna try other examples available?

Space game developed with SDL and OpenGL

Enjoy SDL and Open GL in biicode!

Open GL working fine in biicode


SDL lib

Hope you enjoy this new feature and, as always, we look forward to read what you think. Just click on the sidebar button to try biicode, check our docs, forum and/or Stackoverflow tag for questions and answers.

Related Posts
  • Dimitri

    I have been looking for a reason to play with synfig studio, but I was afraid that I would not have the time to do anything with any animation I could come up with there. miguel/game_utils solves this problem. I am already using your SDL2 block, so this makes me a very happy customer! :)

    • Miguel Hernando

      I am glad that my adaptation of SDL have been useful. I think we should develop many simple classes to help programming common tasks that are continuously being used on games. Now I’m working on sound utilities. Any suggestions or inputs are very welcome. Thanks

      • Dimitri

        That’s right! I was thinking of taking GLEW out of my block and making an independent dependency out of it. I’ll give it a go…