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.

Screenshot sources for adventure games

I've got a pretty big collection of game screenshots on my hard drive, but for some games I have to look online to save me playing through the games specifically to find one scene. There's a few sites that have excellent collections of shots from games, and these are the ones I refer to the most:

MobyGames - a long running site with thousands of games, with excellent amounts of detail about releases, and often will have screenshots from differing versions of a game. The most comprehensive game information archive that I know of.

Imgur - Neurotech - Galleries of LucasArts adventure game backgrounds, minus characters. Great if you want to see the background art without characters in the way - though be aware that the GIF format means some of the colours are slightly different. Also has scenery from Infinity Engine games, if that's your kind of thing.

Sierra Wallpaper - An excellent resource for Sierra developed and published games, with dozens of screenshots per game, showcasing hundreds of scenes. The site allows you to select a resolution to download the images at, making it an excellent resource if you want to use these old games to spruce up your desktop.

Adventure Rooms - Screenshots of many adventure games, resized to correct aspect ratio, with nearest neighbor up-sizing. A great range of games that doesn't focus on any particular publisher, and especially handy to show the older games at the proportions they were designed to be seen.

Adventure Games Backgrounds - Many screenshots from adventure games, including some less known ones, and Sierra games without characters in some examples. The images aren't pixel perfect due to the manner in which they were captured and saved, though, so keep this in mind.

If you're looking to browse through some adventure game art, these are excellent resources. I really appreciate being able to turn to these archives to find a specific shot, it minimizes the need to play through each game to find the scene I want to capture. Feel free to let me know of any others I've missed in the comments section.

Full Throttle Scenery Studies

Over the past couple of months I've been regularly going through the background art of Full Throttle and making notes about it, trying to figure out what makes the scenes work so well. Those of you who follow me on Twitter have no doubt seen them appearing on my timeline regularly, and may be interesting in seeing the images in better quality than Twitter's image compression allows, and those of you who don't might be interested in seeing what I've been studying.

In any case, you can download all 29 of them compiled as a single PDF by clicking this link:

Full Throttle Scenery Analysis (41MB)

Enjoy!

Windows as a visual tool

Having looked at reflective windows last week, it's a fine time to look at windows that let light pass through, too. One of the most interesting design tools, windows can provide interesting shapes, introduce new colours, act as a source of light, and show us the world waiting to be explored, beckoning us to adventure and saying 'Where do you want to go today?' As the above scene from Beneath a Steel Sky shows, they're a great way to add a whole new layer of visual interest to any location, and their benefits and uses are many.

This scene from The Lost Files of Sherlock Holmes shows a similar idea, with the large expanse of windows breaking down the barrier between the store's interior and the street outside, letting in light and a feeling of life outside. Particularly nice is how these windows, unlike the previous ones, affect the colour of the world outside, allowing us to see the glass's presence, and making a clear divide between the visual layers. This also helps us see more clearly where the doorway is, which is always an essential consideration.

A more extreme version of a similar layout, this example from Space Quest 5 shows, once again, walls being replaced with windows, showing the outside world wonderfully, and providing excellent amounts of light. It makes for a very open, panoramic scene, and it's still very easy to distinguish the boundary between interior and exterior because of the window frames. These are a great way to provide structure and perspective to windows.

Important, too, to remember that windows aren't necessarily just used to show the outside world. Another shot from Space Quest 5 here, this time with windows acting more as a partition between two man made areas. Livening up corridors in this way is a great method for adding depth and life to what can be quite dull areas in a game, as well as being potential ways to add interesting gameplay. What's really nice here is how the shape and framing of the window really gives the impression of advanced technology, lending itself well to the science fiction nature of the game.

Taken to an even further extreme, this shot from The Dig shows ornate, complex framing that suggests an alien architect very well. The delicate structure feels at once organic and also designed, like the web of a spider, which gives an interesting insight into the mindset of the alien designers. You can also see that this window is the only light source for the scene, making it feel dark and shadowy, with the window becoming a real feature. This is also an interesting shot because the window shows an underwater scene, meaning that visibility is much more limited, and we mostly appreciate the light and colour rather than any specific landmarks.

The design of windows is great for suggesting a number of specific environments. Church windows, especially the stained glass scenes that are so iconic of them, are instantly evocative of quiet religious locations. The massive lancet windows in this scene from Broken Sword also flood the scene with white light, which is evocative of holiness, and even their shape feels indicative of a place of worship.

A great example of this is Bishop Mandible's cathedral in Loom. The rose window here instantly provides an impression of a holy place, which is reinforced by the flying buttresses on either side. The juxtaposition formed between these and the sinister spikes and arcane glow makes this a particularly memorable scene, and is a good example of showing how windows aren't merely a source of light for daylight coming in, but also can be used as a source of light when the lit interior of a building is seen from the outside at night.

Though many of these church windows are massive, it's the design, not the size, that conveys the idea. This small chapel from Conquests of the Longbow features much milder, simpler arch windows that nevertheless look perfectly at home here. A nice touch here is the suggestion of a crucifix within the shape, helping to reinforce this idea further.

