Cameras and View Space

In most games, the player cannot view the entire game world at the same time. Rather, we can imagine the player moving a virtual camera around the world and what that camera sees determines what appears on the player’s screen.

In a top-down game, for example, they might move that camera by clicking and dragging their mouse. In an action game, the camera is attached to the player they’re controlling. As such, we need to show the world from the perspective of that camera. This view is another example of a space, commonly called the view space or camera space.

In this lesson, we'll explore how view space works, we’ll implement camera movement controls, and create character-following mechanics.

We’ll be using the Vec2 struct we created earlier. A complete version of it is available below:

1#pragma once
2#include <iostream>
3
4struct Vec2 {
5  float x;
6  float y;
7
8  float GetLength() const {
9    return std::sqrt(x * x + y * y);
10  }
11
12  float GetDistance(const Vec2& Other) const {
13    return (*this - Other).GetLength();
14  }
15
16  Vec2 Normalize() const {
17    return *this / GetLength();
18  }
19
20  Vec2 operator*(float Multiplier) const {
21    return Vec2{x * Multiplier, y * Multiplier};
22  }
23
24  Vec2 operator/(float Divisor) const {
25    if (Divisor == 0.0f) { return Vec2{0, 0}; }
26
27    return Vec2{x / Divisor, y / Divisor};
28  }
29
30  Vec2& operator*=(float Multiplier) {
31    x *= Multiplier;
32    y *= Multiplier;
33    return *this;
34  }
35
36  Vec2& operator/=(float Divisor) {
37    if (Divisor == 0.0f) { return *this; }
38
39    x /= Divisor;
40    y /= Divisor;
41    return *this;
42  }
43
44  Vec2 operator+(const Vec2& Other) const {
45    return Vec2{x + Other.x, y + Other.y};
46  }
47
48  Vec2 operator-(const Vec2& Other) const {
49    return *this + (-Other);
50  }
51
52  Vec2& operator+=(const Vec2& Other) {
53    x += Other.x;
54    y += Other.y;
55    return *this;
56  }
57
58  Vec2& operator-=(const Vec2& Other) {
59    return *this += (-Other);
60  }
61
62  Vec2 operator-() const {
63    return Vec2{-x, -y};
64  }
65};
66
67inline Vec2 operator*(float M, const Vec2& V) {
68  return V * M;
69}
70
71inline std::ostream& operator<<(
72  std::ostream& Stream, const Vec2& V) {
73  Stream << "{ x = " << V.x
74    << ", y = " << V.y << " }";
75  return Stream;
76}

We’ll also be building upon the scene rendering architecture we created in the previous lesson:

1#pragma once
2#include <SDL.h>
3#include <vector>
4#include "GameObject.h"
5
6class Scene {
7public:
8  Scene() {
9    Objects.emplace_back("dwarf.png", Vec2{100, 200}, *this);  
10    Objects.emplace_back("dragon.png", Vec2{800, 500}, *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) * VerticalScaling
21    };
22  }
23
24  void HandleEvent(SDL_Event& E) {
25    for (GameObject& Object : Objects) {
26      Object.HandleEvent(E);
27    }
28  }
29
30  void Tick() {
31    for (GameObject& Object : Objects) {
32      Object.Tick();
33    }
34  }
35
36  void Render(SDL_Surface* Surface) {
37    SDL_GetClipRect(Surface, &Viewport);
38    for (GameObject& Object : Objects) {
39      Object.Render(Surface);
40    }
41  }
42
43private:
44  SDL_Rect Viewport;
45  std::vector<GameObject> Objects;
46  float WorldSpaceWidth{1400};
47  float WorldSpaceHeight{600};
48};

1#pragma once
2#include <SDL.h>
3#include "Vec2.h"
4#include "Image.h"
5
6class Scene;
7
8class GameObject {
9 public:
10  GameObject(
11    const std::string& ImagePath,
12    const Vec2& InitialPosition,
13    const Scene& Scene ) : Image{ImagePath},
14                           Position{InitialPosition},
15                           Scene{Scene} {}
16
17  void HandleEvent(SDL_Event& E) {}
18  void Tick() {}
19  void Render(SDL_Surface* Surface);
20  Vec2 Position;
21
22 private:
23  Image Image;
24  const Scene& Scene;
25};

1#include <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, Scene.ToScreenSpace(Position));
9#ifdef DRAW_DEBUG_HELPERS
10  auto [x, y]{Scene.ToScreenSpace(Position)};
11  SDL_Rect PositionIndicator{
12    int(x) - 10, int(y) - 10, 20, 20};
13  SDL_FillRect(
14    Surface, &PositionIndicator,
15    SDL_MapRGB(Surface->format, 220, 0, 0)
16  );
17#endif
18}

