Our entities can now move realistically thanks to the PhysicsComponent, but they pass right through each other! This lesson introduces the CollisionComponent, responsible for defining an entity's physical shape for interaction. You'll learn how to:

Create a CollisionComponent with offset, width, and height.
Calculate the component's world-space bounding box each frame.
Implement basic collision detection between entities.
Integrate the CollisionComponent with the Entity and TransformComponent.
Visualize collision bounds for debugging.

By the end, your entities will be able to detect when they overlap, setting the stage for collision response in the next lesson.

Starting Point

This lesson builds on concepts we covered in the previous chapter - reviewing those lessons is recommended if you're not already familiar with bounding boxes and calculating intersections in SDL:

Bounding Boxes

Discover bounding boxes: what they are, why we use them, and how to create them

View Related Lesson

Intersections and Relevancy Tests

Optimize games by checking object intersections with functions like SDL_HasIntersection().

View Related Lesson

So far in our entity-component system, entities have TransformComponent for position/scale, PhysicsComponent for movement, ImageComponent for rendering, and InputComponent for control.

However, they lack any sense of physical presence beyond their single point position managed by their TransformComponent. We'll address that by continue working from where we left off in the previous lesson and adding a CollisionComponent.

Our CollisionComponent will inherit from Component, and work closely with the entity's TransformComponent. For reference, our Component.h and TransformComponent.h are provided below:

Bounding Box Review

In an earlier lesson, we introduced bounding boxes as simple shapes (usually rectangles or cuboids) used to approximate the physical space an object occupies.

We used Axis-Aligned Bounding Boxes (AABBs) - rectangles whose sides are parallel to the coordinate axes. These are simpler to work with than rotated boxes.

Diagram showing examples of two bounding boxes - one axis-aligned, and one not

We represented them using SDL_Rect (for integer coordinates, like screen space) and SDL_FRect (for floating-point coordinates, like our world space).

We also created a BoundingBox class back then. Now, we'll create a CollisionComponent that encapsulates similar ideas but integrates with our entity-component system.

Creating the `CollisionComponent`

Let's define CollisionComponent.h. It will inherit from Component and manage the shape of the entity for collision purposes.

Crucially, this component will not store the entity's world position directly. That's the job of the TransformComponent. Instead, the CollisionComponent defines its shape relative to the entity's origin (the TransformComponent's position).

Let's start by giving it some member variables, alongside getters and setters. We'll give it:

Offset: A Vec2 representing the top-left corner's offset from the entity's origin.
Width, Height: Floating-point values defining the size of the collision box in world units (e.g., meters).
WorldBounds: An SDL_FRect that will store the calculated world-space bounding box each frame. This is the rectangle we'll use for intersection tests.

1#pragma once
2#include "Component.h"
3#include "Vec2.h"
4#include <SDL.h>
5
6class CollisionComponent : public Component {
7 public:
8  // Inherit constructor
9  using Component::Component;
10
11  // Setters for defining the collision shape
12  void SetOffset(const Vec2& NewOffset);
13  void SetSize(float NewWidth, float NewHeight);
14
15  // Getter for the calculated world-space bounds
16  const SDL_FRect& GetWorldBounds() const;
17
18 private:
19  // Shape definition relative to owner's origin
20  Vec2 Offset{0.0, 0.0};
21  float Width{1.0};  // Default 1m x 1m
22  float Height{1.0};
23
24  // Calculated bounds updated each tick
25  SDL_FRect WorldBounds{0.0, 0.0, 0.0, 0.0};
26};

Now, let's implement the basic setters and the getter in CollisionComponent.cpp:

