Bounding Boxes

So far, our game objects exist only 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 use 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:

Unfortunately, detecting which objects in our scene are colliding with each other is not a 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:

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:

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:

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

AABBs are friendlier and faster to work with as they simplify 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.

We’re working with 2D for now, and there are two main ways to represent an AABB in two dimensions:

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

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:

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:

Implementing AABBs

Our bounding boxes are defined in world space, so we’ll represent them using an SDL_FRect, which works in the same way as an SDL_Rect except that the x, y, w, and h values are stored as floating point numbers instead of integers:

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

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

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

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:

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

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

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

Finally, let’s update our scene to include the width and height of our objects, bearing in mind that our world space uses meters as its unit of distance.

In this case, the 1.9 and 1.7 values were chosen based on the size of the image we’re using to represent our character:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  Scene() {
7    Objects.emplace_back(
8      "dwarf.png", Vec2{6, 2}, 1.9, 1.7, *this);
9  }
10  // ...
11};

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.

To enable this, we need to be able to convert our world space bounding box to an equivalent screen space version. Our Scene class already has a ToScreenSpace() function for converting Vec2 objects from world space to screen space. We’ll overload this function with a variation that works with SDL_FRect objects.

To convert the rectangle's top-left corner (x, y), we can use our existing ToScreenSpace(Vec2) function. For the width (w) and height (h), we only need to scale them by the horizontal and vertical scaling factors, respectively:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  // ...
Vec2 Version (for reference)|Show
7  Vec2 ToScreenSpace(Vec2& Pos) {/*...*/}
19
20  SDL_FRect ToScreenSpace(const SDL_FRect& Rect) const {
21    Vec2 ScreenPos{ToScreenSpace(Vec2{Rect.x, Rect.y})};
22    float HorizontalScaling{Viewport.w / WorldSpaceWidth};
23    float VerticalScaling{Viewport.h / WorldSpaceHeight};
24
25    return {
26      ScreenPos.x,
27      ScreenPos.y,
28      Rect.w * HorizontalScaling,
29      Rect.h * VerticalScaling
30    };
31  }
32  // ...
33};

Next, we’ll add a Render() function to our BoundingBox class. We’ll need to access our Scene for the ToScreenSpace() function we just created.

We need access to the Scene object within our bounding box’s Render() method, but we can't #include the Scene header file directly in BoundingBox.h. Doing so would create a circular dependency because Scene.h includes GameObject.h, which in turn includes BoundingBox.h.

To resolve this, we can forward-declare Scene in BoundingBox.h. We then include "Scene.h" in a new implementation file - BoundingBox.cpp - where the Render() method is actually defined and needs the full Scene definition.

1// BoundingBox.h
2// ...
3
4class Scene; 
5class BoundingBox {
6public:
7  // ...
8
9 void Render(
10   SDL_Surface* Surface, const Scene& Scene);
11
12  // ...
13};

1// BoundingBox.cpp
2#include <SDL.h>
3#include "Scene.h"
4#include "BoundingBox.h"
5
6void BoundingBox::Render(
7  SDL_Surface* Surface, const Scene& Scene
8) {
9  // ...
10}

In addition to converting our bounding box’s SDL_FRect to screen space, we also need to round its x, y, w, and h floating point numbers to integers to specify which pixels they occupy on the SDL_Surface.

To do this rounding, we’ll create a function for converting SDL_FRect objects to SDL_Rects.

This rounding conversion is a general utility function. Often, you'd place such utilities in a separate header file. For simplicity in this lesson, we'll add it directly to our BoundingBox class:

1// BoundingBox.h
2// ...
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  // ...
16};

Since the Round() function doesn't need access to any specific BoundingBox object's data (like Rect), we can declare it as static.

This makes it usable even in situations where we don’t have a bounding box instance - we can invoke it using BoundingBox::Round() in those scenarios.

We can now combine our ToScreenSpace() and Round() functions to get our bounding box in screen space, and with its components as rounded int values:

1// BoundingBox.cpp
2// ...
3
4void BoundingBox::Render(
5  SDL_Surface* Surface, const Scene& Scene
6) {
7  auto [x, y, w, h]{
8    Round(Scene.ToScreenSpace(Rect))};
9    
10  // ...
11};

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:

To do this, we can draw four lines - one for each of the top, bottom, left, and right edges. To draw each line, we can simply render a thin rectangle.

