Breakout: The Ball

Let's start by adding a class to manage our ball. It'll inherit from our engine's Entity class and, like any Entity, it needs a reference to the scene it is part of.

We'll also give our Ball a transform component and image component so we can see it, and we'll position it somewhere near the middle of the scene for now.

We'll also save the pointer to the TransformComponent as we'll need it later. We'll place this in Breakout/Ball.h:

1#pragma once
2#include "Engine/ECS/Entity.h"
3#include "Engine/ECS/ImageComponent.h"
4#include "Engine/ECS/TransformComponent.h"
5#include "Breakout/BreakoutScene.h"
6
7class Ball : public Entity {
8public:
9  Ball(BreakoutScene& Scene) : Entity{Scene} {
10    Transform = AddComponent<TransformComponent>();
11    Transform->SetPosition({
12      6.f * Scene::PIXELS_PER_METER,
13      6.f * Scene::PIXELS_PER_METER
14    });
15    AddComponent<ImageComponent>("Assets/Grey.png");
16  }
17
18private:
19  TransformComponent* Transform;
20};

Let's add a Ball to our scene. Loading levels will be quite a complex process eventually, especially once we start deserializing data from our editor files.

So, let's proactively break it out into a standalone function called Load(), which will take the level we want to load as an argument. From our constructor, we'll Load() level 1:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Engine/Scene.h"
4
5class BreakoutScene : public Scene {
6public:
7  BreakoutScene(Window& ParentWindow)
8    : Scene{ParentWindow} {
9    Load(1);
10  }
11
12  void Load(int Level);
13};

We'll implement Load() in a new source file, BreakoutScene.cpp.

As a reminder, the entities of our scene are stored in a std::vector called Entities, which our BreakoutScene is inheriting from the base Scene class in our engine.

Every time we call Load(), we will clear all the entities in the scene, and load our new set of entities. For now, the only thing we have to load is our Ball:

1#include "Breakout/BreakoutScene.h"
2#include "Breakout/Ball.h"
3
4void BreakoutScene::Load(int Level) {
5  Entities.clear();
6  Entities.emplace_back(
7    std::make_unique<Ball>(*this)
8  );
9}

Remember to add this file in a way that the compiler is aware of it. For example, if you're using CMake, you'll need to update our CMakeLists.txt to include this new source file:

1# ...
2add_executable(Breakout
3  "main.cpp"
4  # ...
5  "Breakout/src/BreakoutScene.cpp"
6  
7  # We'll add this later
8  # "Breakout/src/Ball.cpp"
9)

With these changes, we should now see our ball rendered in the scene:

Configuring Size and Colliders

For our ball to bounce around and collide with things, we need to give it a collider. Let's add a CollisionComponent, and save a pointer to this component as a member variable as we'll need it later.

We also need to set the size of the collider to be around the same size as the ball using the SetSize() method. In our example, the correct size seems to be a width of around 1.1 and a height of 1.7 world units, but yours may be different:

1#pragma once
2#include "Engine/ECS/Entity.h"
3#include "Engine/ECS/ImageComponent.h"
4#include "Engine/ECS/TransformComponent.h"
5#include "Engine/ECS/CollisionComponent.h"
6#include "Breakout/BreakoutScene.h"
7
8class Ball : public Entity {
9public:
10  Ball(BreakoutScene& Scene) : Entity{Scene} {
11    Transform = AddComponent<TransformComponent>();
12    Transform->SetPosition({
13      6.f * Scene::PIXELS_PER_METER,
14      6.f * Scene::PIXELS_PER_METER
15    });
16
17    Collision = AddComponent<CollisionComponent>();
18    Collision->SetSize(
19      1.2f * Scene::PIXELS_PER_METER,
20      1.2f * Scene::PIXELS_PER_METER
21    );
22
23    AddComponent<ImageComponent>("Assets/Grey.png");
24  }
25
26private:
27  TransformComponent* Transform;
28  CollisionComponent* Collision;
29};

Remember, if you enable the DRAW_DEBUG_HELPERS preprocessor definition in CMakeLists.txt (or your build configuration), the collider will draw a yellow rectangle showing its position and size:

If you also need to change the position of the collider relative to the image, you can use the SetOffset() method on the CollisionComponent.

Our ball is too large at the minute, so we'll also use the SetScale() method on the transform component to scale it down.

We'll also update the starting position to near the bottom of the scene, with enough space to put the paddle underneath it in the future:

1// ...
2
3class Ball : public Entity {
4public:
5  Ball(BreakoutScene& Scene) : Entity{Scene} {
6    Transform = AddComponent<TransformComponent>();
7    Transform->SetPosition({
8      6.f * Scene::PIXELS_PER_METER,
9      6.f * Scene::PIXELS_PER_METER
10    });
11    Transform->SetScale(0.3f);
12
13    Collision = AddComponent<CollisionComponent>();
14    Collision->SetSize(
15      1.2f * Scene::PIXELS_PER_METER,
16      1.2f * Scene::PIXELS_PER_METER
17    );
18
19    AddComponent<ImageComponent>("Assets/Grey.png");
20  }
21
22  // ...
23};

To get our ball moving, we can add a PhysicsComponent, but we need to make a small enhancement to it first. Our PhysicsComponent assumes we always want to simulate gravity, but that's not the case in our Breakout game.

