Breakout: The Player Paddle

It's time to give the player some control! In this lesson, we will implement the paddle, the primary way the player interacts with the world of Breakout. We will build upon our entity-component system to create a paddle that moves left and right in response to keyboard input.

We will create a Paddle entity and add components to it. A key focus will be on the InputComponent and PhysicsComponent. We'll explore how to customize the default input bindings, implement a "press to move, release to stop" control scheme, and add a new capability to our physics engine to constrain movement within a defined area.

In this lesson, we will:

• Create a Paddle entity class.
• Bind the left and right arrow keys to paddle movement.
• Implement logic to reset velocity when no key is pressed.
• Add movement constraints to the PhysicsComponent to keep the paddle on-screen.

Adding a Paddle Class

As usual, let's begin by adding a class to manage our paddle. We'll start with a transform component and image component, and we'll save the transform component pointer to use later:

1#pragma once
2#include "Engine/ECS/Entity.h"
3#include "Engine/ECS/TransformComponent.h"
4#include "Engine/ECS/ImageComponent.h"
5
6class Paddle : public Entity {
7public:
8  Paddle(BreakoutScene& Scene) : Entity{Scene} {
9    Transform = AddComponent<TransformComponent>();
10    AddComponent<ImageComponent>(
11      "Assets/Paddle_Frame_B.png"
12    );
13  }
14
15private:
16  TransformComponent* Transform{nullptr};
17};

Over in our BreakoutScene, let's add an instance of our class to the scene within the Load() method:

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

We won't see our paddle yet as it is positioned outside of the viewport. Let's update its position and set up its collider.

Configuring Position and Colliders

We'll set the initial position of our paddle to be just under the ball we added previously. For the image we're using in our examples, that corresponds to a position of approximately {4, 1}.

We can also toggle on the DRAW_DEBUG_HELPERS flag to help us position our collider. For our image, a collider size of {2.7, 0.9} works well. We want to make sure the paddle isn't colliding with the bottom wall.

The image we're using has a transparent area on the left and right, so we also need to use SetOffset() to move the collider to match up with the visual representation of the paddle. Moving it left by 0.95 units works for the image we're using:

1// ...
2#include "Engine/ECS/CollisionComponent.h"
3
4class Paddle : public Entity {
5public:
6  Paddle(BreakoutScene& Scene) : Entity{Scene} {
7    Transform = AddComponent<TransformComponent>();
8    Transform->SetPosition({4, 1});
9
10    Collision = AddComponent<CollisionComponent>();
11    Collision->SetSize(2.7, 0.9);
12    Collision->SetOffset({0.95, 0});
13    
14    AddComponent<ImageComponent>(
15      "Assets/Paddle_Frame_B.png");
16  }
17
18private:
19  TransformComponent* Transform{nullptr};
20  CollisionComponent* Collision{nullptr};
21};

Configuring Inputs

Next, let's update our paddle to respond to inputs. We'll add an InputComponent and PhysicsComponent, saving their pointers for later:

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

Our base input component automatically binds the left and right arrow to horizontal movement, and the space bar to jumping. We'll refine this movement in the next section.

Resetting Velocity

When we press the left or right arrow key, our paddle continues to move in that direction until we press the opposite arrow key. That may be what we want, but let's walk through changing this behavior.

In our physics chapter, we saw an example of simulating forces like friction, which will cause our paddle to slow down over time once we stop providing any movement input.

In this case, we'll simply stop our paddle immediately. To do this, we can override the Tick() function and set the physics component's velocity back to {0, 0}.

We should do this after calling the base Entity::Tick(). If we did it before, our paddle wouldn't move, because we'd remove the velocity before the physics component's Tick() function gets to use it.

1// ...
2
3class Paddle : public Entity {
4public:
5  // ...
6  void Tick(float DeltaTime) override {
7    Entity::Tick(DeltaTime);
8    Physics->SetVelocity({0, 0});
9  }
10  // ...
11};

Updating Commands

Let's replace the left and right key binding with paddle-specific logic. We'll add a config variable controlling how fast our paddle can move:

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

Then, we'll bind our left and right keys to functions that create left and right movement commands. Note that the BindKeyHeld() calls in our constructor happens after the InputComponent's Initialize() method, so these calls are replacing those existing bindings.

