Features

3D Game Textures: Create Professional Game Art Using Photoshop

Texture

In the bulk of this book, as in the game industry, we will be using the term “texture” to mean a 2D static image. What we refer to as textures in this book are also sometimes called materials, or even tile sets (from older games), but we will stick to the term texture. The one exception in this book is that in this section we will talk about the word texture as it is used in traditional art: painting, sculpture, etc. A side note on vocabulary; keep in mind that vocabulary is very important and can be a confusing aspect of working in the game industry. There is much room for miscommunication. Different words can often mean the same thing, and the same words can often mean many different things. Acronyms can be especially confusing; RAM, POV, MMO, RPG all mean different things in different industries. POV means point-of-view in the game industry and personally owned-vehicle in the government and also stands for Persistence of Vision. So to clarify, the term “texture,” while usually meaning a 2D image applied to a polygon (the face of a 3D object), in this section of this chapter it will refer to an aspect of an image and not the image itself. We draw this distinction for the following conversation on traditional art.

In traditional art there are two types of texture: tactile and visual.

Tactile texture is when you are able to actually touch the physical texture of the art or object. Smooth and cold (marble, polished metal, glass) is as much a texture as coarse and rough. In art this applies to sculptures and the like, but many paintings have thick and very pronounced brush or palette knife strokes. Vincent Van Gogh was famous for doing this. Some painters even add materials to their paint like sand to add more physical or tactile texture to their work.

Visual texture is the illusion of what the surface’s texture might feel like if we could touch it. Visual texture is composed of fine highlights and shadows. As computer game texture artists, we deal solely with this aspect of texture. So, for example, an image on your monitor may look like rough stone, smooth metal, or even a beautiful woman and if you try and kiss that beautiful woman she is still just a monitor—not that I ever tried that, mind you.

There are many ways to convey texture in a two-dimensional piece of art. In computer games we are combining 2D and 3D elements and must often decide which to use. With 2D we are almost always forced to use strictly 2D imagery for fine visual texture. And while the faster processors, larger quantities of RAM, and the latest crop of 3D graphic cards allow us to use larger and more detailed textures and more geometry, a great deal of visual texture is still static and noticeably so to a trained artist. This limitation is starting to melt away as complex Shader Systems are coming into the mainstream of real-time games. The real-time processing of bump maps, specular highlights, and a long list of other more complex effects are adding a depth of realism to our game worlds not even dreamed of in the recent past. This book will teach you both the current method of building texture sets and the ever-increasing method of building material sets that use textures and shader effects together. We will discuss this more at length later in the book, but for now you can see some visual examples of these effects. In Figure 1-11 you can see how in the 2D strip the object rotates but the effects stay static on the surface, while on the 3D strip the object rotates and the effect moves realistically across the surface.

	Figure 1-11: Visual texture is composed of fine highlights and shadows. A shader allows for the real-time processing of visual texture, among other effects, and adds much more realism to a scene as the surface reacts with the world around it. In this example I used a specular map. These effects are best seen in 3D, but you can see here that the windows in the building on the top row have a reflection of the sky in them and that reflection moves as the players does. The windows in the building on the lower row are painted textures and stay the same no matter where the player walks. The bottom two rows are close-ups to help you see the effect. If you pick one window in the close-up images and look closely, you will see that the cloud reflections are in different places in each frame.

The game artist’s job is often considering what tools and techniques we have at our disposal and choosing which best accomplishes the job. We are often trading off between what looks good and what runs well. As you begin to paint textures, you will find that some of the techniques of traditional art don’t work in the context of game texturing. As a traditional artist we usually do a painting that represents one static viewpoint, and we can paint into it strong light sources and a great deal of depth, but that amount of depth representation goes beyond tactile texture and becomes faked geometry and looks flat in a dynamic, real-time 3D world. As mentioned earlier in this chapter, this will not work in a 3D game where a player can move about and examine the texture. Once again we must choose what to represent using a static 2D image, what can be processed in real time using a shader, and what must be represented using actual geometry. There are many solutions for this problem; among them are restricting the players’ ability to move around the texture, removing the element of overt depth representation, or adding actual geometry for the parts of the texture represented by the overt depth representation (see Figure 1-12).

	Figure 1-12: There are several possibilities when dealing with overt depth representation. Upper left: the pipes are painted into the texture and totally lack any depth; notice how they dead end into the floor. Upper right: restricting the players’ ability to move around the texture can alleviate some of the problem. Lower left: adding actual geometry for the parts of the texture that cause the overt depth is the best solution if possible (this method uses less texture memory but more polygons). Finally, lower right: adding the actual geometry into the recess is an option that looks pretty interesting and actually allows for a reduction of geometry. The removal of polygons from the backsides of the pipes more than offsets the added faces of the recess.

