Breakout: Walls and Collision

Our ball is moving, but it flies off the screen forever. To create a playable game, we need to contain it within the play area. We'll achieve this by adding four invisible walls around the edges of our scene.

This lesson will guide you through creating a Wall entity. We'll instantiate four of them - for the top, bottom, left, and right boundaries - and give them collision components.

The core of this lesson, however, is implementing the collision response in our Ball class.

We'll start with a simple bouncing algorithm that works well in most cases. Then, we'll explore a more advanced, physically accurate method using vector math concepts like the dot product and surface normals.

By the end, our ball will be correctly bouncing around inside the game window.

Adding a Wall Class

To simulate our ball bouncing off the edges of the screen, we'll add four walls to our scene. They will sit just outside of the visible area - one on the top, one on the bottom, one on the left, and one on the right.

Let's start by adding a Wall class to manage this. We'll also add a WallPosition enum to represent the four states.

Eventually, colliding with the bottom wall will mean the player lost, so we'll store which position each wall is in as a member variable so we can implement this losing logic later:

1#pragma once
2#include "Engine/ECS/Entity.h"
3
4enum class WallPosition {
5  Top, Bottom, Left, Right
6};
7
8class Wall : public Entity {
9 public:
10  Wall(WallPosition Position, BreakoutScene& Scene)
11    : Entity{Scene}, Position{Position} {}
12
13 private:
14  WallPosition Position;
15};

Back in our BreakoutScene's Load() method, let's add our four walls:

1#include "Breakout/BreakoutScene.h"
2#include "Breakout/Ball.h"
3#include "Breakout/Wall.h"
4
5void BreakoutScene::Load(int Level) {
6  Entities.clear();
7  Entities.emplace_back(
8    std::make_unique<Ball>(*this));
9
10  using enum WallPosition;
11  Entities.emplace_back(
12    std::make_unique<Wall>(Top, *this));
13  Entities.emplace_back(
14    std::make_unique<Wall>(Left, *this));
15  Entities.emplace_back(
16    std::make_unique<Wall>(Bottom, *this));
17  Entities.emplace_back(
18    std::make_unique<Wall>(Right, *this));
19}

Configuring Colliders

To collide with things, our walls will need both a TransformComponent and a CollisionComponent. Let's add them in the constructor:

1#pragma once
2#include "Engine/ECS/Entity.h"
3#include "Engine/ECS/TransformComponent.h"
4#include "Engine/ECS/CollisionComponent.h"
5
6enum class WallPosition {
7  Top, Bottom, Left, Right
8};
9
10class Wall : public Entity {
11 public:
12  Wall(WallPosition Position, BreakoutScene& Scene)
13      : Entity{Scene}, Position{Position} {
14    TransformComponent* Transform{
15      AddComponent<TransformComponent>()};
16    CollisionComponent* Collision{
17      AddComponent<CollisionComponent>()};
18  }
19
20 private:
21  WallPosition Position;
22};

The position of each wall will depend on the requested WallPosition, as well as the width and height of our Scene, which is available through the GetWidth() and GetHeight() member variables on the base Scene class.

Our walls will need some thickness to collide correctly. We'll choose 1 unit for this, meaning the sizing and positioning of our walls would look something like this:

Let's implement this in the code:

1// ...
2
3class Wall : public Entity {
4 public:
5  Wall(WallPosition Position, BreakoutScene& Scene)
6      : Entity{Scene}, Position{Position} {
7      
8    // ...
9    float Height{Scene.GetHeight()};
10    float Width{Scene.GetWidth()};
11    
12    using enum WallPosition;
13    if (Position == Top) {
14      Transform->SetPosition({0, Height + 1});
15      Collision->SetSize(Width, 1);
16    } else if (Position == Bottom) {
17      Transform->SetPosition({0, 0});
18      Collision->SetSize(Width, 1);
19    } else if (Position == Left) {
20      Transform->SetPosition({-1, Height});
21      Collision->SetSize(1, Height);
22    } else if (Position == Right) {
23      Transform->SetPosition({Width, Height});
24      Collision->SetSize(1, Height);
25    }
26  }
27  // ...
28};

Given our walls have no visual appearance, and are outside the viewport anyway, there will be no visual changes to our program yet. However, let's update our Ball to let it bounce off these walls.

Making the Ball Bounce

Given our Ball and Wall entities have collision components, our engine is already detecting these collisions over in the HandleCollisions function of our base Scene class.

That function is calling a virtual HandleCollision() function on our entities. Let's override it in our Ball class to implement the bouncing behavior:

1// ...
2
3class Ball : public Entity {
4public:
5  // ...
6  void HandleCollision(Entity& Other) override;
7  // ...
8};

We'll add a Ball.cpp to implement our bouncing reaction. This code is the same logic we walked through in the bouncing ball example in the previous chapter:

1#include "Breakout/Ball.h"
2#include "Engine/Vec2.h"
3
4void Ball::HandleCollision(Entity& Other) {
5  SDL_FRect Intersection;
6  Collision->GetCollisionRectangle(
7    *Other.GetComponent<CollisionComponent>(),
8    &Intersection
9  );
10
11  if (!(Physics && Transform)) return;
12  bool IsVertical{
13    Intersection.w > Intersection.h
14  };
15
16  Vec2 CurrentPos{Transform->GetPosition()};
17  if (IsVertical) {
18    if (Physics->GetVelocity().y < 0)
19      CurrentPos.y += Intersection.h;
20    else
21      CurrentPos.y -= Intersection.h;
22  } else {
23    if (Physics->GetVelocity().x > 0)
24      CurrentPos.x -= Intersection.w;
25    else
26      CurrentPos.x += Intersection.w;
27  }
28  Transform->SetPosition(CurrentPos);
29
30  Vec2 CurrentVel{Physics->GetVelocity()};
31  if (IsVertical) {
32    Physics->SetVelocity({
33      CurrentVel.x, -CurrentVel.y
34    });
35  } else {
36    Physics->SetVelocity({
37      -CurrentVel.x, CurrentVel.y
38    });
39  }
40}

With these changes, our ball should now be bouncing off the edges of our window:

Advanced: Collision Angles

Our previous implementation of bouncing updates the ball's velocity by inverting a component based on the collision overlap. This simple implementation usually works, but it occasionally generates unnatural reactions when our objects intersect at their corners.

We can replace this approach by considering the relative position of our colliding objects, combining two techniques we briefly introduced in our physics chapter.

Normal Angle

To calculate a realistic bounce, we need to know the orientation of the surface we collided with. This is represented by the surface normal, often just called the normal. The normal is a vector that points directly away from a surface, perpendicular to it.

For any given collision, if we know the surface normal and the incoming velocity of our ball, we can calculate the exact reflection vector. This is a much more robust approach than simply inverting the x or y velocity, as it handles collisions at any angle correctly, including corner hits.

The normal angle is generally easy to determine when our colliders are axis-aligned rectangles, which they all are in this case. The normal angle of such a shape is always directly up, down, left, or to the right:

Dot Product

Another mathematical tool we can use is the dot product. The dot product takes two vectors and returns a single number (a scalar) that tells us about the angle between them.

Specifically, the sign of the dot product tells us if the vectors are pointing in generally the same direction (positive), opposite directions (negative), or are perpendicular (zero).

In our case, we can take the dot product of the ball's velocity vector and the surface normal. If the result is negative, it confirms the ball is moving towards the thing our scene reported it collided with, and a bounce should occur. We can also use the magnitude of the dot product in the formula to calculate the reflection vector.

Improving Bouncing Logic

Our new implementation uses these concepts to calculate a proper reflection vector. First, we determine the surface normal based on the relative positions of the ball and the other object.

Then, we calculate the dot product of the velocity and the normal. The standard formula for vector reflection is then used to find the new velocity:

This gives us a bounce that is physically accurate and behaves correctly even in tricky corner-case collisions.

1#include "Breakout/Ball.h"
2#include "Engine/Vec2.h"
3
4void Ball::HandleCollision(Entity& Other) {
Push-Out Logic (Unchanged)|Show
30  
31  TransformComponent* OtherTransform{
32    Other.GetComponent<TransformComponent>()
33  };
34  Vec2 RelativePosition{
35    Transform->GetPosition() -
36    OtherTransform->GetPosition()
37  };
38
39  Vec2 Normal{
40    IsVertical ? Vec2{
41      0.0f,
42      (RelativePosition.y > 0) ? 1.0f : -1.0f
43    } : Vec2{
44      (RelativePosition.x > 0) ? 1.0f : -1.0f,
45      0.0f
46    }
47  };
48
49  Vec2 Velocity{Physics->GetVelocity()};
50  float DotProduct{
51    Velocity.x * Normal.x +
52    Velocity.y * Normal.y
53  };
54  if (DotProduct < 0) {
55    Physics->SetVelocity(
56      Velocity - 2 * DotProduct * Normal
57    );
58  }
59}

Complete Code

Complete versions of the files we updated in this section are available below:

Summary

We've now made our game feel like an enclosed arena by adding walls and implementing bouncing physics.

We created a Wall class, placed four instances at the screen's edges, and then coded the collision logic within the Ball's HandleCollision() function.

Here's a summary of what we've accomplished:

• We created a new Wall entity to define the play area boundaries.
• We added logic to our Ball to react to collisions with other entities.
• We reviewed how to implement a simple bounce by flipping velocity components.
• We implemented an advanced bounce using the surface normal and dot product for more accurate results.

Free and Unlimited Access

Professional C++

Unlock the true power of C++ by mastering complex features, optimizing performance, and learning expert workflows used in professional development

View Course