We may just want to delete the Initialize() override on our InputComponent to keep things clearer if preferred. But for now, let's just overwrite them from our Paddle constructor:

1// ...
2#include "Config.h"
3
4class Paddle : public Entity {
5public:
6  Paddle(BreakoutScene& Scene) : Entity{Scene} {
7    // ...
8    Input = AddComponent<InputComponent>();
9    Input->BindKeyHeld(
10      SDLK_LEFT,
11      CreateMoveLeftCommand
12    );
13    Input->BindKeyHeld(
14      SDLK_RIGHT,
15      CreateMoveRightCommand
16    );
17
18    // ...
19  }
20
21  // ...
22};

When we created our input component in the previous chapter, we defined these CreateMoveLeftCommand() and CreateMoveRightCommand() functions in an anonymous namespace within the input component source file.

In this case, we'll replicate them as static Paddle methods, and we'll use our configuration variable as the horizontal component of the velocity:

1// ...
2
3class Paddle : public Entity {
4  // ...
5
6private:
7  static CommandPtr CreateMoveLeftCommand() {
8    return std::make_unique<MovementCommand>(
9      Vec2{-Config::Breakout::PADDLE_SPEED, 0.0});
10  }
11
12  static CommandPtr CreateMoveRightCommand() {
13    return std::make_unique<MovementCommand>(
14      Vec2{Config::Breakout::PADDLE_SPEED, 0.0});
15  }
16  // ...
17};

1// ...
2
3class Paddle : public Entity {
4public:
5  Paddle(BreakoutScene& Scene) : Entity{Scene} {
6    // ...
7    Input = AddComponent<InputComponent>();
8    Input->BindKeyHeld(SDLK_LEFT, []{
9      return std::make_unique<MovementCommand>(
10        Vec2{-Config::Breakout::PADDLE_SPEED, 0.0}
11      );
12    });
13    Input->BindKeyHeld(SDLK_RIGHT, []{
14      return std::make_unique<MovementCommand>(
15        Vec2{Config::Breakout::PADDLE_SPEED, 0.0}
16      );
17    });
18
19    // ...
20  }
21
22  // ...
23};

Unbinding Keys

We can now control the left and right movement of our paddle, but the default InputComponent is also causing our paddle to jump when the space key is pressed. We don't need this.

It'd be reasonable to simply delete that binding from the InputComponent::Initialize() function but, for the sake of learning, let's give our InputComponent the ability to unbind keys dynamically.

We'll add a public UnbindKey() method that accepts the key code we want to unbind. The function will then remove that binding from both of the binding maps, using the erase() method on their std::unordered_map class:

1// ...
2
3class InputComponent : public Component {
4 public:
5  // ...
6
7  void UnbindKey(SDL_Keycode Key) {
8    KeyDownBindings.erase(Key);
9    KeyHeldBindings.erase(Key);
10  }
11
12  // ...
13};

In our Paddle constructor, we can now unbind the spacebar, preventing any jumping:

1// ...
2
3class Paddle : public Entity {
4public:
5  Paddle(BreakoutScene& Scene) : Entity{Scene} {
6    // ...
7
8    Input = AddComponent<InputComponent>();
9    Input->UnbindKey(SDLK_SPACE); 
10    
11    // ...
12  }
13
14  // ...
15};

1#pragma once
2#include "Engine/ECS/InputComponent.h"
3#include "Config.h"
4
5class PaddleInputComponent : public InputComponent {
6public:
7  // Inherit constructors
8  using InputComponent::InputComponent;
9
10  void Initialize() override {
11    BindKeyHeld(SDLK_LEFT, [] {
12      return std::make_unique<MovementCommand>(
13        Vec2{-Config::Breakout::PADDLE_SPEED, 0.0});
14      }
15    );
16
17    BindKeyHeld(SDLK_RIGHT, [] {
18      return std::make_unique<MovementCommand>(
19        Vec2{Config::Breakout::PADDLE_SPEED, 0.0});
20      }
21    );
22  }
23};

