Skip to content

WrestleQuest Visual Pass

You are here:
Estimated reading time: 9 min


One of the biggest challenges level designers and game artists face is figuring out a way to create an accessible and friendly visual boundary for the audience, with the goal of immersing them and developing a narrative for the project. The most common solution is designing something that is easy to see and comprehend. Sometimes it can be the best answer too.

There are six elements of art – one of which is color. As game development (specifically level design) is a way of creative expression like any forms of art, we can apply the various elements and principles of art to come up with coherent, aesthetically pleasing levels. Color and how it will register to other people is sometimes overlooked when it comes to level designing, often opting to go for what sticks out the “best” for the artist instead. Some out of fear but mostly because of unfamiliarity and not being able to go out of one’s comfort
zone, which is what this study case aims to change because when used well, color can be one of the best ways to make your levels stand out and be easily appreciated by all kinds of players.

Color Theory

To understand colors, we must familiarize ourselves with the basic color wheel, shown here. You can generally reduce any strangely named color to the 12 basic ones in the color wheel. Colors like crimson, goldenrod and ultramarine are pretty much just red, yellow, and blue.

The goal of this study case is to improve a cat’s color choices by considering different factors of the color theory such as its luminance, contrast, and values. We will not just be shifting hues to get a “better” highlight or shade.

Here are some important terms that we will be going through this study case as we progress:

  • Values
  • Perceived Brightness (Luminance)
  • Hue/Saturation
  • Histogram

Getting Started – Values

Compare these two images below and ask yourself which one looks more cohesive, and which one looks more chaotic?

Our first goal is to be able to create a nice hierarchy of color values, without using hues. We are basically reducing art to its most basic form, which is made up of just black and white values.

Basic Value Structure

The left image feels more chaotic because the value structure is unclear and that the details are starting to look like static noise the further we look at it. Because of this, it’s harder to emphasize a subject of the level design due to multiple things standing out.

The right image feels more cohesive because the value structure leads us directly to what the level design wants us to focus on first.

When we construct compositions of levels, it’s almost always best to start in grayscale so we can build the value structure of the level. We should aim to do this in triatic arrangements of whites, grays, and blacks. In order to heighten the relationship between each of these various depths, we can try restricting each layer to a general value range; favoring either blacks, whites or grays.

By restricting the values in each of these areas we visually reinforce your level’s sense of depth, thereby making the silhouettes very easy to read and that’s important! Readability is essential to a good level design. Muddy value structures hurt the viewer’s ability to discern shapes and pathing, especially at a small scale. This is why we will see these kinds of techniques employed so often in level design.

Example of a good value structure

By using whites and grays to designate the subject and blacks as a frame for where the attention should be, LoL’s Summoner’s Rift map effectively conveys goods value structure.

It’s very important to recognize your game, and how the values can be used to instantly deliver information to the player.

In this case, black values were also used as a fog of war to create a sense of division of which areas are safe for the player navigate into and which areas are not. By value structures alone, they are already able to create good visual boundaries that the player can easily recognize and comprehend

Getting Started – Perceived Brightness

Which one appears brighter and which one appears darker in the following image comparison? Remember that both images just differ in hue values and share the same value structure.

Knowing which colors to utilize to depict an object as bright or a dark is our second goal.

Luminance/Perceived Brightness

According to the luminance chart, yellow hues often have the highest perceived brightness values, hence the left image is brighter. Blue hues on the other hand, have the lowest perceived brightness values which makes the right image darker.

Remember that both images have the same value structure for both hues, but when we convert them to grayscale, we can see the blue image will be distinguished as a darker due to its perceived brightness value.

Getting Started – Hue/Saturation

We have another image comparison and the goal is for us to find which version of the dragon feels and reads better to our eyes. Which of the two compositions generally feels as though the colors are a little too intense, and which one feels as though it isn’t taxing to look at?

Our third objective is to produce color harmony by mixing and matching hue combinations while taking values and perceived brightness into consideration.

Hue Shifting

In reality, more light (higher value) appears to make a color more saturated, whereas less light (lower value) appears to make a color less saturated. Using values and perceived brightness as our starting point for creating a palette, anything brighter should always lean closer to yellow, while anything darker should always lean closer to blue. The same principle applies when choosing your colors.

If we want to make a palette with both bright and dark values, a common misconception is that we simply need to lower the value of a color as it progresses to be brighter/darker. However, when we consider perceived brightness, we can be more creative with our color choices and create a more interesting visual hierarchy.

Using Histograms

Histograms help us achieve good color choices and value structures from within photo editing programs. People utilize histograms in all types of art such as post-processing in photography, cinematography, and illustration. Histograms are graphs to help you understand the color distribution of your image. Graphs may make some people want to take a nap, but rest assured that they are easy to understand. Histograms show us the value structure of an image so we can evaluate that structure and apply corrections if necessary.

Understanding and reading Histograms

Histograms give us a full view of an image’s luminance. Despite the fact that we frequently consider color to be nothing more than hue/saturation/value, different hues will saturate to different perceived values. For instance, saturated yellows are relatively bright whereas saturated blues are significantly darker, even if their values are the same in terms of HSV value. Because of these variations in perceived brightness, hue choice can significantly alter the value structure of your image.

Have you ever seen a level and thought it was a touch “flat”? Although the design and composition were both intriguing, did you find that the level design as a whole failed to “jump out” at you? Chances are, it’s because the base assets were suffering from bad value structure; the highlights (the lightest areas) were most likely too dark and the shadows (the darkest areas) were not as dark as they should have been. On the other side of the coin, an environment may have too much variation in its value structure – the highlights are too bright, and the shadows or crevices are too dark – and this results in the scene looking too noisy or incomprehensible as so much contrast fights for your attention.