The effect of gravity is currently controlled by Scene::GRAVITY, which we could update in our Scene class, or in our BreakoutScene constructor. However, another option would be to update our PhysicsComponent to make gravity optional. This gives us more flexibility, as it allows us to configure gravity on a per-entity basis, rather than for the entire scene.

Let's update the component with a new Vec2 member to store the desired gravity for this specific component instance, as well as a getter and setter to access it. We'll use the scene's gravity by default:

1// ...
2#include "Engine/Scene.h"
3
4class PhysicsComponent : public Component {
5 public:
6  // ...
7
8  Vec2 GetGravity() const { return Gravity; }
9  void SetGravity(Vec2 NewGravity) {
10    Gravity = NewGravity;
11  }
12
13 private:
14  // ...
15  Vec2 Gravity{Scene::GRAVITY}; 
16};

In the physics component's Tick() function, we can now use this member variable instead of applying the global Scene::GRAVITY.

1// ...
2
3void PhysicsComponent::Tick(float DeltaTime) {
4  ApplyForce(Scene::GRAVITY * Mass);
5  ApplyForce(Gravity * Mass);
6
7  Velocity += Acceleration * DeltaTime;
8  SetOwnerPosition(
9    GetOwnerPosition() + Velocity * DeltaTime
10  );
11
12  Acceleration = {0.0, 0.0};
13}
14
15// ...

Adding Movement

Now that we can control gravity, let's add a PhysicsComponent to our Ball, and disable the effects of gravity by setting it to {0, 0}.

We'll also need to use our physics component in other Ball methods in the future, so we'll store its pointer as a member variable:

Breakout/Ball.h

1// ...
2#include "Engine/ECS/PhysicsComponent.h"
3
4class Ball : public Entity {
5public:
6  Ball(BreakoutScene& Scene) : Entity{Scene} {
7    // ...
8
9    Physics = AddComponent<PhysicsComponent>();
10    Physics->SetGravity({0.f, 0.f});
11
12    AddComponent<ImageComponent>("Assets/Grey.png");
13  }
14
15private:
16  // ...
17  PhysicsComponent* Physics;
18};

To get our ball moving, let's first add a configuration variable that lets us easily change the speed in the future. We'll add this to our Config.h file within a new Config::Breakout namespace:

Config.h

1// ...
2
3namespace Config::Breakout {
4  // Meters per second
5  inline const float BALL_SPEED{10.f};
6}
7
8// ...

Back in our Ball class, we can set the velocity in three steps:

1. We'll create a vector to set the initial direction of our ball. You can use any value you prefer here - we'll use {1, -2}, meaning the ball will initially move to the right (positive x) and up (negative y).
2. We'll normalize this vector using .Normalize(), returning a vector with the same direction but with a length of 1.
3. We'll multiply this normalized vector by the BALL_SPEED configuration value, to give our velocity in meters per second
4. We'll multiply this by our pixels-per-meter coefficient, to give us a final velocity in pixels per second

These steps ensure our velocity matches both the direction {1, -2} and speed 10 that we configured.

Breakout/Ball.h

1// ...
2#include "Config.h"
3#include "Engine/Vec2.h"
4
5class Ball : public Entity {
6public:
7  Ball(BreakoutScene& Scene) : Entity{Scene} {
8    // ...
9
10    Physics = AddComponent<PhysicsComponent>();
11    Physics->SetGravity({0, 0});
12    Physics->SetVelocity(
13      Vec2{1.f, -2.f}.Normalize()
14        * Config::Breakout::BALL_SPEED
15        * Scene::PIXELS_PER_METER
16    );
17
18    // The colliwion component comes after the
19    // physics component to ensure it picks
20    // up the movement from this frame
21    Collision = AddComponent<CollisionComponent>();
22    Collision->SetSize(
23      1.2f * Scene::PIXELS_PER_METER,
24      1.2f * Scene::PIXELS_PER_METER
25    );
26
27    AddComponent<ImageComponent>("Assets/Grey.png");
28  }
29
30private:
31  TransformComponent* Transform;
32  PhysicsComponent* Physics;
33  CollisionComponent* Collision;
34};

With those changes, our ball should now start moving, eventually leaving our screen entirely. If we enable DRAW_DEBUG_HELPERS, our PhysicsComponent will draw our movement trajectories as blue lines:

In the next part, we'll add some walls around the edges of the window that our ball will bounce off.

Complete Code

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

Files

Breakout

Engine

Config.h

CMakeLists.txt

Select a file to view its content

Summary

In this lesson, we successfully added the first interactive element to our Breakout game: the ball. We created a dedicated Ball class, equipped it with transform, image, collision, and physics components, and set it in motion. We also enhanced our engine's PhysicsComponent to allow for per-entity gravity customization.

Here are the key takeaways:

• Game-specific objects are created as Entity subclasses that compose generic components.
• The order in which components are added can affect behavior, particularly between physics, collision, and rendering.
• It's often necessary to adapt or enhance generic engine features (like gravity in PhysicsComponent) to suit the specific needs of a game.
• Vector normalization is a useful technique for setting an object's velocity, allowing us to define a direction and speed independently.