Color

We all know what color is in an everyday fashion, “Get me those pliers. No the ones with black handles. I said paint the house green. I didn’t mean neon green!” That’s all fine for the civilian discussion of color, but when you begin to speak with artists about color, you need to learn to speak of color intelligently and that takes a little more education and some practice. You will also learn to choose and combine color, too. In games, as in movies, interior design, and other visual disciplines, color is very important. Color tells us much about the world and situation we are in. While I was at CMP, we developed a massively multiplayer game that started in the town—saturated green grass, blue water, butterflies—you get the picture, this was a nice and safe place. As you moved away from town, the colors darkened and lost saturation. The grass went from a brighter green to a less saturated brownish-green. There were other visual clues as well. Most people can look at grass and tell if is healthy, dying, kept up, or growing wild. Away from town the grass was also long and clumpy, dying, and growing over the path. But even before we changed any other aspect of the game—still using the same grass texture from town that was well trimmed—we simply lowered the saturation of the colors on the fly and you could feel the life drain from the world as you walked away from town. As you create textures you will most assuredly have some form of direction on color choice, but maybe not. You might need to know what colors to choose to convey what is presented in the design document and what colors will work well together.

This section lays out a simple introduction to the vocabulary of color, color mixing (on the computer), and color choices and their commonly accepted meanings. I decided to skip the complex science of color and stick to the practical and immediately useful aspects of color. Color can get very complex and esoteric, but you would benefit from taking your education further and learning how color works on a scientific basis. While this chapter will be a strong starting point, you will eventually move on from working with only the colors contained in the texture you are creating to how those colors interact with other elements in the world, such as lighting. To start with, however, a game texture artist needs the ability to communicate, create, and choose colors.

First, we will discuss the way in which we discuss color. There are many color models, or ways of looking at and communicating color verbally. There are models that concern printing, physics, pigment, and light. They each have their own vocabulary, concepts, and tools for breaking out color. As digital artists, we use the models concerning light since we are working with colored pixels that emit light. A little later we will take a closer look at those color systems from the standpoint of color mixing, but for now we will look at the vocabulary of color. In game development you will almost always use the RGB color model to mix color and the HSV color model to discuss color. You will see that Photoshop allows for the numeric input and visual selection of color in various ways. When you discuss color choices and changes and then go to enact them, you are often translating between two or more models. Don’t worry; this is not difficult and most people don’t know they are doing it.

First, we will look at the HSV model, which stands for Hue, Saturation, and Value since this is the most common way for digital artists to communicate concerning color. These three properties of color are the main aspects of color that we need to be concerned with when discussing color. In Figure 1-13 you can see examples of these aspects of color.

• Hue is the name of the color (red, yellow, green).
• Saturation (or Chroma) is the strength or purity of the color.
• Brightness is the light or darkness of the color.

	Figure 1-13: In this image you can see a representation of HSB—Hue, Saturation, and Brightness.

Hue

Most people use the word “color” when referring to hue. While there are many, many colors, there are far fewer hues. Variations of saturation and brightness create the almost unlimited colors we see in the world. Scarlet, maroon, pink, and crimson are all colors, but the base hue is red.

Understanding color and its various properties is best done with visual examples. The most often used method is the Color Wheel developed by Johannes Itten. We will look at the Color Wheel a little later. In Photoshop you will recognize the Color Picker, which allows for various methods for choosing and controlling color, both numerically and visually. The Color Picker has various ways to choose color, but the most commonly used is RGB (Red, Green, Blue)—Figure 1-14.

	Figure 1-14: Here are Color Pickers from various applications.

Saturation