Another great use of shape is this portal from Quest for Glory. Though it could be seen to be as much doorway as window, its fascinating shape feels emblematic of the arcane, and is noticeably different from the rest of the architecture in Spielburg, really giving it that otherworldly feeling. This is further enhanced by the fact that the simple location looks out onto what is, apparently, a cloudy skyscape, as though we're looking in on a totally different world. A really nice way to elevate a magician's building into something much more fantastical.

Windows don't need to show us interesting things to be worthwhile, either. The windows in this Broken Sword scene are little more than a source of light, but in filling this function, they also add a great sense of architecture and design to the scene. The arches and curves of these windows really elevates the location to something dynamic and decorative, without the stained glass of a church or any details of the outside world.

This shot from Gabriel Knight is a great example of windows who don't exist to be seen through - instead, here they're merely a light source, but one that becomes a real focal element of the scene, with the strong light shining through suggesting that it's a very strong source of light. Their presence in the scene is very strongly felt, despite the actual windows themselves being very small.

In fact, we don't even need to show the windows in a scene to suggest their presence. This location in Day of the Tentacle is very clearly lit by a window - we can see the light it casts on the floor - and the window's presence is very strongly felt, without the need to actually put it in the scene. This is often referred to as a "hidden light source" - where we can feel the effects of a light source on a scene, and get a decent idea of where it's coming from, without actually showing the source of light itself.

They can also make a great way to frame a scene. This window from Leisure Suit Larry isn't the focus of the scene, but a way to direct the focus. It makes for a great way to decorate the unneeded areas of the area, while also feeling slightly voyeuristic. A really creative, believable way to use up the empty space on the edges of a shot, and an interesting way of putting scenery between the player character and the player, without getting in the way of gameplay.

This scene in Universe takes the idea to an even greater extreme, where we're looking through windows at a scene, despite being pulled back from it. This is one of the beauties of windows - even when they're forming a barrier between the characters and us, they still let us interact with the game, and so can be a very useful consideration when trying to add layers of depth to an otherwise very flat scene like this. Once again, the interesting shapes here really gives the impression of a futuristic setting very well.

Finally, even when the presence of windows wouldn't make sense, an artist can break holes in walls and ceilings for their own benefit. This decommissioned ship from Monkey Island 2 is a great example of the lack of windows being worked around by simply adding huge, gaping holes in the ceiling, serving the exact same purpose that a window would, without the need to justify someone installing a window in such an unusual location. Notice how the beams catch light from both the interior and exterior here, a wonderful use of light sources both outside and inside to create a very evocative piece of scenery.

Windows are a fantastic way of playing with a scene - whether it's adding depth, adding light, bringing colour, breaking up a dull wall with an interesting shape, or as interesting framing for players to view the world through. Their uses are incredibly versatile and varied, and well worth exploring in greater detail for anybody interested in adding another layer of beauty to their locations.

A look at graphics: using lighting to convey mood

Recently I was approached by the folks over at Adventure Gamers about doing a series covering art in adventure games, which readers of this blog will know to be one of my major interests. I settled on a format slightly different to what I write about here, and think it will make for some interesting reference for those also interested in the subject. The first article in the series just went up today, covering the use of lighting to convey mood, and if you find the posts on this blog interesting, it's definitely also worth heading over there for a read!

The beauty of reflections in adventure game art

When I think about reflections in old games adventure games aren't really the first thing that come to my mind. Normally it'd be games where they're more prominent - the mirrors in Duke 3D, the cool reflection based puzzle in Another World, the hall of mirrors in the very bizarre Weird Dreams. Nevertheless, there are some interesting examples of them in adventures that are well worth checking out, from the subtle floor reflections seen in the Space Quest 5 shot above, to more interesting, dynamic examples.

Some of these examples are very subtle indeed. This scene from Sam & Max Hit the Road has the faintest of reflections on the ground, giving the impression of shiny linoleum. The counter also has a slight reflection on it - these are really just the faintest details, designed to give the impression of the glossy materials these surfaces are made of.

It's a little stronger in this scene from the game. The stronger reflections on the floor of the virtual reality device give the sense of a strong light source from above nicely. Notice how the curtains are perfectly reflected, but when the floor is reflecting the plain green wall the artist has added streaks, to help sell the idea of a shiny surface. This mimics specularity on a slightly uneven surface, giving the appearance of a reflective area despite no actual details for the surface to reflect.

This scene from Beneath a Steel Sky also has subtle reflections, but slightly stronger. The reflective floor is dirtier and grainier, this time, and while it feels futuristic, it also feels dirtier and less polished than the Space Quest 5 and Sam & Max examples because it. If you look carefully you can also see the suggestion of the seams between tiles interrupting the reflections slightly - particularly below the device closest to the left against the back wall.

This scene from Gateway shows the opposite - perfectly uninterrupted reflections, giving a clean, corporate and futuristic feel. Notice how the light source blooms the reflections out slightly, putting whiter circles in where the light hits the floor directly. Also notice how the reflections being confined to a single part of the scene gives a really clear indication of the change in materials in flooring. One oddity is the potted plant, and how its reflection goes straight down rather than following the inverted shape of the plant. This is fairly common, and simplifies drawing a reflection, even if it's not very realistic.

