The colors in Horizon Chase
Published 2 years ago
Finding harmony in colors
The backgrounds editor in Horizon Chase (trailer) allows me to independently control each one of the game’s visual aspects, so I adjust all colors of the game elements manually. There aren’t colors that get automatically influenced by another (that’s what happens when we do a lightmap operation in a environment that’s fully 3D). In this article I will explain how I simulate that behaviour of the light’s physics, by creating what would basically be a mixture of colors.
As an example to illustrate the whole thing, when pointing a lantern on a surface, the color that we see where the light hits is a mixture of the color from the object surface and the one in the light.
In the following examples we show some cases where we mix an object with a pure color and then the result after lighting it.
Here the dark blue turns lighter when a white light is applied.
In this example we can see the influence of magenta. The color was added and we can see the resulting blue is more saturated and got slightly purple-tainted.
Here the color of the object changed completely. What was blue turned out into green as it was lightened by a vivid green.
In Horizon Chase I needed to show the elements colors as they could look like in real life, trying to find a certain harmony between them.
We took Niterói as an example. After doing some fine tune mixing colors, we got to the following results:
In this example, the green of the grass, the cars and their shadows, the fog, the gray of the asphalt and the background itself, everything takes a bit of the color of the sky, making the whole picture look more grayish, that’s the harmony I was talking about before. Something that imitates the impact of ambiental light (mainly coming from the sky) on the objects present in the environment.
A procedure that really helped me with this process was to manipulate each color’s channel. For example, if I have a green object and need it to have a stronger weight on blue, I will need to put a higher value on the blue channel.
Now the object is not necessarily blue but it’s certainly has more blue-ish influence.
In the next example, I try to get to the approximate final color of the mixture in the game screen elements. Nothing mathematically calculated, only a rough adjustment. I always take the color of the sky as a reference, so I used to try to find a really beautiful sky and then tried to adapt each element to it.
In this picture we can see all the elements without any external color influences:
I repeated the process below for each element of the environment: First I saturated and left the color with a lighter tone, after that I changed my adjustement table for RGB and went on fine tuning based on my intuition until I saw the colors were more harmonic. Afterwards I went on testing. I put a stronger influence on the Red channel and then some more on the Green channel, then I diminished the influence on Blue channel until I got the final result I was looking for.
And that’s how it looked like in the end:
Finding the final colors by tweaking each slider separatedly turned out to be a much better approach to getting the results I needed.
Nevertheless the color mixing technique is only a base for many other color improvements. I only had to deconstruct that rule to reach results that worked really well with the game. For example:
  • Increasing the contrast for a particular object to remark its presence in the whole picture.
  • Diminish the strength / influence of the colors of the track to prevent it from competing with the cars for attention.
  • I allowed myself to break some paradigms and tweak colors in the way that worked better for the game. For example in the image below from San Franscisco I wanted to put a special attention on the city of Dubai by placing a color contrast on the sky behind the city to make its shape quite evident, and putting a very strong, yellow moon over a darker background.
Jesús Fabre
Public Relations|Social Media - Marketer