A look at graphics: framing an interactive painting

My writings over on Adventure Gamers have been mostly about directing the player in various ways - whether in feeling or focus - so far, something I think is especially important to consider as an adventure game artist, and this month's article is no exception. This month's topic, of filling up the rest of the frame, is something I have struggled with, wondered about and tried to figure out for years, and hopefully my thoughts on the issue will make some sense.

Composition in thirds

A common practice in both photography and art is to mentally divide the composition into both vertical and horizontal thirds when arranging elements, and using these thirds to loosely inform the placement of certain elements. It's common to see objects of interest placed around the intersection of two of the lines, for example, or to set one's horizon line along one of the lateral lines. This scene from Beneath a Steel Sky shows an interesting composition in which the vertical divisions in the composition run roughly down the first and second thirds lines, dividing the picture up evenly, and the placement of the walkway is along the second horizontal third.

The junction of two thirds is an excellent placement for the cockpit of this craft in Space Quest 4 - it's clearly the most interesting object in the scene. We can also see that the landscape is nicely divided into thirds vertically - the top third is sky and distant rock formations, the middle third is the flat path we walk on, which basically doesn't push beyond these lines, and the bottom shows the supporting rock structure and other stony features.

In this scene from Full Throttle we have two focal points - a door that we have to get through and a fuel tower in the distance that we're trying to reach. Here both are placed on opposing thirds - the tower on the intersection of the first thirds, and the door on the second thirds. This balances them both nicely - putting both on one side of the image, or both at the top or bottom would make the scene's weight feel shifted away from this even placement.

This shot from Quest for Glory 3 shows a similar idea but in an opposite configuration - the placement of our hero is around the bottom left third, and the placement of the throne and its occupant is centred around the top right third - even wrapping around it in an L shape that leaves most of the top middle third free to show the throne. Notice also that the pillar runs along the left third - in fact, the whole image feels like it's rather neatly divisible into thirds.

In this shot from Space Quest 5 we can see something similar - not only is Roger's face placed right on the top left third, but the surrounding landscape appears to have been composed into neat thirds. The right third has an organic pillar running down most of the way, ending two thirds of the way down, the bottom left third is take up almost entirely by another organic pillar's descent, and the middle third is reserved for the distance (and another figure, in a different colour).

This backdrop from The Dig also has stone features dividing the scene - the left and right thirds taken up by tall stone structures - as well as a sky that takes up the top third, but also here the centre third has been lit up warmly compared to the structure around it. This entire scene may have been actually drawn with a grid of thirds, so neat is the composition.

I get the same feeling from this scene in Kyrandia 2 - not only is the haystack placed around the bottom left third, but the top of the stack fills the middle third, the bottom (and its shadow) the bottom third. The top left third seems to be all cliff and trees, with the top left third trees and sky, and the top middle third a mix of all three in an interesting way. The path exists in the bottom third, with a fence running right along the third line, and the forest on either side of the middle third changing right around the third lines. It's not possible to know for certain if this was drawn with a grid, but the image certainly benefits from the clean, balanced composition.

This shot from Simon the Sorcerer feels the same - the owl on the top left third, and the land, trees and sky around it divided neatly into thirds. Each third here, too, feels like it's own little micro-composition, making this composition somewhat reminiscent of the layouts of traditional landscape painters, even if the actual execution is more whimsical here.

The same is true here in King's Quest 6 - each third of this scene seems to contain a very specific element - the sky in the top left, then a small plateau in the top middle and a more distant forested hill in the top right. The middle left has a wrecked ship and stones, then a short cliff and path, then the curving edge of the path and a shrub. The bottom left is sea and wreckage, then the main stretch of winding beach, and then finally a grassy mound in the bottom right. It's fairly neatly divided among these thirds, despite the shapes still feeling organic and varied.

Something I particularly like in this scene from Willy Beamish is how lighting helps divide the composition. Notice how the tree on the right side of the image is in shadow in the top and bottom thirds, and lit in the middle, how the fence is shadowed in the right and left thirds, how the shadow of the centre tree's canopy sits right along the third line. Probably my favourite feature is how dynamic features cut off the bottom third - fence and bushes in the bottom left, shadow in the bottom middle, and flowers and wheelbarrow in the bottom right. The bottom third feels like it's been divided extremely neatly along this line, but the varied nature of the shapes and features doing this dividing means it feels much more natural.

