3D Game Programming All in One (Course Technology PTR Game Development Series)

There are many ways to create textures for use in structures. Techniques can range from the obvious (photographing buildings and walls and other real-world items or drawing them with pen and pencil) to the more imaginative (rubbings with paper and charcoal) to the more high-tech (using texture-creation software).

In this section we'll look at the two of the most accessible texture-creation methods, photography and original artwork.

Photography

To use photography as a source, you'll need a camera, of course. Digital cameras with decent resolutions available can be quite inexpensive. Most digital cameras come with hardware that allows you to quickly upload the images to your computer.

Digital versus Film

If you buy a digital camera, you should get one that will provide pictures of at least 800 by 600 pixels with 32-bit color.

Your other options are to use a normal film camera and then either scan the resulting photos or send the film to a shop that will digitize the photos for you when they're developed. These shops are quite common, and the extra step of digitization of your developed film is often a no-cost "loss-leader" that the shops use to attract business.

Scanners are also low-cost items. The minimum specification for a scanner that you need for use in game development would be a 600-dpi 32-bit color scanner. Flatbed scanners are best for this kind of work.

When you have identified a candidate texture for use in your game, make sure to take several different pictures of the item from different angles, at different distances, and in different lighting, if possible. Take lots and lots of pictures, and then review them when you get back to your home or office to find what suits your needs. Keep all the originals. Sometimes, on later examination, you will discover details that you didn't notice when first taking the pictures. These details may require choosing a different shot from a different angle to ensure that they don't show. It wouldn't work to have the condensation trail of an airliner in an image used for the sky in a game that takes place in a medieval era.

Figure 11.1 shows a picture of some interlocking bricks used for a walkway. Figure 11.2 shows the same walkway with the picture taken under slightly different circumstances (for example, the area photographed for Figure 11.2 was a few feet away from the area shown in Figure 11.1). One detail I picked up quickly when examining the photos on my computer that I didn't notice at the scene is that some of the bricks in Figure 11.2 are double bricks, lain side by side. This despite the fact that I have trodden this particular walkway literally thousands of times in the past 10 years or so!

Figure 11.1: Real-world candidate for sidewalk texture.

Figure 11.2: Alternate candidate for sidewalk texture.

So the lesson is this: When at the scene, don't be a censor and don't be judgmental. Just take oodles of photographs of the items in question. Sort it all out back at the shop.

Postprocessing

After getting back to the shop, you will probably have to do a certain amount of postprocessing of the chosen photos. Even if you were creating a photorealistic game, you would still need to ensure that the lighting and palettes of the textures were close enough matches to each other. This would be especially true when your texture photos were taken in different areas at different times.

It's probably best to do all of your pixel-related processing first, before you crop or extract your textures. This ensures that the changes you make are done in the proper context—the areas that you aren't interested in will change along with the areas you are interested in— thus guiding your efforts more appropriately.

All of the photo-processing capabilities of any tools you have are at your disposal. Three specific operations are generally used more than the others: color matching, lighting, and cropping.

Color Matching

The first thing you will probably need to do is match the colors of your texture to existing in-game textures and lighting conditions. Usually you will match your colors by adjusting the illuminant temperature of the colors. This is easily done in Paint Shop Pro by choosing Adjust, Color Balance, Gray World Color Balance. The dialog box that appears does a good job of guiding you in your adjustments, showing you how to adjust to sunlight, fluorescent light, and so on.

Unfortunately, it is extremely difficult to illustrate the differences between different temperature settings in grayscale images like the ones used in this book, so Figure 11.3 may not adequately demonstrate the subtle variations. If you installed the companion CD, you can find the full-color version of the image in the file C:\3DGPAi1\RESOURCES\Ch11\11-03.tif. Of course, you can go ahead and try the various settings in Paint Shop Pro and see the differences for yourself.

Figure 11.3: Reference image for three color temperatures.

In Figure 11.3, from left to right, the three settings chosen are Incandescent, Fluorescent, and Bright Sun. Compare these variations with the original shown in Figure 11.2 and found at C:\3DGPAi1\RESOURCES\Ch11\11-02.tif.

The light of bright sunlight on a clear day contains all colors of the visible spectrum pretty well in their natural proportions, with the sole modification being some filtering by the atmosphere. This atmospheric filtering (predominantly by water molecules) scatters a certain proportion of light at the blue-violet end of the spectrum, reducing the amount of light at those wavelengths that makes it to the surface. Nonetheless, you can see that there is still a strong blue component in the bright sunlight area.

The fluorescent light area shows a somewhat more balanced spectrum, with less blue than with the bright light. The incandescent light bulb area shows the opposite end of the spectrum from sunlight and has a much warmer feel.

So in Figure 11.3 the color temperature moves from warm on the left to cool on the right.

The original image, as shown in Figure 11.2, has a coloring somewhere between fluorescent and sunlight, leaning heavily toward the fluorescent. This is not really a surprise—I took those photos outside on a sunny clear summer day, but in the shade. The illumination is therefore provided by the light reflected from the surroundings, which in this case has had the effect of moving the spectrum toward the middle.

Lighting

Lighting is closely tied to color matching. Changes in the apparent lighting of an image will tend to drag the color temperature in one direction or the other. So keep this in mind when you apply lighting changes to images.

In the context of processing 2D images for use as textures, what we are trying to achieve is imparting a sense of the light direction and light "play" upon the surface of the texture being portrayed.

For example, one feature about surface textures we may need to enhance is the sense of depth. As shown in Figure 11.4, the texture may contain numerous small stones that protrude from a flat surface.

Figure 11.4: Pebbled surface with lighting adjustment.

One simple method we can use to increase the sense of depth is to increase the contrast. The problem with adjusting the contrast is that it tends to drastically alter the color temperature—the more contrast, the warmer the overall color temperature.

The obvious way to handle this would be to boost the contrast and then tweak the color balance. Sometimes this does not work so well, especially if a wide spectrum of colors is represented in the image. In those cases there are other ways to deal with the issue, such as tweaking the saturation.

What you see in Figure 11.4 is the original texture on the left and the adjusted texture on the right. In this case what I did was use Paint Shop Pro to enhance the contrast by 40 percent (choose Adjust, Brightness and Contrast, Brightness/Contrast) and then reduce the saturation by 41 percent (choose Adjust, Hue and Saturation, Hue/Saturation/Lightness).

Cropping

When using photographs as image sources, we rarely want to keep the entire image. Artifacts such as lighting changes at the periphery, fish-eye distortion at the edges caused by extreme perspective, extraneous items in the image, and other issues typically make the outer edges of photographs unsuitable for use as textures.

The solution is to crop the image, leaving behind the portion that is useful to us. Figure 11.5 shows a piece of wood that has a texture of interest. It stretches across the entire frame from left to right but only covers somewhat less than half of the vertical area. It's also not parallel with the sides of the image. In this case we will want to crop the wood out and "de-rotate" it as well.

Figure 11.5: A photograph that needs to be cropped.

You might be tempted to crop the wood out and then apply rotation to straighten it out, but experience shows that these operations should be done the other way around. Just as with the color and lighting operations, apply the geometric changes first, and then crop the texture. This allows the image processing software to make its geometry in the full context of the image parts that surround the area of interest, which can have a subtle effect on the end result.

Another reason for resolving the geometric appearance of the texture before cropping is that cropping tools tend to use rectangular shapes for selection. It is helpful to the overall process and productivity to crop images where the areas of interest are appropriately oriented horizontally and vertically.

To use the crop tool in Paint Shop Pro, click the Crop tool icon on the Tool palette (see Figure 11.6). Click and drag the tool on the image to select the rectangular area of interest. The resulting selection rectangle will have small square handles on the sides, which you can click and drag to resize the crop area. There is also a round handle in the geometric center of the crop area—click and drag it to move the entire crop area. When you are satisfied with your selected area, double-click the image to cause the actual cropping operation to take place.

Figure 11.6: Crop tool icon.

Figure 11.7 shows the result of merely cropping the image to include all portions of the wood without first altering the orientation of the wood. It still needs to be rotated. Of course, you may actually want the woodgrain to be slanted, but then you may need to remove the nonwood slivers of area above and below the woodgrain by erasing them to a fixed solid color, or making those areas completely transparent.

Figure 11.7: Cropped portion of unaltered photo.

In our case we really want the woodgrain to be parallel to the bottom and top edges of the image, so we should rotate the woodgrain portion before cropping. Use the rectangular Selection tool (see Figure 11.8) to select the area to be rotated.

Figure 11.8: Rectangular Selection tool icon.

Then choose Image, Rotate, Free Rotate to get the Free Rotate dialog box (see Figure 11.9).

Figure 11.9: The Free Rotate dialog box.

Click the Right button in the Direction frame, and click the Free button in the Degrees frame. Finally, type 1.00 in the text box next to the Free button, and click OK. This will rotate the selected area 1 full degree to the right (see Figure 11.10).

Figure 11.10: The rotated woodgrain.

You should have your rotated area with the selection marquee still surrounding it. Don't touch anything yet—leave the selection as it is.

Now after having explained the Crop tool, I'll show you another way to crop the image that is sometimes more convenient than using the Crop tool. With the rotated area still selected, choose Image, Crop to Selection and the image will be cropped for you! You will then end up with an image as shown in Figure 11.11 suitable for use as a texture.

Figure 11.11: The cropped woodgrain image.

Now compare Figure 11.11 with Figure 11.7 and you will see the difference.

Original Artwork

The other approach to creating textures is to use original artwork. Some people believe this is not a real option for them, because they think they can't draw or paint to save their lives. I tend to feel that everyone can learn the techniques required. My intent here, however, is not to teach you how to draw, so if you want to learn more, I encourage you to look into taking some lessons.

If you are satisfied with your artistic skills, then you have another rich avenue for texture generation available to you. The techniques used to convert a photograph to a texture can also be used to convert your hand-made images to textures.

Another approach for creating original artwork is to create your images directly in a tool like Paint Shop Pro. You can draw freehand using the mouse or a pen tablet.

With tools like Paint Shop Pro you have a wide variety of means for creating textures, including a specific Texture Effects tool in the Effects menu, as shown in Chapter 8. Figure 11.12 shows examples of textures created using the built-in features of Paint Shop Pro. I encourage you to explore this tool in depth. It can really be a timesaver. And you can use it to create some knockout textures.

Figure 11.12: Example textures.