Friday, March 17, 2017

Using contrast to affect visibility

A major factor to consider when doing art for adventure games is the visibility of important elements to the player. These games rely heavily on observation to solve the challenges of the games, and it's important that players can see where they can go, what they can use and what exactly it is that they're looking at in order to make the game enjoyable and playable. There's many different forms of contrast, and I'll try to cover a few here, but the main factor to remember is that things that are different to their surroundings stand out to us, things that are similar do not. We can use these when creating art to direct focus, to point out important elements, and even to hide things that we want to.

Some time ago I was asked about why this particular scene from The Lost Files of Sherlock Holmes was so washed out, and hard to make sense of. The issue here is a lack of contrast - the values are all fairly similar, the hues of the curtains and the wood are somewhat similar, and the shapes seem to bleed into each other. A lack of contrast makes the scene hard to parse, as nothing stands out enough to catch our eye except the two green elements.

Compare this to the very similar scene from Gabriel Knight at we can see a much more highly contrasted set of elements. The black fringes of the image really make the brighter centre stand out to us, the green table really pops against the red background, and having the exit brighter through those curtains makes it immediately more apparent. Even when zoomed out quite a way, or viewed through blurred eyes, the contrasting elements of this scene draw our focus to specific, important areas - most notably that green table.

Using hue contrast is a great way to draw the eye like this. This scene from Discworld is a great example - Rincewind and the dragon are immediately eye-catching, with their bright red colours against the yellow, blue and green scene. Even from a distance, those bright reds catch our eye, and tell us what to pay attention to. The rest of the scene seems to blend into each other much more, reduced to merely nice background detail.

In addition to hue, brightness is a great way to make something stand out to us. The light cast from this doorway in Full Throttle is not only different in hue to the surrounds, but also much brighter. Again, when viewed from a distance, or through blurred eyes, our eyes focus very clearly on this element, and it's very clear that this is something that we need to pay attention to.

Similarly, Full Throttle uses difference in saturation to highlight elements to us. Here we have a very brightly coloured merchandise stand that really pops against the grey background. The presnce of colours in a sea of grey will really catch our attention, even if the values are quite similar. This is the primary ability of contrast - no matter how it's achieved, making certain elements different in specific, planned ways to their surroundings will make them stand out.

A great example of this is this corridor, also from Full Throttle, where instead of being more saturated, the important areas are less saturated. Notice there are three doors - two grey doors and one purple door. Against the purpl wall the grey doors stand right out - they break the continuity, and this catches our eye very quickly. The purple door, on the other hand, barely stands out, and is much less noticeable against the also purple wall. Naturally, the two grey doors are vital for the player to use in the game, and the purple door is of no real consequence. It doesn't matter that grey is a "duller" colour - the fact that it's different is what makes it eye catching, not the colour itself.

Another important piece of contrast is the ability to make important things a different size to those around them. This scene from The Secret of Monkey Island has an array of idols - one extremely large, a number of very similarly sized ones, and one very small. The two important elements in this scene are the very large one, and the very small one. The rest are merely background details. In making the two important elements different from the others - whether bigger or smaller - they stand out to us, and give subtle (and no so subtle) hints on where our attentions should be focused.

Yet another aspect to consider is the ability to make elements differ in shape. This scene from Indiana Jones and the Fate of Atlantis shows a great use of repetition to make certain elements uninteresting - many repeated pots and cloths that suggest that these are less important to us. Near the centre of the scene, however, is an important mask that we can collect, and it's very different shape makes it stand out from the surroundings - the sharp points standing out nicely from the rounded edges of the pots that clutter the rest of the scene. It's very similar in value, size, saturation and hue to the other elements, but its different shape makes it stand out clearly nevertheless.

Yet another element to consider is clarity, or the hardness of edges. This scene from Discworld is a great example of the depth of field effect - when viewed normally, the distant mountains are quite blurry and out of focus. This makes sense, we're looking at the more prominent foreground, and having the distance in focus would clutter up the scene a little more. When we ask Rincewind to look at those distant mountains, however...

...suddenly the depth of field changes - the foreground elements in the far left of the scene now become blurry, and those distant mountains are suddenly very clear and sharp. This makes them stand out much more, and as soon as Rincewind has finished looking at them, they go back out of focus, shifting our attention, with his, back to the foreground again.

These various forms of contrasts are powerful tools, and really help a designer show a player what they need to be looking at. Here's a great example of a scene in Broken Sword where, despite being very small, important items stand out very clearly to the player because they stand out clearly from the foreground. Normally I'd be nervous about having items be so small in a game, but having them so bright means there's no way to miss them.

Combined, the various forms of contrast make for quite a visual force. Notice in this Broken Sword scene that the flower vendor stands out despite the rather detailed, cluttered backdrop - the different shapes, patterns, colours and sizes of her stand means she's clearly visible to us. Working in unison, they make an important part of a scene perfectly readable.

This scene from EcoQuest shows the opposite - a noisy scene that's quite hard to read. The exit in the top left corner of the scene is a particular problem here - I missed this for a long time when I played the game, because the blue of this exit is so similar to the blue of the sand that it hardly stood out to me, and there's similar levels of detail all around it. Amusingly, the brain coral is perfectly visible, because that dense, interesting texture really pops by being so different, and really becomes the eye-catching feature of the location.

Compare this to the dark cellar of this Irish pub in Broken Sword, where it's immediately evident what we need to click on. It's quite common for players to joke about elements that are so instantly visible, as here, but as designers we usually favour something being more visible than it should be than something being not visible enough. The needs of the players, after all, come first.

There are, of course, exceptions to this rule. This screenshot from Waxworks shows this very well, with a thin, faint trip line running across the path, ready to trap any adventurers that aren't paying careful attention to where they step. Even when looking directly at the cursor, it's very hard to make out the wire, making this a perfect trap to trick players in a game full of nasty tricks.

Contrast, then, is an essential factor to keep in mind, and is one of the simplest things to learn. The power of juxtaposition is applicable everywhere, and is the best way to show players what they need to be paying attention to. Whether highlighting a character, showing the path they need to walk down, or indicating some clue that they can pick up, the use of contrast will suit a wide range of situations, and will help you guide your players along their way.