Co-ordinate systems

We're using Direct3D to display our 2D world, which means we need to consider the differences between how we work with 3D and what we need for 2D, and adapt to make everything fit together. For our purposes DirectXTK will take care of most of this; however it's useful to know what's going on, and understand the concepts involved so that you can delve into advanced concepts in future to create some amazing visuals.

In 2D the world is represented as a Cartesian plane, with the X-axis representing the horizontal axis, and the Y-axis representing the vertical. Many 2D systems, including Direct3D and DirectXTK, position the co-ordinate (0, 0), also known as the origin, at the top-left corner of the screen.

3D adds a third dimension, Z, to the mix, which represents the axis perpendicular to both X and Y, heading "away" from the viewer if you view the X/Y plane head on. When referring to the camera, this represents the depth of the image, and can be translated to the 2D world to add layering and depth between the flat images.

This brings us to another topic—cameras. A camera is a virtual representation of real life cameras; they handle defining what is actually rendered on screen, and where, allowing for us to easily move the view around without messing with the entire game world.

You may be used to cameras in 3D games that have perspective (objects get smaller, the further away they are). A projection is the transformation from a 3D world to a flat 2D world, which is often called screen space. A perspective projection allows us to turn the lines and shapes of the world into a flat image that conveys depth by angling lines towards the horizon to introduce perspective.

The problem with using the perspective projection for 2D is that we may want our sprites to look 3D, but they contain no depth information. When rendered with sprites sitting behind them, they will look mismatched and wrong. This is where the Orthographic projection comes into play. An orthographic projection prevents perspective from entering the image and allows us to control the illusion of the depth in a way that fits with the 2D sprites we are using.