View Space

Let’s add a virtual camera to our Scene class. In the minimalist, two-dimensional case, the only property our camera really needs is its position in world space, so our camera can be represented by a simple Vec2:

1class Scene {
2  // ...
3private:
4  Vec2 CameraPosition{0, 0}; // World Space
5  // ...
6}

Somewhat counterintuitively, to create the illusion of a camera moving through our world, it’s more helpful to imagine that the world is instead moving around a stationary camera.

For example, if we wanted to create the illusion of our virtual camera moving to the left, we instead need to move everything in the world to the right:

1class Scene {
2  // ...
3private:
4  Vec2 CameraPosition{0, 0}; // World Space
5  
6  Vec2 ToViewSpace(const Vec2& Pos) const {
7    return {
8      Pos.x - CameraPosition.x,
9      Pos.y - CameraPosition.y
10    };
11  }
12  // ...
13}

1class Scene {
2  // ...
3private:
4  Vec2 CameraPosition{0, 0}; // World Space
5  
6  Vec2 ToViewSpace(const Vec2& Pos) const {
7    // Before
8    return {
9      Pos.x - CameraPosition.x,
10      Pos.y - CameraPosition.y
11    };
12    
13    // After
14    return Pos - CameraPosition;
15  }
16  // ...
17}

Let’s update our transformation pipeline to use our ToViewSpace() function. We need to transform our points from world space to view space based on the camera, and then from view space to screen space based on the viewport properties.

Because we’re defining our camera’s position in world space, it’s important that we perform the view space transformations before we convert our vectors to their screen space representations:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  Vec2 ToScreenSpace(const Vec2& Pos) const {
7    // Transform to view space...
8    auto [x, y]{ToViewSpace(Pos)};
9    
10    // ...then to screen space
11    auto [vx, vy, vw, vh]{Viewport};
12    float HorizontalScaling{vw / WorldSpaceWidth};
13    float VerticalScaling{vh / WorldSpaceHeight};
14    
15    return {
16      vx + Pos.x * HorizontalScaling, 
17      vx + x * HorizontalScaling,
18      vy + (WorldSpaceHeight - Pos.y) * VerticalScaling 
19      vy + (WorldSpaceHeight - y) * VerticalScaling
20    };
21  }
22  
23  // ...
24}

1// Scene.h
2// ...
3
4class Scene {
5public:
6  Vec2 CameraPosition{0, 0}; // Screen Space 
7  Vec2 ToScreenSpace(const Vec2& Pos) const {
8    auto [vx, vy, vw, vh]{Viewport};
9    float HorizontalScaling{vw / WorldSpaceWidth};
10    float VerticalScaling{vh / WorldSpaceHeight};
11
12    return ToViewSpace({
13      vx + Pos.x * HorizontalScaling,
14      vy + (WorldSpaceHeight - Pos.y) * VerticalScaling
15    });
16  }
17  
18  // ...
19}

Camera Movement

Currently, our camera’s position is $(0, 0)$, so our scene should look the same as before:

Let’s move our camera to the right and up to confirm our view updates as expected. Given our camera’s position is in world space, we move it right by increasing it’s x position, and up by increasing it’s y position:

1// Scene.h
2// ...
3
4class Scene {
5// ...
6private:
7  // ...
8  Vec2 CameraPosition{300, 50}; // World space 
9}

Currently, our view space is defined very similarly to our world space. The only difference is that, in world space, the origin represents the bottom-left of the world whilst, in view space, the origin represents the location of the camera.

We can visualize the difference as the view space being offset from the world space. The direction and magnitude of that offset is controlled by the CameraPosition vector:

Remember, view space represents the scene as viewed from the perspective of the camera. In view space, the camera doesn’t move - it is always at the origin - $(0, 0)$.

To simulate the effect of a movable camera, we convert world space positions (highlighted in green) to equivalent view space positions (highlighted in blue) by moving them in the opposite direction of the CameraPosition vector.

For example, if our camera moves up and to the right, then from the perspective of the camera, the objects will move down and to the left:

The code in our current ToViewSpace() function implements this:

1class Scene {
2  // ...
3private:
4  Vec2 CameraPosition{0, 0}; // World Space
5  
6  Vec2 ToViewSpace(const Vec2& Pos) const {
7    return {
8      Pos.x - CameraPosition.x,
9      Pos.y - CameraPosition.y
10    };
11  }
12  // ...
13}

Field of View

If our CameraPosition is $(0, 0)$, our world space and view space are identical, so effectively no transformation happens. As such, our scene would look like this:

However, if we imagined a real camera positioned at $(0, 0)$ in our world, this is not exactly what we’d expect the camera to see. We currently have the view space defined as below, where the origin is indeed the location of the camera, but the camera can only see things to its top right:

Instead, we want the camera to sees things "in front" of it. We can represent this as a rectangle positioned such that the camera is in the center of it. Or, equivalently, a view space where the origin represents the center:

The size of this rectangle is determined by the camera’s field of view. For now, we’ll keep things simple and make our field of view the same size as our world space - a 1400 x 600 rectangle.

To transform our objects from world space to the definition of view space that includes the origin change, our ToViewSpace() function needs to be slightly expanded. Visually, we can imagine one way of achieving our goal would be moving our camera down and to the left by half of our rectangle’s height and width:

But again, our camera doesn’t really move in view space - it’s position is always $(0, 0)$. So instead, we replicate the effect by moving our objects by the same amount but in the opposite direction - up and to the right.

In view space, we move objects right by increasing their x position, and up by increasing their y position:

1// Scene.h
2// ...
3
4class Scene {
5// ...
6private:
7  Vec2 ToViewSpace(const Vec2& Pos) const {
8    // Before
9    return {
10      Pos.x - CameraPosition.x,
11      Pos.y - CameraPosition.y
12    };
13    
14    // After
15    return {
16      (Pos.x - CameraPosition.x) + WorldSpaceWidth / 2,
17      (Pos.y - CameraPosition.y) + WorldSpaceHeight / 2
18    };
19  }
20  // ...
21};

We should now see the view we’d expect from a camera positioned at $(0, 0)$ in the world space:

We can reposition our camera to the center of the world space to get our original perspective back, but now calculated using a fully implemented view space transformation:

1// Scene.h
2// ...
3
4class Scene {
5// ...
6private:
7  // Unchanged
8  float WorldSpaceWidth{1400};
9  float WorldSpaceHeight{600};
10  // ...
11  
12  Vec2 CameraPosition{
13    WorldSpaceWidth / 2, WorldSpaceHeight / 2 
14  }
15};

Orthographic and Perspective Projection

This example of representing the camera’s field of view as a simple rectangle is called an orthographic projection. It is commonly used in 2D scenes as, by their nature, our scenes have no depth. Depth would be a third dimension and, in 3D scenes, it is typically labelled $z$.

In 3D scenes, creating a realistic camera is more complex due to this depth. Depth creates the illusion that objects, and the spaces between objects, appear smaller the further away they are from the camera.

Creating this effect involves the field of view being modeled as a frustum - a volume that grows in size as the distance from the camera increases:

Image Credit: Jakob Killian

The process of mapping the objects in this three-dimensional view space to a two-dimensional space, such as screen space, is called perspective projection. We cover 3D cameras and perspective projection in more detail later in the course.

Player-Controlled Camera

Let’s update our scene to give players control of the camera. Our scene is already receiving events through it’s HandleEvent() functions. We can examine the events flowing through our scene to detect if the player has pressed one of their arrow keys.

If they have, we can update our camera’s position:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  // ... 
7  void HandleEvent(SDL_Event& E) {
8    if (E.type == SDL_KEYDOWN) {
9      switch (E.key.keysym.sym) {
10        case SDLK_LEFT:
11          CameraPosition.x -= 20;
12          break;
13        case SDLK_RIGHT:
14          CameraPosition.x += 20;
15          break;
16        case SDLK_UP:
17          CameraPosition.y += 20;
18          break;
19        case SDLK_DOWN:
20          CameraPosition.y -= 20;
21          break;
22      }
23    }
24
25    for (GameObject& Object : Objects) {
26      Object.HandleEvent(E);
27    }
28  }
29  // ...
30}

Attached Cameras

In many games, the camera is attached to some other object in the scene, often the character that the player is controlling. We can replicate this in a few ways. The most direct is to simply examine the player character’s position, and set the camera’s position accordingly.

1CameraPosition = Player.Position;

In cases like this, we should be mindful of when our objects are being updated in each iteration of our game loop. To prevent our camera lagging one frame behind the player, we should set the camera’s position after the player’s position has been updated for the next frame, but before we start rendering that frame.

In our case, our player can’t move yet, but a good time in general to perform the update would be after our player-controlled character ticks, but before the scene renders. We’ll assume the GameObject that the player is controlling is the first in the scene’s Objects array:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  // ...
7  void Render(SDL_Surface* Surface) {
8    CameraPosition = Objects[0].Position; 
9    
10    // Remaining code unmodified
11    SDL_GetClipRect(Surface, &Viewport);
12    for (GameObject& Object : Objects) {
13      Object.Render(Surface);
14    }
15  }
16  // ...
17};

Our camera should now center its view on the player character. Remember that the player’s Position denotes the top-left corner of their image, so our object’s rendered appearance will appear slightly lower and to the right of their actual Position:

Let’s update our HandleEvent() so that arrow keys move the player instead of the camera:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  // ...
7  void HandleEvent(SDL_Event& E) {
8    if (E.type == SDL_KEYDOWN) {
9      switch (E.key.keysym.sym) {
10        case SDLK_LEFT:
11          Objects[0].Position.x -= 20;
12          break;
13        case SDLK_RIGHT:
14          Objects[0].Position.x += 20;
15          break;
16        case SDLK_UP:
17          Objects[0].Position.y += 20;
18          break;
19        case SDLK_DOWN:
20          Objects[0].Position.y -= 20;
21          break;
22      }
23    }
24
25    for (GameObject& Object : Objects) {
26      Object.HandleEvent(E);
27    }
28  }
29  // ...
30};

The player can now move their character around the scene. And, because the camera is attached to the player’s character, the camera will indirectly move too:

Typically, we don’t want the camera to match the character’s position exactly. Most games want to apply some offset to the positioning, such that the scene is framed in a way that looks better.

Below, our camera still follows the player character, but is positioned 600 units to the right, and 100 units higher:

1// Scene.h
2// ...
3
4class Scene {
5public:
6  // ...
7  void Render(SDL_Surface* Surface) {
8    CameraPosition = Objects[0].Position
9      + Vec2{600, 100};
10      
11    // Unchanged
12    SDL_GetClipRect(Surface, &Viewport);
13    for (GameObject& Object : Objects) {
14      Object.Render(Surface);
15    }
16  }
17  // ...
18};

This returns us to our original composition, where our dwarf is currently positioned at $(100, 200)$, and our camera is attached to the dwarf but with a $(600, 100)$ offset. Adding these, we get a final camera position of $(700, 300)$, which is at centre of our simple world:

Complete Code

Our updated Scene class is available below:

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{100, 200}, *this);  
11    Objects.emplace_back(
12      "dragon.png", Vec2{800, 500}, *this);
13  }
14
15  Vec2 ToScreenSpace(const Vec2& Pos) const {
16    auto [vx, vy, vw, vh]{Viewport};
17    float HorizontalScaling{vw / WorldSpaceWidth};
18    float VerticalScaling{vh / WorldSpaceHeight};
19    
20    auto [x, y] {ToViewSpace(Pos)};
21    return {
22      vx + x * HorizontalScaling,
23      vy + (WorldSpaceHeight - y) * VerticalScaling
24    };
25  }
26
27  void HandleEvent(SDL_Event& E) {
28    if (E.type == SDL_KEYDOWN) {
29      switch (E.key.keysym.sym) {
30        case SDLK_LEFT:
31          Objects[0].Position.x -= 20;
32          break;
33        case SDLK_RIGHT:
34          Objects[0].Position.x += 20;
35          break;
36        case SDLK_UP:
37          Objects[0].Position.y += 20;
38          break;
39        case SDLK_DOWN:
40          Objects[0].Position.y -= 20;
41          break;
42      }
43    }
44
45    for (GameObject& Object : Objects) {
46      Object.HandleEvent(E);
47    }
48  }
49
50  void Tick() {
51    for (GameObject& Object : Objects) {
52      Object.Tick();
53    }
54  }
55
56  void Render(SDL_Surface* Surface) {
57    CameraPosition = Objects[0].Position
58      + Vec2{600, 100};
59    SDL_GetClipRect(Surface, &Viewport);
60    for (GameObject& Object : Objects) {
61      Object.Render(Surface);
62    }
63  }
64
65private:
66  Vec2 ToViewSpace(const Vec2& Pos) const {
67    return {
68      (Pos.x - CameraPosition.x) + WorldSpaceWidth / 2,
69      (Pos.y - CameraPosition.y) + WorldSpaceHeight / 2
70    };
71  }
72 
73  SDL_Rect Viewport;
74  std::vector<GameObject> Objects;
75  float WorldSpaceWidth{1400};
76  float WorldSpaceHeight{600};
77  Vec2 CameraPosition{
78    WorldSpaceWidth / 2, WorldSpaceHeight / 2
79  };
80};

Summary

In this lesson, we've explored the techniques involved in creating a 2D camera system that can be controlled directly or attached to a game character. Key takeaways:

• Camera systems use coordinate space transformations to create the illusion of movement through the game world
• Converting between world space and view space requires understanding the camera's position and field of view
• In 2D games, cameras typically use orthographic projections which represent a simple rectangular view
• Camera positioning can be manually controlled or automatically attached to follow characters
• Applying offsets to attached cameras allows for better visual composition of game scenes
• Coordinate transformations should happen in the correct order: world space → view space → screen space

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