For example, our top border will start at the top left of our bounding box and span its full width. As such, it will share its x, y, and w values. However, the height (h) of this rectangle will be much shorter, representing the thickness of our line.

Let’s set that up:

1// BoundingBox.cpp
2// ...
3
4void BoundingBox::Render(
5  SDL_Surface* Surface, const Scene& Scene
6) {
7  auto [x, y, w, h]{
8    Round(Scene.ToScreenSpace(Rect))};
9    
10  int LineWidth{4};
11  SDL_Rect Top{x, y, w, LineWidth};
12  // ...
13};

We can draw the rectangle representing our line in the usual way, passing the surface, rectangle, and color to SDL_FillRect():

1// BoundingBox.cpp
2// ...
3
4void BoundingBox::Render(
5  SDL_Surface* Surface, const Scene& Scene
6) {
7  auto [x, y, w, h]{
8    Round(Scene.ToScreenSpace(Rect))};
9    
10  int LineWidth{4};
11  SDL_Rect Top{x, y, w, LineWidth};
12    
13  Uint32 LineColor{SDL_MapRGB(
14    Surface->format, 220, 0, 0)};  
15  SDL_FillRect(Surface, &Top, LineColor); 
16}

Let’s draw our other edges by following the same logic. Because each SDL_Rect defines the top left corner of where the rectangle will be drawn, the right edge will draw slightly outside of our bounding box if we don’t intervene.

To fix this, we move it left by reducing its x value based on our LineWidth:

The bottom edge will have a similar problem where it is rendered below our bounding box, so we need to move it up by the LineWidth value. Because we’re working with screen space values at this point in our function, moving up corresponds to reducing the y value.

Putting everything together looks like this:

1// BoundingBox.cpp
2// ...
3
4void BoundingBox::Render(
5  SDL_Surface* Surface, const Scene& Scene
6) {
7  auto [x, y, w, h]{
8    Round(Scene.ToScreenSpace(Rect))};
9    
10  int LineWidth{4};
11  Uint32 LineColor{SDL_MapRGB(
12    Surface->format, 220, 0, 0)};
13    
14  SDL_Rect Top{x, y, w, LineWidth};
15  SDL_Rect Left{x, y, LineWidth, h};
16  SDL_Rect Bottom{
17    x, y + h - LineWidth, w, LineWidth};
18  SDL_Rect Right{
19    x + w - LineWidth, y, LineWidth, h};
20
21  SDL_FillRect(Surface, &Top, LineColor);
22  SDL_FillRect(Surface, &Left, LineColor);
23  SDL_FillRect(Surface, &Bottom, LineColor);
24  SDL_FillRect(Surface, &Right, LineColor);
25}

Finally, we need to update our GameObject class to call the Render() method on our bounding box. We only want the bounding boxes to be drawn when we’re debugging our program, so this is a scenario where we might want to use a preprocessor directive:

1// GameObject.cpp
2// ...
3#include "BoundingBox.h" 
4
5#define DRAW_BOUNDING_BOXES 
6
7void GameObject::Render(SDL_Surface* Surface) {
8  Image.Render(
9    Surface, Scene.ToScreenSpace(Position)
10  );
11#ifdef DRAW_BOUNDING_BOXES 
12  Bounds.Render(Surface, Scene); 
13#endif 
14}
15
16// ...

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

Note that our screenshots include additional trajectory lines to show how objects move. The code to render these lines is included in the GameObject.cpp file below for those interested.

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:

1#pragma once
2#include <SDL.h>
3#include "Vec2.h"
4
5class Scene;
6class BoundingBox {
7public:
8  BoundingBox(const SDL_FRect& InitialRect)
9  : Rect{InitialRect} {}
10
11  void SetPosition(const Vec2& Position) {
12    Rect.x = Position.x;
13    Rect.y = Position.y;
14  }
15
16  static SDL_Rect Round(const SDL_FRect& Rect) {
17    return {
18      static_cast<int>(std::round(Rect.x)),
19      static_cast<int>(std::round(Rect.y)),
20      static_cast<int>(std::round(Rect.w)),
21      static_cast<int>(std::round(Rect.h))
22    };
23  }
24
25 void Render(
26   SDL_Surface* Surface, const Scene& Scene
27 );
28
29private:
30  SDL_FRect Rect;
31};

