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?