LearnOpenGL

Breakout.html (4327B)

---

     <h1 id="content-title">Breakout</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Breakout</h1>
 <p>
   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.
 </p>
 
 <p>
   Because we rather keep things simple, we're going to base our 2D game on an already existing 2D arcade game. Introducing <def>Breakout</def>, 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. 
 </p>
 
 <p>
   Below we can see how Breakout originally looked on the Atari 2600:
 </p>
 
 <img src="/img/in-practice/breakout/breakout2600.png" class="medium" alt="Image of Atari 2600's Breakout"/>
 
 <p>
   The game has the following mechanics:
 </p>
 
 <ul>
   <li>A small paddle is controlled by the player and can only move horizontally within the bounds of the screen.</li>
   <li>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.</li>
   <li>If the ball reaches the bottom edge of the screen, the player is either game over or loses a life.</li>
   <li>As soon as a brick touches the ball, the brick is destroyed.</li>
   <li>The player wins as soon as all bricks are destroyed.</li>
   <li>The direction of the ball can be manipulated by how far the ball bounces from the paddle's center.</li>
 </ul>
 
 <p>
  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 <em>break out</em>.
 </p>
 
 <h1>OpenGL Breakout</h1>
 <p>
   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.
 </p>
 
 <p>
   Other than the classic mechanics, our version of Breakout will feature:
 </p>
 
 <ul>
   <li>Amazing graphics!</li>
   <li>Particles</li>
   <li>Text rendering</li>
   <li>Power-ups</li>
   <li>Postprocessing effects</li>  
   <li>Multiple (customizable) levels</li>
 </ul>
 
 <p>
   To get you excited you can see what the game will look like after you've finished these chapters:
 </p>
 
 <img src="/img/in-practice/breakout/cover.png"  alt="OpenGL version of Breakout"/>
 
 <p>
   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 <a href="https://learnopengl.com/Getting-started/OpenGL" target="_blank">Getting started</a> chapters before working your way through these series.
 </p>
 
 <p>
   Also, several chapters will require concepts from other chapters (<def>Framebuffers</def> for example from the <a href="https://learnopengl.com/Advanced-OpenGL/Framebuffers" target="_blank">Advanced OpenGL</a> section) so where necessary, the required chapters are listed.
 </p>
 
 <p>
   If you believe you're ready to get your hands dirty then move on to the <a href="https://learnopengl.com/In-Practice/2D-Game/Setting-up" target="_blank">next</a> chapter.
 </p>       
 
     </div>
     
     <div id="hover">
         HI
     </div>
    <!-- 728x90/320x50 sticky footer -->
 <div id="waldo-tag-6196"></div>
 
    <div id="disqus_thread"></div>
 
     
 
 
 </div> <!-- container div -->
 
 
 </div> <!-- super container div -->
 </body>
 </html>