Cameras and View Space

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

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

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:

Our updated Scene class is available below:

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