This scene from Full Throttle uses lighting nicely too - the bottom third is dark, with the division along the third line being highlighted in the warm yellow coming from a light source that stops around the left third division. It's a simple trick, but helps to define this section of the composition nicely, and does so in an unobtrusive way.

It's interesting how very organic forms can be grouped into neat compositions, too. The rounded hills of this section of King's Quest 6 seem very loose and rounded, but when viewed against a grid of thirds, it's clear that they have a clear, fairly even cutoff point along the first third line - almost as straight as the stone pathway that ends right along the second third line. Notice here, too, how the knight pieces group with the sections of fence to block in the left and right centre thirds nicely.

One last point of interest to me is the idea of how we view a composition. In the standard gameplay view of Dune, it's clear where the scenery is and where the interface is - and here the composition can be considered to be divided up into thirds extremely neatly. The bottoms of the banners, the floor, the pillars - it's all divided up quite squarely, with the interface not part of the scene.

When talking to a character, however, the scenery is obscured. This seems to bring the interface into the composition, with the actual scenery just being a framing device. This being in mind, I like to think that we can measure the composition of a scene across the whole interface, not excluding the bottom section, and of course we can see that the most important part of any character - the eyes - is right on the top left third here. An interesting consideration, if nothing else.

Thirds in composition aren't a perfect way to get a strong layout, nor are they a necessary tool, or even usable in every composition. They are, however, visible in many, many scenes, and a great way to help balance a composition out evenly. Rather than adhering to the 'rule of thirds' for every composition, I think it's mostly important to be aware of them, and know that many artists do use them, and that their use has helped artists with their compositions for centuries, yet still remains effective today.

The 's-curve' in composition

An extremely common element in composition is what artists and photographers often refer to as the 'S-curve'. This is where elements of a scene form a sinuous, winding path through the shot, often going back into the distance, but not always so. An excellent example is the above location from King's Quest V, in which we see a staircase leading up in a winding path to a throne. There's a few reasons this looks so good - the curving s shape is much more natural than a straight set of stairs, it balances the element so it exists either side of the centre line of the background as it travels up, and it adds a sense of distance, making the steps feel further away, because the path is longer - the shortest line between two points is always a straight line, and by curving this line, the path is made longer. This makes for a much grander set of stairs.

A great example of this is this path off into the distance in Quest for Glory 4. Here the path winds many times, making the journey seem long, and also making the path feel precarious. Aside from distance, it also makes the path more visually interesting - a straight path isn't very exciting to look at, and doesn't feel very 'designed'. This feels more elaborate and stylish; it's an interesting feature by itself, despite the fact that it's just a pathway.

Even when we can't see the entire shape, the s-curve is useful, such as in this scene from Shannara. Here we can see just a single curve on the path, but the presence of the manor doorway in the distance suggests to us that the path winds back to the left (even though the door clearly opens onto grass). The detail of the fountain here provides a natural obstacle for the path to curve around, and acts as a nice layer for it to wind behind.

The power of suggestion is evident, again, in this scene from Full Throttle, where the foreground path isn't defined clearly as a curve, but has markers that sit on it to form one. This acts as a natural continuation of the curve that leads back into the distance, and completes the s shape nicely, while also breaking up the elements so that we're not just looking at a single road.

This Discworld 2 shot has an interesting idea, in which the path veers all the way from the centre of the composition until its right edge is cropped by the edge of the viewing area, and then comes back into frame. The foreground barrel also feels like a slight continuation of this curve - it cuts in right on the sweep towards us, and then takes it back to the edge again.

The Dig has a particularly interesting version here, because it's an example of an s curved path that traverses the screen laterally, rather than back into the distance. Here, as with the other examples, it lends a great sense of a dynamic design, as well as a natural feeling. This means that the full height of the scene is used for playability, rather than just one small section, as is common with pathways that run across the scene in adventure games, and makes for a much more interesting scene.

The curving, natural paths we've seen can also be shown to wind around a column as shown in this scene in Dune. Again, this adds depth, interest, variety and an interesting sense of balance to the scene, despite just being a background element. Stairs like this are particularly nice because we get to see both the lit and shadowed side of a pathway, adding in some wonderful value contrast to the element - a common thing to see in adventure game art.