1// CollisionComponent.cpp
2#include <iostream>
3#include "CollisionComponent.h"
4
5void CollisionComponent::SetOffset(
6  const Vec2& NewOffset
7) {
8  Offset = NewOffset;
9  // WorldBounds will be recalculated in Tick()
10}
11
12void CollisionComponent::SetSize(
13  float NewWidth, float NewHeight
14) {
15  if (NewWidth < 0 || NewHeight < 0) {
16    std::cerr << "Warning: CollisionComponent "
17      "width/height cannot be negative. "
18      "Using absolute values.\n";
19    Width = std::abs(NewWidth);
20    Height = std::abs(NewHeight);
21  } else {
22    Width = NewWidth;
23    Height = NewHeight;
24  }
25  // WorldBounds will be recalculated in Tick()
26}
27
28const SDL_FRect&
29  CollisionComponent::GetWorldBounds() const
30{
31  return WorldBounds;
32}
33
34// Initialize(), Tick(), IsCollidingWith(), and
35// DrawDebugHelpers() will be implemented next

Updating World Bounds - `Tick()`

The CollisionComponent needs to recalculate its WorldBounds rectangle every frame, as the owning entity might have moved. We'll do this in the Tick() method.

1// CollisionComponent.h
2// ...
3
4class CollisionComponent : public Component {
5 public:
6  // ...
7
8  // Called each frame to update WorldBounds
9  void Tick(float DeltaTime) override;
10  // ...
11};

Remember our world is Y-up, but SDL_FRect expects Y-down for its $y$ coordinate if we are using SDL intersection functions like SDL_HasIntersectionF().

However, to keep things simple, we'll worry about that when we come to calculate the intersections. GetWorldBounds() just calculates the updated position, whilst our intersection logic will handle the coordinate system difference.

So, Tick() needs to:

Get the owner entity's current world position - GetOwnerPosition() - and scale - GetOwnerScale().
Calculate the top-left corner of the bounds: OwnerPosition + Offset.
Calculate the scaled width and height: Width * OwnerScale, Height * OwnerScale.
Store these values in the WorldBounds member.

1// CollisionComponent.cpp
2// ...
3
4void CollisionComponent::Tick(float DeltaTime) {
5  Vec2 OwnerPos{GetOwnerPosition()};
6  float OwnerScale{GetOwnerScale()};
7
8  // Calculate world-space position and dimensions
9  WorldBounds.x = OwnerPos.x + Offset.x;
10  WorldBounds.y = OwnerPos.y + Offset.y;
11  WorldBounds.w = Width * OwnerScale;
12  WorldBounds.h = Height * OwnerScale;
13}
14
15// ...

Tick Order Matters

Notice that we update WorldBounds in the CollisionComponent::Tick(). This assumes that the TransformComponent and PhysicsComponent have already completed their Tick() for the current frame, so GetOwnerPosition() returns the final position for this frame.

Our current Entity::Tick() iterates through all components. If the CollisionComponent happens to be earlier in the Components vector than the PhysicsComponent, its Tick() will run before the position is updated, leading to the collision bounds lagging one frame behind the entity's actual position.

A more robust system might involve different "phases" of ticking - e.g., PrePhysicsTick(), PhysicsTick(), PostPhysicsTick(), and CollisionUpdateTick() - to guarantee the correct order. For now, we'll rely on the typical component addition order or accept the potential one-frame lag, which is often negligible. A simple fix is to ensure PhysicsComponent is added before CollisionComponent.

Alternatively, the CollisionComponent::Tick() could be empty, and a separate collision-checking phase in Scene::Tick() could first update all collision bounds based on final transforms, and then check for overlaps. This decouples the update from the component iteration order. Let's stick with the component Tick() for now for simplicity.

Dependency Check - `Initialize()`

The CollisionComponent needs a TransformComponent to know the entity's position and scale. Let's enforce this in Initialize():

1// CollisionComponent.h
2// ...
3
4class CollisionComponent : public Component {
5 public:
6  // ...
7  
8  // Dependency check
9  void Initialize() override;
10  
11  // ...
12};

1// CollisionComponent.cpp
2// ...
3
4void CollisionComponent::Initialize() {
5  if (!GetOwner()->GetTransformComponent()) {
6    std::cerr << "Error: CollisionComponent "
7      "requires TransformComponent on its Owner.\n";
8    GetOwner()->RemoveComponent(this);
9  }
10}
11
12// ...

Integrating with `Entity`

