Color in videogames

In this project, I've analyzed color evolution in video games. I've downloaded longplays—videos of someone completing an entire game—and converted the dominant color of each frame into a vertical line, creating a timeline.

Analyzing video games from this perspective, I've found many recurring patterns. Here I discuss the most interesting ones, but you can see them all in the link to the project:

Game Colors

Some games use the color spectrum to give a sense of progress to the player. In Journey, we start in a desert and as we solve certain puzzles, we discover other parts of the world and the color changes.

Other games also use color to give a sense of progress, but more directly: they divide the game into worlds, each with a distinct palette. In games with little changing dynamics like Bit Trip Runner, this resource gives more sense of variety. It's interesting how they often start with bright green tones and change to dark red tones.

There are also games that don't limit color evolution to the game itself, but let it change over an entire series. This is the case with Diablo, Elder Scrolls, or BioShock. In all of them, the color becomes more vivid from one game to the next. The case of Diablo III was quite notorious, and everyone complained about how colorful it was.

Most games also use color to give identity to the game, and many can be easily identified just by looking at the color palette. Some games like GRIS and Celeste don't honor their names, but they have a palette that anyone who has played will be able to identify.

In addition to the games in this post, I've uploaded others that are quite curious, like the entire Zelda, GTA, or Final Fantasy series. But I didn't want to miss out on including other games whose palette is simply spectacular and I couldn't think of any other excuse.

I started this post as a continuation of the one I wrote about the name of colors, and initially only intended to get a color palette, not a timeline. But when I saw what the artist Dillon Baker did with movies, I thought it would be more interesting to emulate it with video games.

To obtain the longplays, I used the online video download library youtube-dl, which Github recently removed following a complaint from the American SGAE. The complaint has catapulted the popularity of this library, producing a Streisand effect and it has already been restored.

Perhaps the most challenging part has been identifying the predominant color of each frame, which remains an active field of research. I tried using the average of all colors on the screen, but it resulted in a grey and brown mass, similar to mixing all the playdough. So, I ended up doing clustering of the image's colors and keeping the color that represents the largest cluster.

Papers, Please spectrum

Papers, Please is grey anyway.

I've considered uploading high-resolution versions of these timelines as prints on RedBubble, but creating a product for each game is a massive task, so if you're interested in any particular one, you can leave a comment and I'll upload it individually.

5 comments

Perlin noise

Procedural generation, a staple in video games, involves creating environments or resources randomly yet consistently. I've been developing a small world generator using this method.

World generator

Games like Minecraft use this technique for their infinite worlds. Let's explore how these methods work and the significance of Perlin noise in these tasks.

Minecraft screenshot

Procedural generation requires keeping things varied and interesting, which is why a good noise function is required for random value generation. It's important to have noise that looks natural. Below, see an image comparing completely random noise on the left and Perlin noise on the right.

Comparison of random noise (left) and Perlin noise (right).

Random noise, while useful, is too erratic to mimic nature. Nature often displays fractal-like patterns, like mountain altitudes with large (mountains), medium (hills), small (rocks), and tiny variations (pebbles). This pattern is evident in sea waves, tree branches, ant movements, and marble patterns.

Recognizing this pattern of large and small variations, Ken Perlin created a noise function to replicate it. Perlin noise is generated by summing multiple noise functions at different scales.

Perlin octaves

A random noise function simply returns random numbers, later interpolated to form a continuous function.

Noise interpolation

Combining several of these functions at various frequencies and amplitudes results in Perlin noise.

Applying this in 2D, interpolating a 2D noise function, creates a height map. The image below shows the same map colored in four different ways.

Perlin 2D coloring sample (small)

This map has various applications, like terrain creation, heat maps, clouds, or psychedelic images. More about Perlin noise can be found on Hugo Elías's page, where I sourced a couple of figures. If you find this interesting, feel free to experiment!

1 comment

4d8cd43bbbfbbd2b7aed08d9a2b0ef251cebfd3e2603b74b710a2d38b7f8ec39