Even more rigid shapes can benefit from this sort of approach - the stairs to the ground in this Beneath a Steel Sky background aren't curved, but still make an angular shape that veers right, then left, similar to the curves we've been looking at. The effect is similar, without ruining the angular, technological feel of the background.

This scene from King's Quest V shows another approach, in which our curved path is balanced by the opposite curve of the tree above it, a nice complement to the shape beneath. When broken down into simple shapes, this curve is no different to the others - it's a dynamic s shape that balances nicely in the composition and adds a beautiful flow to the scene. It means that the scene isn't just a straightforward composition - it'd be simple enough to have a straight tree above a straight path, but this feels both more natural and more varied.

This scene from Sam & Max Hit the Road shows another interesting approach, where the shape of the curved path is continued by the curve of the fence beyond it. In thumbnail the two flow into each other, creating one big s curve that runs through the whole composition. The fact that they share a colour scheme probably helps this - they connect to each other quite naturally.

It's not just pathways that can wind off into the distance, either. This shot from Quest for Glory 4 shows a similar approach with the water and the land - the land juts out in curving sections that forms a nice, winding s curve as it goes off into the distance. Again, this adds a feeling of balance, of interest and of a natural environment. Water doesn't form straight edges often - it follows undulations in the land, as it does here. This is both more realistic and more beautiful.

This Space Quest 5 background is another great use of the s-curve, with various different winding forms in the scene all working together to make a wonderfully alien landscape. Particularly nice is how the curve on the left frames the curving shape in the centre, leaving enough space for us to see it clearly, before then ducking back behind it at the top. This is a cool example of different curves working in unison, complementing each other and accenting each other's forms.

Even the slightest s-curve add to a scene, such as the one in this Simon the Sorcerer 2 scene. It's just the mildest curve down as we follow the shape of the chimney, but it feels much more interesting than a straight drop down would, and gives a greater sense of depth. The black framing helps to accentuate the shape, too, showing us the curve that goes directly from one side of the centre line of the background to the other as it descends.

Even when there's no direct s-curve, the arrangement of elements can 'lead' a path through a scene in an s shape. This scene from Willy Beamish shows this - the closest element is the clock tower in the very far left, which then leads to the grouped mass of buildings to the right of the scene's centre line, which points to a fountain back to the left of the centre. The next prominent object is another grouped mass, back closer towards the centre, and then a lone, but clear, building back to the far right. Even though there's no actual path drawn between these elements, their placements mean they form an s-curved composition going back into the distance.

It's very common to see the s-curve in compositions of all types, and adventure game background art is no exception. It's a powerful device that can assist the artist in adding depth, variety and interest to their scenery. Whether shown by an actual pathway, or just the suggestion of a curving line through placement of elements, they're a fantastic tool to have in one's composition toolbox, and can really help to liven up or balance a scene.

Interesting ways to frame scenery

Framing interests me in adventure game art, especially when outside the actual piece of art itself, and separate elements treated as a frame, as it's not something I've done a lot of. It's fascinating to see what other artists have experimented with. Some games frame their scenery with large interfaces, such as Waxworks, shown above. Here we can see a large amount of interface that naturally frames the shot - with elements like the inventory down the bottom, various options to the right, and movement controls to the left. One particular detail I like is the character shown in the top left corner, showing the person whose story we're experiencing at this point in the game.

 

This character graphic changes depending on which story we're experiencing, as can be seen here, and helps insert some of the character into an otherwise fairly generic interface. It was common to show a static icon or portrait of your character in games where the view is a long way away, or when we see from their eyes. Along with the decorations, such as the columns and stone relief details, they help to give the interface a nice feeling of style.

Dreamweb has the character portrait even bigger - our protagonist's constant presence takes up a pretty large section of the screen, and it juts out in an unusual silhouette. The actual framing of the scene, however, is mostly done by having the actual walls visible, and surrounding the rest with a vaguely metallic patterned texture. This acts as multiple levels of framing - the walls of the scene, then the backdrop of the texture surrounding, which is then framed by the GUI and portrait. This mostly works because of the very zoomed out view, and would probably be less useful for a more traditional sort of view.

