A Layman’s Guide To Projection in Videogames

Introduction

Oftentimes when a videogame has a skewed, overhead point of view, we call it isometric. That’s rarely the accurate term, though, and it’s not just pointless semantics.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Although Echochrome uses a single projection type, its gameplay is based on constantly rotating and morphing its 3D structures. With each new view, the physical architecture of the level changes to reflect what the player sees on the screen.

Projection basically means taking a three dimensional object and displaying it on a 2D plane (i.e., a screen). There are various ways of accomplishing this, and each technique has a deep impact on a game’s look and mechanics. The advent of 3D games and free-floating cameras somewhat lessened this role, but being aware of the pros and cons of each projection type is still applicable to both 2D and 3D titles.

So what exactly are these projection types? Well, let’s take a look.

1. Orthographic Projection

Orthographic projection relies on a lack of perspective and a consistent relationship between its axes. What this basically means is that things don’t recede (i.e., get smaller) as they get closer to the horizon because, well, there is no real horizon. Also, the ratios with which the axes (x, y, and z) are foreshortened and rotated are consistent across the board.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
The side, top-down, and bird’s eye Orthographic views, with some faking. In a proper Orthographic view, those clouds in Mario’s level would be displayed at the same scale as the foreground objects filling the entire background.

A side-view Orthographic projection is often simulated in platforming games, showing a scene as viewed through the player’s eyes. Moving the “camera” up a little and slightly pointing it down gives us the top-down view, and moving it all the way over the player character’s head results in a bird’s eye view.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Top-down views tend to look a little awkward rendering pyramid-shaped structures.

These views are pretty prevalent in 2D games, especially since so many of them rely on blocky tiles, but they usually end up breaking a few projection rules. This is done in order to add variety and the illusion of depth without the use of scaling (a computationally expensive process by which sprites are shrunk or enlarged).

It could be argued that a top-down view is 3D, but its height (y-axis) and depth (z-axis) occupy the same space. This type of view also fails to fully display three sides of a box, which can be easily accomplished by rotating the camera to the side and creating an Axonometric projection.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Stolen from Wikipedia, this is a comparison of the three Axonometric projections. The degrees indicate the angles between the axes, while the percentages are the shortened lengths of the sides (e.g., ~82% means that the dimension is displayed at 82 percent of its actual size).

Axonometric projections are pictorials, which basically means that they try to show all three dimensions of an object. There are three basic types of Axonometric projection, and the easiest way to tell them apart is to draw a circle around the corner of a cube where the three axes meet. This will give us the three angles between the axes, which, in turn, can be used to identify the projection type.

Axonometric projections is not how a human eye functions, though, which is why using it presents a few issues. Namely, the depth and elevation of a landscape can blend together. Still, any rough edges can be smoothed over —  art/level design can prevent architecture from wrapping around on itself — and the end result is often fairly intuitive.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
The classic flaw in using Axonometric projection: the red and blue spheres can appear to occupy the same plane, but the blue sphere is actually two “levels” higher.

In a way, these workarounds are almost a shame as Axonometric projections allow for the creation of layouts that could not possibly exist in real life, but only a handful of videogames have taken advantage of this concept. Ironically, games often strive for a unique style and hook, so it’s surprising that so few of them have tried to emulate M. C. Escher’s paintings for aesthetic and gameplay purposes, but I digress.

Here’s an overview of the three types of Axonometric projection:

  • Isometric

    In an Isometric view, the scale of all three dimensions — x, y and z — is identical, and the angle between each axis is 120 degrees. A cube projected isometrically will retain its proportions, meaning that its width, height and length will be of identical size. Also, all three faces of the cube will contain the same surface area.

    This is actually a lot harder to do on a computer than one might think. Raster-based screen displays tend to use square pixels, but only rectangular ones are inherently suitable for drawing angles that are multiples of 30 degress. A line drawn at a 30 degree angle has a 2:1 ratio between its width and height. However, drawing this line pixel by pixel, 2 pixels to the right and 1 pixel up, will not result in a 30 degree angle. High resolutions and anti-aliasing overcome this limitation by slightly distorting the line, but older games didn’t have that luxury. Instead, they used Dimetric projection.

    visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
    A 2:1 dimetrically projected cube superimposed over a grid.
  • Dimetric

    A Dimetric view is very similar to an isometric one, except it’s a bit more loose with its restrictions. Only two axes must be proportionally foreshortened and result in an identical angle (doesn’t really matter what the value of this angle is), while the third one is simply based on the remainder. This is the projection type that’s most often used in videogames and pixel art.

    Although Dimetric projection allows for various combinations of angles, the most common one is, roughly, 26.5 degrees from the horizontal plane. The reason for this is that it represents a neat 2:1 ratio — for every two horizontal pixels, we draw a vertical one. This makes it very easy to keep track of proportions and align objects.

    visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
    Head Over Heels, Landstalker, and Equinox — three classic Dimetric titles.
  • Trimetric

    A Trimetric view retains the sense of symmetry found in Isometric and Dimetric projections, but it’s a bit more stylized. The angles between all three axes are different, and, as a result, each axis is also foreshortened by a different amount. This results in a pretty distinct look that has a clear angular bias, e.g., a building “pointing” up-left will look quite a bit different from a building “pointing” up-right even if the two structures are identical.

    The advantages of Trimetric projection were clearly kept in mind by Maxis when the team was creating SimCity 4, and Paul Pedriana wrote a nice little article about it.

    visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
    A space-bending level in Crystal Castles, an iguana-on-a-stick vendor in Fallout, and a typical city in SimCity 4, all displayed via differently skewed Trimetric projections.

