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:

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({6, 7});
12    AddComponent<ImageComponent>("Assets/Grey.png");
13  }
14
15private:
16  TransformComponent* Transform;
17};

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 <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};

As a reminder, the entities of our scene is 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}

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 stuff, 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, 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({6, 7});
13    
14    Collision = AddComponent<CollisionComponent>();
15    Collision->SetSize(1.1, 1.7);
16    
17    AddComponent<ImageComponent>("Assets/Grey.png");
18  }
19
20private:
21  TransformComponent* Transform;
22  CollisionComponent* Collision;
23};

Remember, if you enable the DRAW_DEBUG_HELPERS preprocessor definition, the collider will draw a yellow rectangle showing its position and size:

If you also need to change the position of the collider, 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({6.1, 1.6});
8    Transform->SetScale(0.3);
9    
10    Collision = AddComponent<CollisionComponent>();
11    Collision->SetSize(1.1, 1.7);
12    
13    AddComponent<ImageComponent>("Assets/Grey.png");
14  }
15
16  // ...
17};

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 game.

Let's update the component with a new Vec2 to store the desired gravity effect, as well as a getter and setter to access it:

1// ...
2
3class PhysicsComponent : public Component {
4 public:
5  // ...
6
7  Vec2 GetGravity() const {
8    return Gravity;
9  }
10  void SetGravity(Vec2 NewGravity) {
11    Gravity = NewGravity;
12  }
13
14 private:
15  // ...
16  Vec2 Gravity{0.0, -9.8}; // m/s^2
17};

In the physics component's Tick() function, we can now use this value, rather than the fixed local variable we were using previously:

1// ...
2
3void PhysicsComponent::Tick(float DeltaTime) {
4  const Vec2 GRAVITY{0.0f, -9.8f};
5  ApplyForce(GRAVITY * Mass);
6  ApplyForce(GetGravity() * Mass);
7
8  Velocity += Acceleration * DeltaTime;
9
10  SetOwnerPosition(
11    GetOwnerPosition() + Velocity * DeltaTime
12  );
13
14  Acceleration = {0.0, 0.0};
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, 0});
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:

Config.h

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

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 move up and to the right.
2. We'll normalize this vector, thereby ensuring it has a length of 1.
3. We'll multiply this normalized vector by the BALL_SPEED configuration value.

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
4class Ball : public Entity {
5public:
6  Ball(BreakoutScene& Scene) : Entity{Scene} {
7    // ...
8
9    Physics = AddComponent<PhysicsComponent>();
10    Physics->SetGravity({0, 0});
11    Physics->SetVelocity(Vec2{1, 2}.Normalize()
12      * Config::Breakout::BALL_SPEED);
13  }
14
15private:
16  TransformComponent* Transform;
17  PhysicsComponent* Physics;
18  CollisionComponent* Collision;
19};

With those changes, our ball should now start moving, eventually leaving our screen entirely. We've enabled DRAW_DEBUG_HELPERS again for this screenshot, which causes our movement trajectories to be drawn 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 zero-gravity environments.

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 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.