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

1. Introduction
2. Getting started
   1. OpenGL
   2. Creating a window
   3. Hello Window
   4. Hello Triangle
   5. Shaders
   6. Textures
   7. Transformations
   8. Coordinate Systems
   9. Camera
   10. Review
3. Lighting
   1. Colors
   2. Basic Lighting
   3. Materials
   4. Lighting maps
   5. Light casters
   6. Multiple lights
   7. Review
4. Model Loading
   1. Assimp
   2. Mesh
   3. Model
5. Advanced OpenGL
   1. Depth testing
   2. Stencil testing
   3. Blending
   4. Face culling
   5. Framebuffers
   6. Cubemaps
   7. Advanced Data
   8. Advanced GLSL
   9. Geometry Shader
   10. Instancing
   11. Anti Aliasing
6. Advanced Lighting
   1. Advanced Lighting
   2. Gamma Correction
   3. Shadows
      1. Shadow Mapping
      2. Point Shadows
   4. Normal Mapping
   5. Parallax Mapping
   6. HDR
   7. Bloom
   8. Deferred Shading
   9. SSAO
7. PBR
   1. Theory
   2. Lighting
   3. IBL
      1. Diffuse irradiance
      2. Specular IBL
8. In Practice
   1. Debugging
   2. Text Rendering
   3. 2D Game
      1. Breakout
      2. Setting up
      3. Rendering Sprites
      4. Levels
      5. Collisions
         1. Ball
         2. Collision detection
         3. Collision resolution
      6. Particles
      7. Postprocessing
      8. Powerups
      9. Audio
      10. Render text
      11. Final thoughts
9. Guest Articles
   1. How to publish
   2. 2020
      1. OIT
         1. Introduction
         2. Weighted Blended
      2. Skeletal Animation
   3. 2021
      1. CSM
      2. Scene
         1. Scene Graph
         2. Frustum Culling
      3. Tessellation
         1. Height map
         2. Tessellation
      4. DSA
   4. 2022
      1. Compute Shaders
         1. Introduction
      2. Phys. Based Bloom
      3. Area Lights
10. Code repository
11. Translations
12. Privacy
13. About

Breakout

In-Practice/2D-Game/Breakout

Over these chapters we learned a fair share about OpenGL's inner workings and how we can use them to create fancy graphics. However, aside from a lot of tech demos, we haven't really created a practical application with OpenGL. This is the introduction of a larger series about creating a relatively simple 2D game using OpenGL. The next chapters 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 destroys all bricks, he completes the game.

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

The game has the following mechanics:

• A small paddle is controlled by the player and can only move horizontally within the bounds of the screen.
• 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, the brick 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 may 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 render its graphics on the GPU which gives us the ability to enhance the classical Breakout game with some nice extra features.

Other than the classic mechanics, our version of Breakout will feature:

• Amazing graphics!
• Particles
• Text rendering
• Power-ups
• Postprocessing effects
• Multiple (customizable) levels

To get you excited you can see what the game will look like after you've finished these chapters:

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

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

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

HI