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.
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 ratings0% 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.
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