If you're running AdBlock, please consider whitelisting this site if you'd like to support LearnOpenGL; and no worries, I won't be mad if you don't :)



Over these tutorials we learned a fair share about OpenGL's inner workings and how we can use them to create fancy graphics. However, aside from a few tech demos, we haven't really created a practical application with OpenGL. This is the introduction of a larger tutorial series about creating a relatively simple 2D game using OpenGL. The tutorial series will demonstrate how we can use OpenGL in a larger, more complicated, setting. Note that the series does not necessarily introduce new OpenGL concepts but more or less show how we can apply these concepts to a larger whole.

Because we rather keep things simple we 're going to base our 2D game on an already existing 2D arcade game. Introducing Breakout, a classic 2D game released in 1976 on the Atari 2600 console. Breakout requires the player, who controls a small horizontal paddle, to destroy all the bricks by bouncing a small ball against each brick without allowing the ball to reach the bottom edge. Once the player destroyed all bricks, he completes the game.

Below we can see how Breakout originally looked on the Atari 2600:

Image of Atari 2600's Breakout

The game has the following mechanics:

  • A small paddle is controlled by the player and can only move within the bounds of the screen; either left or right.
  • The ball travels across the screen and each collision results in the ball changing its direction based on where it hit; this applies to the screen bounds, the bricks and the paddle.
  • If the ball reaches the bottom edge of the screen, the player is either game over or loses a life.
  • As soon as a brick touches the ball, it is destroyed.
  • The player wins as soon as all bricks are destroyed.
  • The direction of the ball can be manipulated by how far the ball bounces from the paddle's center.

Because from time to time the ball might find a small gap reaching the area above the brick wall, it will continue to bounce up and forth between the top edge of the level and the top edge of the brick layer. The ball keeps this up, until it eventually finds a gap again. This is logically where the game obtained its name from, since the ball has to break out.

OpenGL Breakout

We're going to take this classic arcade game as the basis of a 2D game that we'll completely implement with OpenGL. This version of Breakout will run on the graphics card which gives us the ability to enhance the classical Breakout game with some nice extra features.

Aside from the classical mechanics, our version of Breakout will feature:

  • Best graphics you've ever seen
  • Particles
  • Advanced text rendering
  • PowerUps
  • Postprocessing effects
  • Multiple (customizable) levels

To get you excited you can see what the game will look like below after you've finished the tutorial series:

OpenGL version of Breakout

These tutorials will combine a large number of concepts as discussed in previous tutorials and demonstrate how they can work together as a whole. Therefore, it is important to have at least finished the Getting started section before working your way through these tutorials.

Also, several tutorials will require concepts from other tutorials (for example Framebuffers from the Advanced OpenGL section) so where necessary, the required tutorials are listed.

Note that LearnOpenGL has had several code improvements over the last years, but not all of them have been integrated into the 2D Breakout code. Two points are important to be aware of:
  1. Breakout uses GLEW instead of GLAD. They both do exactly the same so there's no issue at all in using GLAD for the Breakout code.
  2. Breakout uses an older version of GLM where matrices default initialize to the identity matrix. In later versions this is no longer the case and they default initialize to the null matrix which breaks all subsequent matrix operations. To fix this, initialize all GLM matrices explicitly using glm::mat4 matrix = glm::mat4(1.0f);.

If you believe you're ready to get your hands dirty then move on to the next tutorial.