So far, our game objects exist effectively as single points (Vec2 Position). While great for movement, it's not enough for interactions like checking if a projectile hits a character.

This lesson tackles that by introducing bounding boxes - simple rectangular shapes that represent the space an object occupies. We'll focus on Axis-Aligned Bounding Boxes (AABBs), implement a BoundingBox class using SDL_FRect, add it to our GameObject, and learn how to draw these boxes for debugging purposes.

In the next lesson, we'll learn how to use these bounding boxes to detect when they intersect, and some practical reasons why that is useful.

Finally, we'll end the chapter by revisiting our physics system and using our new bounding boxes to let our objects physically interact with each other.

Bounding Boxes / Volumes

Let's imagine we want to add an enemy to our game that can fire projectiles that our player needs to dodge. When our player's character is represented by a simple point in space, we can't easily determine if a projectile hit them:

Image showing our dwarf character being hit by a fireball

Unfortunately, detecting which objects in our scene are colliding with each other is not something we can do directly. In real-world games, each object can have a complex shape comprising thousands of pixels (or vertices, in a 3D game) and our scene may have thousands of objects. Understanding how all of these complex shapes might be interacting on every frame is unreasonably expensive.

To help with this, we use bounding volumes. These are much simpler shapes that "bound" (or contain) all the components of a more complex object. They're not visible to players but, behind the scenes, we use them to understand how the objects in our scene are interacting.

The most common bounding volume we use is a bounding box, which is a simple rectangle in 2D, or a cuboid in 3D:

Image showing examples of bounding boxes and volumes in games

A bounding box rendered in Unreal Engine

Now, to understand if our player was hit by a fireball, we just need to do the much simpler calculation of checking whether two rectangles are overlapping:

Image showing our scene with bounding boxes

High-Accuracy Checks

Quite often, a game needs to check if something hits the actual, complex shape of an object rather than just its bounding box. Common examples include a lighting calculation to understand how an object should be rendered, or a competitive shooter where we want to check if a bullet hit the player.

Bounding box interactions alone are not accurate enough for these tasks, but they are still used as a performance optimization. Our scene can have thousands of objects and any given ray of light or bullet will hit maybe one of them. We can use our bounding volumes to quickly exclude objects from consideration because, if something didn't hit a bounding volume, we know it didn't hit anything within that volume either.

More complex projects take this idea further and create bounding volume hierarchies (BVHs) where a bounding volume contains smaller, more accurate volumes, allowing this culling process to be done recursively.

Axis-Aligned Bounding Boxes (AABBs)

In 2D games, bounding boxes are simple rectangles. Axis-aligned bounding boxes, or AABBs, are boxes whose edges are parallel to the axes of our space. More simply, we can think of AABBs as being rectangles that have not been rotated:

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

A bounding box that can be rotated is typically called an oriented bounding box, or OBB.

AABBs are friendlier and faster to work with than OBBs as the lack of rotation simplifies a lot of the calculations required to determine things like whether two bounding boxes intersect.

AABBs are also easier and more memory-efficient to represent, requiring only four scalar values in 2D, or six in 3D.

There are two main ways to represent an AABB in a two-dimensional space:

The top-left corner of the box, its width, and its height. These values are typically labelled $x$ , $y$ , $w$ , and $h$ .
The top-left corner and bottom-right corner of the box. These use values typically labelled $x_1$ , $y_1$ , $x_2$ , and $y_2$ .

Diagram showing the two ways of representing axis-aligned bounding boxes

As we've seen, SDL_Rect uses the first of these conventions, with members called x, y, w, and h. Often, we need to use both conventions within the same program, but it's relatively easy to convert one to the other.

We can calculate the bottom right corner ( $x_2, y_2$ ) of an SDL_Rect through addition:

x_2 = x + w \\ y_2 = y + h \\

If we have a box defined by $x_1$ , $y_1$ , $x_2$ , and $y_2$ values, we can calculate its width and height through subtraction:

w = x_2 - x_1 \\ h = y_2 - y_1 \\

Implementing AABBs

Our bounding boxes are defined using floating-point coordinates, so we'll represent them using an SDL_FRect. This works in the same way as an SDL_Rect except that the x, y, w, and h values are stored as float values instead of int:

src/BoundingBox.h

1#pragma once
2#include <SDL3/SDL.h>
3
4class BoundingBox {
5public:
6  BoundingBox(const SDL_FRect& InitialRect)
7  : Rect{InitialRect} {}
8
9private:
10  SDL_FRect Rect;
11};

We'll also add a SetPosition() method to move our bounding box by setting the x and y values of the SDL_FRect:

src/BoundingBox.h

1#pragma once
2#include <SDL3/SDL.h>
3#include "Vec2.h"
4
5class BoundingBox {
6public:
7  BoundingBox(const SDL_FRect& InitialRect)
8  : Rect{InitialRect} {}
9
10  void SetPosition(const Vec2& Position) {
11    Rect.x = Position.x;
12    Rect.y = Position.y;
13  }
14
15private:
16  SDL_FRect Rect;
17};

Let's update our GameObject class to give each object a BoundingBox. Our GameObject instances already have a Position variable that can be used to set the top-left corner of the bounding box. We also need to specify its width and height, so let's add those as constructor parameters:

src/GameObject.h

1// ...
2#include "BoundingBox.h"
3// ...
4
5class GameObject {
6 public:
7  GameObject(
8    const std::string& ImagePath,
9    const Vec2& InitialPosition,
10    float Width,
11    float Height,
12    const Scene& Scene
13  ) : Image{ImagePath},
14      Position{InitialPosition},
15      Scene{Scene},
16      Bounds{SDL_FRect{
17        InitialPosition.x, InitialPosition.y,
18        Width, Height
19      }}
20    {}
21
22  // ...
23
24 private:
25  // ...
26  BoundingBox Bounds;
27};

Once we've calculated our object's new Position at the end of each Tick() function, we'll notify our bounding box:

src/GameObject.h

1// ...
2
3class GameObject {
4 public:
5  // ...
6  void Tick(float DeltaTime) {
7    ApplyForce(GetFrictionForce(DeltaTime));
8    ApplyForce(GetDragForce());
9    Velocity += Acceleration * DeltaTime;
10    Position += Velocity * DeltaTime;
11
12    Acceleration = {0, 9.8f * PIXELS_PER_METER};
13    Clamp(Velocity);
14
15    // Don't fall through the floor
16    if (Position.y > 200) {
17      Position.y = 200;
18      Velocity.y = 0;
19    }
20    Bounds.SetPosition(Position); 
21  }
22  // ...
23};

Finally, let's update our scene to include the width and height of our objects. In this case, we'll just provide values that roughly match the size of the character within the image we're rendering:

src/Scene.h

1// ...
2
3class Scene {
4public:
5  Scene() {
6    Objects.emplace_back(
7      "dwarf.png",
8      Vec2{
9        2 * PIXELS_PER_METER,
10        4 * PIXELS_PER_METER
11      },
12      1.9f * PIXELS_PER_METER,
13      1.7f * PIXELS_PER_METER,
14      *this
15    );
16  }
17  // ...
18};

We've used 1.9 and 1.7 for the width and height of this object, but how do we know it's accurate? It would be helpful if we can see our bounding box to get a visual confirmation, so let's add that next.

Drawing Bounding Boxes

Normally, bounding boxes are not rendered to the screen but, when developing a complex game, it's useful to have that capability to help us understand what's going on.

We'll add a Render() function to our BoundingBox class. It needs an SDL_Surface* to draw on.

First, however, drawing our rectangle onto our surface using SDL_FillSurfaceRect() will require an SDL_Rect (integers), but our BoundingBox stores an SDL_FRect (floats). We need a helper to convert and round the coordinates.