We'll add the standard AddCollisionComponent() and GetCollisionComponent() methods to Entity.h.

For simplicity in this lesson, we'll assume only one CollisionComponent per entity. If multiple shapes are needed, a more advanced design might involve a GetCollisionComponents() function that returns a std::vector, similar to GetImageComponents().

Let's update our Entity class:

1// Entity.h
2// ...
3#include "CollisionComponent.h" 
4// ...
5
6class Entity {
7public:
8  // ...
9
10  CollisionComponent* AddCollisionComponent() {
11    // Allow multiple for now, but 
12    // GetCollisionComponent below only gets the
13    // first one.
14    ComponentPtr& NewComponent{
15      Components.emplace_back(
16        std::make_unique<CollisionComponent>(this))
17    };
18    NewComponent->Initialize();
19    return static_cast<CollisionComponent*>(
20      NewComponent.get());
21  } 
22
23  CollisionComponent* GetCollisionComponent() const {
24    // Returns the *first* collision component found
25    for (const ComponentPtr& C : Components) {
26      if (auto Ptr{dynamic_cast<
27        CollisionComponent*>(C.get())}) {
28        return Ptr;
29      }
30    }
31    return nullptr;
32  }
33
34  // ...
35};

Collision Detection Logic

Now, let's implement IsCollidingWith() in CollisionComponent.cpp. This function will determine if this component's WorldBounds overlaps with another CollisionComponent's WorldBounds.

We previously implemented world-space intersection logic in our earlier lesson

Intersections and Relevancy Tests

Optimize games by checking object intersections with functions like SDL_HasIntersection().

View Related Lesson

The core idea was to temporarily convert the Y-up world rectangles to SDL's expected Y-down format before using SDL's intersection functions. The process is as follows:

Start with rectangles defined using the y-up convention.
Create copies of these rectangles that have their y position reduced by their height (h)
Use an SDL function like SDL_IntersectFRect() to calculate the intersection of these rectangles within SDL's coordinate system.
If we need the intersection rectangle, increase its y value by its height to convert it to the y-up representation.

Diagram showing the process of converting between y-up and y-down representations

Let's replicate the logic we walked through in that lesson in our IsCollidingWith() function:

1// CollisionComponent.cpp
2// ...
3
4class CollisionComponent : public Component {
5 public:
6  // ...
7
8  // Check collision with another component
9  bool IsCollidingWith(
10    const CollisionComponent& Other
11  ) const;
12  
13  // ...
14};

1// CollisionComponent.cpp
2// ...
3
4bool CollisionComponent::IsCollidingWith(
5  const CollisionComponent& Other
6) const {
7  // Get the world bounds rectangles
8  const SDL_FRect& A_world{GetWorldBounds()};
9  const SDL_FRect& B_world{
10    Other.GetWorldBounds()};
11
12  // Convert to SDL's coordinate system (Y-down)
13  // by subtracting height from Y
14  SDL_FRect A_sdl{A_world};
15  A_sdl.y -= A_world.h;  // Convert A to Y-down
16
17  SDL_FRect B_sdl{B_world};
18  B_sdl.y -= B_world.h;  // Convert B to Y-down
19
20  // Use SDL's built-in intersection check
21  return SDL_HasIntersectionF(&A_sdl, &B_sdl);
22}
23
24// ...

Getting Collision Rectangle

Sometimes, just knowing if a collision occurred isn't enough. For collision response, we often need to know the exact region where the two objects overlap. We can create a variation of IsCollidingWith() that calculates this intersection rectangle.

This function will take a pointer to an SDL_FRect as an output parameter (OutIntersection).

1// CollisionComponent.h
2// ...
3
4class CollisionComponent : public Component {
5 public:
6  // ...
7
8  // Check collision and get intersection rectangle
9  bool GetCollisionRectangle( // <h>
10    const CollisionComponent& Other, // <h>
11    SDL_FRect* OutIntersection // <h>
12  ) const; // <h>
13
14  // ...
15};

