Sid Meier’s Civilization, MPS Labs, 1991

Game developer’s guide to graphical projections (with video game examples), Part 1: Introduction

Retronator Do It Yourself

TL;DR: This article series explains one of the fundamentals of drawing: how to draw three-dimensional things correctly. It’s an essential skill for artists, but it’s also a great first topic for coders that want to get started with art. Even better, we’ll learn it all by simply looking at video games (scroll to ‘Types of graphical projections’ if you’re antsy).

Drawing correctly is not an art

Going from your childhood drawings …

When in doubt, use lens flare.

… to things that look more correct …

Greetings from 2009, Matej ‘Retro’ Jan, 2008

… has a lot to do with geometry. Even if you’re not doing photorealistic drawings, following the mathematical rules of how we see our 3D world makes things much more believable, immersive.

Mad Driver, 1998 (left), Spectropolis (crop), 2015 (right), Matej ‘Retro’ Jan

The image on the right might seem cooler because it has more stuff in it, but what technically sets it apart is that all its objects work in unison. The image on the left is problematic for two reasons. One is the lack of shading (lighting), which is a huge topic we’ll leave for another time. The second problem is that each thing is drawn from its own perspective. House and cars are viewed at an angle, trees are completely top-down, the fence looks quite frontal, the swing is almost from the top, but not quite. Not to mention the scale of the cars doesn’t match the rest of the street. It just doesn’t fit together.

In game development we do a spectrum of work from creative art making to precise coding. Drawing correctly is much more on the side of coding—a rational, logical, rather than intuitive, expressive operation. This makes fixing the above problems a technical skill.

Perspective guidelines and initial lineart for Greetings from 2009, Matej ‘Retro’ Jan, 2008

Drawing in its essence is describing three-dimensional objects on a two-dimensional surface. If we forget about style, it is a process goverened by precise rules. Anyone can learn it, as much as they could learn things in geometry class. And if you didn’t like your particular geometry class, or you struggled through it, I have good news for you. It makes it much easier to learn when you have a good reason to do it, for example to create art for your own video games or draw cool illustrations.

Rebel Scum (Star Wars fan art, process animation), Matej ‘Retro’ Jan, 2005

In this article series we’ll look at exactly this topic: how to draw three-dimensional objects on a two-dimensional surface. We’ll learn about graphical projections.

Here is the big picture view:

Today we’ll just get familiar with this overview to understand the scope of the topic. Further articles will dive deep into each section and explain the details.

The series will assume you’re familiar with basic terminology of geometry such as lines, planes, vectors—even matrices, although in that case feel free to skip the information if they mean nothing to you. You’ve also probably heard of things like perspective, vanishing points, horizon line. The articles will give a much more technical definition of these terms to set the record straight, as I hear a lot of imprecise understanding thrown around.

Featuring Super Adventures in Gaming, or as they call it: “playing everything, finishing nothing, posting screenshots.”

To conclude this preamble, a huge shoutout to Super Adventures in Gaming for providing almost all of the screenshots in the series. The crew at their website posts very picturesque let’s play articles and often goes on tangents that compare different games and explore other interestabilia. If you’re a fan of Retronator Magazine for illustrating everything with images, you’ll become a big fan of Super Adventures in Gaming.

With that said, let’s begin!

Types of graphical projections

My first divide separates linear and curvilinear projections.

Justice League Task Force, Sunsoft, 1995 (left), Michael Jordan: Chaos in the Windy City, Electronic Arts, 1994

In linear projections (left), straight lines from the 3D world stay straight in the 2D image. See the window panes on the skyscraper near Superman? All straight lines.

In curvilinear (right), straight lines become curved in 2D. Some, not all. See how the roads on the ground curve, but the skyscrapers climb up straight? We’ll learn why, but don’t worry about it for now—curvilinear projection is very rarely used. It’s great when you want to show a big scene with a wide-angle lens, or even when you’re just bored of straight lines (more on that at the end of this article).

Linear projections usually break down into parallel and perspective.

Light Crusader, Treasure, 1995 (left), Simon the Sorcerer, Adventure Soft, 1993 (right)

In parallel projections (left), all lines that are parallel in the 3D world are also parallel in the 2D image. You can see in the left image that the table edges and the bricks all slope at the same angle.

In perspective projections (right), parallel lines in 3D do not always stay parallel, but can instead go toward vanishing points. Look how the floor boards in the right image go into the distance, while the tables feel close to you. This makes perspective projection more immersive, like you’re right there in the picture. Parallel projection on the other hand looks more distant, like you’re staring at the scene from far away (with good binoculars).

Parallel projections do have an advantage though. Things that move in them stay the same size, no matter where they go. This means the artists only need to draw each thing at one size.

Syndicate, Bullfrog Productions, 1993

With perspective projection, things become smaller the farther they go.

Faxanadu, Hudson Soft, 1987

The character here needed to be redrawn multiple times, taking artists’ time, and even computer memory.