One last set of floor reflections is this from Dune - notice how under the two guards we can see the faintest suggestion of their reflections. This only really works because they're omnipresent parts of the scene - Leto doesn't have a reflection, because he's not always in this scene. If the guard reflections were stronger, the fact that Leto doesn't have a reflection might seem odd, but because they're so subtle, it doesn't really stand out too much. In modern games where memory and size constraints are much less of a consideration we merely give everybody a reflection.

Another great use for reflections is to suggest the presence of water - in this scene from Freddy Pharkas: Frontier Pharmacist we see the reflection of the surrounding landscape, as well as the reflection of a blue sky in the water, which is easily read as being a large area of water.

For a much smaller, shallower area of water, such as the puddles in this track in Broken Sword, a much milder reflection is appropriate. The barest suggestion of the texture of the door, coupled with the slight shift to a bluer hue gives the impression of a reflection, but because the water is so shallow, enough light still hits the ground beneath the water to let the ground still remain quite visible, and so a transparent reflection is appropriate here.

Reflecting a blue sky isn't always appropriate for water. This scene from Lost Secret of the Rainforest shows a much greener reflection - which suits the greener atmosphere we can see in the distance. Here a blue reflection would feel more out of place. The artist also added some nice distortion to the water here, to help give the idea of the uneven surface of water, as well as drawing in the reflection for the boat. Notice how the character in the boat isn't reflected.

This scene from Dune shows an underground reservoir of water, and appropriately, no sky reflection is shown at all. The water is also perfectly still - there's just the mildest of distortions here and there, but otherwise it's a mirror reflection of the distant stone features. This shows how artists take into account the surrounding environment to inform the colour and movement of a reflective surface.

The opposite is visible in this shot from Space Quest 5. We recognize the water for what it is, because we're used to seeing water reflecting a blue sky like this, but considering the actual "sky" it exists under is the colourless black of space, the blue colour of the water here doesn't make any sense. It doesn't really ruin the scene, it just feels a bit less realistic than it perhaps should.

One reflection I particularly love is this shot from Future Wars. Here we see the side of a large building and a window cleaner at work - the massive, glass surface cleverly used to give a panoramic reflection of the scene behind us, interrupted only by the window washer's gear, the open window and the frames of the windows. One of my favourite things about this scene, other than the wonderful panorama it gives, is how you can see other reflections in the sides of some of the buildings in the reflection, a testament to Eric Chahi's imagination, attention to detail, and skill with the barest minimum of colours. It's a wonderful and extremely memorable way to start a game.

Another great example of seeing a bigger scene via a reflection is visible in this cutscene from Full Throttle, where we see Ben riding up to a rival gang member as reflected in the lens of his goggles. This is a very stylish and cool way to show this scene, and actually requires less animation than showing Ben from a long shot, riding up to the other rider. A really fun way to show two different angles at the same time.

A similar idea is used in this moment from The Secret of Monkey Island, where Meathook opens the door of the "murderous winged devil" enclosure. Here we see the apprehension on Guybrush's face, and the gradual reveal of what is clearly just a parrot in his eyes, followed by his perplexed look as he realizes what the fabled beast actually is. This is one of my favourite jokes from the game - a wonderful way to deliver a punchline.

An even more complex shot, this later shot from Full Throttle shows the scene directly from Maureen's eyes, as she notices one of Ripburger's henchmen enter her doorway and point a gun at her, who she then deals with by lowering the ramp he's standing on. I love how this conveys the idea of how Maureen notices him at the same time as showing exactly what he's doing, and then showing how he deals with him. It's a great combination of ideas into a single shot, and tells multiple angles of the story at once. I also love the warped and distorted reflection in the surface of the toaster, which gives a great impression of being close to an object, where subtle imperfections in a surface will be more visible.

One final great use of reflections to tell a story is the mirror in Dune - Paul's journey involves seeing him change as he grows into his role as leader of the Fremen. This is beautifully illustrated by looking at yourself in the mirror - at first Paul's eyes are plain, indicative of his offworld heritage. As his exposure to the spice melange changes him, we see his eyes turn gradually blue when we return to the mirror to save our game.

Here we see his eyes coloured deep blue, showing his adaption to the new world, and we also see his companion Chani next to him - I really like this idea of showing the two of them together in the mirror, showing Paul isn't just doing this for himself anymore. A wonderful way to show a character's progression.

One final shot - just to show an exception. It's very common in games with mirrors to simply avoid showing reflections when it's not practical to do so. The mirrors in this shot from Discworld don't reflect a thing, no matter where Rincewind walks, and are just shown to have a glossy surface. This is fine, and perfectly readable as a mirror - it's really not essential to show reflections in order to give the idea of a mirror, it's just a nice touch.

I love seeing how artists have played around with reflections in these scenes. There's plenty of opportunities that playing around with reflections can provide, from simply making a surface look shiny and polished, to giving a whole new way to show a situation. They're a great tool, a fun effect to play with, and a nice way to spice up a scene - and though they may require a little extra code trickery in some cases to get working, well worth the extra effort.