As an interesting side-note, all Orthographic projections follow a strict set of rules, making them very easy to do in 3D games (provided that the camera is locked at a specific angle).

2. Oblique Projection

Oblique projections are actually very similar to their Orthographic counterparts. Both techniques utilize parallel rays, but with one small difference: Orthographic rays hits the “canvas” at perpendicular angles, i.e., 90 degrees, whereas Oblique rays hit the canvas at angle between 0 and 180 that’s not 90 degrees. This results in completely arbitrary scaling of dimensions and angle proportions. Simply put, Oblique projections are not sticklers for rules, and the resulting images often appear distorted, e.g., a sphere projected obliquely will appear as an oval.

Due to this “stretching out” effect, Oblique projection hasn’t been very popular in games. It has all the disadvantages of Orthographic projection, and it tends to generally look more awkward. Still, an Oblique projection can create a unique appearance, and one if its sub-types, Cabinet projection, has enjoyed some success in videogames.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Pac-Mania, Ultima VII, and Earthbound, three games that looked a bit odd at times, but generally benefited from using Oblique projection.

Cabinet projection relies on first drawing one side of an object as it would appear looking directly at it (without any scaling or rotation). Once the “full” side is rendered, the other two sides are extended away from it in any direction, usually at a 45 degree angle. The lengths of these sides are also cut in half to help simulate a sense of depth. It’s a fairly simple approach that uses a simple, easy to remember ruleset. It was also first popularized in furniture illustrations, hence the name.

3. Perspective Projection

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Pac-Mania, Ultima VII, and Earthbound, three games that looked a bit odd at times, but generally benefited from using Oblique projection.

Unlike the above two projection types, Perspective projection relies on the concept of a focal point. The camera’s angle and position don’t really matter as the entire scene recedes out into the distance (the horizon when looking straight out, the earth’s core in a bird’s eye view, etc.). This is how actual cameras work, which, in turn, are designed to emulate the functionality of the human eye.

In art, there are various ways of doing Perspective projection via vanishing points (visit Scott McDaniel’s site for a pretty thorough overview). These are somewhat artificial, though, as they rely on approximations where straight lines are not available.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Battlezone, an old, vector-based arcade game that used Perspective projection.

Early 2D adventure games followed this approach by using Perspective illustrations for their backgrounds. These were usually all drawn using the same point of view, which made the scaling of characters a lot easier to estimate, i.e., the characters usually got smaller at the top of the screen, and larger at its bottom. Now this technique can easily create some visual oddities, but the low resolutions and consistent scaling factors kept ’em to a minimum.

Games like Grim Fandango and Resident Evil eventually took static views to another level with the implementation of fixed 3D. In fixed 3D, the backgrounds could represent an area viewed from any vantage point, and the entities it contained would be scaled according to its geometry.

Older vector-based games like Battlezone also used Perspective projection, but these were visually quite simplistic. It wasn’t until the advent of 3D games that Perspective projection became popular. These days a large proportion of games are 3D, and nearly all of them employ this technique. Of course all games use drastically different models, textures, shaders, etc., but various aspects of Perspective projection can still play a role in their overall look (namely the field of view, which I’ve mentioned before).

As a final point, despite its prevalence, Perspective projection is still just a projection, and, as such, is subject to certain flaws.

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
All three of these popular games use Perspective projection.

Conclusion

Although all 3D games use some type of projection, shoehorning 2D games into these definitions is is a bit trickier. For starters, 2D games are rarely based on actual projections of three dimensional areas. Instead, they’re artistic renditions, and as such are subject to artistic interpretation. Bird’s eye view games tend to fake perspective — especially on characters — to add detail and personality, while side-scrollers often use an Orthographic projection for the foregrounds and Perspective illustrations for the backgrounds (much like a certain M. C. Escher print).

visuals - view, Video game, trimetric, tricks, top-down, technical, raster, projection, pixel, perspective, overhead, orthographic, oblique, isometric, faking, dimetric, design, bird's eye, axonometric, art, 3d, 2D
Earthworm Jim, Axelay and A Link To the Past all combined and twisted projection types and views.

Following strict rules of projection isn’t necessary for making a good looking game, but it helps. It can also inspire some integral gameplay elements, e.g., Crush or Super Paper Mario.

The well isn’t even close to being dry, either. Some types of projection like Reverse Perspective and Anamorphic haven’t been used in games yet (at least not to my knowledge), and there are plenty of optical illusions and curiosities that could form the basis of some very interesting gameplay elements. It’s a field that’s still largely unexplored in videogames, and it’s ripe for plundering.

12 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *