DIR Return Create A Forum - Home
---------------------------------------------------------
Wonky College
HTML https://adventuregames.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Art Theory
*****************************************************
#Post#: 8--------------------------------------------------
Using contrast to affect visibility
DIR By: Pam
Date: May 20, 2021, 4:42 am
---------------------------------------------------------
HTML https://3.bp.blogspot.com/-Q30wLWv5u28/WMx-YUrRrZI/AAAAAAAAA58/o_7SR2RAgc8Aj97xrJOwxPaXpkXr5eIDQCLcB/s400/loom_024.png
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.
HTML https://3.bp.blogspot.com/-QNnHMXBfoIY/WMx-cJLNBQI/AAAAAAAAA68/0-RhAwfjk7EDc-RViEnxqQjY6Kr19V7oQCEw/s400/432082-the-lost-files-of-sherlock-holmes-dos-screenshot-time-to-bust.png
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.
HTML https://1.bp.blogspot.com/-o-Iwkg3cUZQ/WMx-fdrQnzI/AAAAAAAAA68/WXvrL0b6Ug8H3KA5bDMV6zFEsx6sLFIjACEw/s400/gk1_070-640x480.png
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.
HTML https://2.bp.blogspot.com/-vte1VT9ftnQ/WMx-bXjLmpI/AAAAAAAAA68/VLoYCkb7hggcJmSsP1rOEcp6HSJ5HKsNwCEw/s400/22.png
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.
HTML https://1.bp.blogspot.com/-JdQoHhb6wls/WMx-a8M9h0I/AAAAAAAAA68/ikMNuNIXBC4TupLl32hPzvtkgpHfHTa6QCEw/s400/14-9-14.png
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.
HTML https://3.bp.blogspot.com/-VD4OuAroKRw/WMx-cLf6A6I/AAAAAAAAA68/Jd_g6VLAEJ4aq25I42oUJYVsfT6zOwGlwCEw/s400/6-8-6.png
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.
HTML https://4.bp.blogspot.com/--VlmSNMIcM0/WMx-bCxAWRI/AAAAAAAAA68/UbslmfGzuTk3daPP_COu5XKNzfQqYAo4wCEw/s400/19-9-19.png
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.
HTML https://4.bp.blogspot.com/-xBeMCbyKUdk/WMx-dnQLKyI/AAAAAAAAA68/ewPmskoNszo-qcnF6XR5Gdl3pRLOG2v_gCEw/s400/Size.png
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.
HTML https://4.bp.blogspot.com/-AWBqPJYI2X8/WMx-dLwt3CI/AAAAAAAAA68/8ULbSQISIgQzIpO1xoBvw-EUZTf7AqllQCEw/s400/Shape.png
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.
HTML https://4.bp.blogspot.com/-ljV5H326Huk/WMx-cyShxxI/AAAAAAAAA68/UfEbckZfXkMthlGRfHP-nNAKyQo9PYOYgCEw/s400/93.png
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...
HTML https://1.bp.blogspot.com/-VoHirJOOiK0/WMx-dIPYrzI/AAAAAAAAA68/-79_Lr-sjYg5rWxhzgoQ3mM2DidIHmBwgCEw/s400/94.png
...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.
HTML https://4.bp.blogspot.com/-DOw47bXZYyQ/WMx-fFpYqAI/AAAAAAAAA68/48NmwXFXCRUmdUTVos8N2Zn_979qZFdYACEw/s400/Untitled-5.png
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.
HTML https://4.bp.blogspot.com/-RKud8eXymzQ/WMx-eXlzeOI/AAAAAAAAA68/7dk-Y9p51E4HKqmSHrw5L_4ekeQBkuA7gCEw/s400/Untitled-4.png
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.
HTML https://4.bp.blogspot.com/-_BI74XZwUkc/WMx-b-ABcRI/AAAAAAAAA68/L2IA-mOaL6YJfwKl2jzc32G-Xk31m7GDwCEw/s400/25.png
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.
HTML https://2.bp.blogspot.com/-gdOSC-SoAxQ/WMx-dzXrllI/AAAAAAAAA68/hLa1nf-g264xIfXVJbCf6z8510RtHj0XwCEw/s400/Untitled-3.png
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.
HTML https://4.bp.blogspot.com/-r0O20IAP388/WMx-fow73PI/AAAAAAAAA68/hqMYETKSzOEeHO2V-ow097yPW9JWMb6jACEw/s400/runvga_022.png
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.
*****************************************************
Page 1 of 1