1#include <SDL.h>
2#include "Scene.h"
3#include "BoundingBox.h"
4
5void BoundingBox::Render(
6  SDL_Surface* Surface, const Scene& Scene
7) {
8  int LineWidth{4};
9  Uint32 LineColor{
10    SDL_MapRGB(Surface->format, 220, 0, 0)};
11
12  auto [x, y, w, h]{
13    Round(Scene.ToScreenSpace(Rect))};
14  SDL_Rect Top{x, y, w, LineWidth};
15  SDL_Rect Bottom{
16    x, y + h - LineWidth, w, LineWidth};
17  SDL_Rect Left{x, y, LineWidth, h};
18  SDL_Rect Right{
19    x + w - LineWidth, y, LineWidth, h};
20
21  SDL_FillRect(Surface, &Top, LineColor);
22  SDL_FillRect(Surface, &Bottom, LineColor);
23  SDL_FillRect(Surface, &Left, LineColor);
24  SDL_FillRect(Surface, &Right, LineColor);
25}

1#pragma once
2#include <SDL.h>
3#include <vector>
4#include "GameObject.h"
5
6class Scene {
7public:
8  Scene() {
9    Objects.emplace_back(
10      "dwarf.png", Vec2{6, 2}, 1.9, 1.7, *this);
11  }
12
13  Vec2 ToScreenSpace(const Vec2& Pos) const {
14    auto [vx, vy, vw, vh]{Viewport};
15    float HorizontalScaling{vw / WorldSpaceWidth};
16    float VerticalScaling{vh / WorldSpaceHeight};
17
18    return {
19      vx + Pos.x * HorizontalScaling,
20      vy + (WorldSpaceHeight - Pos.y)
21        * VerticalScaling
22    };
23  }
24
25  SDL_FRect ToScreenSpace(const SDL_FRect& Rect) const {
26    Vec2 ScreenPos{ToScreenSpace(Vec2{Rect.x, Rect.y})};
27    float HorizontalScaling{Viewport.w / WorldSpaceWidth};
28    float VerticalScaling{Viewport.h / WorldSpaceHeight};
29
30    return {
31      ScreenPos.x,
32      ScreenPos.y,
33      Rect.w * HorizontalScaling,
34      Rect.h * VerticalScaling
35    };
36  }
37
38  Vec2 ToWorldSpace(const Vec2& Pos) const {
39    auto [vx, vy, vw, vh]{Viewport};
40    float HorizontalScaling{WorldSpaceWidth / vw};
41    float VerticalScaling{WorldSpaceHeight / vh};
42
43    return {
44      (Pos.x - vx) * HorizontalScaling,
45      WorldSpaceHeight - (Pos.y - vy)
46        * VerticalScaling
47    };
48  }
49
50  void HandleEvent(SDL_Event& E) {
51    for (GameObject& Object : Objects) {
52      Object.HandleEvent(E);
53    }
54  }
55
56  void Tick(float DeltaTime) {
57    for (GameObject& Object : Objects) {
58      Object.Tick(DeltaTime);
59    }
60  }
61
62  void Render(SDL_Surface* Surface) {
63    SDL_GetClipRect(Surface, &Viewport);
64    for (GameObject& Object : Objects) {
65      Object.Render(Surface);
66    }
67  }
68
69private:
70  SDL_Rect Viewport;
71  std::vector<GameObject> Objects;
72  float WorldSpaceWidth{14}; // meters
73  float WorldSpaceHeight{6}; // meters
74};