1// ...
2#include "Engine/ECS/InputComponent.h"
3#include "Breakout/PaddleInputComponent.h"
4
5class Paddle : public Entity {
6public:
7  Paddle(BreakoutScene& Scene) : Entity{Scene} {
8    // ...
9
10    Input = AddComponent<PaddleInputComponent>();
11    Input->UnbindKey(SDLK_SPACE);
12    Input->BindKeyHeld(SDLK_LEFT, []{
13      return std::make_unique<MovementCommand>(
14        Vec2{-Config::Breakout::PADDLE_SPEED, 0.0}
15      );
16    });
17    Input->BindKeyHeld(SDLK_RIGHT, []{
18      return std::make_unique<MovementCommand>(
19        Vec2{Config::Breakout::PADDLE_SPEED, 0.0}
20      );
21    });
22    
23    // ...
24  }
25
26private:
27  // ...
28  
29  InputComponent* Input{nullptr};
30  PaddleInputComponent* Input{nullptr};
31};

Constraining Movement

The final problem we have with our paddle's input is that it can move completely off the screen. Let's constrain its horizontal motion.

Constraining motion is a generally useful capability, so we'll implement some of it in the physics component so it can be reused in the future.

We'll add a ConstrainHorizontalMovement() function that accepts the left and right edge, as well as three member variables to support this behavior:

1// ...
2
3class PhysicsComponent : public Component {
4 public:
5  // ...
6  void ConstrainHorizontalMovement(
7    float Left, float Right
8  ) {
9    ShouldConstrainHorizontalMovement = true;
10    ConstrainLeft = Left;
11    ConstrainRight = Right;
12  }
13
14 private:
15  // ...
16  bool ShouldConstrainHorizontalMovement{false};
17  float ConstrainLeft;
18  float ConstrainRight;
19};

In our Tick() function, if the constraint is enabled and our velocity causes the entity to mvoe beyond those bounds, we'll snap it back:

1// ...
2
3void PhysicsComponent::Tick(float DeltaTime) {
4  ApplyForce(GetGravity() * Mass);
5  Velocity += Acceleration * DeltaTime;
6  SetOwnerPosition(
7    GetOwnerPosition() + Velocity * DeltaTime
8  );
9  Acceleration = {0.0, 0.0};
10  
11  if (ShouldConstrainHorizontalMovement) {
12    auto [x, y]{GetOwnerPosition()};
13    if (x < ConstrainLeft) {
14      SetOwnerPosition({ConstrainLeft, y});
15    } else if (x > ConstrainRight) {
16      SetOwnerPosition({ConstrainRight, y});
17    }
18  }
19}
20
21// ...

Back in our Entity constructor, we'll set the constraints such that our collider stays within the bounds of our scene.

To help with this, we'll do a minor refactor to add CollisionWidth and CollisionOffsetX values, so they can be used as arguments for both our existing function calls and our new ConstrainHorizontalMovement() call:

1// ...
2
3class Paddle : public Entity {
4public:
5  Paddle(BreakoutScene& Scene) : Entity{Scene} {
6    // ...
7    float CollisionWidth{2.7};
8    float CollisionOffsetX{0.95};
9    Physics = AddComponent<PhysicsComponent>();
10    Physics->SetGravity({0, 0});
11    Physics->ConstrainHorizontalMovement(
12      -CollisionOffsetX,
13      Scene.GetWidth() - (
14        CollisionOffsetX + CollisionWidth
15      )
16    );
17    
18    Collision = AddComponent<CollisionComponent>();
19    Collision->SetSize(2.7, 0.9);
20    Collision->SetSize(CollisionWidth, 0.9);
21    Collision->SetOffset({0.95, 0});
22    Collision->SetOffset({CollisionOffsetX, 0});
23
24    // ...
25  }
26
27  // ...
28};

With those changes in place, we should now be able to move our paddle within our window, and the ball will bounce off it:

In the next part, we'll update our paddle to let it modify the ball's velocity depending on where the ball hit.

Complete Code

Our updated code is provided below:

Summary

We've now added player control to our Breakout game by creating the paddle. This involved creating the Paddle entity, configuring its components, and writing the logic for its input and movement.

We customized the default keybindings, created a "release-to-stop" movement feel, and ensured the paddle can't leave the play area.

Here's an overview:

• We created a Paddle entity and added it to our scene.
• We learned to override default input bindings and unbind keys we don't need.
• We implemented a velocity reset in the Paddle::Tick() function for responsive controls.
• We added a reusable movement constraint feature to our PhysicsComponent.
• The player can now move the paddle to hit the ball.

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