Tuesday, August 15, 2017

Communicate Through Color

Colors are a language that most people (sorry color blind folks) use daily to communicate. Our biology has evolved to respond to greens and blues as comforting because water and foliage sustain life. Red is stressful and attention grabbing, the color of blood and fire. Our brains has been molded to respond subconsciously to every hue and value in site. Primitive colors offer easy wide reaching emotions, just as primitive language like a scream or laughter communicate generalize ideas. Becoming eloquent in verbal communication allows one to more clearly express a wide range of nuanced concepts. Becoming eloquent in color theory offers the same freedom.

Color values allow our eyes to organize and estimate visuals.

example 1

example 2

At first glance, these images look pretty similar. However, notice that the character in example two looks a bit more vibrant, pulling your eyes in. The metal and wires are equally as detailed in each image but less distracting in example 2. All of this can be explained through values, removing the hues entirely helps make this concept clearer.

example 1

example 2

I took the two original images and set them to gray scale mode in photoshop. When looking at example 1 notice that your eyes wander, not picking anything in particular to focus on. In example 2 you can't help but first look at the player, then the rest of the environment. both images have an equal amount of detail and only slight shifts in hue. It's the values in example 2 that command the players eyes. Without this sort of clear color communication, the character gets lost, making gameplay frustrating and confusing. 


My players color scheme is comprised of blue and orange, colors found on opposite sides of the color wheel.

This allows me to go crazy with environmental color schemes. A complimentary color scheme means at any given time, at least one of the colors will be popping out from the colors around them.  Making sure the player character is the focal point of every shot. Notice how in the above screenshot, all of the detailed hue shifts in the environment come second to the loud player colors. Again, working to make sure the player is first aware of where they're at, then allowed to enjoy the detail.


Detail is the final hurdle between confusion and clarity. There is this obnoxiously common idea that more detailed objects automatically stand out more. It's a fallacy, contrast is what grabs the eye, not detail. 

There is plenty of detail all over The Mona Lisa, the big ol splotch I added is the least detailed part of the image. Despite being color picked right from the image without any remarkable value. Its hard not to look at, right?

I'm trying to accomplish something similar here. I want the world to feel alive and intricate, so a harsh contrast in detail between the player and the environment is the last step in commanding the player's eye. All interactable objects/enemies in my game are going to be bright and unshaded like the player character. The players must first care about gameplay imperative information, then about the nuace. 

We as developers have a responsibility to control and command our players wondering eyes. Without this sort of initiative, gameplay becomes confusing and beauty becomes nonsense. Great gameplay can be totally shrouded by poor color theory. However, with deliberate efforts, we can immerse our players in our worlds. Color theory is like verbal communication. Dont scream at your players, read them poetry. 

William's Comment: 
First of all, the techno-organic environments are looking groovy.  If you'll allow me to, I'm gonna compare visuals to my feelings on food.  When it comes to visuals, I think of color as flavor and detail as texture.  A blend of flavors is great, but people often overlook the importance of texture.  For me, half of the appeal of a burrito or sandwich comes from the symphony of textures from the different layered ingredients that are allowed to play off of each other without being mixed together into a paste.  In these screenshots I love the texture in the foreground contrasted against the smoother background.  Things you can touch have grit, things that can't slide by.  That's knowing how to make your ingredients mingle and it makes my mouth water
Burritos are good game design.
Anyway, I think that everything Gabe is saying here is pretty on-point.  I think that at times Gabe has a bit of a Stanley Kubrick mindset when establishing every scene of his game to be a masterful composition of gameplay and graphics presentation.  He's a professional artist after all, and he knows the rules for making this work.  The fact that he's creating a game with more implemented level design than my chaotic procedural generation mess allows him to put something more into this than the rules though: he gets to put his touch on arranging every environment to convey what he wants it to, from flow of form to ambiance of mood.  That transcends the rules of color design, as can be evidenced when you look at what my world generator poops out from time to time despite being programmed to follow basic color design rules.
Programmed to choose complimentary colors, base the saturation in the scheme to make contrast the strongest between points of interest, interactive aspects of the game a unique color that stands out from the rest, but this particular world still looks really muddy and blah.

Anyway, the point I'm trying to make is that I'm real excited to see more of the art to come in Gabe's game.