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.

We'll create this in a new file, Breakout/Paddle.h.

Breakout/Paddle.h

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

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

Don't forget to include the new header file.

Breakout/src/BreakoutScene.cpp

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

We should now see our paddle at (0,0), which is the top left of our scene. Let's update its position and set up its collider.

Configuring Position and Colliders

Let's set the initial position of our paddle to be near the bottom of the screen. For our paddle image and window size, a position of (5.0, 7.2) seems to work well.

We can also toggle on the DRAW_DEBUG_HELPERS flag to help us position our collider. For our image, a collider size of {3.1, 0.6} seems to match the size of the paddle within the image file.

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 right by 1 meter works for the image we're using:

Breakout/Paddle.h

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({
9      5.0f * Scene.PIXELS_PER_METER,
10      7.2f * Scene.PIXELS_PER_METER
11    });
12
13    Collision = AddComponent<CollisionComponent>();
14    Collision->SetSize(
15      3.1f * Scene.PIXELS_PER_METER,
16      0.6f * Scene.PIXELS_PER_METER
17    );
18    Collision->SetOffset({
19      1.f * Scene.PIXELS_PER_METER,
20      0.f
21    });
22
23    AddComponent<ImageComponent>(
24      "Assets/Paddle_Frame_B.png"
25    );
26  }
27
28private:
29  TransformComponent* Transform{nullptr};
30  CollisionComponent* Collision{nullptr};
31};

With these changes, we should now see our paddle in our scene, and our ball is already bouncing off its collider as expected.

Screenshot of paddle drawn with debug helpers

Configuring Inputs

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

Breakout/Paddle.h

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  // ...
21};

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

Tick Order

Again, note that the order in which we add components to our entity influences the order in which those components will tick. The commands generated by the Tick() function of our InputComponent update the velocity of our PhysicsComponent which, in turn, gets used by the physics component's Tick() function.

If we add our InputComponent before the PhysicsComponent, that means the InputComponent will tick before the PhysicsComponent, which is what we want. If we changed the order, our physics component wouldn't react to our inputs until the next iteration of our application loop, which makes our program feel less responsive.

Additionally, our "Resetting Velocity" implementation in the next section requires that our input component tick before our physics component, so it's particularly important in this case.

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 so the paddle stops when we release the key.

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.

Breakout/Paddle.h

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 default left and right key binding with paddle-specific logic. We'll add a config variable controlling how fast our paddle can move in Config.h:

Config.h

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 happen after the InputComponent's Initialize() method is called by AddComponent(), so these calls are replacing those existing bindings.

Let's overwrite them from our Paddle constructor:

Breakout/Paddle.h

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

We'll define these CreateMoveLeftCommand() and CreateMoveRightCommand() functions as static Paddle methods, using our configuration variable to set the horizontal velocity:

Breakout/Paddle.h

1// ...
2
3class Paddle : public Entity {
4  // ...
5
6private:
7  static CommandPtr CreateMoveLeftCommand() {
8    using namespace Config::Breakout;
9    return std::make_unique<MovementCommand>(
10      Vec2{
11        -PADDLE_SPEED * Scene::PIXELS_PER_METER,
12        0.0
13      }
14    );
15  }
16
17  static CommandPtr CreateMoveRightCommand() {
18    using namespace Config::Breakout;
19    return std::make_unique<MovementCommand>(
20      Vec2{
21        PADDLE_SPEED * Scene::PIXELS_PER_METER,
22        0.0
23      }
24    );
25  }
26  // ...
27};

Advanced: Lambda Expressions

A more succinct way to provide these bindings is to use a . Lambdas allow us to provide inline functions within the body of other functions, such as our Paddle constructor.

If a function is short and only going to be used in a single place, providing it as a lambda often makes our code easier to follow than defining the logic elsewhere in the file.

The lambda approach would look like this:

Breakout/Paddle.h

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

Unbinding Keys

We can now control the left and right movement of our paddle, but the default InputComponent setup 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 and future flexibility, 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:

Engine/ECS/InputComponent.h

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:

Breakout/Paddle.h

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

Advanced: Game-Specific Components

Components do not always need to be generic. It can be helpful to add game-specific components to remove complexity from our entity types, or to define behaviors that are useful across multiple entities.

These components can also inherit from base components if doing so would be useful. Below, we derive from InputComponent to create a component that can be used to encapsulate our paddle input logic.

We override the base Initialize() method to provide the keybindings we need for our paddle:

Breakout/PaddleInputComponent.h

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

This allows us to remove a lot of code from our Paddle class, helping keep things organized:

Breakout/Paddle.h

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    Input->BindKeyHeld(SDLK_RIGHT, /*...*/);
14
15    // ...
16  }
17
18private:
19  // ...
20
21  InputComponent* Input{nullptr};
22  PaddleInputComponent* Input{nullptr};
23};

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 PhysicsComponent 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:

Engine/ECS/PhysicsComponent.h

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{0.0f};
18  float ConstrainRight{0.0f};
19};

In our Tick() function, if the constraint is enabled and our velocity causes the entity to move beyond those bounds, we'll snap it back. We do this after updating the position so we can catch any overshoot.

Engine/ECS/src/PhysicsComponent.cpp

1// ...
2
3void PhysicsComponent::Tick(float DeltaTime) {
4  ApplyForce(Gravity * 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 Paddle 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 create CollisionWidth and CollisionOffsetX variables, so they can be used as arguments for both our existing collision setup and our new ConstrainHorizontalMovement() call.

The left limit is simply the negative of the offset (so when x is that value, the collider's left edge is at 0). The right limit ensures the collider's right edge stops at the screen width.

Breakout/Paddle.h

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

With those changes in place, we should now be able to move our paddle within our window, but not beyond its bounds. Our ball should also bounce off our paddle correctly:

Screenshot of the ball bouncing off the paddle

Complete Code

Our updated code is provided below:

Files

Breakout

Engine

Config.h

Select a file to view its content

Summary

We've now added player control to our 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.

Breakout: The Player Paddle

Adding a Paddle Class

Breakout/Paddle.h

Breakout/src/BreakoutScene.cpp

Configuring Position and Colliders

Breakout/Paddle.h

Configuring Inputs

Breakout/Paddle.h

Resetting Velocity

Breakout/Paddle.h

Updating Commands

Config.h

Breakout/Paddle.h

Breakout/Paddle.h

Advanced: Lambda Expressions

Breakout/Paddle.h

Unbinding Keys

Engine/ECS/InputComponent.h

Breakout/Paddle.h

Advanced: Game-Specific Components

Breakout/PaddleInputComponent.h

Breakout/Paddle.h

Constraining Movement

Engine/ECS/PhysicsComponent.h

Engine/ECS/src/PhysicsComponent.cpp

Breakout/Paddle.h

Complete Code

Files

Summary

Breakout: Improving Paddle Physics

Game Development with SDL3