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
Drawing is a much more technical skill than people give it credit. You don’t need to be ‘artistic’ or ‘creative’ or ‘gifted by gods with talent’ to do it. Sure, there are big creative parts to making artwork (what to draw, how a viewer should feel, how to stylize things—to name just a few), but drawing things is very learnable, mathematical even.
Going from your childhood drawings …
… to things that look more correct …
… 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.
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.
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.
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.
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
Here is the big picture view again. Let’s focus on the split at the top.
My first divide separates linear and curvilinear projections.
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.
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.
With perspective projection, things become smaller the farther they go.
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.
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.
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.
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.
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.
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 …
… but it can also be due to heavy stylization by the artist.
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!
—Retro
More Retronator on:
Patreon, Tumblr, Facebook, Twitter, YouTube, InstagramThis 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.