Saturation quite simply is the amount of white in the color. In Figure 1-15 you can see the saturation of a color being decreased as white is added. If you have access to a software package like Photoshop and open the color picker, you can slide the picker from the pure hue to a less saturated hue and watch the saturation numbers in the HSB slots go down as the color gets less saturated. Notice how the brightness doesn’t change unless you start dragging down and adding black to the color. Also, you may want to look down at the RGB numbers and notice how the red in RGB doesn’t change, but the green and blue do.

	Figure 1-15: The saturation of the color red at 100% and decreasing to 0% by adding white.

Brightness

Brightness is the amount of black in the color. In Figure 1-16 you can see the brightness of a color being decreased. As in the previous example discussing saturation, you can open the color picker in Photoshop and this time, instead of decreasing the saturation, you can decrease the brightness by dragging down. You can look at the HSB and the RGB slots and see the brightness numbers decreasing. Also notice that this time in the RGB slots the red numbers decrease, but the blue and green are already at zero and stay there.

	Figure 1-16: The brightness of the color red at 100% and decreasing to 0% by adding black.

Like most other aspects of color, brightness is affected by other factors. What colors are next to each other? What are the properties of the lights in the world? Another job the texture artist needs to do is to make sure the textures in the world are consistent. That involves balancing the hues, saturation, and brightness of the color in most cases. Figure 1-17 depicts an example of a texture that may have looked okay in Photoshop, but needed to be corrected to fit the scene. You can see that a great deal of contrast and intensity of color makes tiling the image a greater challenge.

	Figure 1-17: Here is an example of a texture that may have looked okay in Photoshop, but needed to be corrected to fit in the scene correctly. This is a subtle example. Notice the patch of exposed stone in the concrete on the building that repeats?

Color Systems – Additive and Subtractive

There are two types of color systems, additive and subtractive. Subtractive color is the physical mixing of paints, or pigments, to create a color. It is called “subtractive” due to the fact that light waves are absorbed (or subtracted from the spectrum) by the paint and only the reflected waves are seen. A red pigment, therefore, is only reflecting red light and absorbing all the others. In the subtractive system you get black by mixing all the colors together—theoretically. It is a challenge to mix pigments that result in a true black or a vibrant color. That is one of the reasons art supply stores have so many choices when it comes to paint. One of our advantages of working in the additive system is that we can get consistent and vibrant results with light. We won’t dwell on the subtractive system since we won’t be using it.

The additive system is when light is added together (like on a computer screen) to create a color, so naturally we deal with the additive system as computer artists as we are working with light. In Figure 1-18 you can see how the additive system works. I simply went into Max and created three spotlights that were pure red, green, and blue and created my own Additive Color Wheel, or a visual representation of how the colors interact. Black is the absence of light (the area outside of the spotlights), White is all light (the center area where all three lights overlap each other)—the combination of red, green, and blue is the additive system. If you look at the Color Picker in Photoshop (Figure 1-19) you will see a vertical rectangle of color graduating from red through the colors and back to red. This allows you to select a Hue and use the Color Picker Palette to change the value and intensity.

	Figure 1-18: The additive system works by adding lights. Black is the absence of light (the area outside of the spotlights), White is all light (the center area where all three lights overlap each other): the combination of red, green, and blue is the additive system.

	Figure 1-19: The Color Picker in Photoshop has a vertical rectangle of color graduating from red through the colors and back to red. This allows you to select a hue and use the Color Picker Palette to change the value and intensity.

Primary Colors

The three primary colors in the additive color system are red, green, and blue (RGB). They are referred to as primary colors because you can mix them and make all the other colors, but you can’t create the primary colors by mixing any other color. Many projection televisions use a system where you can see the red, green, and blue lens that project the three colors (RGB) to create the image you see using the additive method.

Secondary Colors

The secondary colors are yellow, magenta, and cyan. When you mix equal amounts of two primary colors together, you get a secondary color. You can see that these colors are located between the primary colors on the color wheel and on the Photoshop Color Picker vertical strip.

Color Emphasis

Color is often used for emphasis. Look at Figure 1-20. All things being equal, the larger shapes dominate, but the small shapes demand your attention once color is added. Of course, there are many other forms of emphasis you can use in creating art, but color can be the most powerful—and overused. Ever come across a web page that has a busy background and every font, color, and emphasis devised by man splashed across it? There is almost no emphasis as all the elements cancel each other out. Often, less is more.

	Figure 1-20 All things being equal, the larger shapes dominate, but the small shapes demand your attention once color is added.

