One of the primary tools of visual design is value. “Contrast is the meaning of life” was a constant refrain of John Clapp, one of my Illustration professors at San Jose State. Contrast is any difference between one thing and another. Any difference. Humans are good at noticing differences, but our brains get confused when things are not very different. This can happen to different colors that are the same value, and when the same size object is repeated too much. In light of this, the environments in Full Bore would seem to be the perfect storm of low contrast – made up of hundreds of the same sized blocks that represent dirt and stone. A recipe for low contrast and lack of interest. We used several techniques to make the contrast between elements serve clarity and visual appeal to the player.

A good illustration of contrast is known as the windmill principle.

The blades of the windmill demonstrate the different kinds of contrast: light on light, dark on light and dark on dark.

Rembrandt_van_Rijn_-_The_Mill_-_Google_Art_Project

Thanks, Rembrandt!

Firstly, the blocks that are in the foreground and can be interacted with have to be separated from those in the background that serve as decoration only. We added a darkening overlay to the background tiles, which gave them a clear difference in value range, even though the same tiles were being used in the background as the foreground. Next, the environments are made up of different tiles with specific behaviors. Different block types are drawn in front of or behind one another depending on type, while overlays cause groups of blocks to read as a mass, and overlap blocks behind them in the draw order. This prevents visual tangents, which cause a representation of space to look flat.

Tangents

(The shape on the left implies a spatial relationship more clearly than the one on the right, where all the lines tangent each other.)

One of my first attempts at creating a tile set for full bore resulted in too much contrast within each tile individually, but not enough contrast between different tile types. For example, the stone tile had very dark darks and very light lights, causing large formations of them on screen to “jangle” visually. The team and I knew those tiles weren’t working, but since this was my first pixel art tileset, I hadn’t quite integrated it in my mind with what I knew about design. Casey got Mimi, a graphic designer friend of his, to take a stab at making some tiles, since I was focused on animating the main character at the time. The tiles she came back with were much more iconic and restrained than the ones I had made, and I was able to realize my error. Our current tile set embodies (for the most part) a hierarchy of function related to how much contrast is contained within the tile. Tiles that are unbreakable and unmovable have the least contrast within themselves, being very close to a flat color. Tiles that are moveable and perform some function, such as the laser block, have a wider range of contrast so that the player’s attention is drawn to it. This is of course one of the areas our game can improve on.

Old:

jangly tiles 1

New:

New Tiles

Even with this hierarchy of value, a full screen of blocks can be quite visually overwhelming. Some of the tools we used to break up the tiles on screen were paths through the environment from puzzle to puzzle and decorations, which give the player’s eye something to look at that is different than the environment blocks. Varying the size of the path helps as well, from small, one-tile high tunnels to large caves, providing additional visual interest. The puzzles that Jake has designed often take up unique spaces due to their function and what blocks are used, creating interesting places for the player to navigate.

light-mockup

Something was still missing, though, and that something was lighting. Casey had been planning on implementing a lighting system, time permitting, and when he was able to put it in place, we suddenly had a lot more options when it came to visually designing our environments. For one, Full Bore being a game that takes place in caves and tunnels underground, it needs some darkness. A person’s eye will always go to the area of largest contrast first, and so, with varying size and brightness of light, we can highlight what is important in a level, and let what is less important drop into shadow. Light is the vehicle of mood and drama, both of which are very important to storytelling (which is what I love most in games). We are still trying to use the lighting system to its fullest, including making normal maps for all the tiles, objects and characters so that they will pick up the light to convey 3d form in our 2d world.

A31IelxCUAAsXxH.png large

Full Bore is still a work in progress, and now that our programming and game play systems are in place, we want to focus on making the game look and feel the best that it can.  Some of the things we still want to work on are environmental storytelling, further refining block designs to show their function, and designing the lighting to better direct the player’s attention to puzzles and paths. Our Kickstarter has been doing really well, and we are all excited to be able to make the game better with everyone’s support.

 

5 Responses to Contrast in Game Design

  1. I’m not much of a visual artist so some of this was difficult to grasp, but the before and after tile set images made things really clear.

    It looks like a vast improvement and good luck with the game!

  2. Finn says:

    Thanks! This is where we plan on posting the most technical and obtuse of our thought processes. Art is much more empirical than many people give it credit. Humans perceive things a certain way, and that is exploited by a good artist. Good I am not, but I try to use the right tools.

  3. This is one of the best articles I can remember for pointing out a useful technique for creating good looking tilesets! I bookmarked it and will be coming back to it! Thanks for this and very well done! Best! -Tim

    • Finn Beazlie says:

      Thanks, Tim. I didn’t find a lot of mentions of the tile set working together a a whole in the tutorials I was looking at, so I decided to share my discoveries.

      • Well, it’s really nice stuff you have there. Not only does it look great but it answers a lot of questions I’ve always had in a very straightforward manner. I have friends who spoke about this and tried to explain it but this is hands down the best tutorial I have seen on the subject (and I have seen a lot). Do more!! I’d love to hear more about the process you employed at WholeHog -Tim

Leave a Reply