Let's add a static helper to BoundingBox.h:

src/BoundingBox.h

1// ...
2#include <cmath>
3
4class BoundingBox {
5public:
6  // ...
7  static SDL_Rect Round(const SDL_FRect& Rect) {
8    return {
9      static_cast<int>(std::round(Rect.x)),
10      static_cast<int>(std::round(Rect.y)),
11      static_cast<int>(std::round(Rect.w)),
12      static_cast<int>(std::round(Rect.h))
13    };
14  }
15
16private:
17  SDL_FRect Rect;
18};

Now let's implement Render() in a new BoundingBox.cpp file.

Rendering Border Edges

We need to draw the outline of our bounding box. SDL3's SDL_FillSurfaceRect() can be used to draw filled rectangles.

Unlike previous examples, we don't want the full area of our rectangle to be filled with a solid color. Instead, we just want to draw it as a rectangular border, which we'll render in red:

To do this, we can simply draw four thin rectangles representing the top, bottom, left, and right edges. We'll convert our Rect to pixels, calculate the 4 rectangles representing each edge of our border, and fill them using 4 calls to SDL_FillSurfaceRect().

The top and left edges are simple:

The top-left corner of both edge rectangles match the top-left corner of our bounding box (x, y).
The top edge spans the width of our bounding box (w) and we set its height to whatever thickness we want the border to be.
The left edge spans the height of our bounding box (h) and we set its width to match our thickness

We can use this, alongside the usual rectangle-rendering techniques we covered previously, to draw our top and left edges:

src/BoundingBox.cpp

1#include <SDL3/SDL.h>
2#include "BoundingBox.h"
3
4void BoundingBox::Render(SDL_Surface* Surface) {
5  // Get pixel format details for color mapping
6  const auto* Fmt{SDL_GetPixelFormatDetails(
7    Surface->format
8  )};
9
10  Uint32 LineColor{SDL_MapRGB(
11    Fmt, nullptr, 220, 0, 0)};
12
13  SDL_Rect Rounded{Round(Rect)};
14  auto [x, y, w, h]{Rounded};
15
16  int LineWidth{4};
17
18  SDL_Rect Top{x, y, w, LineWidth};
19  SDL_Rect Left{x, y, LineWidth, h};
20
21  SDL_FillSurfaceRect(Surface, &Top, LineColor);
22  SDL_FillSurfaceRect(Surface, &Left, LineColor);
23}

For the rectangle representing the right edge, it's horizontal position needs to be based on the top-right edge of our bounding box, which will be at position (x + w, y).

However, if we draw our edge starting at x + w, that means we'll be drawing it slightly outside of our bounding box. We can intevene here to reduce this horizontal position by our LineWidth:

Diagram showing why we're moving our right edge to the left

For similar reasons, our bottom border would be drawn below the bounding box, starting at (x, y + h). We can can perform a similar intervention, moving it up by reducing it's horizontal y by the LineWidth:

src/BoundingBox.cpp

1#include <SDL3/SDL.h>
2#include "BoundingBox.h"
3
4void BoundingBox::Render(SDL_Surface* Surface) {
5  // Get pixel format details for color mapping
6  const auto* Fmt{SDL_GetPixelFormatDetails(
7    Surface->format
8  )};
9
10  Uint32 LineColor{SDL_MapRGB(
11    Fmt, nullptr, 220, 0, 0)};
12
13  SDL_Rect Rounded{Round(Rect)};
14  auto [x, y, w, h]{Rounded};
15
16  int LineWidth{4};
17
18  SDL_Rect Top{x, y, w, LineWidth};
19  SDL_Rect Left{x, y, LineWidth, h};
20  SDL_Rect Bottom{x, y + h - LineWidth, w, LineWidth};
21  SDL_Rect Right{x + w - LineWidth, y, LineWidth, h};
22
23  SDL_FillSurfaceRect(Surface, &Top, LineColor);
24  SDL_FillSurfaceRect(Surface, &Left, LineColor);
25  SDL_FillSurfaceRect(Surface, &Bottom, LineColor);
26  SDL_FillSurfaceRect(Surface, &Right, LineColor);
27}