In the histogram, black represents the “perceived value”, “perceived brightness”, or “luminance”. Think of this differently than the “Value” in Hue/Saturation/Value. I prefer the term “perceived value” (PV for short) because “perceived value” indicates similarity to the Value in HSV, but compensating for the hue and saturation both affecting how bright the color appears to the eye, as mentioned in the previous slide. When deciding whether a color is too bright or too dark, your focus should be on the perceived value (PV) rather than just the Value (in HSV terms) of each color.

In the next slide, we’ll break down the below histogram view of the image.

On the left, we have the image viewed in terms of its perceived value (PV) or luminance. Note that the browns of the dirt, the greens of the grass, and the greys of the stone are all nearly the same PV. The histogram explains this with the narrow width of the shown value range.
● The spread/width on the X axis (left & right) shows how spread out the PVs of the image are.
● The height on the Y axis represents how many pixels’ colors share that position on the X axis.
The spikes in the black graph therefore indicate how dominant that particular PV value is in the image. As shown in the histogram, the majority of the colors in the image span a perceived value range of 16 to 35. This range indicates your perceived contrast of the whole image: the width of the black region in the histogram. Our range in this case is 19 (the difference between 35 and 16).

The colors that make up the ground only have a PV contrast range of 8. Despite this being such a small number, they feel sufficiently contrasted and are pleasing to the eye.
● Dirt PV: 34~
● Grass PV: 30~
● Rocks PV: 26-28~
The majority of colors in the imagespan a PV range of about 19, including rock highlights and ambient occlusion shadows. This tells us that you don’t actually need that much PV contrast to achieve a vibrant and aesthetically pleasing result.
In fact, most of the image’s colors are within about 10 PV from each other, and the darkest bits (around 16PV and lower) are in the darkest points of ambient occlusion

An Overview of Many Histograms

GOOD histograms – They are cohesive and have structure

BAD histograms – Completely structureless, often with many extreme separate spikes.

A Comparison Between Two Scenes

The overall shape of these histograms are similar, but they have a few important differences that help explain what a value structure even is, and a concept I call “value groups”.

In the outdoor forest scene, there’s a clear separation between sunlit areas and shadowed areas. In the histogram, there’s a large chunk of colors in the midtone range which are barely present. This creates a pleasant and clear separation between the dark and light areas. This distinct separation of all the colors in shadow and all the colors in the sunlight is what defines the value structure of the composition. You can think of these as “value groups”; each with their own PV contrast range which has a balance within itself. If you were physically painting the scene, you could have two different color palettes – one for the shadowed value group, and one for the sunlit value group. They do not interfere with each other. The valley between the two groups helps indicate effective value group separation.

In the interior scene, we have many colors with highly varied perceived brightness scattered randomly, not just in terms physical position, but also by not having a logical place in the value structure. Despite covering the whole value spectrum, the scene has no logical separation between light and dark. The histogram describes a chaotic mess with no reasoning.

An Analysis of an Almost-Good Histogram

This scene is close to having a reasonable value structure, but has at least one glaring problem. The problem is indicated by the tremendous sudden spike at the far left of the histogram – we have a very dark color dominantly used in the image, present in the wood of the spikes, the trim of the floor, in the chains, the treasure chest, and so on. This dark color has a PV of 9. Much of the floor has a PV of 59, for comparison. This is a PV contrast of 50! Remember that all we really need to create nice contrast is a PV contrast of 10, so this is about 5x more contrast than we really need if we wanted this color to create contrast.

Remember that contrast is a tool an artist can use to draw the viewer’s eye. The highest point of contrast in an image draws the viewer’s attention first – illustrators and level designers use this fact to draw attention to points of interest. If too much contrast exists scattered throughout the image, it feels like a mess, and there’s no room to use contrast productively.

With that in mind, there is no good reason for this dark color to create immense contrast throughout the image.

Brief Analysis of Good Histogram

This is a histogram for an effectively value-structured bright scene. Note that we have a single, very apparent midtone
(the top center of the black peak), and values that are darker or brighter are less common than it, linearly. This creates an almost perfectly even triangular peak. The darker bump at the left of the main peak is our second value group: the areas in shadow, such as with the treeline in the top left. There isn’t a clear valley between them, but the shadowed value group is still clearly separate from where the majority of colors are. Additionally, the shadowed areas are clearly separate in the actual image.

We also manage to have some intense bright spots that catch the eye in the blue VFX. Those have a perceived brightness of 95+, but so few pixels are actually that bright that in the histogram they barely don’t show up on the far right of the graph.

We have 3 value groups: The sun-lit group that makes up the vast majority of the scene, the shadow group that makes up about 15%, and a brightest highlight group, which is < 3% or so.

Use Your Eyes too, Not Just Your Histogram

The histogram is just a tool for assessment – the shape of the graph doesn’t make the image good or bad. We can develop rules of thumb or things to look out for based upon the histogram, but remember that the histogram doesn’t actually indicate how things are composed in terms of placement in the scene. A histogram could be identical between two scenes, but one scene could look far better than the other.

One simple example of this is a scene in which you have a clear set of shadow colors defined and sun-lit colors defined, but they are all mixed up in placement within a scene. This would look much worse than a scene which uses the same amount of the same colors but in an organized, clearly separated way. The histograms for each of these scenes would look the same because they use the same amount of the same colors, but their placement and physical grouping is different.


Was this article helpful?
Dislike 0
Views: 46
Back To Top