1// GameObject.h
2#pragma once
3#include <SDL.h>
4
5#include "BoundingBox.h"
6#include "Vec2.h"
7#include "Image.h"
8
9class Scene;
10
11class GameObject {
12 public:
13  GameObject(
14    const std::string& ImagePath,
15    const Vec2& InitialPosition,
16    float Width,
17    float Height,
18    const Scene& Scene
19  ) : Image{ImagePath},
20      Position{InitialPosition},
21      Scene{Scene},
22      Bounds{SDL_FRect{
23        InitialPosition.x, InitialPosition.y,
24        Width, Height
25      }}
26    {}
27
28  void HandleEvent(const SDL_Event& E);
29
30  void Tick(float DeltaTime) {
31    ApplyForce(FrictionForce(DeltaTime));
32    ApplyForce(DragForce());
33    Velocity += Acceleration * DeltaTime;
34    Position += Velocity * DeltaTime;
35
36    Acceleration = {0, -9.8};
37
38    // Don't fall through the floor
39    if (Position.y < 2) {
40      Position.y = 2;
41      Velocity.y = 0;
42    }
43    Bounds.SetPosition(Position);
44    Clamp(Velocity);
45  }
46
47  void Render(SDL_Surface* Surface);
48
49  void ApplyForce(const Vec2& Force) {
50    Acceleration += Force / Mass;
51  }
52
53 private:
54  Image Image;
55  const Scene& Scene;
56
57  Vec2 Position{0, 0};
58  Vec2 Velocity{0, 0};
59  Vec2 Acceleration{0, -9.8};
60  float Mass{70};
61  BoundingBox Bounds;
62
63  float DragCoefficient{0.2};
64  Vec2 DragForce() const {
65    return -Velocity * DragCoefficient
66      * Velocity.GetLength();
67  }
68
69  float GetFrictionCoefficient() const {
70    if (Position.y > 2) {
71      return 0;
72    }
73
74    return 0.5;
75  }
76  
77  Vec2 FrictionForce(float DeltaTime) const {
78    float MaxMagnitude{GetFrictionCoefficient()
79      * Mass * -Acceleration.y};
80    if (MaxMagnitude <= 0) return Vec2(0, 0);
81
82    float StoppingMagnitude{Mass *
83      Velocity.GetLength() / DeltaTime};
84
85    return -Velocity.Normalize() * std::min(
86      MaxMagnitude, StoppingMagnitude);
87  }
88
89  void Clamp(Vec2& V) const {
90    V.x = std::abs(V.x) > 0.01 ? V.x : 0;
91    V.y = std::abs(V.y) > 0.01 ? V.y : 0;
92  }
93
94  void ApplyImpulse(const Vec2& Impulse) {
95    Velocity += Impulse / Mass;
96  }
97
98  void ApplyPositionalImpulse(
99    const Vec2& Origin, float Magnitude
100  ) {
101    Vec2  Displacement{Position - Origin};
102    Vec2  Direction{Displacement.Normalize()};
103    float Distance{Displacement.GetLength()};
104  
105    // Apply inverse-square law with a small
106    // offset to prevent extreme forces
107    float AdjustedMagnitude{Magnitude /
108      ((Distance + 0.1f) * (Distance + 0.1f))};
109  
110    ApplyImpulse(Direction * AdjustedMagnitude);
111  }
112};

1#include <SDL.h>
2#include "GameObject.h"
3#include "Scene.h"
4#include "BoundingBox.h"
5
6#define DRAW_BOUNDING_BOXES
7#define DRAW_TRAJECTORIES
8
9#ifdef DRAW_TRAJECTORIES
10namespace{
11SDL_Surface* Trajectories{
12  SDL_CreateRGBSurfaceWithFormat(
13    0, 700, 300, 32,
14    SDL_PIXELFORMAT_RGBA32
15  )};
16}
17#endif
18
19void GameObject::Render(SDL_Surface* Surface) {
20#ifdef DRAW_TRAJECTORIES
21  auto [x, y]{Scene.ToScreenSpace(Position)};
22  SDL_Rect PositionIndicator{
23    int(x)-16, int(y), 20, 20};
24  SDL_FillRect(
25    Trajectories, &PositionIndicator,
26    SDL_MapRGB(Trajectories->format, 220, 0, 0)
27  );
28                   
29  SDL_BlitSurface(
30    Trajectories, nullptr, Surface, nullptr
31  );
32#endif
33  Image.Render(Surface, Scene.ToScreenSpace(Position));
34#ifdef DRAW_BOUNDING_BOXES
35  Bounds.Render(Surface, Scene);
36#endif
37}
38
39void GameObject::HandleEvent(const SDL_Event& E) {
40  if (E.type == SDL_MOUSEBUTTONDOWN) {
41    // Create explosion at click position
42    if (E.button.button == SDL_BUTTON_LEFT) {
43      ApplyPositionalImpulse(
44        Scene.ToWorldSpace({
45          static_cast<float>(E.button.x),
46          static_cast<float>(E.button.y)
47      }), 1000);
48    }
49  } else if (E.type == SDL_KEYDOWN) {
50    // Jump
51    if (E.key.keysym.sym == SDLK_SPACE) {
52      if (Position.y > 2) return;
53      ApplyImpulse({0.0f, 300.0f});
54    }
55  }
56}

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 world 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, requiring coordinate space conversion and rounding. 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) or by two opposing corners. SDL_FRect uses the former with floats.
• 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 converting world coordinates to screen coordinates and rounding to integer pixel values (from SDL_FRect to SDL_Rect) before drawing.

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