Breakout: Walls and Collision

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.

We'll create this in a new file Breakout/Wall.h:

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

Back in our BreakoutScene's Load() method in BreakoutScene.cpp, let's add our four walls. Don't forget to include the new header.

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
11  using enum WallPosition;
12  Entities.emplace_back(
13    std::make_unique<Wall>(Top, *this)
14  );
15  Entities.emplace_back(
16    std::make_unique<Wall>(Left, *this)
17  );
18  Entities.emplace_back(
19    std::make_unique<Wall>(Bottom, *this)
20  );
21  Entities.emplace_back(
22    std::make_unique<Wall>(Right, *this)
23  );
24}

Configuring Colliders

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

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

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 functions on the base Scene class.

Our walls will need some thickness to collide correctly. We'll choose 1 unit (1 meter in our physics scale) for this. Since our coordinate system has $(0,0)$ at the top-left, negative coordinates or coordinates larger than the window size place objects off-screen, which is exactly what we want for invisible boundaries.

Let's implement this logic in the constructor:

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

Given our walls have no visual appearance (ImageComponent), and are positioned outside the viewport anyway, there will be no visual changes to our program yet. However, we can now update our Ball to interact with them.

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

That function calls the 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 Breakout/src/Ball.cpp file to implement our bouncing reaction.

The logic here is two-fold:

1. Resolve Penetration: We push the ball out of the wall so it isn't stuck inside. We determine the push direction by checking if the intersection rectangle is taller (horizontal collision) or wider (vertical collision).
2. Bounce: We reflect the ball's velocity. If we hit a vertical surface (like a side wall), we flip the X velocity. If we hit a horizontal surface (like the top or bottom), we flip the Y velocity.

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
13  // Determine collision axis based on intersection shape
14  bool IsVertical{
15    Intersection.w > Intersection.h
16  };
17
18  // 1. Push ball out of the object to prevent sticking
19  Vec2 CurrentPos{Transform->GetPosition()};
20  if (IsVertical) {
21    if (Physics->GetVelocity().y < 0)
22      CurrentPos.y += Intersection.h;
23    else
24      CurrentPos.y -= Intersection.h;
25  } else {
26    if (Physics->GetVelocity().x > 0)
27      CurrentPos.x -= Intersection.w;
28    else
29      CurrentPos.x += Intersection.w;
30  }
31  Transform->SetPosition(CurrentPos);
32
33  // 2. Reflect velocity
34  Vec2 CurrentVel{Physics->GetVelocity()};
35  if (IsVertical) {
36    Physics->SetVelocity({
37      CurrentVel.x, -CurrentVel.y
38    });
39  } else {
40    Physics->SetVelocity({
41      -CurrentVel.x, CurrentVel.y
42    });
43  }
44}

Don't forget to update your project to ensure this new source file is included in the build. If you're using the CMakeLists.txt we provided, that might look like this:

1# ...
2add_executable(Breakout
3  "main.cpp"
4  # ...
5  "Breakout/src/BreakoutScene.cpp"
6  "Breakout/src/Ball.cpp"
7)
8# ...

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 simply inverting a velocity component based on the shape of the intersection. This works well for axis-aligned rectangles hitting perfectly flat sides.

However, when objects intersect at corners, this can sometimes produce unnatural results. A more robust, physically accurate approach involves using vector math to calculate the exact reflection based on the surface normal.

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. The normal is a unit vector (length of 1) that points directly away from a surface, perpendicular to it.

The following illustration shows the normal angles at various points of a complex 3D surface:

Since all our colliders are Axis-Aligned Bounding Boxes (AABBs), the normal at any collision point will be much simpler in our case. Any collision normal will essentially be one of the four cardinal directions: Up $(0, -1)$, Down $(0, 1)$, Left $(-1, 0)$, or Right $(1, 0)$.

We can calculate this normal by looking at the relative position of the ball's center compared to the other object's center.

Dot Product

We can use the dot product to verify our collision logic. The dot product of two vectors tells us about the angle between them. If the dot product of the ball's velocity and the surface normal is negative, it means they are pointing in opposing directions - confirming the ball is moving into the surface and should bounce.

Improving Bouncing Logic

Let's update HandleCollision to use the vector reflection formula:

$$V_{\text{out}} = V_{\text{in}} - 2(V_{\text{in}} \cdot N)N$$

Where $V_{in}$ is the incoming velocity and $N$ is the surface normal.

We'll determine the normal based on the relative position of the centers.

Breakout/src/Ball.cpp

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
35  // Calculate relative position to determine the normal
36  Vec2 RelativePosition{
37    Transform->GetPosition() -
38    OtherTransform->GetPosition()
39  };
40
41  Vec2 Normal{
42    IsVertical ? Vec2{
43      0.0f,
44      (RelativePosition.y > 0) ? 1.0f : -1.0f
45    } : Vec2{
46      (RelativePosition.x > 0) ? 1.0f : -1.0f,
47      0.0f
48    }
49  };
50
51  Vec2 Velocity{Physics->GetVelocity()};
52
53  // Calculate dot product
54  float DotProduct{
55    Velocity.x * Normal.x +
56    Velocity.y * Normal.y
57  };
58
59  // Only bounce if moving towards the surface
60  if (DotProduct < 0) {
61    Physics->SetVelocity(
62      Velocity - (2 * DotProduct * Normal)
63    );
64  }
65}

This updated logic provides a more robust implementation of bouncing that will handle not just walls, but also the paddle and bricks we will add in future lessons.

Complete Code

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

Files

Breakout

CMakeLists.txt

Select a file to view its content

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.