Nowadays computers can do this scaling for us, which is one of the reasons why we started getting more ‘3D’ games than ‘2D’ games as the years went on. I’m using quotes because all the games we’ve seen so far are representing 3D worlds, but we call them 2D anyway because they draw their 3D worlds using 2D images (a.k.a. sprites) instead of vector or voxel 3D geometry as modern 3D games do. You can learn all about this topic in my article on pixels and voxels.

One level further down, parallel projections separate into orthographic and oblique.

Cannon Fodder 2, Sensible Software, 1994 (left), Streets of Rage, Sega, 1991 (right)

We’ll define the difference in technical terms later, but you can think of orthographic (left) as being closer to what our eyes can see in real life (if we’d look at something very far away with a telescope), whereas oblique projections (right) use some sort of distortion to show depth.

Orthographic projections further break down to multiview projections such as top or side view, and axonometric projections such as isometric and 3/4 view.

Gods, 1991 (left), Cadaver, 1990 (right), The Bitmap Brothers
Xenon, 1988 (left), Z, 1996 (right), The Bitmap Brothers

Multiview projections (left column) completely hide one of the dimensions by looking perpendicularly at the scene, while axonometric projections (right column) reveal the depth of items by looking at the scene from an angle.

Top and side view are as close to 2D as you can get as they simply ignore depth (for the most part). It’s the easiest to draw and easiest to code.

The most common oblique projection in games is cabinet and we’ll look at a couple of its variations, as well as others such as military and cavalier.

Ultima VII: The Black Gate, Origin Systems, 1992 (left), Zombies Ate My Neighbors, LucasArts, 1993 (right)
Prince of Persia, Brøderbund, 1989 (left), Indiana Jones and the Temple of Doom, Atari Games, 1985 (right)

Oblique projections retain some of the simplicity of side or top view, while not giving up on the third dimension. They’re also how early artists first drew 3D scenes before the linear perspective got perfected in the Renaissance.

One name you wouldn’t hear in Math class is Frankenstein projections, mainly because I just made them up. I use this term to describe games that combine multiple projections into the same image.

The Legend of Zelda, Nintendo, 1986 (left), Tapper, Marvin Glass and Associates, 1983 (right)
Ultima V: Warriors of Destiny, Origin Systems, 1988 (left), Ikari Warriors, SNK, 1986 (right)

They’re (more or less) poor attempts at wrestling with technological limitations of early computers while keeping high ambitions to display things in proper 3D. Well intentioned, albeit a bit ghastly.

On the less scary side of the linear divide, we’ll look at perspective projections. The common terms thrown around here are 1-point, 2-point, and 3-point perspective.

Waxworks, Horror Soft, 1992 (left), Pole Position, Namco, 1982 (right)
Wolfenstein 3D, id Software, 1992 (left), MechWarrior, Dynamix, 1989 (right)
Snatcher, Konami, 1988 (left), System Shock 2, Irrational Games and Looking Glass Studios, 1999 (right)

Without going into too much detail, items drawn in 1-point perspective (top row of images) have 1 set of parallel lines going towards a vanishing point, while the other two (horizontal and vertical lines) remain parallel.

Items in 2-point perspective (middle row) use 2 vanishing points and keep one set of lines parallel (usually horizontal or vertical).

In 3-point perspective (bottom row), no lines remain parallel after the projection—they all go to one of the 3 vanishing points.

None of these are inherently better than the other, although the former are easier to draw by hand. Computers don’t see a difference between them at all and we’ll learn that all perspective images have an infinite number of vanishing points anyway (spoiler alert).

At the end we’ll look at curvilinear projections, where straight lines don’t even stay straight anymore (most of the time). This mainly happens if we simulate seeing the scene through a lens, like our eyes and cameras do …

Broken Sword: The Shadow of the Templars, Revolution Software, 1996

… but it can also be due to heavy stylization by the artist.

Toonstruck, Burst Studios, 1996

Sometimes wrong is just right, right? It makes things more funny-looking and for a game with a good sense of humor this might just be the way to go. It’s the best example of breaking the rules after you learned them—and learn them we will, in the next articles!

Hit that clap button and continue to Part 2: Multiview.

This concludes our introductory overview. Subscribe below to be notified when the next part comes out. I’m trying to avoid another behemoth article that takes a gazillion minutes to read—instead I’ll break things down into more digestable units. If anyone wants a complete coverage they can just as easily read the whole series in one go (once I’ll have all the parts out). At least that’s the plan. Binge reading? Is that a thing yet?

See you back soon!

More Retronator on:
Patreon, Tumblr, Facebook, Twitter, YouTube, Instagram

This article was brought to you by patrons including Reuben Thiessen, Qinapses, Magnus Adamsson, Jeff Chang, … (dot dot dot), CarbonBond, Fernando Matarrubia, and Robert ‘Pande’ Kapfenberger.

Special thanks to Jose Fermoso for some editorial feedback.

Retronator Magazine

Pixel Art, Gaming & Saturated Colors