If a collision occurs, the function will populate this rectangle with the overlapping area (in world-space, Y-up coordinates) and return true. If there's no collision, it will return false, and the contents of OutIntersection will be undefined.

We'll use SDL_IntersectFRect() for this. Similar to SDL_HasIntersectionF(), it operates in SDL's Y-down coordinate system. So, we need to follow the exact same process as before to convert Y-down rectangles to Y-up.

The process looks like this:

Get the world bounds (SDL_FRect in Y-up) for both components.
Convert both rectangles to SDL's Y-down system.
Call SDL_IntersectFRect() with the Y-down rectangles. It returns true if they intersect and puts the intersection rectangle (also in Y-down) into our output parameter.
If SDL_IntersectFRect() returns true, convert the resulting intersection rectangle back from Y-down to Y-up before returning.
Return the result of SDL_IntersectFRect().

1// CollisionComponent.cpp
2// ...
3
4bool CollisionComponent::GetCollisionRectangle(
5  const CollisionComponent& Other,
6  SDL_FRect* OutIntersection
7) const {
8  // Ensure the output pointer is valid
9  if (!OutIntersection) {
10    std::cerr << "Error: OutIntersection pointer "
11      "is null in GetCollisionRectangle.\n";
12    return false;
13  }
14
15  // Get world bounds (Y-up)
16  const SDL_FRect& A_world{GetWorldBounds()};
17  const SDL_FRect& B_world{
18    Other.GetWorldBounds()};
19
20  // Convert to SDL's Y-down system
21  SDL_FRect A_sdl{A_world};
22  A_sdl.y -= A_world.h; // Convert A to Y-down
23
24  SDL_FRect B_sdl{B_world};
25  B_sdl.y -= B_world.h; // Convert B to Y-down
26
27  // Calculate intersection in Y-down system
28  SDL_FRect Intersection_sdl;
29  if (SDL_IntersectFRect(
30      &A_sdl, &B_sdl, &Intersection_sdl))
31  {
32    // Collision occurred! Convert intersection
33    // back to Y-up world space
34    *OutIntersection = Intersection_sdl;
35    OutIntersection->y += Intersection_sdl.h; 
36
37    return true;
38  }
39
40  // No collision
41  return false;
42}
43
44// ...

Scene-Level Collision Checking

The IsCollidingWith() method checks if two specific components collide. To check all potential collisions in the scene, we need to iterate through pairs of entities in Scene::Tick().

This is often done after all entities have finished their individual Tick() updates (including physics and collision bound updates).

1// Scene.h
2// ...
3
4class Scene {
5 public:
6  // ...
7  void Tick(float DeltaTime) {
8    // 1. Tick all entities (updates physics,
9    //    collision bounds, etc.)
10    for (EntityPtr& Entity : Entities) {
11      Entity->Tick(DeltaTime);
12    }
13
14    // 2. Check for collisions between entities
15    CheckCollisions(); 
16  }
17  // ...
18 private:
19  void CheckCollisions(); 
20  // ...
21};

1// Scene.cpp
2#include <vector>
3#include "Scene.h"
4#include "CollisionComponent.h"
5
6void Scene::CheckCollisions() {
7  // Basic N^2 check is inefficient for
8  // large scenes - see note below
9  for (size_t i{0}; i < Entities.size(); ++i) {
10    CollisionComponent* ColA{
11      Entities[i]->GetCollisionComponent()};
12      
13    // Skip if no collision component
14    if (!ColA) continue;
15
16    for (size_t j{i + 1}; j < Entities.size(); ++j) {
17      CollisionComponent* ColB{
18        Entities[j]->GetCollisionComponent()};
19        
20      // Skip if no collision component
21      if (!ColB) continue;
22
23      if (ColA->IsCollidingWith(*ColB)) {
24        std::cout << "Collision detected between "
25          "Entity " << i << " and Entity " << j
26          << "!\n";
27      }
28    }
29  }
30}

Optimizing Collision Checks

The nested loop structure checks every unique pair of entities exactly once. This is known as an $O(N^2)$ algorithm, where $N$ represents the number of entities in the scene.

