Basic Illumination for Games, Part 1: Applying art concepts on interactive media

With Global Illumination now taking the default seat in game engines from Unreal to Unity, the technological status quo of development raises the bar higher than ever. This is, of course, AWESOME… in some ways. It allows indie artists to achieve a graphical fidelity that can keep up with current AAA games. This also means they have more tools available to create unique aesthetics that would have been technologically impossible otherwise. But, as always, this can also lead to overconfidence when dealing with the fundamentals of what these technologies were designed for.

I’m writing this article to remind the basics of illumination and to examine how they’re applied on games. This article is aimed mainly at newcomers, developers with no artistic background, and to artists without developer background that wish to see how basic concepts translate to interactive media… or just to people who want to refresh these concepts and take a new look at them! :)

The purpose of Illumination

Light in videogames usually serves a simple purpose: to give players enough visual information for them to play. Unless visibility is being used as a game mechanic (Unfinished Swan, Silent Hill, Five Nights at Freddy’s, etc.), gameplay elements should always be properly illuminated. It is one of those things that should remain unnoticed by the player. And as most things that remain unnoticed, it has to work perfectly!

We could talk for days about every aspect of what makes attractive illumination, but today we’re going to focus on what makes it functional.

Anatomy of visual information: Shapes and Borders

To be considered functional, illumination must provide 2 important pieces of information to the player:
 

When you were little, you may have been scared of shadows in your room at night. These shadows would fuse with the light coming from your window and other things in your room, causing the illusion of monsters, creatures or otherworldly beasts (or clowns, terrible, terrible clowns!). In partial darkness, such as a dim lit room, borders are usually hard to see, while certain shapes remain visible. This makes your imagination define these shapes into something new, but unreal. A mop next to stacked pillows could easily become Cthulhu in your mind!

The element of depth is not something inherent to 3D. It’s also a very basic element in handling 2D games. You can see its effect in many versions of Tetris:

It is actually easier to make out the Russian text than trying to figure out which pieces were placed at the bottom.

Awesome! Now you can distinguish pieces by color… but if we take out color information, and leave only the borders, or if you happen to be colorblind like me… well, turns out borders aren’t enough information, as both pieces in the bottom are falsely perceived as one weird “U” shaped… thing.

Ok, this is better! Now every brick has a clearly defined border and shape! This is closer to becoming fully functional…until we go through the colorblind test, where it… ugh. But hey! We’re making progress, at least now we can distinguish each individual brick!

Wow... this is a smart use of shapes! You’ll see that beyond the borders, each block is different depending on the piece it belongs to. Even without colors, you no longer see shapes fusing with each other, and you can properly identify pieces even when they are cluttered.

So, now that we’ve seen how borders and shapes work, let’s get hands on illumination!

What we adopted from photography and movies: the 3 point lighting!

This is the most simplified way to explain illumination! In every given scene, objects and environments should be illuminated by more than one light, as usually one light will not be enough to define every object’s border and shape. The minimum number of lights that can used to define an object is 3, as triangulating light around any 3D object will almost certainly give you enough information about its borders and shapes. This works using 3 lights for 3 different purposes:

So, if we were to see a scene from the top, the diagram would look something like this:

This technique is widely used in photography and film (it was actually created by them), as it requires the least quantity of lights to generate optimal, visually informative compositions. If you watch a film or check out posters and promotional artwork, this technique will kind of hit you in the face (actually, take a little break and search for your favorite movie posters!):

So, now that we see how 3-point lighting works, let’s see how we can apply it on videogames.

The first thing to notice is that this works perfectly when the output is a still image or a non-interactive video. In Games, however, we have a problem: Both camera and player are usually in the control of someone else. So, let’s see how we can translate this to abstract and side-scrolling games:

In abstract games we saw the example of Tetris. Everything regarding borders and shapes in these type of games relies on how you render the “pieces” or “blocks” you use to build it, as most times camera is fixed, regardless of the player’s movement.

In side-scrolling games, however, this takes a more complex twist. There are many ways to approach 3-point lighting, yet the one I’ve found more useful is this:

First, divide the scenery in 3 areas:

-The Foreground: Whatever elements lie in front of the character.

-The Midground: Where the action takes place. This is where you’ll find most interactive elements, and where your character will spend most of her/his time.

-The Background: Whatever lies behind the character.

You can have 8 layers of parallax if it’s a 2D game, or you could have more than 3 “grounds” if your assets are 3D. Still, separate them in the 3 areas above.

Then, assign each light to one of the areas. For example, this is a scene from Systole, a game I’m currently working on:

And here’s how each light was assigned:

You’ll see that the Key Light (placed at Midground) will illuminate both the midground and the background, but does little to illuminate the foreground, as it remains backlit. The Fill Light, (placed at foreground) will give volume to the shapes in the foreground and midground, but leave the background somewhat unattended. Finally, the Rim Light is placed at the background, and stretches all the way to the foreground elements. This way I make sure every object is defined by their borders, but only the midground is affected by all 3 lights at once.

Depending on which layer you assign each light to, you can create different illumination dynamics to play with. In this case, for example, we needed a light dynamic that could properly light the scene, but at the same time obscuring objects in the foreground and background, as we didn’t want to give players too much visual information that could confuse them.

In this scene, most of the foreground elements’ borders are defined not by light, instead they’re defined by the contrast they create against the well-lit Midground. And by making sure the Fill Light doesn’t stretch over to the background, we can give a sense of volume to the most immediate objects without giving unnecessary shape information on background elements.

Can get a bit complex, huh?

Well, not really. As long as you keep in mind the purpose of each of these 3 lights, you can play with them however you want to create very different results. For example, Limbo takes an extreme approach to this. If you see any screenshot of the game (there’s one below), you’ll quickly notice that every light source is pushed into the background. It actually IS the background. The Fill Light in this game only serves to illuminate fog and mist… yes, it doesn’t even illuminate physical objects! But by doing so, it creates the depth players need in order to distinguish elements in the background from elements in the midground, so they don’t get confused and try to step on a tree branch placed in the background.

We’ll leave it at this point for now. Next week, we’ll be taking a look at replicating the 3-point lighting concepts in 3^rd person games, and the role that color temperature plays in its successful implementation.

The scene I used as an example for this article is from SYSTOLE, a side-scrolling game currently Live on Kickstarter. During the course of this month, we'll be posting a weekly “tutorial/making of” video where we’ll be showing the process of making an enemy from conception to production, modeling, texturing, animation and coding. We’ll be posting the videos at:

www.kickstarter.com/projects/coconsciousness/systole

www.facebook.com/SystoleGame

So, that's it for today! hope you enjoyed this article and learned something from it! see you next week! :)