Visual Hierarchy for Game Developers: A Practical Guide to Making Important Stuff Seem Important

by Lux

on 02.20.14

Video games, as the most dynamic and interactive form of creative media, have more variables than a person can wholly comprehend and account for. Assets may be reused or may move about, so you often cannot predict every position each object will be in during a playthrough. Inconsistencies and visual anomalies can be avoided by approaching the graphics as if each screen were a singular piece of artwork (this is more reasonable in something like a point-and-click adventure game), but most developers don’t have this luxury. To ease the burden of myriad variables and increase your chances of ending up with a product that looks good, you have to limit your options and make sure that the choices you do make are smart ones.

Art is hard. Make things a little easier for yourself and get a little color palette. This way, there’s no fretting about what color the umbrella should be—your options are very limited, and often the decision will be made for you depending on what colors you're already using for the rest of your assets. It’s great (and perhaps necessary) to have at least a little knowledge of color theory, but I understand that not everyone has the time or energy to invest in studying it. If you're one of those people, there are plenty of services online that will generate a palette for you.

Once you have selected a palette, it can be useful to make color strings (or color ramps) from each swatch, creating a gamut of values for each individual color. This isn’t as simple as making the color “more black” or “more white”, so if you're unfamiliar with color theory and this seems overwhelming you may want to skip this step for the time being. If you do feel confident enough to create these color strings, you won’t have to fiddle around with the color selector as you work—all of the swatches you'll need are right there in the palette.

Metal Slug 2—An analysis of the color ramp of the sand in this screenshot reveals the way in which hue and saturation shift in relation to changes in value.

It’s helpful to create your assets with the big picture in mind, even if you're working in the vacuous space that is a blank Photoshop file. However, your job can be greatly simplified by organizing your assets into levels of importance in terms of gameplay—with the main character (or object) on top, followed by other interactive objects, surfaces and enemies, followed by anything else. In most cases these levels will form a pyramid, with the most significant elements taking up the least physical amount of screen space. You're going to want to render these assets and distribute colors accordingly. In terms of the 1990’s food pyramid, the fats, sugars, and oils of your palette—the tasty colors—should be reserved for your character only. To prevent your product from turning into a game of Where’s Waldo?, you want your character to stand out, and the best way to achieve this is with contrast.

Contrast is sort of a vague term, so let’s elaborate. There are three aspects of color—hue (chroma), saturation, and value. All three of these can be used to create contrast individually; however, they can never occur in isolation. You must consider the effects of all three facets when picking a swatch for your art. Keep in mind that every part of your game does not need high contrast. You can and should balance the contrast in order to achieve particular atmospheres and effects and to guide the player’s eye towards the most important elements of the game.

Limbo—This game utilizes visual ambiguity on purpose. Limiting the options of saturation and chroma to none allows the developers to create a sense of foreboding and to play with indistinct shapes and create puzzles that rely on the player's questionable judgments and ability to discern.

I find that indie game developers tend to oversaturate all of the colors in their games. This can be harsh on the eye, and it makes it difficult for the player to distinguish and separate elements. Oftentimes, a lot of visual problems can be solved by simply turning down the saturation on the background artwork. This is the most common scheme—dark, saturated character on light, desaturated background—although any combination of the variables is possible. Keep in mind that not all colors are created equal; a swatch of one color with the same value and saturation as another color may not command the same amount of attention. Personal preference can also have a say in which colors ascend in the hierarchy, so it’s best not to rely heavily on subjective observations when making sure something is read as more important.

Monsters Ate My Birthday Cake—Although the color palette of this screenshot is colorful and saturated on the whole, it is balanced with unsaturated browns and neutrals, and the gamut of utilized colors is well-directed. However, the color reuse between the character and the rest of the scene knocks the character down in the visual hierarchy and makes it less visible.
Hyper Light Drifter—The palette of this screenshot is quite extensive and scatterbrained; however, the use of muted backgrounds and shadows and saturated highlights lends it some semblance of order. The pink color of the character's cape is also used in moderation.

Keep in mind that the terms “dark” or “saturated” are relative; they are only meaningful when compared to something that is lighter or less saturated. Your character may be dark against your lightest background, but in another scene it may appear to be light. The same rule goes for hue and saturation. You may want to alter the character’s colors depending on the context if you're trying to create a certain mood or depict a particular lighting setup. This can create some consistency, but it can be tricky to get it right in 2D when you don’t have any real lighting. Just to be safe, make sure your character stands out against any background colors you intend to use. It is often helpful to place them against light grey, dark grey, warm, and cool backgrounds, alternating as you work. If you don’t change up the context, it can be difficult to tell if your artwork is lacking in contrast or if it looks over-exposed. Some newbie artists are timid, and refrain from using colors at the ends of the value scale, while others are heavy-handed and make overzealous jumps in value. It is not necessary to use every value in an object or piece of artwork. For further reading on value contrast, have a look at this article on James Gurney’s windmill principle.

Journey is renowned for its spacious, minimalist aesthetic, but it actually utilizes a wide range of color schemes and compositions throughout the game.

A great way to guide the player’s eye is to simulate visual phenomena that occur in real life with variation in focus and detail. The human eye is only capable of focusing one object (or a portion of one object) at a time, and this area will be clearer and sharper than everything else in the line of sight. Objects in the distance naturally have less detail (because of atmospheric perspective and the capabilities of our eyes); you can replicate this effect in game in order to achieve a greater sense of depth. Also, without factoring in the eye’s focal point, levels of detail and texture are not equally visible on every area of an object. Detail will often get lost in areas of great light or shadow. The area in between the two (the midtone or halftone, right before the terminator that divides the light from shadow) will appear to have the most amount of detail. You can consider this while creating your assets, but the most important lesson to take away is that not everything has to be detailed. Your eye will be drawn to areas of detail and focus, so make sure those areas are the right ones.

Another technique related to the ideas of focus and distance is outlining. As an object recedes or curves away from the viewer, outlines should decrease in width—this simulates foreshortening and other limitations of human vision. Comic-style artists utilize this sort of linework to create the illusion of form without having to render the rest of the image in full color. You can use this idea in your game by only outlining the objects that are the most immediately significant to gameplay (top tier), or by giving these objects a thicker outline.

Binding of Isaac—The artwork is relatively simple, but McMillen uses color, saturation, detail, and outlines effectively to visually communicate to the player which assets belong to each tier in the hierarchy of importance.
Freedom Fall—Although the assets are artfully crafted, everything in this image is rendered with a relatively equal amount of saturation, detail, and focus, lending the game a sort of pasted-on look. It also can make it difficult to differentiate the objects that are interactive from those that are purely decorative. Notice that the character's hair color is nearly identical to that of the gargoyle.
In reality, color and contrast are topics that are more expansive and complex than I am portraying in this article. Although using formulaic shortcuts can often be enough to give you an acceptable end result, remember that the relationships between your choices are multifaceted and will fluctuate depending on the circumstances, and that there are many ways to achieve goodness.