For example, if we have 10 entities in our scene, this means $10^2 = 100$ checks are required but, if we double the entity count to $20$ , the number of operations increases by a factor of four to $20^2 = 400$ .

In general, the number of checks we need to perform grows faster than the number of entities in the scene, which naturally becomes more problematic the more entities we have:

We cover algorithmic scaling in more detail here:

Algorithm Analysis and Big O Notation

An introduction to algorithms - the foundations of computer science. Learn how to design, analyze, and compare them.

View Related Lesson

For a small number of entities, this $O(N^2)$ algorithm is perfectly fine. However, in games with hundreds or thousands of objects, this becomes infeasible very quickly.

Real-world game engines use optimization techniques like spatial partitioning (e.g., Quadtrees in 2D, Octrees in 3D) to drastically reduce the number of pairs that need to be checked. These techniques group nearby objects together, so you only need to check for collisions between objects within the same group or neighboring groups.

We won't implement these complex optimizations in this course, but it's important to be aware of the performance limitations of the simple $N^2$ approach, and that alternatives are available if we ever need them.

Debug Drawing

Let's add debug drawing to visualize the WorldBounds.

To help with this, we first need a way to convert our WorldBounds rectangle from world space to screen space. Let's overload the ToScreenSpace() function to our Scene class to accept an SDL_FRect. Note this is the exact same function we walked through creating in our earlier lesson on bounding boxes:

1// Scene.h
2#pragma once
3#include <SDL.h>
4#include <vector>
5#include "AssetManager.h"
6#include "Entity.h"
7
8#define DRAW_DEBUG_HELPERS
9
10using EntityPtr = std::unique_ptr<Entity>;
11using EntityPtrs = std::vector<EntityPtr>;
12
13class Scene {
14 public:
15 
16  Vec2 ToScreenSpace(const Vec2& Pos) {/*...*/}
30
31  SDL_FRect ToScreenSpace(
32    const SDL_FRect& Rect
33  ) const {
34    Vec2 ScreenPos{ToScreenSpace(
35      Vec2{Rect.x, Rect.y})};
36    float HorizontalScaling{
37      Viewport.w / WorldSpaceWidth};
38    float VerticalScaling{
39      Viewport.h / WorldSpaceHeight};
40
41    return {
42      ScreenPos.x,
43      ScreenPos.y,
44      Rect.w * HorizontalScaling,
45      Rect.h * VerticalScaling
46    };
47  }
48  
49  // ...
50};

We'll use the DrawRectOutline() helper from Utilities.h which we created earlier in the chapter:

1// CollisionComponent.h
2// ...
3
4class CollisionComponent : public Component {
5 public:
6  // ...
7  void DrawDebugHelpers(
8    SDL_Surface* Surface) override;
9  // ...
10};

1// CollisionComponent.cpp
2// ...
3
4// For DrawRectOutline(), Round()
5#include "Utilities.h" 
6#include "Scene.h" // For ToScreenSpace() 
7// ...
8
9void CollisionComponent::DrawDebugHelpers(
10  SDL_Surface* Surface
11) {
12  // Convert world bounds to screen space for
13  // drawing onto the surface
14  SDL_FRect ScreenBoundsF{
15    GetScene().ToScreenSpace(WorldBounds)};
16  SDL_Rect ScreenBounds{
17    Utilities::Round(ScreenBoundsF)};
18
19  // Draw outline using the helper
20  Utilities::DrawRectOutline(
21    Surface,
22    ScreenBounds,
23    // Yellow
24    SDL_MapRGB(Surface->format, 255, 255, 0),
25    1 // Thin line
26  );
27}

Example Usage

Let's set up two entities in Scene.h with collision components and make one fall onto the other:

1// Scene.h
2// ...
3
4class Scene {
5 public:
6  Scene() {
7    // --- Falling Entity ---
8    EntityPtr& Player{Entities.emplace_back(
9      std::make_unique<Entity>(*this))};
10
11    Player->AddTransformComponent()
12      ->SetPosition({6, 5});
13    Player->AddPhysicsComponent()
14      ->SetMass(50.0);
15    Player->AddImageComponent("player.png");
16    Player
17        ->AddCollisionComponent()
18        // Match rough image size
19        ->SetSize(1.9, 1.7);
20
21    // --- Static Entity ---
22    EntityPtr& Floor{Entities.emplace_back(
23      std::make_unique<Entity>(*this))};
24
25    Floor->AddTransformComponent()
26      ->SetPosition({4.5, 1});
27    Floor->AddImageComponent("floor.png");
28    Floor
29        ->AddCollisionComponent()
30        ->SetSize(5.0, 2.0);
31
32    // Note the floor has no physics component
33    // so will not be affected by gravity
34  }
35
36  // ... (Rest of Scene class)
37};

Now, when you run the game, the "Player" entity will fall due to gravity (from its PhysicsComponent). As it falls, its CollisionComponent's WorldBounds will update. The Scene::CheckCollisions() loop will compare the player's bounds with the floor's bounds.

Once they overlap, you'll see "Collision detected..." messages printed to the console, and the yellow debug rectangles will visually confirm the overlap.

Screenshot showing our collision debug helpers

1Collision detected between Entity 0 and Entity 1!
2Collision detected between Entity 0 and Entity 1!
3Collision detected between Entity 0 and Entity 1!
4// ...

The player still passes through the floor because we haven't implemented any collision response yet. That's the topic for the next lesson!

Complete Code

Here are the complete CollisionComponent.h/.cpp files and the updated Scene.h/.cpp and Entity.h files incorporating the changes from this lesson.

We also updated our Entity class to allow CollisionComponents to be added and retrieved:

Finally, we added a CheckCollisions() and ToScreenSpace(SDL_FRect) functions to our Scene class. We also updated our Tick() function to call CheckCollisions():

Summary

We've successfully created a CollisionComponent that defines the physical shape of our entities for interaction. This component calculates its world-space bounding box (WorldBounds) each frame based on its owner's TransformComponent and its own offset and size properties.

We implemented a basic IsCollidingWith method using SDL's intersection functions (handling the Y-up world vs. Y-down SDL coordinate difference) and integrated a scene-level check to detect overlaps between entities. Debug drawing helps visualize these collision bounds.

Key takeaways:

CollisionComponent defines shape (Offset, Width, Height) relative to the TransformComponent origin.
WorldBounds (SDL_FRect) is calculated each frame in Tick(), incorporating owner position and scale.
The component relies on TransformComponent, checked during Initialize().
Collision detection (IsCollidingWith) compares WorldBounds of two components, requiring coordinate system adjustments for SDL functions.
Scene-level collision checks iterate through entity pairs, currently requiring $O(N^2)$ checks.
Debug drawing of WorldBounds is crucial for verifying collision shapes and detection.

Our entities can now detect collisions, but they don't yet react to them. Implementing collision response (stopping, bouncing, taking damage, etc.) will be the focus of the next lesson.

Creating a Collision Component

Starting Point

Bounding Boxes

Intersections and Relevancy Tests

Bounding Box Review

Creating the `CollisionComponent`

Updating World Bounds - `Tick()`

Dependency Check - `Initialize()`

Integrating with `Entity`

Collision Detection Logic

Intersections and Relevancy Tests

Getting Collision Rectangle

Scene-Level Collision Checking

Debug Drawing

Example Usage

Complete Code

Summary

Collision Response

Game Development with SDL2

Creating a Collision Component

Starting Point

Bounding Boxes

Intersections and Relevancy Tests

Bounding Box Review

Creating the CollisionComponent

Updating World Bounds - Tick()

Dependency Check - Initialize()

Integrating with Entity

Collision Detection Logic

Intersections and Relevancy Tests

Getting Collision Rectangle

Scene-Level Collision Checking

Debug Drawing

Example Usage

Complete Code

Summary

Collision Response

Creating the `CollisionComponent`

Updating World Bounds - `Tick()`

Dependency Check - `Initialize()`

Integrating with `Entity`