LearnOpenGL

Ball.html (7386B)

---

     <h1 id="content-title">Ball</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Collisions/Ball</h1>
 <p>
   At this point we have a level full of bricks and a movable player paddle. The only thing missing from the classic Breakout recipe is the ball. The objective is to let the ball collide with all the bricks until each of the destroyable bricks are destroyed, but this all within the condition that the ball is not allowed to reach the bottom edge of the screen.
 </p>
 
 <p>
   In addition to the general game object components, a ball has a radius, and an extra boolean value indicating whether the ball is <def>stuck</def> on the player paddle or it's allowed free movement. When the game starts, the ball is initially stuck on the player paddle until the player starts the game by pressing some arbitrary key.
 </p>
 
 <p>
   Because the ball is effectively a <fun>GameObject</fun> with a few extra properties it makes sense to create a <fun>BallObject</fun> class as a subclass of <fun>GameObject</fun>:
 </p>
 
 <pre><code>
 class BallObject : public GameObject
 {
     public:
         // ball state	
         float     Radius;
         bool      Stuck;
   
 
         BallObject();
         BallObject(glm::vec2 pos, float radius, glm::vec2 velocity, Texture2D sprite);
 
         glm::vec2 Move(float dt, unsigned int window_width);
         void      Reset(glm::vec2 position, glm::vec2 velocity);
 }; 
 </code></pre>
 
 <p>
   The constructor of <fun>BallObject</fun> initializes its own values, but also initializes the underlying <fun>GameObject</fun>. The <fun>BallObject</fun> class hosts a <fun>Move</fun> function that moves the ball based on its velocity. It also checks if it reaches any of the scene's edges and if so, reverses the ball's velocity:
 </p>
 
 <pre><code>
 glm::vec2 BallObject::Move(float dt, unsigned int window_width)
 {
     // if not stuck to player board
     if (!this-&gt;Stuck)
     { 
         // move the ball
         this-&gt;Position += this-&gt;Velocity * dt;
         // check if outside window bounds; if so, reverse velocity and restore at correct position
         if (this-&gt;Position.x &lt;= 0.0f)
         {
             this-&gt;Velocity.x = -this-&gt;Velocity.x;
             this-&gt;Position.x = 0.0f;
         }
         else if (this-&gt;Position.x + this-&gt;Size.x &gt;= window_width)
         {
             this-&gt;Velocity.x = -this-&gt;Velocity.x;
             this-&gt;Position.x = window_width - this-&gt;Size.x;
         }
         if (this-&gt;Position.y &lt;= 0.0f)
         {
             this-&gt;Velocity.y = -this-&gt;Velocity.y;
             this-&gt;Position.y = 0.0f;
         }
       
     }
     return this-&gt;Position;
 }  
 </code></pre>
 
 <p>
   In addition to reversing the ball's velocity, we also want relocate the ball back along the edge; the ball is only able to move if it isn't stuck. 
 </p>
 
 <note>
   Because the player is game over (or loses a life) if the ball reaches the bottom edge, there is no code to let the ball bounce of the bottom edge. We do need to later implement this logic somewhere in the game code though.
 </note>
 
 <p>
   You can find the code for the ball object below:
 </p>
 
 <ul>
   <li><strong>BallObject</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/5.1.ball_object_collisions.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/5.1.ball_object_collisions.cpp" target="_blank">code</a></li>
 </ul>
 
 <p>
   First, let's add the ball to the game. Just like the player paddle, we create a <fun>BallObject</fun> and define two constants that we use to initialize the ball. As for the texture of the ball, we're going to use an image that makes perfect sense in a LearnOpenGL Breakout game: <a href="/img/textures/awesomeface.png" target="_blank">ball texture</a>.
 </p>
 
 <pre><code>
 // Initial velocity of the Ball
 const glm::vec2 INITIAL_BALL_VELOCITY(100.0f, -350.0f);
 // Radius of the ball object
 const float BALL_RADIUS = 12.5f;
   
 BallObject     *Ball; 
   
 void Game::Init()
 {
     [...]
     glm::vec2 ballPos = playerPos + glm::vec2(PLAYER_SIZE.x / 2.0f - BALL_RADIUS, 
                                               -BALL_RADIUS * 2.0f);
     Ball = new BallObject(ballPos, BALL_RADIUS, INITIAL_BALL_VELOCITY,
         ResourceManager::GetTexture("face"));
 }
 </code></pre>
 
 <p>
   Then we have to update the position of the ball each frame by calling its <fun>Move</fun> function within the game code's <fun>Update</fun> function:
 </p>
 
 <pre><code>
 void Game::Update(float dt)
 {
     Ball->Move(dt, this-&gt;Width);
 }  
 </code></pre>
 
 <p>
   Furthermore, because the ball is initially stuck to the paddle, we have to give the player the ability to remove it from its stuck position. We select the space key for freeing the ball from the paddle. This means we have to change the <fun>processInput</fun> function a little:
 </p> 
 
 <pre><code>
 void Game::ProcessInput(float dt)
 {
     if (this-&gt;State == GAME_ACTIVE)
     {
         float velocity = PLAYER_VELOCITY * dt;
         // move playerboard
         if (this-&gt;Keys[GLFW_KEY_A])
         {
             if (Player-&gt;Position.x &gt;= 0.0f)
             {
                 Player-&gt;Position.x -= velocity;
                 if (Ball-&gt;Stuck)
                     Ball-&gt;Position.x -= velocity;
             }
         }
         if (this-&gt;Keys[GLFW_KEY_D])
         {
             if (Player-&gt;Position.x &lt;= this-&gt;Width - Player-&gt;Size.x)
             {
                 Player-&gt;Position.x += velocity;
                 if (Ball-&gt;Stuck)
                     Ball-&gt;Position.x += velocity;
             }
         }
         if (this-&gt;Keys[GLFW_KEY_SPACE])
             Ball-&gt;Stuck = false;
     }
 }
 </code></pre>
 
 <p>
   Here, if the user presses the space bar, the ball's <var>Stuck</var> variable is set to <code>false</code>. Note that we also move the position of the ball alongside the paddle's position whenever the ball is stuck.
 </p>
 
 <p>
   Last, we need to render the ball which by now should be fairly obvious:
 </p>
 
 <pre><code>
 void Game::Render()
 {
     if (this->State == GAME_ACTIVE)
     {
         [...]
         Ball->Draw(*Renderer);
     }
 }  
 </code></pre>
 
 <p>
   The result is a ball that follows the paddle and roams freely whenever we press the spacebar. The ball also properly bounces of the left, right, and top edge, but it doesn't yet seem to collide with any of the bricks as we can see:
 </p>
 
 <div class="video paused" onclick="ClickVideo(this)">
   <video width="600" height="450" loop>
     <source src="/video/in-practice/breakout/no_collisions.mp4" type="video/mp4" />
     <img src="/img/in-practice/breakout/no_collisions.png" class="clean"/>
   </video>
 </div>
 
 <p>
   What we want is to create one or several function(s) that check if the ball object is colliding with any of the bricks in the level and if so, destroy the brick. These so called <def>collision detection</def> functions is what we'll focus on in the <a href="https://learnopengl.com/In-Practice/2D-Game/Collisions/Collision-detection" 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>