Don't forget to add the declaration to BoundingBox.h:

src/BoundingBox.h

1// ...
2class BoundingBox {
3public:
4  // ...
5  void Render(SDL_Surface* Surface);
6
7private:
8  // ...
9};

Finally, we need to update our GameObject class to call the Render() method on our bounding box. This rendering isn't included in our shipped project - it is only used as an internal helper, so we want an easy way to remove it from our build later.

In this example, we do this using the preprocessor, which will only include our function call if the DRAW_DEBUG_HELPERS directive is set. Normally, this would be toggled on or off through our build system, but in this case we'll just #define it in the same file for demonstration:

src/GameObject.cpp

1#include <SDL3/SDL.h>
2#include "GameObject.h"
3#include "Scene.h"
4
5#define DRAW_DEBUG_HELPERS
6
7void GameObject::Render(SDL_Surface* Surface) {
8  Image.Render(Surface, Position);
9#ifdef DRAW_DEBUG_HELPERS
10  Bounds.Render(Surface);
11#endif
12}

If we run our program, we should now see our character's bounding box drawn, and its position updates as our character moves:

Screenshot showing our character moving with their bounding box

If our box is not positioned or sized correctly, we just need to update the arguments we're using to construct the SDL_FRect:

src/GameObject.h

1// ...
2
3class GameObject {
4 public:
5  GameObject(
6    const std::string& ImagePath,
7    const Vec2& InitialPosition,
8    float Width,
9    float Height,
10    const Scene& Scene
11  ) : Image{ImagePath},
12      Position{InitialPosition},
13      Scene{Scene},
14      Bounds{SDL_FRect{
15        InitialPosition.x, InitialPosition.y,
16        Width, Height
17      }}
18    {}
19
20  // ...
21
22};

Complete Code

A complete version of our BoundingBox class is included below. We have also provided the GameObject and Scene classes with the code we added in this lesson highlighted.

To keep things simple and focused on the new content, we've also removed the friction and drag calculations from previous lessons.

For reference, the GameObject.cpp file also includes the code to draw the positional indicators shown on the screenshots, but we cover this in more detail later:

Files

src

Select a file to view its content

Summary

In this lesson, we introduced axis-aligned bounding boxes (AABBs) as a simple way to represent the space occupied by game objects. We created a BoundingBox class using SDL_FRect to store its position and dimensions in screen space, integrated it into our GameObject, and updated the bounding box's position each frame.

We also implemented a rendering function to draw the bounding box outlines for debugging. Key Takeaways:

Bounding Boxes: Simple shapes (like rectangles) used to approximate complex object boundaries for efficient interaction checks.
AABBs: Axis-Aligned Bounding Boxes; rectangles that aren't rotated, simplifying calculations.
Representation: AABBs can be defined by top-left corner and dimensions (x, y, w, h). SDL_FRect uses floating-point values, suitable for pixel coordinates.
Implementation: We created a BoundingBox class storing an SDL_FRect and added it to GameObject.
Updating: The bounding box position must be updated whenever the GameObject's position changes.
Rendering: Drawing bounding boxes involves rounding floating-point coordinates to integers and drawing lines (using filled rects) along the edges.

Bounding Boxes

Bounding Boxes / Volumes

Axis-Aligned Bounding Boxes (AABBs)

Implementing AABBs

src/BoundingBox.h

src/BoundingBox.h

src/GameObject.h

src/GameObject.h

src/Scene.h

Drawing Bounding Boxes

src/BoundingBox.h

Rendering Border Edges

src/BoundingBox.cpp

src/BoundingBox.cpp

src/BoundingBox.h

src/GameObject.cpp

src/GameObject.h

Complete Code

Files

Summary

Intersections and Relevancy Tests

Game Development with SDL3