I just finished my second public game project on GitHub! To be honest, it’s actually the same Pong game that I previously implemented with HTML5 JavaScript (see the post HTML5-Pong) but this time I decided to try implement it in another language. It was time to make a journey in the C++ world together with the SDL2 and SDL2_ttf libraries!

The implementation part was quite easy, but some parts of the game did have some what-why-and-omg parts. However, I must still admit that I did some dirty copying from my previous version of the game and therefore quite many parts of the game are written in the so called “clean” and sophisticated C++. Let’s see if I can manage to cover the highlights from this project in this post. Let the adventure begin!

At the beginning…

My previous Pong implementation contained all game logic in a single JavaScript file. This was something that I wanted to do differently in this time. I decided to split the source files in a typical C++ class-per-file way, where each object class would be placed in a separate file.

Graphics were easy to implement in the HTML5 version of the game by using the Canvas 2D API. However, this API is not available in C++ and therefore I needed to pick at least some library for creating the application window and for drawing the graphics. Here I decided to dive into the world of SDL2 and SDL2_ttf. SDL2 is a commonly used framework for building media applications (like games) and SDL2_ttf is an TrueType font rendering extension library for SDL2.

When I started this project, I also wanted to try using an automatic system to construct the building environment. I decided to refresh my memory about how to use the CMake utility, which is a build construction system that I previously used couple years ago.

Build process

Configuring the build process was quite time consuming even though the actual CMake modules were not that hard to implement. It was interesting to note that I’ve almost forgotten everything that I have previously learned about CMake. CMake uses a… let’s say… quite interesting syntax to configure the build process. Luckily it is a quite widely used tool, so it was a somewhat easy to find good examples and documentation about how to use it.

I managed to write the main CMakeLists in the project root. It uses two hand written custom modules from the cmake folder to find SDL2 and SDL2_ttf libraries and headers. These custom modules are highly fragile as they currently support only finding the libraries via environment variable definitions while also requiring the CMake to be executed in a Windows environment.

Game structure

Porting a game from HTML5 JavaScript into C++ seemed to be quite easy. However, the C++ version requires a much more configuration and some additional libraries to fulfill the functionality that is immediately available in the HTML5 environment. In our case we were in a luck as the SDL2 contains quite similar operations that are available in the HTML5 environment.

In the JavaScript version we used the requestAnimationFrame function to execute and limit the frequency of the main loop. This function is not available in C++ and therefore we needed to create or find something similar. For this purpose, SDL2 offers a SDL_RENDERER_PRESENTVSYNC flag to be given for the SDL2 renderer instance at the construction time. This flag makes the SDL_RenderPresent to wait until the loop is synchronized with the screen refresh rate and therefore also limits the main loop iteration. I decided to select this way to limit the main loop, even though the game implementation does not collect and use main loop iteration delta times to update the game logic. The implemented approach will make some systems to run the game faster than others.


Entities are almost identical to entities used in the JavaScript version of the game. Each game entity and game scene is now encapsulated as a class, where each class can present an own logical piece of functionality for the particular game object.

All three scenes (welcome, court and end-game) inherit the pure abstract Scene class, which requires scenes to implement all scene/state specific functions. This made scene changing easier as each scene must satisfy and provide implementations that are required from the scene definition.

I was a bit lazy with the implementation of the game objects as they do not have any kind of inheritance hierarchy. This approach led to write some amounts of the same code again and again, which also makes the code a bit more complex. However, this approach is similar to the original JavaScript Pong that acts as the basis for this project, which was the base ideas behind this project.


Again, I’m quite satisfied with the results. It was nice to see that SDL2 together with the SDL2_ttf library can provide similar development environment than what HTML5 provided with the Canvas 2D API at least for this kind game. It also seems that porting an existing game from high level language (like JavaScript) to low level language (like C++) seems to require couple tricks and a bit of configuration to make things come alive. It was interesting to see the new aspects how the technology and language selection can affect how the same game is implemented.

Thanks for reading!

Gameplay video in YouTube:

Game source code in Github:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s