Understanding Screen & World Space

1. Account for the different size: Scale vectors down by 50% to account for the screen space being half the size of the world space. This corresponds to moving positions 50% closer to the origin.
2. Account for the different coordinate system: Invert the y coordinates to account for the screen space’s y axis pointing in the opposite direction to the world space’s y axis.
3. Account for the the different origin: Increase y coordinates by 300 units (the height of the screen space) to account for the origin being at the top left of our screen space, rather than the bottom left. Given increasing y values corresponds to moving down in screen space, this step of our transformation will move (or "translate") our vectors down.

Let’s walk through this visually so we can better understand the logic we need to implement. First, let’s just place our characters in screen space, but using their world space coordinates without transformation. This helps us see the problem we need to solve:

The horizontal position of our dwarf has shifted slightly, whilst our dragon is not even on the screen.

Step 1: Accounting for the Different Size

Let’s apply the first step of our transformation, multiplying all of the position vectors by $0.5$. This scales them down to half of their current value, which is equivalent to moving them closer to the origin:

Step 2: Accounting for the Different Coordinate System

For step 2, we negate our objects’ vertical positions by multiplying their $y$ positions by $-1$. This moves them above the desired range and out of view, but we’ve made some progress - their positions relative to each other are now correct:

Step 3: Accounting for the Different Origin

Finally, we perform step 3 of our transformation. We increase their $y$ components by $300$ which, in the screen space coordinate system, corresponds to moving the objects down by 300 units*.* This places our objects in their final, correct position:

Implementing our transformation in code could look like this:

1Vec2 ToScreenSpace(const Vec2& Position) {
2  Vec2 ReturnValue{Position};
3  
4  // 1: Scale every component by 50%
5  ReturnValue *= 0.5;
6  
7  // 2: Invert the y component
8  ReturnValue.y *= -1;
9  
10  // 3. Increase the y component.  This
11  // corresponds to moving objects downwards
12  // in the screen space
13  ReturnValue.y += 300;
14  
15  return ReturnValue;
16}

Or, equivalently:

1Vec2 ToScreenSpace(const Vec2& Pos) {
2  return {
3    Pos.x * 0.5f,
4    (Pos.y * -0.5f) + 300
5  };
6}

Note that the ordering here is important. If we translated the vectors (step 3) before scaling and inverting the y axis (steps 1 and 2), then that translation would be done within the world space’s definition of y.

We can order it in that way if we want, but it means that our translation logic would need to be adjusted. For our example spaces, we could move objects down by equivalent amounts either by decreasing y values by 600 units in world space or by increasing y values by 300 units in screen space.

Whichever approach we use, we can transform some test points to ensure our logic is correctly mapping world space positions to equivalent screen space positions:

1#include <iostream>
2#include "Vec2.h"
3
ToScreenSpace Function (Unchanged)|Show
4 Vec2 ToScreenSpace(Vec2&) {/*...*/}
11
12int main() {
13  // A position in the center of
14  // the 1400x600 world space...
15  Vec2 P{700.0, 300.0};
16
17  // ...transformed to the center
18  // of the 700x300 screen space
19  std::cout << "[SCREEN SPACE]";
20  std::cout << "\nCenter:       "
21    << ToScreenSpace(P);
22
23  std::cout << "\nBottom Left:  "
24    << ToScreenSpace({0, 0});
25  std::cout << "\nTop Left:     "
26    << ToScreenSpace({0, 600});
27  std::cout << "\nBottom Right: "
28    << ToScreenSpace({1400, 0});
29  std::cout << "\nTop Right:    "
30    << ToScreenSpace({1400, 600});
31}

1[SCREEN SPACE]
2Center:       { x = 350, y = 150 }
3Bottom Left:  { x = 0, y = 300 }
4Top Left:     { x = 0, y = 0 }
5Bottom Right: { x = 700, y = 300 }
6Top Right:    { x = 700, y = 0 }

Advanced: Transformation Matrices

In higher budget games, these transformations tend to be implemented using transformation matrices and matrix multiplication - concepts from linear algebra. Linear algebra is the formal field of mathematics that studies vectors, spaces, and their transformations.

The linear algebra approach is more advanced, so we don’t cover it in detail in this course - we’ll continue to perform our transformations using regular C++ logic.

However, we’ll briefly introduce the alternative approach in this section, and we’ll also provide an additional, optional, lesson at the end of the chapter that goes a little deeper. That additional lesson will also implement these concepts using help from GLM, a popular library that provides math utilities for working with computer graphics.

The objectives and underlying theory of why we’re performing the transformations remain the same whichever approach we use - they key difference is the low-level mechanics of how the transformation is performed. Rather than creating a function to define the transformation, we can instead define a matrix - a two-dimensional grid of numbers that represents the transformation mathematically.

For example, we created a ToScreenSpace() function in the previous section, which defines a 2D transformation. It also provides the mechanism to perform that transformation - by calling the function with a position vector:

1// Define the transformation
2Vec2 ToScreenSpace(const Vec2& Pos) {
3  return {
4    Pos.x * 0.5f,
5    (Pos.y * -0.5f) + 300
6  };
7}
8
9// Perform the transformation
10ToScreenSpace({700.0, 300.0});

That same transformation can be defined using a matrix as follows:

We typically use a math library that help with this, ensuring the desired transformation is correctly represented by positioning appropriate values in appropriate positions within the matrix. We’ll cover this in more detail in our later lesson.

We can use this matrix to transform individual vectors, or we can arrange many vectors into a single matrix, where each vector is a column.

To make our vectors compatible with the transformation process, we need to add an additional component to them. So, for a 2D vector, we’d add a third component. This component has a value of $1$ if the vector represents a position and $0$ otherwise.

The five vectors we transformed in our previous example could be arranged in the following matrix:

Performing the transformation is then done by a matrix multiplication, a process that we again typically enlist the help of 3rd party library to implement, and we’ll cover in more detail later.

Matrix transformation involves multiplying our transformation matrix by the matrix of column vectors we want to transform:

The result of this multiplication is a matrix where each of our column vectors has been transformed:

Comparing this to our earlier program using the ToScreenSpace() function, we should see both approaches have the same effect:

1Positions   World Space -> Screen Space
2Center:      (700, 300) -> (350, 150)
3Bottom Left:     (0, 0) -> (0, 300)
4Top Left:      (0, 600) -> (0, 0)
5Bottom Right: (1400, 0) -> (700, 300)
6Top Right:  (1400, 600) -> (700, 0)

The matrix approach has a few advantages:

• We don’t need to write functions for our transformations, which saves time. Whilst our function was quite simple, transformations can get a lot more complex, especially when working with 3D spaces. Matrix techniques provide a general way to quickly create and represent transformations, including those that have rotations, scalings, shearings, and more.
• Much like vector math, the rules of matrix math have useful properties that can help us solve complex problems. For example, if we have multiple transformations represented as matrices, we can combine their effects to a single transformation by multiplying those matrices together.
• Computer hardware, especially the graphics processing unit (GPU), is highly optimized for performing matrix multiplication operations. This means that these approaches are typically more performant than providing our transformations as regular C++ functions.

Summary

In more complex games, objects are typically simulated in the world space, which has different properties to the screen space. To render our object, we need to derive their screen space position based on their world space position. The key takeaways from this lesson are:

• Screen space uses pixel coordinates with the origin at the top-left corner, while world space typically uses floating-point coordinates with various possible origins.
• When transforming between spaces, we must account for differences in scale, coordinate system orientation, and origin position.
• Transformations can be implemented as direct functions or using transformation matrices for more complex operations.