Even the simplest of elements can help an interface that's framing a shot to feel more dynamic. The Dune GUI, shown here, breaks the otherwise straight frame with a sculpted figure whose silhouette breaks out of the frame and into the scene, an interesting and artistic alternative to the very common rectangular GUIs we're used to seeing. The fact that the figure's head looks up and down depending on our action helps this to feel more dynamic still, and helps the GUI and game from feeling so separate from each other. It might be a small connection, a minor intrusion beyond the boundary of the scene, but sometimes it's the little touches that count.

Loom, however, does the opposite. Here we can see the tip of Bishop Mandible's dark cathedral jutting out past the point where the letterbox frame - a very common way to frame an image - has its boundary. It's the smallest of touches, repeated often in the game, but it feels like a nice subversion of the image's frame - allowing this one particular element to jut out past the border of the scene feels like it's adding depth and interest to the scene.

Sometimes this can be taken to the extreme - as shown here in Laura Bow 2. Rather than painting the ceiling in, an unimportant part of the image, the artists clearly chose to leave it blank, making the pterodactyl stand out very clearly. It's an odd way to present scenery, and perhaps not the best, but it is certainly an interesting approach to adding an artificial framing element in, rather than painting something that would be unimportant anyway.

It feels a little more natural in Codename: ICEMAN, where the shape of the submarine we're in frames the shot, as well as some foreground elements. Here, rather than showing what's outside the scene we're in, they merely suggest the shapes of certain things, and deem the rest unimportant to show. This has the interesting effect of lending an interesting shape to the scene, redolent of submarines, and supports the art more nicely than the previous example.

This can be taken to an even more interesting, evocative idea - such as in this cave in King's Quest 4. The sinister nature of the cave is conveyed wonderfully by shaping the black frame of it like a skull, well supported by the niches in place of eye sockets. I love that the artists decided to make the shape of a skull here - it's bold, inventive, and doesn't get in the way of actually playing the scene. A great way to have fun with the shot and add some creativity.

Another option, other than using pure black, is to use a difference in saturation to guide our attention. This shot from Gold Rush shows the artists greying out the unimportant elements, using the coloured areas to guide our attention to where we need to look. This is an interesting idea - it means that the framing elements get a lot of detail that help show the world, without taking away from the important parts we need to focus on.

This shot from Future Wars shows a variation on this idea - here we see a cutaway of one scene, as framed by elements of another part of the scene. The small palette of the game makes this framing very effective - it's easy to see where one part of the scene ends and the other begins - because our framing is still being done in pure black. An effective way to outline one part of a scene, while keeping it connected to another part of the scene.

A really fun example of this idea is shown in this scene from Goblins Quest 3, where we can see one character looking in on another scene, and his presence acting as part of the framing of the shot. This is a really fun example - it not only shows two things at once, but does so in a fun way. I particularly like how the hands break the frame of the crystal ball, which breaks the silhouette of his face.

One particularly impressive - and bizarre - example is in the B.A.T. games, where we see multiple parts of the city at once. Within the frame that our mouse is focused on, we can interact and pan the scenery, while still being able to see wider shots of the city at the same time. This makes overall composition very difficult, as our eyes have many elements to be distracted by, but it definitely lends a unique feeling to the games, and presents us with an interesting alternative. The fact that each micro composition within a panel manages to be readable, stylish and evocative is very impressive, and really shows the power of strong compositions even around the thumbnail level.

Perhaps the most bizarre and impractical use of interesting framing is in Fascination, where scenery is often shown as cutout elements seen in the silhouettes of various things that were somehow deemed relevant to the location - the shapes of books, cars, even the silhouettes of people, as seen here. This is such an odd approach, and rarely practical (would you believe that this is an actual playable scene from the game, with actual hotspots we have to click on?) but no doubt the artists had fun playing around with the idea.

Framing, then, presents many interesting avenues in which an artist can experiment. They're not always practical or useful, but for certain moments, or certain projects, framing a scene in an interesting way can add a lot to scenery. This is definitely outside of my realm of experience as an artist, but very much something I've admired and been interested in, and maybe there will come a time where I'll find an interesting use for such an idea. Until then, I'll simply keep an eye out for examples like these, and collecting as many interesting variations on the idea as I can.

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.