In another example using a photograph, in Figure 1-21, you can see that in the first black and white photo, your eye would most likely be drawn to the dark opening of the doghouse and you would most likely assume that the subject of this picture is the doghouse. In the second version the colorful flower draws the primary interest, it still competes with the doghouse door for attention, but you would probably make the assumption that the focus of this picture was the flower.

	Figure 1-21:  Your eye is most likely drawn to the opening of the doghouse in the black and white photo, but add color, and the flower draws the primary interest.

In a game scene you can see the use of color drawing the attention of a player to an important item. Look at Figure 1-22. In the first version of the scene you are drawn to the fire and then look around at all the items in the shadows. In the second version the red crate draws your attention and clearly means something. Depending on the world logic of the game you are playing, that could simply mean that you can interact with the object, or it could mean the item is dangerous. That decision brings to our next topic, color expression.

	Figure 1-22:  In a room full of normal objects, the players’ eyes will be drawn to the fire and then equally to the objects. In a room full of normal objects, a red crate draws attention, especially given the fact that there are other normal crates around it.

Color Expression or Warm and Cool Colors

When you start painting textures and choosing colors, you will want to know how they react together in terms of contrast, harmony, and even message. There is a lot of information on this topic and once again, Johannes Itten enters the picture (the guy who did the color wheel). Johannes Itten has provided artists with a great deal of information on how color works and how they work together. Itten was among the first people to look at color, not just from a scientific point of view, but from an artistic and emotional point of view. He was very interested in how colors made people feel. From his research we get the vocabulary of warm and cool colors.

We all are familiar with this convention as it is mostly based on the natural world. When asked to draw a flame, we reach for the red or orange crayon, ice is blue, the sun yellow. Each warm and cool color has commonly associated feelings for them, both positive and negative. The brighter or more pure the color, the more positive the association. Darker and duller colors tend to have the negative connotations associated with them.

The warm colors are red and yellow, while the cool colors are blue and green. Children will color the sun yellow and ice blue and use the black crayon to scratch out things they don’t like. Traffic lights are hot when you should stop or be cautious (red and yellow) but cool when it is okay to go (green). Red and orange are hot and usually associated with fire, lava, coals. How many red and black shirts do you see at the mall? Red and black generally symbolizes demonic obsession. Red by itself can mean royalty and strength as well as demonic. Deep red can be erotic. Yellow is a hot color like the sun, a light giver. Yellow is rich like gold as a pure color. A deep yellow (amber) window in the dark of a cold night can mean fire and warmth. But washed out or pale yellow can mean envy or betrayal. Calling a person yellow is an insult, meaning he is a coward. Judas is portrayed as wearing yellow garments in many paintings. During the Inquisition, people who were considered guilty of heresy were made to wear yellow. Moving into green, we think of lush jungles teaming with life. As green washes out, we get a sense of dread and decay (zombie and orc skin). Vibrant green in a certain context can be toxic waste and radioactive slime. Blue in its saturated state is cold like ice, fresh like water and the sky. Darker blues are misery. Purple is mysterious and royal.

Keep in mind that color is context-sensitive. Water is generally blue; would you drink dark green water? But not just any blue will do. In the real world, if we come across water that is a saturated blue that we can’t see through, we get suspicious. Was this water dyed? Are there weird chemicals in there? If anything lives in that, then what could it be?! Blood is generally red, but what if an enemy bled green? What if the game you are playing is about an alien race taking over earth and one of your companions bleeds green from an injury during combat? In a fantasy game you might come across coins. Which coin do you take, the bright yellowish metal or gray-green metal? With no previous information on the color of coins in this world, most people would pick the brighter yellow. Look at Figure 1-23. What are some of the assumptions you might make about these three scenes?

	Figure 1-23: These three scenes are the same, except for the ax. What questions and/or assumptions run through your mind looking at each version?

Looking at color in this way may make it seem a bit mechanical, but it still takes a talented artist to make the right color choices. You can memorize all the information in the world, but it usually comes down to having a good eye and being able to convey that vision in your work and to your coworkers.

Perspective

join | contact us | advertise | write | my profile
news | features | companies | jobs | resumes | education | product guide | projects | store



Copyright © 2005 CMP Media LLC

privacy policy | terms of service