0% found this document useful (0 votes)
72 views33 pages

Design Arcade Comp Game Graphics 07

Color is extremely important to arcade game graphics design. When used correctly, color can produce a variety of powerful physical and emotional effects. Color can make game objects "pop" or stand out to the user.

Uploaded by

acefogo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
72 views33 pages

Design Arcade Comp Game Graphics 07

Color is extremely important to arcade game graphics design. When used correctly, color can produce a variety of powerful physical and emotional effects. Color can make game objects "pop" or stand out to the user.

Uploaded by

acefogo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Chapter 7

Color and Arcade


Game Graphics
In this chapter, youll learn about:
w Basic color theory
w Color mixing
w The language and meaning of color
w Color perception issues
w Volume, light, and shadow
w Transparency, translucency, and opacity
w Bounding colors
w Color and arcade game design styles
w General rules for using color in arcade games
209
Color is extremely important to arcade game graphics design. When used cor-
rectly, color can produce a variety of powerful physical and emotional effects in
games. Among other things, we can use color to:
n Attract the users attentionColor can make game objects pop or stand
out to the user.
n Alter the users mood and feelingsColor can alter and affect the users
mood and emotions. For example, bright colors can induce cheer or happiness
while darker colors can induce fear. It can also be used to convey cultural or
gender-specific messages.
n Alter the users perception of spaceColor can add depth and dimension
to objects and scenes. Essentially, color can make things seem more real to
the user and can project 3D properties onto 2D images by manipulating the
users perception.
n Create aesthetic appealColor can make objects and scenes seem more
enticing, which can stimulate the users interest and enhance their enjoyment.
n Show and accentuate similarities and differencesColor can highlight
the similarities and differences between game objects. For example, you can
use color to emphasize one object and de-emphasize another such as in a
menu or title screen.
As you can see, color is an extremely powerful device. However, in order to
achieve these results in your own games you must first learn what color is, how it
works, how to produce it, and then how best to use it. Thats the purpose of the
rest of this chapter. Theres quite a bit of material, so lets dive right in.
Basic Color Theory
Color exists as wavelengths of light. The sun generates this light and shines it on
different objects. All objects, whether they are organic or man-made, absorb some
of these wavelengths while reflecting others. Those wavelengths that are
reflected reach the retina of the eye and stimulate the brain so that the perception
of color is experienced.
The total sum of light (and color) we can see is called the visible spectrum. The
total number of colors that a computer display can generate is called its color
gamut. Despite the fact that modern computer displays can produce millions of
colors, no computer system can reproduce all of the colors that can be seen with
the human eye. This is due to the wide differences of CRT picture tube quality and
the impact of room light. Under ideal viewing conditions, scientists estimate that
the average human eye can distinguish and perceive anywhere between 1 and 7
million distinct colors. This is pretty important since I mention throughout this
book (as do many other authors) that modern computers can generate up to 16.7
million colors. Actually, this is only partially true. The 24-bit RGB hardware color
210 Chapter 7 / Color and Arcade Game Graphics
palette creates 16.7 million machine states but these do not necessarily correspond
to 16.7 million unique colors. The average human eye just cant perceive that
many colors.
In addition to the concept of color there is the element of tone. Tone measures the
lightness or darkness of an image and is subjective in relationship to the other col-
ors that are present in an image. Tone gives color its depth and form. It provides
objects with shape and definition as the tonal range of an image runs from light to
dark and vice versa. Tone is analogous to a color gradient described elsewhere in
these pages. Tone has simple rules: the larger the tonal range, the higher the
image quality. Meanwhile, the smaller the tonal range, the lower the image quality.
Images with poor tone appear flat and washed out, while images with good tone
look smooth and vibrant. High color modes tend to exhibit strong tonal ranges,
while low color modes exhibit weak tonal ranges.
But wait, theres more! Every color also has three basic properties: hue, satura-
tion, and value.
Hue is the color being described or produced, such as yellow, black, green, etc.
Hue is also known as the local color of an object as it will look as expected when
viewed close up but can appear quite differently when viewed from a distance. For
example, a particular shade of green might appear bluish if you move far away
from the computers display.
Saturation, also called intensity or brightness, is the strength or weakness exhib-
ited by a given color. In other words, saturation measures the purity of a color.
On computer displays, saturation is typically specified as a percentage of light.
Highly saturated colors display more brilliance, while less saturated colors display
more dullness. For example, 100% black would produce a vivid black, while 50%
black would produce a shade of gray.
Value simply measures the degree of lightness or darkness, also known as the
tonal range of a particular hue.
NOTE: Like RGB, hue-saturation-value, or HSV, is yet another method of select-
ing computer color. It will be described in more detail in Chapter 8.
Color Mixing
At the heart of color theory, whether its computer generated or not, is the color
wheel. Think of the color wheel as a circle that contains different colors waiting to
be blended together to produce other colors.
Chapter 7 / Color and Arcade Game Graphics 211
At the most basic level of this model, there are three primary or primitive colors
red, blue, and yellow on the color wheel. They are called primary because no
other colors can be mixed together to create them. They are essentially unique
unto themselves.
In addition to the primary colors, there are secondary colors. These colors are
orange, green, and purple, and are produced by mixing two adjacent primary col-
ors on the color wheel. For example, red + yellow = orange and blue + yellow =
green.
Combining primary colors with secondary colors on the color wheel creates inter-
mediate or tertiary colors. Examples of intermediate colors include yellow-orange,
red-orange, yellow-green, blue-green, blue-purple, and red-purple. Intermediate
colors are also sometimes referred to as radical colors. These colors are frequently
found in nature and include such colors as sky blue, olive green, and earth brown.
Once you move beyond mixing primary, secondary, and intermediate colors you
experience what are known as complementary colors. Complementary colors lie
directly opposite from one another on the color wheel. These colors contrast each
other because they share no common colors between them. For example, red is
complementary to green, orange is complementary to blue, etc. When you com-
bine complementary colors you effectively cancel out the complementary colors
and produce neutral colors. Neutral colors include grays and browns.
The subtle colors we see in most images begin to become apparent as primary,
secondary, and tertiary colors are combined and blended ad infinitum. As this hap-
pens, a much more sophisticated color wheel evolves. In it, the primary,
secondary, and intermediate colors still exist, but there are many thousands or
millions of in between color shades that become evident as well. Its this color
wheel thats the foundation of the color used by computers and in computer arcade
games.
212 Chapter 7 / Color and Arcade Game Graphics
FIGURE 7-1: The Color Wheel
On computers, there are two general methods for combining color together elec-
tronically. They are known as additive and subtractive color mixing.
Additive Color Mixing
Red, blue, and green are the primary colors
used in the additive color mixing process.
When these colors are projected onto each
other in equal parts they produce white.
Varying the intensities or mixtures of these
colors creates other shades of color. For
example, black is produced when all traces of
red, green, and blue are removed from an
image. All computer displays employ a form
of additive color mixing to generate their
colors.
Subtractive Color Mixing
Subtractive color mixing occurs when white
light is project on a colored surface and is
partially reflected back. The reflected light is
the color that we actually see. For example,
when sunlight hits a lemon, we see yellow.
Unlike additive color mixing, subtractive
color mixing isnt based on RGB. Rather it
uses cyan-magenta-yellow, or CMY. Mixing
these three colors to different degrees pro-
duces other colors. For example, black is
produced when all three colors are mixed
together at 100%. Subtractive color mixing is
used almost exclusively in color printing and
color photography and is just mentioned here
for comparative purposes.
Color Temperature
Designers often classify colors by their temperature, or their degree of warmness
or coolness. Specifically, reds, oranges, and yellows are considered to be warm and
exciting, while greens, blues, and violets are considered to be cool and sedating.
Warm colors tend to be stimulating, producing the emotional feelings of closeness
and friendliness. Cool colors, on the other hand, tend to be soothing, producing
the feelings of distance and/or openness.
Chapter 7 / Color and Arcade Game Graphics 213
YELLOW
WHITE
GREEN
RED
CYAN MAGENTA
BLUE
FIGURE 7-2: Additive Color Mixing
Diagram
RED
BLACK
ORANGE
YELLOW
GREEN
VIOLET
BLUE
FIGURE 7-3: Subtractive Color Mixing
Diagram
Understanding these color behaviors can have a major influence on the mood your
game artwork projects to the user. For example, a game could use warm colors to
represent the heat of an underground lava cave or cool colors to depict a dark for-
est or a cold iceberg. Its even suggested that warm and cool colors can raise or
lower ones body temperature, suggesting a physical connection with the use of
color in addition to the emotional one.
Once you grasp the fundamentals of color mixing, youll be in good shape when it
comes time to define your own. Yet, before we learn how to do this, it would be
helpful if you understood the hidden language of color as well as reviewed the
essential dos and donts of color use in arcade style games.
The Language and Meaning of Color
Color is more than just something we see and experience. It has its own language
and can be used to apply specific meanings, moods, and symbolism to the images
you create for your games. For example, a black object in a game might be used to
signify evil or a background scene that incorporates lots of orange might project a
sense of warmth. Along the same lines, certain color choices can provoke specific
emotions and feelings in the user. For example, a fast-action arcade shooter ren-
dered in various shades of red might add to the sensation of excitement or an
adventure game rendered in cool, dark colors might provoke a sense of fear. By
knowing a little something about the hidden language and meaning of color, you
can maximize its use in your game projects.
Consider the examples in Table 7-1 of popular meanings for some of the more
common colors.
TABLE 7-1: Meanings of Common Colors
Color Common Meaning(s)
Red Danger, urgency, passion, excitement, aggression, heat, love, or blood
Magenta Imagination or outrageousness
Pink Friendliness, sweetness, romance, or compassion
Orange Warning, courage, warmth, or happiness
Yellow Caution, warmth, brightness, or cowardice
Gold Illumination or wisdom
Brown Earthiness or stability
Blue Attention, dignity, coolness, depression, power, or peace
Turquoise Refreshing or cool
Purple Wealth, royalty, mystery, sophistication, or intelligence
Lavender Romance or fantasy
214 Chapter 7 / Color and Arcade Game Graphics
Color Common Meaning(s)
Green Safety, nature, health, happiness, environment, envy, or money
Gray Neutrality, gloom, practicality, or security
Black Death, evil, rebellion, strength, or fear
Beige Neutrality
White Purity, light, or emptiness
NOTE: The examples given in Table 7-1 are general interpretations that pertain
mainly to American and Western European cultural sensibilities.
The Cross-Cultural Meaning of Color
Like any other language, colors vocabulary is largely culture dependent. For
example, in the Middle East, blue is considered to be a protective color, implying
strength; in the west, blue is considered a tranquil color and implies peace. Simi-
larly, green is a sacred color in some cultures and represents greed and wealth in
others. Its important to be aware of these distinctions in order to avoid confusing
users from different cultures. This is particularly important given the growth of
the Internet and how popular arcade games are with players around the world.
Even so, these definitions can be helpful in determining how to portray certain
characters and objects with color in your games.
Table 7-2 provides some additional examples of the cross-cultural meanings of
color.
TABLE 7-2: Cross-cultural Color Meaning Matrix
Color Western
Europe &
USA
Japan China Brazil Nigeria Korea Middle
East
Red Danger,
anger, or
stop
Danger
and anger
Joy and
festivity
Anger and
hate
Danger Anger,
danger,
evil
Danger
and evil
Yellow/
Gold
Cowardice,
caution, or
warmth
Happiness,
grace,
nobility
Honor and
royalty
Money,
gold, and
wealth
Sunshine
and
brightness
Wealth Happiness
and
prosperity
Green Sexual
arousal,
safety,
greed,
envy, or
environment
Future,
youth,
energy, or
forest
Youth and
growth
Hope or
wealth
Wealth Nature,
peace, or
freshness
Fertility and
strength
Chapter 7 / Color and Arcade Game Graphics 215
Color Western
Europe &
USA
Japan China Brazil Nigeria Korea Middle
East
White Purity, virtue,
goodness
Death
and
mourning
Mourning
and
humility
Purity and
peace
Purity Innocence
and purity
Purity or
mourning
Blue Machismo,
masculinity,
calm,
authority, or
coolness
Villainy
or cold
Strength
and power
Happiness Calm and
peace
Cool or
freshness
Protection
Black Death and
evil
Evil Evil Death Evil Darkness
or evil
Mystery or
evil
NOTE: The examples presented in Table 7-2 arent meant to dictate how you
should use color in your games. Rather, they are provided to educate you on
how some users (both domestically and abroad) may interpret the colors
youve chosen from a cultural standpoint. When designing games that may
wind up overseas, its important to consider the sensibilities of the users that
may eventually play them.
Do these differences mean that youll have to rework your existing game artwork
to pass muster in different countries? No, probably not. However, you should be
aware of the different cultural interpretations of color so you dont accidentally
offend users in different countries or improperly communicate the messages or
themes associated with your game.
Color and Mood
When used appropriately, color can strengthen the users interest and stimulate
their involvement with your game. Setting the proper mood through your color
choices only helps to reinforce this. While the examples in Table 7-3 are by no
means definitive, they do provide you with some good starting points on how to
best tailor your color selections for different game audiences and scenarios. For
example, you wouldnt want to use lots of warm, bright, happy colors for a game
with a dark or violent theme. Along the same lines, you wouldnt want to use very
strong or aggressive colors for a game with peaceful or harmonious overtones.
By applying these meanings to your graphics, you can induce different moods in
users as they play your game. For example, graphics rendered in dark hues such
as gray can instill a sense of fear or fright in a scene. Similarly, certain shades of
blue can set a melancholy tone while orange can transmit a happy tone.
216 Chapter 7 / Color and Arcade Game Graphics
Please refer to Table 7-3 for some examples of when and where to use certain col-
ors to create specific moods and emotions in your games.
TABLE 7-3: Game Mood Color Usage Matrix
Desired Mood Recommended Game Type Suggested Foreground
Color Combinations
Suggested
Background Color
Combinations
Happy, upbeat,
cheery
Maze/chase games, puzzlers,
platformers, and educational
games for young children
Oranges Reds and yellows
Sadness, gloom,
despair
Shooters and platformers Grays Blues
Harmony, peace,
wisdom
Educational games White Blue and gold
Evil, doom, death Shooters and platformers Blues Grays
Mystery, adventure,
fantasy
Maze/chase games, puzzlers,
platformers, and educational
games for young children
Purples Lavender,
magentas, pinks,
and gold
Purity, romance,
sweetness
Maze/chase games, puzzlers,
platformers, and educational
games for young children
Pinks Whites, reds, and
lavender
Nature, stability,
earthiness
Shooters and platformers Greens Grays and browns
Technology, futuristic Maze/chase games, puzzlers,
and platformers
Grays and blues Purple and gold
Excitement, anger,
power
Maze/chase games, puzzlers,
and platformers
Reds Blues and oranges
NOTE: For our purposes, foreground colors refer to the colors used for fore-
ground screen objects such as sprites and bonus/pick-up items. Background
colors refer to background tiles, scenes, and framing elements. As indicated
in Table 7-3, these color choices are just suggestions. Your individual tastes
and the type of game will actually dictate the colors you use. Even so, I
thought it might be helpful to give you a sense of how certain colors can
project certain moods, feelings, and emotions to the user.
Color Perception Issues
As one might expect, everyone perceives color somewhat differently. In some
cases, these differences in perception are due to ones upbringing or cultural envi-
ronment. However, in most cases, biological and physical factors are responsible
Chapter 7 / Color and Arcade Game Graphics 217
for these differences. Of these, age and gender seem to play the most significant
roles.
Age and Color Perception
Age can have a major effect on color perception and actually might influence how
the user enjoys and experiences your game.
In a nutshell, this is how different age groups interpret color:
n Young childrenPrefer warm and very intense colors as they instill a sense
of happiness.
n Older children and young adultsRespond better to bright, warm colors
than dull, cool colors.
n AdultsPrefer cooler, more subdued colors to warm, saturated colors.
n Older adultsRespond better to brighter colors due to degrading eyesight.
Table 7-4 outlines the issues associated with each of these age groups and pro-
vides some suggestions on how to accommodate them.
TABLE 7-4: Age Groups and Color Use Suggestions
Age Group Suggested Color Choices/Schemes
Under 10 Use warm and very intense color schemes. Theyre friendly, cheerful, and non-
threatening to younger audiences. Enhances the cuteness factor of most games
targeted toward young children.
10-25 Use warm and intense color schemes when you need to attract attention. Dont be
afraid, however, to use darker or dreary color combinations with this age group if it
makes the overall game experience more realistic.
25-50 Limit the amount of warm and intense colors for adults. Theyre no longer into candy
canes and lollipops. They want action and are particularly interested in maintaining
the suspension of disbelief (i.e., realism). Feel free to use plenty of cool, dull,
intermediate colors for games targeted towards these audiences. For them, realism
counts more than anything.
Over 50 As people age, they begin to experience difficulty discerning between different colors.
This is especially true for older adults, as they tend to see colors dimmer than they
actually are. As a result, use warmer and more saturated colors for games geared
towards older audiences.
NOTE: As always, use the information provided in Table 7-4 as suggestions
only.
218 Chapter 7 / Color and Arcade Game Graphics
Gender and Color Perception
Surprisingly, game designers and graphic artists seldom take the issue of gender
into account. Theres evidence that gender plays a significant role in color appreci-
ation and recognition, which in turn may influence how both men and women
perceive and enjoy your game.
Simply put, the research of gender-based color perception is interesting, to say
the least. Studies have shown that women prefer cooler colors than men do. Simi-
lar studies concluded that men tend to prefer brighter, more intense colors than
women do. Moreover, women are able to distinguish and perceive color better
than men are.
What does this mean in real-world terms? Well, this research suggests several
things, including:
n The possibility that women and girls are more likely to play and enjoy games
with soft, cool, or pastel color schemes than men.
n The possibility that men and boys are more likely to play and enjoy games
with warm, saturated colors than women.
n The possibility that women and girls are probably more sensitive and aware of
color schemes used in games that dont quite match reality. For example, they
are probably more likely to tell that a game is using the wrong shades of brown
for wood or hair, for example, than most men are.
n The possibility that women and girls may be more likely to have their moods
altered by a particular color scheme than men.
Table 7-5 summarizes these gender-specific differences. In any case, dont let this
issue stop you from making the game you want to make. Rather, just be aware of it
and take it into consideration when you plan and select the colors for your next
game project.
TABLE 7-5: Gender and Color Preference Summary
Gender Warm Colors Cool Colors Saturated Colors Softer Colors Color Sensitivity
Men Prefer Not preferred Prefer Not preferred Low
Women Not preferred Prefer Not preferred Prefer High
NOTE: There is no significant evidence that different races perceive colors dif-
ferently. Instead, age, gender, and culture remain the main determinants of
color perception.
Chapter 7 / Color and Arcade Game Graphics 219
Other Important Color Concepts
Before delving further into the other aspects of color use, its important that you
understand some of the lingo and concepts youre likely to encounter throughout
the rest of this book, not to mention the software youll use. Therefore, you
should understand such items as:
n Shade
n Tint
n Contrast
n Luminance
Shade
Shades are the dark values of a particular color. Blending a given color with differ-
ent degrees of black produces shades. Shade plays an extremely important role in
arcade game graphics because it gives objects the illusion of realism by simulating
how light is reflected and absorbed by different objects. For example, anyone can
draw an apple and color it red. However, unless they properly shade it with pro-
gressively darker shades of red, it wont look very realistic.
Figure 7-4 demonstrates this concept by showing progressively darker shades of
white as you move towards the right.
Tint
Tints are the light values of a particular color. Essentially, tint is the inverse of
shade. Blending a given color with varying degrees of white produces different
tints.
Figure 7-5 demonstrates this concept by showing progressively lighter shades of
black as you move towards the right.
220 Chapter 7 / Color and Arcade Game Graphics
FIGURE 7-4: Example of Shade
FIGURE 7-5: Example of Tint
Contrast
Contrast emphasizes the differences between two colors. For example, both white
and black are contrasting colors, as are many complementary colors. Like shade,
contrast is an important element in arcade game design when properly used, as it
allows you to create excitement and interest with your images.
Contrast is particularly important for backgrounds because without proper con-
trast, your foreground objects will be difficult to distinguish against backgrounds
of different colors and complexities.
Images that exhibit proper contrast are much more pleasing to the eye than
images that dont. Figure 7-6 shows how contrast can influence visual appeal.
Notice how much better object A looks when compared to object B. This is
because object A uses proper contrast.
Luminance
Luminance is the energy of a given color. Colors with more luminance will appear
brighter than those with less luminance.
Figure 7-7 demonstrates this concept. Notice how object A appears so much
brighter than object B. This is because object A has more luminance than
object B.
Luminance influences game graphics in various ways. For example, objects with
low luminance will be difficult to see against dark backgrounds and vice versa.
Chapter 7 / Color and Arcade Game Graphics 221
A
B
FIGURE 7-6: Example of Contrast
Smoothing Objects with Color
In Chapter 2, we discussed how screen resolution could cause unsightly stair
stepping (called aliasing) to occur along the edges of graphic shapes as they are
drawn on the screen. Well, aside from increasing the available resolution, the only
other way to improve the quality of images and reduce the impact of aliasing is to
use careful color shading. The most common method to accomplish this task is to
use what is called anti-aliasing. Anti-aliasing uses a variety of algorithms to blend
the edges of an object with shades of a similar color. This has the effect of smooth-
ing the edges of the object and makes it appear more natural against the
background. Figure 7-8 demonstrates this concept by comparing two graphic
shapes. The object on the left is aliased while the object on the right is
anti-aliased. Notice the subtle shades of gray along the edges of the object on the
right and how much smoother it appears on-screen.
222 Chapter 7 / Color and Arcade Game Graphics
A
B
FIGURE 7-7: Luminance Example
FIGURE 7-8: Aliasing vs. Anti-aliasing
Anti-aliasing is a powerful technique with many, many applications in arcade game
graphics. When used properly it can greatly improve the appearance of all of your
text and graphic objects. Therefore, you are encouraged to take advantage of it
whenever possible.
One thing to understand is that anti-aliasing wont be available to you in every
instance. This might be due to a limitation of your graphics program or due to
color limitations in the current display mode since there must be extra colors
available to produce the smoothing effect. However, you can effectively simulate
anti-aliasing by taking advantage of the power of shade and picking similar colors
to manually blend an objects edges with the contents of the background.
Volume, Light, and Shadow
Every object has volume, whether its an airplane, egg, building, or coffee cup.
Volume adds the element of depth to objects. In turn, this depth makes objects
appear natural and realistic. In order to achieve the illusion of volume in a 2D
space, you must understand how to manipulate light to bring out the subtle and
dramatic differences exhibited by different objects.
Light is by far the most important element in representing volume. All of the
shadows and highlights visible on objects are directly influenced by the origin of
the light source that shines on them.
The origin of the light source directly determines the size and location of shadows
and highlights cast by a particular object. Shadows are created whenever light is
unable to reach certain parts of an object since the object itself blocks it. For
example, a building casts a shadow because it blocks all or part of the sun. High-
lights, on the other hand, are created whenever light is reflected off an object. For
example, a metal dome displays a highlight when light is reflected off its surface.
Chapter 7 / Color and Arcade Game Graphics 223
Shadow
Highlight
FIGURE 7-9: Shadow and Highlight Example
Its very important to understand that the appearance and positioning of shadows
and highlights on objects are not constant. They can change and tend to move
along with the light source that created them. Many designers fail to take this fac-
tor into account when they design their artwork.
Figure 7-10 shows some examples of this phenomenon.
Shadows possess an interesting property that highlights do not. Shadows take the
general shape of the object that casts them. For example, if the object casting a
shadow is round, so is its shadow. The actual size and shape of the shadow will
depend, however, on the position of the light source. Light sources that are posi-
tioned at extreme angles will cast longer, thinner shadows while light sources that
are positioned at slight angles will cast shorter, thicker shadows.
Basic Rules of Light and Shadow
There are several simple rules that you should remember when working with
light and shadow. Understanding them will help you to produce convincing shad-
ows and highlights. These rules are:
n All shadows an object casts will always appear darker than any part of the
object itself.
n Always select colors that meet the users contextual expectations. In other
words, dont use a dark color to render a highlight! Highlights should be cre-
ated using very intense colors such as white or yellow but can also be made up
of lighter versions of other colors as well. Similarly, shadows should be cre-
ated using dark colors such as gray or very dark shades of the primary colors.
n Always make sure you properly orient the location of shadows and highlights.
For example, a common mistake many designers make is to place shadows and
highlights on the same side of an object. This is wrong. Shadows and high-
lights will always appear away from each other.
224 Chapter 7 / Color and Arcade Game Graphics
Light Source
FIGURE 7-10: Light Source Movement and Impact on Shadows and Highlights
n The closer the light source, the brighter the highlight on an object. This
means that you should draw the highlight with a larger radius and with more
intensity to properly reflect the proximity of the lights reflection.
n Dont use unrelated shades to render shadows! For example, if you opt to cre-
ate a shadow using shades of gray, stick with it. Dont suddenly introduce
blues, reds, or other colors. This will simply ruin the effect.
n Objects with rounded and/or smooth surfaces tend to cast softer, more subtle
shadows, i.e., lighter shadows.
n Objects with sharp and/or distinct edges tend to cast harder and more distinct
shadows, i.e., darker shadows.
n Shadows and highlights must always be used together. One cannot be present
without the other; otherwise, youll break the rules of light and shadow and
ruin the element of realism they can provide.
n The length of a shadow varies depending on the angle of the light source.
Steeper angles produce shorter shadows. For example, if light reflects in front
or above an object, a short shadow will result. Conversely, slight angles pro-
duce relatively long shadows. Be careful, however. If the angle of the light
source is too slight, the illusion of depth can be ruined because the resulting
shadow will be too long.
n Try to limit how you describe shadows and highlights by using a maximum of
four to eight shades of a given color. Using any less reduces the effectiveness
of the illusion while using any more is simply overkill.
Table 7-6 contains some examples of good colors to use for shadows and
highlights.
TABLE 7-6: Useful Shadow and Highlight Colors
Shadow Colors Highlight Color
Black
*
White
Dark gray
*
Light gray
Medium gray
*
Yellow
Dark blue Light yellow
Very dark green See Note
Very dark red See Note
NOTE: Colors marked with an asterisk (
*
) denote realistic shadow colors. Other
colors can be used to render shadow effects but with diminished realism.
Highlight colors work somewhat differently as they always use white or yel-
low to represent the area where the reflection of light is the most intense.
Chapter 7 / Color and Arcade Game Graphics 225
However, in many instances they can also consist of lighter color variations
of the object itself and still remain visually effective.
Accurately Representing Volume with Color
Creating effective renditions of volume require more than accounting for the posi-
tion of a light source. Rather, objects with volume require the use of color shading
and gradients to accurately create a sense of depth. Gradients have been previ-
ously described as transitional ranges of color that smoothly fade from one shade
to another. Gradients can go from light to dark or dark to light. Gradients play an
extremely important role in arcade game graphics as they can be used to make
objects appear smoother and more natural looking. Once you master their
usage, youll never be guilty of creating flat, lifeless artwork again.
In their most basic form, gradients can be applied to objects in two ways: linearly
or radially. Gradients are typically applied to objects as color fills via your painting
softwares Fill tool. However, you can also use gradients to manually shade in
your objects.
NOTE: Linear and radial gradients are options provided by the Fill tool in
many painting programs. Many painting programs also provide additional
gradient options such as horizontal and contoured fills; however, they are all
basically offshoots of linear and radial gradients as well.
As the name implies, linear gradients are applied using a series of lines. Look at
Figure 7-11 for example. It shows how we would use a linear gradient to make an
object appear as if it were rounded even though it is clearly flat.
By adjusting the light source, we can continue the illusion as shown in Figure
7-12.
226 Chapter 7 / Color and Arcade Game Graphics
FIGURE 7-11: Linear Gradi-
ent with Light Source Directly
Above
FIGURE 7-12: Linear Gradi-
ent with Light Source at Side
Notice the closeness of the colors that appear in the gradient. This subtle shading
is crucial, as using colors that are too contrasting or dissimilar to each other will
ruin the effect.
Radial gradients are a bit more complex to use than linear gradients. Figure 7-13
demonstrates how one might be applied to an object. Notice that the radial gradi-
ent assumes the shape of the object to which it is applied.
By subtly blending and shading the colors present in the gradient, we can also
achieve the illusion of smoothness. Should we opt to use a rougher method of
shading, we can achieve a grainy, textured look as illustrated by Figure 7-14.
Rules for Gradient Use
Color gradients have simple rules. Follow them and youll successfully create the
illusion of depth and volume in the objects you create. These rules are:
n Always select shades of color with sufficient contrast. Gradients tend to be
less effective if the shades between colors are too similar to each other. For
example, if you cant visibly discern between two colors in a gradient, chances
are that one of the colors is too similar to the other.
n Apply linear gradients to long and narrow objects. Linear gradients dont work
well for wide objects, as there are usually not enough shades present in the
gradient to cover the entire surface area.
n Apply radial gradients to short and wide objects. They usually dont look right
when applied to long and narrow areas due to their circular orientation.
n Avoid using too much distance between the next shade in your gradient when
shading in objects. Its been my experience that most objects start looking flat
after about eight pixels between gradient colors, except at relatively high
screen resolutions. If youre trying to fill in a large area and there arent
enough colors in your gradients to cover the area convincingly, simply add
more colors to them.
Chapter 7 / Color and Arcade Game Graphics 227
FIGURE 7-13: Radial Gra-
dient
FIGURE 7-14: Rough
Radial Gradient
n Gradients tend to be ineffective on very small objects due to the physical limi-
tations imposed by screen resolution.
n The larger the image, the longer the color gradient should be. Otherwise, the
illusion of depth may be jeopardized due to the presence of flat color.
n The longer the color gradient, the smoother the overall shading effect will be.
n The shorter the color gradient, the rougher the overall shading effect will be.
n The smaller and simpler the object is, the shorter the color gradient should
be.
n Use smoother radial gradients whenever you have a large number of shades in
your gradient. Otherwise, use rougher gradients to maintain the illusion of
more color being present in a gradient than there actually are.
Its difficult to recommend specific gradient sizes for a given game project. There-
fore, I created Table 7-7 as a guide for determining the proper gradient sizes for
use in your artwork.
TABLE 7-7: Color Gradient Shade Selection Guidelines
Gradient Size Comments Usage Guidelines
2 shades The absolute minimum needed to
produce the illusion of depth. Generally
not recommended. Avoid whenever
possible.
Best when used to color very small
objects.
3-6 shades Sufficient to achieve an acceptable
level of depth. How convincing the
effect is really depends on the shades
or tints selected. There should be
sufficient contrast between colors or
else the power of the effect is minimized.
Using more shades or colors is
preferred, so only restrict yourself to
such ranges if you must.
Best when used to color small objects
and areas.
6-8 shades Sufficient to achieve an acceptable
level of depth. How convincing the
effect is really depends on the shades
or tints selected. There should be
sufficient contrast between colors or else
the power of the effect is minimized.
Eight shades are usually enough to
produce fairly good results. While using
more shades or colors is preferred, this
number should work well enough for
most applications.
Best when used to color small to
medium-sized objects and areas.
228 Chapter 7 / Color and Arcade Game Graphics
Gradient Size Comments Usage Guidelines
8-16 shades Produces a very believable illusion of
depth in objects and scenes. As always,
you should make sure that sufficient
contrast exists between tints or shades.
Whenever possible, you should
standardize on this gradient size since it
makes objects appear very realistic while
maximizing the use of available color.
Best when used to color medium-sized
objects and areas.
16-32 shades Produces a very believable illusion of
depth in objects and scenes but only
moderately better than what is possible
with 16 shades. As always, you should
make sure that sufficient contrast exists
between tints or shades. Be aware that
only a few types of objects actually
benefit from this size gradient. For
example, stone and metals will look
more realistic but the effect may be lost
on other types of objects.
Best when used to color medium to large
objects and areas.
32-64 shades Produces a very believable illusion of
depth in objects and scenes but only
moderately better than what is possible
with 16 shades. As always, you should
make sure that sufficient contrast exists
between tints or shades. Such gradients
seldom offer much advantage over
smaller gradient sizes so its best to
avoid unless you have very specific
needs in mind.
Best when used to color large objects and
areas.
More than 64
shades
Can be used to create some interesting
effects for objects and materials such
as metals, plastics, stone, and glass
but tends to be overkill for pretty much
everything else. Use such gradients
sparingly as objects shaded with them to
make other objects look flat in
comparison.
Best when used to color very large objects
and areas.
NOTE: I generally recommend restricting your gradient sizes to 16 shades or
less. More than 16 can become difficult to manage. Also, sticking with 16 or
fewer shades allows you to use color more efficiently without sacrificing
image quality.
Chapter 7 / Color and Arcade Game Graphics 229
While were still on the topic of gradients, be sure to look at Table 7-8. It contains
some examples of when and how to use gradients on different types of game
objects to achieve the illusion of depth and realism.
TABLE 7-8: Example Arcade Game Object Gradient Usage
Game Object Linear Gradient Radial Gradient
Planet or globe No Yes, use coarse gradient unless object is very
small. This will provide a more realistic
shading effect. Otherwise, use a smooth
gradient.
Stone block Yes, if the block is rectangular
or square.
Yes, if the block is oblong. Use a rough
gradient to give block a grainy, weathered
look; otherwise, use a smooth gradient.
Steel beam Yes No
Spaceship hull Yes, if hull is long and narrow. Yes, if hull is short and wide. Always use a
smooth gradient for this type of object.
Missile/rocket Yes No
Terrain No Yes, use a rough gradient to simulate
different degrees of texture.
NOTE: The information in this table is only meant to give you ideas. Its by no
means a definitive list. With both practice and time, youll find plenty of
other creative ways to use and apply your color gradients.
In short, the interplay of light and shadow is one of the most important concepts
to understand if youre interested in making your graphics look as realistic as pos-
sible. Once you master it, youll be on your way to creating some very impressive
looking game artwork.
Transparency, Translucency, and Opacity
In game graphics, every object has essentially three states: transparent, translu-
cent, or opaque.
Transparency means that light can pass completely through an object. Objects that
are transparent allow objects behind them to show through. For example, if light
shines through a pane of glass, the object behind the glass will be visible.
The transparency of an object can vary. That is to say, the amount of light that can
pass through an object varies. For example, if an object is fully transparent, you
will see whatever is behind it in full detail. However, if the object is only partially
230 Chapter 7 / Color and Arcade Game Graphics
transparent, you will only see faint details of the background object, usually with
some tint inherited from the foreground objects color.
Partial transparency is also commonly referred to as translucency. Translucent
means that light can partially pass through an object, yet objects that are translu-
cent allow the colors of objects behind them to show through. For example, if light
shines through a sheet of blue cellophane, the object behind the cellophane will be
partially visible and inherit the blue tint of the cellophane.
Every object has a different level of transparency. As shown in Table 7-9, crystal-
line and otherwise clear objects such as water, ice, and glass tend to have the
most transparency, while objects that are dense such as stone, earth, and metal
tend to have the least.
TABLE 7-9: Examples of Different Object Transparency
Object Type Transparency Percentage Estimated Transparency Level
Clear glass, water,
or cellophane
100% Fully transparent
Clear ice 75% Translucent
Tinted glass or
cellophane
50-75% Translucent
Fog 0-50% Translucent
Metal, earth, or
stone
0%-fully opaque Opaque (not transparent)
Transparency and translucency are difficult to achieve in games that use 8-bit
(256-color) display modes. Instead, most transparent and translucent effects are
produced in 16-bit or 24-bit display modes by using a special technique called
alpha blending. Alpha blending is a method of simulating transparency and translu-
cency by changing the color of the foreground objects pixels (the source) based
on the background objects pixels (the destination). The two color values of both
the source and the destination are then blended together using a specified level of
transparency. For example, applying transparency to a red block on a white back-
ground will produce a shade of light red or pink.
Opacity is the opposite of transparency. Opaque objects will not let light pass
through them. For our purposes, opaque objects are solid and retain their original
color and shading. You will not be able to see any object placed behind an opaque
object like you can with a transparent or translucent object.
By default, all of the objects we draw are assumed to be opaque. Because we will
be dealing with a 2D space, transparency will only have a limited value for most of
the arcade style game graphics we create. Still, taking transparency into account
can produce some interesting effects such as overlaid text and status indicators.
Using transparency properly can enhance the realism of your artwork. For
Chapter 7 / Color and Arcade Game Graphics 231
example, I can think of several objects that could benefit from employing differing
levels of transparency. These include:
n WaterfallsApplying transparency to a waterfall allows on-screen objects to
move behind it and still remain visible to the player.
n IceApplying transparency to ice can make it more realistic and believable.
n GlassApplying transparency to mirrors or windows enables on-screen
objects to move behind them and still remain visible to the player.
NOTE: All of these effects can be produced or at least reasonably simulated
with your favorite 8-bit painting program. Most of the better ones provide
some sort of rudimentary transparency function. However, programs that
support 16-bit or 24-bit color display modes are more likely to support real-
istic transparency effects.
A common transparency effect hack employed
by arcade games that run in 8-bit display modes is
to apply what is known as a stipple pattern. Stipple
patterns are tightly packed clusters of pixels, usu-
ally at 50% density, rendered in a neutral color
such as gray. The pattern is then placed over the
background in silkscreen fashion. When done cor-
rectly, this effect can produce acceptable results.
However, it should be pointed out that screen res-
olution is the most important variable here. The
higher the screen resolution, the finer the stipple
pattern and, therefore, the better the resulting
effect.
Bounding Colors
Any general purpose discussion of color use in game graphics design would be
remiss if it didnt mention the concept of bounding colors or framing colors. As the
name implies, bounding colors deal with the application of colors that define
boundaries between different colored objects. Bounding colors are essentially col-
ors that outline shapes. They help you to distinguish one object from another as
well as help define an objects shape. For example, in a castle scene, bounding col-
ors can be used to give each stone that make up the castles wall its shape as well
as separate it from other stones.
Figure 7-16 illustrates how bounding colors can help distinguish foreground ele-
ments from a complex background. In this example, each spaceship in encased in a
232 Chapter 7 / Color and Arcade Game Graphics
FIGURE 7-15: Simulated Trans-
parency Effect via Stipple Pattern
darker color, which helps give them form and separate
them from the rest of the background.
Bounding colors are most effective when you need to
separate certain screen elements from each other. This
does not mean all elements but rather, only those ele-
ments that are at risk for blending in too much into the
background and potentially getting lost. To help you
determine where and when to use bounding colors, fol-
low the simple rules below.
Bounding Color Rules
n Use bounding colors on objects that move, such as player characters, missiles,
bullets, enemies, and spaceships. Because they move, these objects tend to
blur into the background and need more definition to bring them to the users
attention than static objects do. Bounding colors will definitely do this.
n Use bounding colors when rendering objects that are improperly shaded. It
often takes a while for a beginner to master the correct method of shading
objects. Many beginning designers tend to pick colors that vary too little from
each other in terms of contrast. As a result, these objects can be hard to see
on-screen in certain situations. Using bounding colors to encase these objects
will help preserve the objects overall visibility.
n Use bounding colors to give objects shape. Bounding colors serve as a great
mechanism for defining the overall look and shape of an object. This is particu-
larly true of objects that tend to be distorted by the limited resolutions sup-
port by different display modes.
n Try to restrict bounding colors to a maximum thickness of 1 to 2 pixels around
all objects. Any wider and the effect will start to look amateurish, unless, of
course, the effect is intentional.
n Always use dark bounding colors against light backgrounds and light bounding
colors against dark backgrounds. Table 7-10 contains some examples of useful
bounding colors.
TABLE 7-10: Useful Bounding Colors
Bounding Color Comments
Black A good, general-purpose choice. Particularly well suited for
outlining player characters and individual background objects. Can
be used regardless of the objects actual color.
Dark blue Good for bounding water or ice. Objects should be rendered in
shades of blue to achieve maximum effect.
Dark brown Good for bounding wood or earthen objects. Objects should be
rendered in shades of brown to achieve maximum effect.
Chapter 7 / Color and Arcade Game Graphics 233
FIGURE 7-16: Bounding
Color Example
Bounding Color Comments
Dark green Good for bounding trees, grass, flowers, or jewels. Objects should
be rendered in shades of green to achieve maximum effect.
Dark gray Good for bounding stone, projectiles, beams, or metallic objects.
Objects should be rendered in shades of gray to achieve maximum
effect.
Dark red Good for bounding objects such as jewels, bullets, fire, or blood.
Objects should be rendered in some shade of red, orange, or
yellow to achieve maximum effect.
White A good, general-purpose color for bounding all sorts of objects
against dark backgrounds.
Yellow A good, general-purpose color for bounding all sorts of objects
against dark backgrounds.
NOTE: Which color you actually choose will, of course, depend on the color of
the object youre attempting to outline.
Color and Arcade Game Design Styles
Every arcade game has its own unique look or visual design style associated with
it. This style determines if the game mirrors fantasy or reality. Color plays a major
role in defining the characteristics of each design style and ultimately influences
how your game will appear to the player.
Despite the large number of arcade games they all fall into any one of three basic
design styles:
n Cartoon
n Retro
n Realistic
Cartoon
Cartoon-style arcade games tend to mimic the general look and feel of popular
television cartoons. Because the graphics in such games contain flat, basic shapes,
they often make liberal use of bright and simple colors, such as reds, oranges, and
yellows.
They also make considerable use of intermediate colors with lots of shade in order
to give objects and scenes the illusion of depth. For example, a cartoon-style
dragon character might have bright red polka dots, but its skin could be smoothly
shaded with subtle gradients of green.
234 Chapter 7 / Color and Arcade Game Graphics
Figure 7-17 shows what a game that uses cartoon-style artwork looks like. Notice
the simple shapes with exaggerated characteristics that are typical of traditional
cartoons. This use of color can create games that can be considered charming and
even cute.
Retro
Retro, by definition means moving backward. With regard to arcade games, it
means giving them an old-fashioned looksomething that simulates what com-
puter graphics looked like during the early history of arcade games, i.e., the late
1970s and early 1980s.
Chapter 7 / Color and Arcade Game Graphics 235
Moeboid is a trademark of ZapSpot, Inc. Used with permission.
FIGURE 7-17: Cartoon-Style Color Use Example
Therefore, its not uncommon for these games to have spartan, minimalist art-
work that utilizes simple, blocky shapes. For such artwork, its best to use flat
colors such as medium red, blue, or green as they will help to reinforce the old
school look youre trying to achieve.
Figure 7-18 illustrates a retro-style game. Notice the crude, blocky, and largely
colorless appearance of the artwork. Whether the effect is intentional or not, it
definitely gives the game pictured the feel of an earlier period.
Realistic
Maintaining the illusion of realism is one of a game artists most difficult chal-
lenges. Realistic-style arcade games must always use colors that render objects
and scenes convincingly without ever altering the users suspension of disbelief.
As long as you use common sense with your color choices, you should never have
a problem. For example, you dont want to make tree trunks purple or the sky
brown in a sunny nature scene. It simply wont fly with the user.
When designing realistic images, avoid the bright, simple colors used by the car-
toon and retro styles and instead go for complex color schemes that mimic nature
as closely as possible. This means picking subtle, intermediate shades that have
sufficient contrast between them.
236 Chapter 7 / Color and Arcade Game Graphics
Jumpman
FIGURE 7-18: Retro-Style Color Use Example
Figure 7-19 shows realistic-style game artwork. Although the appearance of the
game objects is somewhat exaggerated, color is used to its maximum effect to
give the various objects realistic properties from correct shadows to detailed shad-
ing. This adherence to realism gives the game pictured the appearance of quality
whether or not its even a good game since we live and see the things around us in
a realistic fashion.
Table 7-11 provides some additional comments on using color with different
arcade game graphics styles.
TABLE 7-11: Suggested Color Choices and Game Styles
Game Style Comments Example Colors
Cartoon Using bright and warm colors are fine but
dont forget to pick plenty of intermediate
shades to give game objects the illusion of
depth and a sense that the objects are alive
and highly emoted.
Orange, yellow, white, red, magenta,
gray, brown, dark blue, green, purple,
black.
Chapter 7 / Color and Arcade Game Graphics 237
Sango Fighter
FIGURE 7-19: Realistic-Style Color Use Example
Game Style Comments Example Colors
Retro Feel free to use many different combinations
of warm and intense colors. The general goal
here is to make graphics look bright but flat.
Color choices dont necessarily have to mirror
reality, i.e., fruits can be purple, but dont go
overboard.
Orange, yellow, white, red, magenta,
cyan, pink, light green, lavender.
Realistic Pick only those colors that best match whats
available in nature or in everyday life. This
means skimp on primary and secondary
colors and use intermediate colors and shades
as much as possible. This means that leaves
should be green but not pastel green, etc. Use
discretion and proper judgment; otherwise
youll ruin the overall effect.
Black, white, brown, gray, green,
beige, tan.
As you can clearly see, color and how it is applied can have a big influence on the
final aesthetics of an arcade games artwork. Once you understand how colors
various properties can affect the style or feel of a game, youll have a powerful tool
at your disposal and the power to create virtually any type of visual illusion in your
game projects.
General Rules for Using Color in Arcade Games
There are a number of important rules that you should learn and abide by in order
to maximize the impact and effectiveness of using color in your games. For your
convenience, Ive grouped these rules into two all-encompassing categories: color
visibility and usability, and color context and aesthetics. The former looks at those
rules that take into consideration an image or objects visibility and how color
choice can influence the user experience. The latter examines how to use color
both properly and tastefully.
Color Visibility and Usability
n Always choose colors that have enough contrast between them. For
example, dont place light gray against a medium gray background, as it will be
very difficult for the user to distinguish between the two colors. One way to
minimize this effect is to use sharply contrasting borders or outline elements
to distinguish different objects. The border will act as a visual cue that even
though two objects share similar colors, they are in fact different.
n Always remember that objects will appear brighter on darker back-
grounds and darker on lighter backgrounds. You can achieve some
238 Chapter 7 / Color and Arcade Game Graphics
interesting effects, particularly on background objects, by understanding this
phenomenon.
n As objects get smaller, their colors become less visible and distinct.
When this happens, darker colors, such as blue, become blacker while bright
colors, such as yellow, become whiter. Keep this in mind when designing par-
ticularly small objects, as certain color details will become lost as a result of
this effect.
n Avoid using very intense or saturated colors over large areas or
objects. While using very intense colors can make objects pop on the
screen, using such colors over large areas tends to induce eyestrain and
fatigue in many users. However, if you must use them, please limit yourself to
using them on small objects or localized areas within your artwork. Alterna-
tively, you can use neutral colors for the same areas, as they tend to be kinder
on the eyes.
n Warmer colors will always appear larger on-screen than cooler colors.
For example, objects rendered in red will appear larger than those that are
rendered in green. In some cases, this can alter the users perception of size
and break the element of realism that color provides.
n Dont use shades that offer little difference in intensity. Such colors tend
to be less visible to users and thus less effective. For example, under most
lighting conditions, users wont notice the subtle difference between a slightly
lighter or darker shade of the same color. Most computer monitors make this
effect even worse. Therefore, always make sure that theres a visible and dis-
tinct difference between two shades of the same color.
n Dont use sharply contrasting colors over large, equally sized areas of
the screen, i.e., for background or framing elements. For example, dont
use large bands of colors such as red and green. Many users tend to find such
combinations annoying over time and users who are annoyed are less likely to
play or enjoy your game.
n Always try to design with a particular color scheme in mind. The eye
automatically recognizes objects that employ similar colors as being related.
This makes it easier for the user to navigate around a game screen. For exam-
ple, if a game uses too many different color schemes, it could potentially dis-
orient the user and make it difficult for them to find out who they are on the
screen, etc.
n Whenever possible, use black or dark blue as your main background
color. This is because objects displayed against these dark colors tend to
stand out more, making them easier to see than if placed against a neutral or
light-colored background.
n Understand how a systems gamma level can influence the correct dis-
play of color. For example, you dont want to have the user mistake the shade
of brown you selected for a flesh tone as orange. Refer to Chapter 2 for more
Chapter 7 / Color and Arcade Game Graphics 239
information on system gamma differences and what, if anything, you can do
about them.
n Understand how room lighting can influence the display of your color
choices. For example, a color viewed in a room with fluorescent light will
appear significantly different from the same color viewed in a room using
incandescent light or even sunlight for that matter. As it stands, fluorescent
light adds tints of green to color while incandescent light adds tints of red.
Unfortunately, much of this is unavoidable since theres no way for you to pre-
dict the individual lighting arrangements of every user. However, knowing
about what happens can at least allow you to plan some contingencies to mini-
mize this effect.
n Pure blue should be avoided for small foreground objects. This is
because blue is relatively difficult for the eyes to see. Blue is an excellent
choice for backgrounds, however. For example, a dark blue field representing
water or the sky makes for a great background in many types of arcade games
since most shades of blue exhibit strong contrast.
n Use warm colors against cool backgrounds and vice versa. This is
because warm colors tend to stand out more against cool backgrounds. For
example, a yellow sun will be very noticeable against a sky blue background.
Color Context and Aesthetics
n Dont use color for colors sake or without a specific plan or color
scheme in mind. The lack of a specific color scheme will show in your
designs. Most people do not appreciate haphazard color use because it breaks
the illusion of reality that proper color use gives you. After all, youre design-
ing effective arcade graphics and not a Jackson Pollock painting!
n Use tertiary colors . . . a lot. Tertiary colors, i.e., natural colors like earthy
brown, add more realism to an object. In addition, they tend to translate across
cultures better than other types of colors.
n Dont use too much color in an image. Believe it or not, using too much
color diminishes the realism that color can provide. When you use too much
color in an image, it will appear to the user as if youre trying too hard. Color
use should appear deliberate but at the same time seem natural. Users will
pick up on objects that just dont seem to look right.
n Dont forget to take into account the influence that color has over the
users mood and emotions. Color has the ability to engage and interest
users at a level seldom achieved by the other elements of design. Failing to
properly use color to affect emotion is simply wasting a major opportunity to
further enhance the user experience.
n Make liberal use of contrasting colors. Contrasting colors go well together
and make graphic objects appear to be more interesting. Feel free to
240 Chapter 7 / Color and Arcade Game Graphics
experiment with different contrasting color combinations but dont go crazy,
as too many contrasting colors can ruin an image.
n Make sure you understand the cultural connotations of the colors you
use. For example, in western societies, black is usually used to depict villains
but in some Asian nations, white has the same exact purpose. Refer to Table
7-2 for more examples of cross-cultural interpretations of color.
n Make sure you understand how age and gender can influence the
users perception of your color choices. Colors are perceived and inter-
preted quite differently between genders and age groups. Look at Tables 7-4
and 7-5, respectively for more information.
n Use color where it belongs and where the user expects it to be. In other
words, dont go against established conventions of color use. For example,
avoid using cool colors to render fire and heat or warm colors to render water
or ice. This undermines the realism effect that color affords us. Its one thing
if you break this rule intentionally, i.e., to simulate the effect of LSD, but its
another to do so accidentally. Most users wont appreciate the deviation from
conventional norms.
n Use complementary colors when you want to create a sense of har-
mony within an image or between different objects. Complementary col-
ors go well together and, more importantly, appear that way to the user.
n Use cooler colors when designing artwork for games that are intended
for adults. Adults seem to respond better to dimmer and cooler colors than
do children.
n Use varied colors as much as possible. Using too much of one class of
color, i.e., warm, cool, intense, or dull, can ruin the impact of your artwork.
For example, using colors that are exclusively light or pastel-like can make
images seem dull and lifeless. Meanwhile, working entirely in bright primaries
can make your artwork look too basic and simplistic. Therefore, try to vary
your color use as much as possible.
n Use very warm and saturated colors when designing artwork for
games that are intended for young children. Children tend to respond
better to bolder and brighter colors than do adults. These colors are easy to
see and emotionally compatible.
NOTE: These rules are by no means exhaustive nor are they written in stone.
Theyre only meant to serve as guidelines for how to start using color cor-
rectly and effectively in your games.
Chapter 7 / Color and Arcade Game Graphics 241

You might also like