Color and Composition

I’m not an artist. At least not in the sense that I can draw or paint or model or sculpt or anything. In fact, I don’t think a single image or texture or sprite or mesh I’ve used in the last… four-five years of game development was created by me. Even SPACE COLORS (image below), arguably the most me game I’ve ever created, just used ships from a random asset pack on the Unity Asset Store.

 SPACE COLORS

The thing I excel at, and hopefully my work backs me up on this, is composing a scene. I’m very big on color. Unique colors, vibrant colors, complementary colors. I’ve never taken a course on nor read anything formal about color theory — and I’m sure those that have will correct parts of this post — but I’ve got this, uh, theory… about… colors: they’re your personality, your game, your work made visual. And not just in deep analysis, they are what resonate with people immediately upon seeing a work. They’re the first impression that gets made upon a viewer. Graphics fidelity is irrelevant in a broad sense, but scene composition is everything. A disjointed scene is not going to read as a coherent image in someone’s mind, nor is it going to convey any particular emotion.

I got a lot of comments about one particular screen shot that I took during the development of Sacrilege (which, sorry, remains on hold) that people said looked indistinguishable from a photograph:

Now, obviously, if you look closely — or even just make it full-sized — it’s obvious that it’s from a computer. And it’s obvious that it’s from a real-time rendered game and not an elaborate single-shot render or anything. For one thing, there’s a distinct lack of foliage and rock beyond a very definite distance. The landscape in the back is too round to be natural, the clouds look good but somehow not right, the specular on the ground without decoration is too strong, etc. (by the way, you should be your harshest critic — take screen shots often and analyze the crap out of them). But the camera angle, the lighting, the color palette, the textures, and, most importantly, the overall composition are solid because the colors employed within are complementary to one another and, most importantly, consistent and there isn’t any part of the screen shot that wildly detracts from the whole. The prominent color is green, the dominant color is yellow (the sun, the flowers, bits of the grass texture in the background), and the complementary blue is provided by the sky.

I’d like to say that was all by accident, but it wasn’t. It was a painful, painful amount of iteration, viewing from multiple different angles, from a multitude of distances, zooming in-and-out, in-and-out, in-and-out, changing one element, then repeating. And this is from someone who has spent a scary proportion of his life devoted to nature/landscape rendering. It’s hard creating a believable outdoor environment. Like, crazy hard. But that’s a whole separate topic entirely.

Now, the hard part: how do you establish your color scheme? Well, that depends on a lot of things: setting, tone, theme, desired vibrancy, and, most importantly, what you really want to highlight in your game.

I’ve been playing around with a thing in Unreal Engine 4 recently — of which I have no idea what I want to do with or what it even is — so I’ll use that as an example. I recently picked up a concept city asset set from the Unity Asset Store here. I really liked the cleanliness of the whole set, so instead of treating it like a concept set, I actually used the buildings as part of the fiction for whatever this thing is. So, I setup a little mini-downtown-esque pier area. Along with some robots, because those are the other assets I picked up recently.

That image isn’t as early in the creation phase as I would like, but it’s as early as I could find on my hard drive (and I take a lot of screen shots. constantly). Point is: it provides a nice backdrop. I also tossed in my go-to for skies: trueSKY. I used a tool I wrote during Sacrilege‘s development to give the scene an early morning tone.

And then I realized the tone I wanted to start with when I put on my normal sleep-time background music: Mad Max: Fury Road‘s soundtrack (which I’ve listened to from start-to-finish over two hundred times). And since I’ve seen this movie about five times, this image immediately came to mind:

Mad Max: Fury Road

The overall composition isn’t as vibrant as I wanted to aim for, but I loved the saturated colors and the tan tint to the scene. And, since I’m a visual effects guy, the way that explosions would stand out in this type of composition is like candy.

Now, this is where my technique for developing a scene differs from the approach others may take. I rely heavily — heavily — on post effects. I love them. I love them like… Some… Metaphor for loving things. My go-to tools:

  • HDR rendering is a requirement
  • Bloom (obviously)
  • Volumetric lighting or, at least, a sun shaft post effect
  • Lens flares
  • Eye adaptation
  • Color look-up tables for first-pass scene color grading to draw out the colors I really want to highlight in the second pass
  • A second pass at scene color grading with an emphasis on color saturation, high contrast, low gamma, and a bit of gain
  • Film grain (go easy on this; a little goes a long way)
  • A light vignette

And that’s that. The first pass at color grading my scene looked something like this:

First-pass color grading

I called the style “post-apocalyptic technoir.” But, of course, you don’t just take a single pass and call it a day. A few days later I revisited the post settings and came up with a refined pass:

Second-pass color grading

This time I went overboard with the color saturation, increased the contrast (since I had found a lighting solution that provided global illumination bounce lighting, thus lighting areas that were previously dark), increased the gain, and tinted the bloom a tan-ish hue to complement the rest of the scene. Now, the bloom in that image is way overboard, but that’s just something that I’ll have to play with and refine over time. It’s difficult to do in this case since all of the buildings are gray-scale (with white as their dominant color) and I really want the metallic sheen on the mechs to have a nice bloom to it, so it’s going to be a bit of a balancing act. One that likely requires going into the textures for the concept buildings and just darkening each one. But you get the gist.

And, of course, I needed an explosion to test:

Yes.

And thus: victory. Colors are great.

3 Comments

  1. warlox on May 29, 2016 at 7:01 PM

    nice article, what are your go to effects for mobile games?

    • Trent Polack on May 29, 2016 at 7:04 PM

      It really depends. For Unity, their new image effects (https://bitbucket.org/Unity-Technologies/cinematic-image-effects) seem to scale very well to a wide variety of platforms. This is my current fallback for our system at my job.

      My preferred solution as far as Unity goes is the Amplify products (http://amplify.pt/). They’re all incredibly well-done and scale well across platforms, though not as well as the unity-cinematic-image-effects do. The results are much, much better and more customizable, though.

      • Trent Polack on May 29, 2016 at 7:05 PM

        Also, since mobile has such a wide range of issues with post effects (especially retina or similar high-dpi devices), my order of preference is generally: color grading somehow, bloom, tonemapping, and then anything else is gravy.

Leave a Reply