CHAPTER 8
INTRODUCTION TO TEXTURES
3D computer games are intensely visual. In this chapter we begin to explore the creative process behind the textures that give 3D objects their pizzazz.
USING TEXTURES
Textures are probably the unsung heroes of 3D gaming. It is difficult to overstate the importance of textures. One of the most important uses of textures in a game is in creating and sustaining the ambience, or the look and feel, of a game.
Textures also can be used to create apparent properties of objects, properties that the object shape doesn’t have—it just looks like it does. For example, blocky shapes with jutting corners can appear to be smoothed by the careful application of an appropriate texture using a process called texture mapping.
Another way textures can be used is to create the illusion of substructure and detail. Figure 8.1 shows a castle with towers and walls that appear to be made of blocks of stone. The stone blocks are merely components of the textures applied to the tower and wall objects. There are no stone blocks actually modeled in that scene. The same goes for the appearance of the wooden boards in the steps and other structures. The texture gives not only the appearance of wood but also the structure of individually nailed planks and boards. This is a powerful tool, using textures to define substructures and detail.
This ability to create the illusion of structure can be refined and used in other ways. Figure 8.2 shows a mountainside scene with bare granite rock and icefalls. Again, textures were created and applied with this appearance in mind. This technique greatly reduces the need to create 3D models for the myriad of tiny objects, nooks, and crannies you’re going to encounter on an isolated and barren mountain crag.
Figure 8.1
Structure definition through using textures.
Figure 8.2
Rock and icefalls appearance on a mountainside.
Textures appear in many guises in a game. In Figure 8.3 two different textures are used to define the water near the shoreline. A foamy texture is used for the areas that splash against rock and sand, and a more wavelike texture is used for the deep water. In this application the water block is a dynamic object that has moving waves. It ebbs and flows and splashes against the shore. The water textures are distorted and twisted in real time to match the motion of the waves.
Figure 8.3
Shoreline foam and deep-water textures.
Another area where textures are used to enhance the ambience of a game is to define the appearance of the sky. Figure 8.4 shows cloud textures being used in a skybox. The skybox is basically the inside of a big six-sided box that surrounds your scene. By applying specially distorted and treated textures to the skybox, we can create the appearance of an all-enveloping 360-degree sky above the horizon.
We can use textures to enhance the appearance of other objects in a scene. For example, in Figure 8.5 we see a number of coniferous trees on a hillside. By designing the ground texture that occupies the terrain location of the trees appropriately, we can achieve the forest look we want without needing to completely cover every inch of ground with the tree objects. This is helpful because the fewer objects we need to use for such a purpose—basically decoration—the more objects that will be available for us to use in other ways.
Figure 8.4
Clouds in a skybox using textures.
One of the most amazing uses of textures is when defining technological items. Take the tommy gun in Figure 8.6, for instance. There are only about a dozen objects in that model, and most of them are cubes, with a couple of cylinders tossed in, as well as two or three irregular shapes. Yet by using an appropriately designed texture, we can convey much greater detail. The weapon is easily identifiable as a Thompson submachine gun, circa 1944.
Figure 8.6
Weapon detail using textures.
Following the theme of technological detail, Figure 8.7 is another example. This model of a Bell 47 Helicopter (think M*A*S*H) shows two trick uses of textures in one model. The engine detail and the instrument panel dials were created using textures we’ve already seen. Now take a look at the tail boom and the cockpit canopy. The tail boom looks like it is made of several dozen intersecting and overlapping metal bars; after all, you can see right through it to the buildings and ground in the background. But it is actually a single elongated and pinched box or cube with a single texture applied! The texture utilizes the alpha channel to convey the transparency information to the Torque renderer. Cool, huh? Then there is the canopy. It is semi-transparent or mildly translucent. You can obviously see right through it, as you should when looking through Perspex, but you can still make out the sense of a solid glasslike surface.
Of course, technological features are not the only things that can be enhanced through textures. In Figure 8.8 the brawler about to enter the tavern is attired in the latest stylish leather brawling jacket. He is obviously somewhere around 40 years of age, judging by his classic male-pattern baldness, and the bat is a Tubettiville slugger. Okay, okay, the bat is a stretch, but if it were turned over 180 degrees, you would be able to see the Tubettiville logo, and then you could tell! Also note the use of the texture specifying the tavern name, named in honor of a famous Delta Force 2 player, Insomniac.
Figure 8.7
Vehicle detail and structure.
Figure 8.8
Player clothing, skin, and other details.
Look at the moon in Figure 8.9. Look again, closer. Does it look familiar? It should, because the moon texture in that picture is an actual photograph of the full moon, taken outside my house with a digital camera and then used to generate the moon texture. The rest of the scene is generated using the Torque Engine with appropriate nighttime lighting parameters set.
I think by now you have a pretty good idea why I say that textures are the unsung heroes of 3D gaming. They really make a huge difference by conveying not only the obvious visual information but also the subtle clues and feelings that can turn a good game into a great experience.
GIMP 2
You are going to be creating your own textures as you travel through this book, and to do that you’ll need a good tool for texture and image manipulation. Well, I’ve included a great image processing tool, Gimp 2, on the companion DVD for you to use.
Gimp is a fully featured image processing and image generation tool, created by Spencer Kimball and Peter Mattis, with scanner support, special effects and filters, image analysis statistics, and the whole nine yards.
Gimp is free for you to use, with no limitations, other than those described in the GNU General Public License (GPL), which is included in Appendix D for your perusal. There’s nothing startling in the license. Just don’t take the source code and create your own program and try to sell it. Oh, did I forget to mention that the source code is included on the DVD as well? Well, it is. In fact, that is one of the requirements of the GPL license. Now if you are a crackerjack C/C++ programmer and have an idea about how to improve Gimp, you can actually go ahead and make the changes and submit them to the Gimp Project. Go to http://developer.gimp.org for more information. At the time of this writing, at least 162 people have provided patches, fixes, plug-ins, extensions, scripts, translations, documentation, and more.
Another nice thing about Gimp is that it is available for Windows, Macintosh OS X, and various flavors of UNIX and Linux! I don’t need to tell you how cool that is, do I?
Okay, so what next?
Well, first, you’ll need to install Gimp.
Installing Gimp 2
To install Gimp 2, follow this procedure:
1. Browse to your DVD in the 3D3ETOOLSGIMP2 folder.
2. Locate the gimp-2.6.8-i686-setup.exe file, and double-click it to open it.
3. Click the Next button until you get to the Ready to Install screen. Click Customize. Make sure you have the two optional components—MS-Windows Engine for GTK+, and Translations—selected. Click through the next few installation screens and then click Install. This will install Gimp to its default locations.
4. After the installation is complete, deselect the Launch GIMP checkbox, and then click Finish.
5. Torque works best with DTS images, which are required for mipmaps and normals. DTS is supported by Gimp through two plug-ins we need to install. From the GIMP2 folder on the DVD copy dds.exe and paste it in the Gimp’s plug-in folder, usually located at C:Program FilesGIMP-2.0libgimp2.0plug-ins.
6. From the GIMP2 folder on the DVD copy normalmap.exe and paste it into the Gimp’s plug-in folder. Then copy the three dll files in the GIMP2 folder on the DVD to Gimp’s bin folder, usually located at C:Program FilesGIMP-2.0in.
The version of Gimp used in this edition is 2.6.8. You can check to see if there are more recent versions available by browsing to http://www.gimp.org. You can also go there to look for the Mac and Linux versions as well.
Tip
The Gimp Help files, including context-sensitive help, are located in the 3D3ETOOLSGIMP2 folder on the DVD. Copy the gimp-help-2 folder from the DVD to the GIMP installation folder on your hard disk. These html help files can be helpful for when you are not connected to the Internet; otherwise, accessing help (F1) or context-sensitive help (Shift-F1) brings up online help at docs.gimp.org.
Getting Started
To get this party rolling, we’re going to just blast through and create a couple of textures that you can use later for whatever grabs your fancy. We’ll cover just the tools and steps we need to get the job done. In a later section we’ll cover the most common tools in more detail.
Creating a Texture
So, let’s get down to brass tacks and create a texture from scratch. We’ll create a wood texture using the built-in capabilities of Gimp.
1. Launch Gimp, and select File, New from the menu at the top of the main Gimp window (the one titled “GNU Image Manipulation Program”).
2. A Create a New Image dialog box opens up (see Figure 8.10). Set the width and height dimensions to 128 pixels.
Figure 8.10
Creating a new blank image.
3. Click on the + symbol to the left of Advanced Options to expand the advanced options section.
4. Locate the Fill with: option, and click on its drop-down menu to change the entry to Transparency. Click OK.
Tip
For most texture material activities using Gimp in game development, it will be necessary to create your images with Transparency (alpha channel) fill. This will create a 32-bit image which is comprised of four 8-bit channels, red, green, blue, and alpha (alpha). If you leave the option with any other fill option, like Background, you will only get a 24-bit image—red, green, and blue.
5. We now have a blank image to work with. Over in the Gimp Toolbox window, locate the Bucket Fill tool, and select it, as shown in Figure 8.11.
Tip
The upper part of the Gimp’s Toolbox contains tools. The lower part is called the Tool Options area, sometimes called the Context Options, because the options change according to which tool (the context) is selected.
6. After selecting the Fill tool’s bucket icon, look down in the context menu at the bottom of the Toolbox, find the Fill Type section, and select the Pattern fill radio button. Ensure that the Pine pattern is selected in the text box below and to the right of the radio button and a color image of the Pine texture is in the texture button to the left of the text box.
Figure 8.11
Selecting the Fill tool in the Gimp’s Toolbox.
Tip
If Pine is not already selected for you in the Pattern fill radio button, then click the button just below and to the right of the Pattern radio button. A pop-up menu of images will appear. Scroll through until you find the Pine pattern. The patterns are ordered alphabetically.
7. Move your cursor over into the new image you created earlier, and click the mouse button. The image should fill with the Pine texture.
Now you should have a bona fide woodgrain texture, like the one shown in Figure 8.12. You can use this texture for things like walls, planks, ladders, the wooden stock on a weapon, barrels, and whatever else you can come up with.
8. To make the image larger and easier to see, look down at the bottom of the image window (which is probably called Untitled-1.0), where there will be two downward-pointing triangular arrows. Click the rightmost one, and the selection menu containing zoom factors will appear. Select 200% (or whatever twists your crank) with a single mouse click. Your image will double in size (unless you didn’t start out at 100%—and you should have; if yours is different, then it was sabotage, I tell you!).
You can use this texture to experiment with different image processing effects and touchup tools in Gimp. Go ahead and give it a try. Leave Gimp open when you are done.
Okay, that was so much fun, let’s do another. This time we are going to tweak an image a bit searching for a specific look. The next texture will be a sort of rough-wall look that you might find on a painted cement block, or maybe a freshly poured sidewalk, or something like that. We’ll call it the sidewalk texture, for convenience.
1. Gimp should still be running.
2. Select File, New.
3. Set the width and height dimensions to 128 pixels, expand the Advance Options area, set the Fill with option to Transparency, and then click OK. (Take another look at Figure 8.10 if you need to refresh your memory.) We need to set the transparency for each new image.
4. Select the Fill bucket, and then go back to the Fill Type section in the context pane (see Figure 8.11 for a refresher), but this time select 3D Green for the pattern.
Tip
When you click the pattern fill option button to display the fills, you see only the fills and not their names. To see the fill names, at the bottom of the fill menu are two options you can mouse over, View as grid and View as list. View as grid is the default. To see the fill name next to the fill pattern, choose View as list.
5. Fill your new image with the 3D Green pattern.
6. Choose Select, All from the image windows menu—check to make sure you have the crawling ants around the perimeter of the image.
7. From the image window’s menu, choose Tools, Color Tools, Hue-Saturation. The Hue-Saturation is one way to change the overall color values of an image, all at once. Figure 8.13 shows the Hue-Saturation dialog box.
8. Move the three sliders back and forth, and watch the image appearance change. You will need to make sure that the Preview checkbox at the lower left is checked in order to view the changes in real time.
9. Use the sliders to set the following values: Hue, 24; Lightness, 80; Saturation, −94. You can also directly type the values into the edit boxes for each setting.
10. Notice the change in the texture? It should look something like Figure 8.14.
11. Click OK to close the Hue-Saturation dialog box.
Now this texture is quite a bit darker than I want it to be. I’m looking for a light gray with a hint of beige or tan color, so what we’ll do is touch it up a bit using some different tools. I could probably narrow in on the desired result quite a bit more using the Hue-Saturation dialog box, but that wouldn’t be any fun, now would it?
Figure 8.13
Hue-Saturation dialog box.
Figure 8.14
Initial sidewalk texture.
Due to the vagaries of grayscale reproductions of color images, don’t expend too much energy trying to match your work with the images here in the book. Follow the values I give you in the procedures, and note the changes that occur with your work—they should at least roughly mirror the changes in the book images in a very general sense, and not much more than that.
First, we want to brighten the image and, at the same time, emphasize the bumpiness a bit. To do this, we’ll use the Brightness-Contrast tool.
12. Still with the crawling ants, choose Tools, Color Tools, Brightness-Contrast. Your screen will be graced with the presence of the Brightness-Contrast dialog box, as shown in Figure 8.15.
13. Set Brightness to 69 and Contrast to 52. Then click OK.
As you can see with Figure 8.16, the texture details now stand out in relief quite a bit more. This is goodness. However, the color still needs to be more tanlike.
14. Choose Tools, Color Tools, Color Balance to get the Color Balance dialog box, as shown in Figure 8.17.
There are three radio buttons in the Select Range to Adjust section: Shadows, Midtones, and Highlights. Select any one of them for use in the next step.
Figure 8.15
Brightness-Contrast dialog box.
Figure 8.16
Enhanced sidewalk texture.
Figure 8.17
Color Balance dialog box.
15. Move the sliders (or type the values in directly) to set them as shown in Table 8.1.
16. Repeat setting those values for the remaining two radio button settings in the Select Range to Adjust section and then click OK. You should end up with a sidewalk texture that is a light gray-tan, as shown in Figure 8.18.
Now that the color is where we want it, let’s roughen it up a bit. The texture is a bit too smooth, sort of like taffy. A sidewalk usually looks grainier. To get that kind of look, we’ll add noise.
Table 8.1 Color Balance Settings
Figure 8.18
Gray-tan sidewalk texture.
17. Choose Filters, Noise, Pick. You’ll get the Random Pick dialog box, as shown in Figure 8.19.
18. We’ll stick with the default values. Note that if you intend to repeatedly use this tool when processing textures, you should probably check the Randomize checkbox to ensure that you get a different random seed each time. This will ensure that you won’t get the same pseudo-random changes applied every time you use the tool.
The texture should now look something like the one shown in Figure 8.20. Notice that some of the visible features in the texture have been scrambled somewhat by adding the noise.
You should now have two images open in your Gimp window: the first one being the woodgrain texture and the other being the sidewalk texture. In the next section you’ll learn how to save those images for later use.
Figure 8.19
Random Pick dialog.
Figure 8.20
Final sidewalk texture.
Working with Files
We want to get those images saved without any further ado, but first I want to show you something. You’re going to launch the Torque demo and have a peek at something.
Getting a Before View
1. Leave Gimp running, and task switch (Alt+Tab) to the Windows desktop.
2. Launch the Torque FPS Example using the Deathball Desert Level.
3. After you spawn in, run over to the structures that look like salt and pepper shakers joined by a skywalk. Go into the building, and up the ramp, and onto the skywalk as shown in Figure 8.21.
Figure 8.21
View of the skywalk.
4. Take note of the grid texture used for the floor of the skywalk. In the next section you’ll learn how to modify this texture using Materials Editor.
5. Resist the natural impulse to run around and blow things up. (Well, try to resist the natural impulse to run around and blow things up, anyway.) Instead, exit the game.
Saving Texture Files
Okay, now that you have the “before” view recorded in your mind, we’ll finally get to saving those images. Switch back to Gimp now, and follow this procedure to save your files:
Tip
It is always a good idea to save your source art in the native file format of the tool that you created it with. That way, things like layers and paths are preserved. Normally, game engines expect image game assets to be in PNG, DDS, JPG, BMP, or TIFF format as raster images (some with alpha transparency, some without alpha). You should create a folder for your game project, outside of the standard development path and call it something like “Source Art”, and keep your source art in there. XCF is the XML-based source art file format for Gimp images.
Whenever you need to modify your source art, you open the original file in the creation tool’s native format (i.e., XCF), edit it, save it again, then export it in one of the game file formats, like PNG or DDS, however it’s required by the engine.
Save the file in Gimp’s native format
1. Click the pine woodgrain image to bring it to the front (making it active).
2. Select File, Save As. In the name field, enter Pine and then click the Browse for other folders button just below the Save in folder part. Browse to a location where you save your art. You will get the Save Image dialog box, as shown in Figure 8.22.
3. Click Save. The image will be saved in the Gimp’s native file format, .xcf.
Save mipmap
4. Now we want to save the image again in the DDS format that works so well with Torque. Select File, Save As. Click Browse for other folders and in the Tools Demo FPS game folder, navigate to artshapesdesertStructures.
Figure 8.22
Save Image dialog box.
5. Click the drop-down list to the right of the Add button and select DDS image (*.dds).
6. Below the Add button, expand the Select File Type (By Extension) option and in the File Type list, select DDS image. Your Save Image dialog should resemble the dialog shown in Figure 8.23.
7. Click Save. The Save as DDS dialog appears.
8. From the Compression list, select BC2/DXT3, and ensure Generate mipmaps is selected. (For information on mipmaps, see the “Mipmapping” section in Chapter 3.) Your Save as DDS dialog should resemble the dialog shown in Figure 8.24.
9. Click OK.
Create normal map
10. Next we want to generate a normal map for the pine texture, to make the pine tiles appear to have an apparent 3D quality in our Torque 3D FPS example.
Figure 8.23
Save Image dialog box.
Figure 8.24
Save as DDS dialog box.
(For an explanation of the concept of normal maps, see the “Rendering” section in Chapter 3.) First we need to change our pine image to grayscale. From the Colors menu, select Desaturate and then in the dialog, select Lightness. Your Desaturate dialog should look like Figure 8.25.
11. Click OK.
12. Now we’ll create the pseudo-3D appearance. From the Toolbox, select the Paint-brush tool. Click the Brush button and choose the fuzzy square tool, square (20,20) blur. Then change the Scale to 3.5 as shown in Figure 8.26.
Figure 8.25
Desaturate dialog box.
Figure 8.26
Toolbox, Paintbrush dialog box.
13. Move your cursor over the pine image, center the two squares of the brush in the center of the pine tile and then click five times. Your image should resemble Figure 8.27.
14. Next, choose Filters, Map, Normalmap. In the Normalmap dialog, ensure that you have the following settings and adjust as necessary:
Filter: 4 sample
Minimum Z: 0.00000
Scale: 4.00000
Height source: Average RGB
Alpha channel: Height
Conversion: None
Figure 8.27
Paintbrush placement.
DU/DV map: None
Alpha map: (Empty)
Also ensure that none of the Options boxes are checked.
15. Click OK. Your image will be significantly altered as you can see in Figure 8.28, and that’s as it should be. You might be able to glean some sense of what your original image looked like, but quite often you won’t. That’s not an issue; it is expected behavior so don’t fret.
Save normal map
16. Now we want to save the image as a normal map in the DDS format. Select File, Save As. In the Name field, enter Pine_nrm.dds.
17. Click Browse for other folders, and in the Tools Demo FPS game folder, navigate to artshapesdesertStructures.
Figure 8.28
Normal-mapped texture.
18. Click the drop-down list to the right of the Add button and select DDS image (*.dds).
19. Below the Add button, expand the Select File Type (By Extension) option and in the File Type list, select DDS image.
20. Click Save. The Save as DDS dialog appears.
21. From the Compression list, select BC2/DXT3, and ensure Generate mipmaps is NOT selected.
22. Click OK.
Applying a New Material to a Torque Object
Now, we’re ready to use our new pine tiles on the skywalk.
1. Launch the Torque Toolbox. Select the Deathball Desert and then click World Editor as shown in Figure 8.29.
Figure 8.29
Launching World Editor.
2. After you spawn in, run over to the structures that look like salt and pepper shakers joined by a skywalk. Go into the building, and up the ramp, and onto the skywalk as shown in Figure 8.21.
Important Note!
You can move your player around in the World Editor in the same manner as you do in the game, with the WASD keys, except that in order to look around you need to hold down the right mouse button while you move your mouse around.
3. Position your player so that you’re viewing the skywalk from one of the towers, approximately as shown in Figure 8.30.
4. Select the Object Editor tool and then the Select Arrow. Now you should see that the World Editor, Object Editor, and Select Arrow buttons are all depressed as shown in Figure 8.31.
5. Click somewhere in the sky and then click somewhere on the tiles of the sky-walk. You’ll notice a selection in the Scene tree on the right. This shows us that we now have the Team XBase structure selected, as illustrated in Figure 8.32.
Figure 8.30
Looking at the skywalk.
Figure 8.31
Selecting an Object in the World Editor.
Figure 8.32
Object Editor Scene Tree selection.
Next we’ll select a material on the skywalk floor of this structure and swap in our pine material as shown in Figure 8.32.
6. Next, on the left side of the Torque World Editor toolbar, click the Material Editor tool. Mouse over the tools to see their names. You’ll see Material Preview and Material Properties windows replace the Scene tree and Inspector windows. Depending on what was selected in the Object Editor, you’re probably now looking at the material used for part of the tower exterior, similar to the material shown in Figure 8.33.
7. In the Material Properties section, from the list to the right of stationXX.dts, select plate. You’ll see the Material change to the gray material used on the floor of the skywalk.
Figure 8.33
Material Preview and Material Properties.
8. In the Diffuse Map area of Material Properties, click the Edit button so we can swap in the pine material. In your DEMO FPS Example folder, browse your way to gameartshapesdesertStructures, select Pine.dds, and then click Open.
9. Let there be light! Now we have a beautiful pine floor for our skywalk, but it’s a little dull and two dimensional. So, let’s use a normal map to give it some 3D oomph. Under the Diffuse Map you’ll see the Normal Map. Click the Edit button and in your DEMO FPS Example folder, browse your way to Pine_nrm.dds, in gameartshapesdesertStructures and then click Open.
10. One more step. We need to change the Lighting Properties so our 3D floor looks a little better. In the Lighting Properties area, select Specular and then enter 2 for the Specular value. The Material Preview and Material Properties should look like the following and the skywalk floor should look great as shown in Figure 8.34.
If you decide you want to save this level to look at later, you’ll have some difficulty. There’s a 32 object limit for saving objects in the World Editor of the Tools Demo. If you’re determined to save it anyway, what you’ll need to do is delete a few of the other stations in the level until it doesn’t complain when you try to save the level.
Congratulations! You are now an artist.
Tip
You can restore the original textures in place of your own textures by simply exiting from the World Editor without saving the level.
JPG Versus PNG Versus DDS
Gimp supports many, many file types. If you select File, Save As, you’ll get the Save Image dialog box. If you click Select File Type (By Extension), you’ll get a whopping great hockey sock full of available file types. There are three of particular interest to us: JPEG (Joint Photographic Experts Group), PNG (Portable Network Graphics), and DDS (DirectDraw Surface). In Windows, the JPEG format file extension is .jpg; this is more commonly used than .jpeg, so JPG is the term I will use.
When you save files in the JPG format, the images are compressed. The type of compression used is called a lossy compression. This means that the technique used to squeeze the image information into less space throws away some of the information. This is not necessarily a Bad Thing. The people who devised the JPG format were pretty clever and were able to specify rules that guide the software in what to keep, what to throw away, and how to modify the information. So although there is loss of information, the effect on the image is fairly negligible in most cases, but there is an effect.
On top of all that, if you repeatedly open and save JPG files, the distortion will get worse each time you do it, as data is lost in the compression each time. You’ll see it as a sort of smearing of colors around edges, especially in areas of high color contrast. It’s similar to the messiness resulting from photocopying photocopies of photocopies.
So, if JPG has these artifacts, why use it? Because with more complex images, like photographs or similar artwork, JPG files are usually smaller than PNG files. Go ahead and try for yourself. Maybe use the one in your texture example from earlier, like the sidewalk texture. When I save the final texture as JPG, I get a file size of 3,101 bytes. As PNG, I get 17,372 bytes!
The smaller the texture files are, the more of them we can fit in a given amount of memory, and the more textures we can fit in memory, the richer the visual experience for our game.
Okay, so now you are wondering, why bother with the PNG file type, right? Well, there is a good reason for using PNG files, of course. The PNG format supports a concept called alpha channels, and we will need to use alpha channels for some of our game images. Not all of them, but a few. So the rule of thumb will be to use JPG for all images except when we need to specify an alpha channel—then we use PNG.
Hang on a minute! What about DDS? Everything I’ve told you that is good about PNG in its battle against JPG applies to DDS. Plus more!
DDS is a Microsoft format specifically designed for working with DirectDraw, used to store texture and surface data. It supports several different pixel formats, i.e., 8-bit, 16-bit, 32-bit, alpha channel, as well as several fixed compression modes. What’s really cool about DDS is that if your texture files are sized in powers of two, i.e., 8 × 8 pixels, 16 × 16 pixels, 32 × 64 pixels, 256 × 128 pixels, and so on, then you can also store mipmap images for your textures in the same file. (See Chapter 3, in the “Mipmapping” section.) This means that you can create manual mipmaps overriding Torque 3D’s autogeneration of mipmaps. This gives a great more control of the visual appearance of the game to the artist.
Finally, here is an important workflow tip. Save all of your original image creations in the Gimp native format: XCF. When you create and save your images in XCF format, it’s a lot like having the original source code for a program. You can save all of your layers in XCF format, for example. Some other formats support layers, like PNG with its single alpha layer, but most don’t. Anyway, you can save your image files in the format suitable for your game needs, DDS, PNG or JPG, when you need to.
Raster Versus Vector Images
Image graphics are presented in two different ways: bitmap graphics and vector graphics formats. Sometimes both methods are used together.
Raster images, as supported by Gimp, are also called bitmap images. Raster is the pattern of lines traced by rectilinear scanning in display systems. Although it is not exactly the same as a bitmap image, it’s the term that Gimp uses to describe such images. In this book I will use the term raster for such images. Just remember that bitmap and raster essentially mean the same thing in this context.
A raster image is composed of pixels laid out on a grid. Each pixel represents a color value, one each for red, green, and blue. The weighting of each of these values determines the color of each pixel. In most image processing tools, if you increase the magnification of a raster image, you can see these pixels. They look like squares on the screen. A raster object is a collection of these pixels. An object is stored as a group of pixels with the color information about each pixel color. Pixels can be blended to create soft edges and smooth transitions between objects. Photographic images are always rendered as raster images because the pixel format matches well to the way that photographs are made.
You should note that an image in raster format is resolution-dependent. You specify the resolution and pixel dimensions when you create the image. If you later decide to increase its size, you enlarge each pixel, which lowers the image quality.
A vector image is composed of procedural and mathematical instructions for drawing the image. Gimp doesn’t work with vector graphics. As you encountered in Chapter 3, a vector is basically a line that has definite magnitude and direction. Vector objects in graphics are defined in a similar fashion. Each object in a vector image is stored as a separate item with information about its relative position in the image, its starting and ending points, and width, color, and curve information. This makes the vector format useful for things like logos, text fonts, and line drawings.
An image in vector format does not depend on the resolution. It can be resized without losing detail because it is stored as a set of instructions, not as a collection of pixels. Each time you display an image, you re-create it.
We will be doing all of our work with raster images. Some of the tools we’ll use actually operate as vector tools until the object is committed to an image document, at which point they are converted to raster graphics.
Transparency and Translucency
Okay, so you are now able to perform the most important texture imaging operations, creating one and saving it. The next most important operation is the creation of alpha channel transparent sections of an image. Remember the helicopter tail boom?
There are other uses for alpha transparency, of course. Bitmapped GUI buttons are candidates. You may want a button that does not have straight sides and square corners. You can create irregular button shapes using transparent sections of your button image.
Another use for a raster image with alpha transparency would be for overlays on the GUI, such as health bars, status displays, and weapons crosshairs.
Let’s take a look at an example of a raster with transparency. With Torque simply save your image as a PNG or DDS file, with the transparent portion assigned to the alpha channel. This keeps things in a nice, tidy single-file package. Torque will automatically employ the transparency information deployed in the alpha channel and render the image accordingly.
Using Transparencies If your imaging tool supports PNG or DDS formats—and Gimp does—then you can combine your texture data and transparency data in one file. This helps ease the assets management load when developing a game.
Let’s get on our hands and knees and rummage around Gimp’s capabilities a bit. Don’t forget to do your warm-up stretches. You don’t want to sprain your mousing hand.
1. Before we start, let’s take a look at a real example of how transparencies are used in Torque. Launch Torque Toolbox and open the Blank Room level of the FPS Example in World Editor.
2. Select the Object Editor and then in the Scene tree on the right, click the Library tab and then the Meshes tab.
3. In the Meshes tab, navigate your way to art/shapes/trees and then double-click oak1 at the top of the list. This places a tree in the blank room as shown in Figure 8.35.
Figure 8.35
Tree in Blank Room.
4. Use the Move Selection tool to place the bottom of the tree at floor level so we can have a good look at it. Grab the blue axis gizmo and drag it up until the tree is positioned properly.
5. Oops! We can’t see the tree’s branches because the sky is black. We can fix that by making the sky blue. In the Scene tree, click the Scene tab and in the MissionGroup, select SkyBox — theSky. In the Inspector below the Scene tree, look for the SkyBox rollup and within it Material. You see now that the material assigned to the SkyBox is BlackSkyMat. Double-click the Material selector icon next to the material name and in the Material Selector, choose BlankSkyMat and then click Select.
6. That’s better. Now we can see our entire tree against a desert blue sky. Now back to looking at the tree’s properties. Click the Select Arrow on the left side of the screen and then click the tree.
7. In the Torque 3D toolbar, click the Material Editor tool. What you see should be something like what is shown in Figure 8.36.
8. The tree is actually composed of two materials, one for the trunk and one for the branches. We’re mostly interested in the braches. In the Material Properties next to oak1.dts we see that oak_bark is currently previewed. Select the drop-down list to the right of oak_bark and choose oak_branch. We see the branch image displayed in Diffuse Map. In Material Properties, scroll down to the Advanced (all layers) rollup. You’ll see that Transparency is currently selected. Deselect Transparency and we’ll see what the tree really looks like without using alpha channels and transparencies, as shown in Figure 8.37.
Figure 8.36
Tree in Material Editor.
9. Now that’s one ugly tree. To make a realistic-looking tree we need to use Transparency in the Material Editor and when we create the image itself. Now, we’ll see how that’s done in Gimp 2. Using Gimp 2, create a new 256 by 256 pixel image. In the Create a New Image dialog box, click the Advanced Options button, and in the Fill with combo box, select Transparency. Click OK. Notice that the blank image has a checkerboard pattern, signifying no color.
10. Select the Pencil tool, with its brush set to Circle (03). Draw a simple tree branch—something like Figure 8.38.
11. Select File, Save. Save the branch as testbranch.dds in the TorqueTools game folder under/art/shapes/trees. Ensure DDS image (*.dds) is selected in the combo box next to Add and DDS image is selected in the Select File Type (By Extension). Click Save. In the Save as DDS dialog ensure BC2/DXT3 is selected in the Compression combo box and that Generate mipmaps is selected. Click OK.
Figure 8.37
Tree without Transparency.
12. Now, let’s see what our branch looks like on the oak tree in Torque. Alt-Tab to switch back to the Torque FPS Example demo.
13. In the Material Properties area we’re going to swap out the GG artist’s branch with the one we just made. In Diffuse Map, click the Edit button and choose testbranch.dds in the/art/shapes/trees folder and then click OK.
14. That’s still one ugly tree but scroll down to Advanced (all layers) in the Material Properties window and reselect Transparency. For a few squigley lines on a transparent background, we’ve managed to create a pretty nice-looking tree, good enough for a Charlie Brown Christmas. See Figure 8.39.
GIMP FEATURE HIGHLIGHTS
I won’t cover all the features that Gimp offers—and there are a ton of them. What I’ll do is cover those that I use the most when creating textures for games and present some of the most useful options and capabilities for those features.
The first thing that you can’t help but notice is that Gimp does not constrain your image documents to exist only inside the GNU Image Manipulation Program window, like most programs do. In fact, you can’t even have your documents’ windows inside the GNU Image Manipulation Program window!
It does take a little getting used to, having the floating Toolbox reside elsewhere on your desktop. Also note that each document window has its own menu bar. While all image document menus have the same sets of menu commands and submenus, the GNU Image Manipulation Program window’s menus are different. The most significant difference is that the Save or Save As menu commands in the GNU Image Manipulation Program menu are not available. Those features exist only on the image document windows’ menu bars.
Figure 8.40 shows the Gimp’s Toolbox, with the major sections marked.
Layers
A newly created Gimp image consists of one raster layer, always called the background layer. This is like the canvas of a painting; every image must have at least one layer. Additional layers float above the background like overlays.
To manipulate or manage our layers in Gimp, we use the Layers dialog box (see Figure 8.41), which you can invoke by choosing Windows, Dockable Dialogs, Layers from an image document window by simply pressing Ctrl+L.
Figure 8.41
The Layers dialog box.
When creating image resources, you should always strive to build your work up in layers. You can hide layers and rearrange them on top of or below each other as you work, helping to prevent your work from becoming visually cluttered before it is finalized.
Creating Layers
To create a new layer, from the image window choose Layer, New Layer. You will see that creating a layer is very much like creating a new image. You can set the layer’s image size as well as choose what the layer fill type will be. Usually I use the Transparency fill type, because I will be viewing several layers at once, and they normally will be merged together (the image is “flattened”) later. Layers that aren’t the background layer don’t normally have a… um…background of their own. Typically, we are interested in only a relatively small image on a portion of a nonbackground layer.
The Layers Dialog Box
To manage your layers, you can use the arrangement tools in the Layers dialog box to move the layers up or down in the layer list. The layer that is on the top of the list is the topmost layer and will obscure any layers lower down in the list (except for where the layer is transparent, of course).
In addition to transparent areas on a layer with transparency set to the fill type (such as you would get if you erased part of the layer with the Eraser tool), you can also set the overall transparency of the layer using the Opacity slider in the Layers dialog box, as long as you have the appropriate layer selected.
You can adjust the way any selected layer interacts with other layers by opening the Mode combo box in the Layers window and selecting one of the many blend options listed there. See Table 8.2 for more details on the layer modes.
Saving Layers
If you want to retain your layers, you need to save your image document in a file in XCF format. If you need to save only one layer and the transparency information in the alpha channel (which will be a separate layer), then you can save your image in a file in PNG format. You will need to merge your layers using Image, Merge Visible Layers so that you have only one layer left and the alpha channel (transparency) data is preserved. Just make sure that all the layers you want to be merged are actually visible; it’s a good idea to open the Layers dialog box and check to ensure that all the layers you are merging have the eye icon to the left of their entry in the list.
You could also choose Image, Flatten Image to do the same thing, except that the alpha channel is not preserved. Instead, the current background color as indicated in the Toolbox Color Area will be used to fill in the background of any unpainted areas.
The Toolbox
The Gimp has quite a selection of image processing tools. Not all of them are actually shown in the Toolbox. If you have an image document open (create a new blank one if you like), you can choose Windows, Dockable Dialogs, Tools, and get the Tools dialog box. You can use this dialog box to make tools available in the Toolbox by clicking to the left of each tool to make the visibility icon appear (a little eye). Click on the eye to make it go away, which removes the tool from the Toolbox.
Figure 8.42 shows the most useful tools to keep available in the Toolbox, matching the icons to their functionality. After you develop some expertise, your selections might be different.
Brush-like Tools
The Brush-like tools (see Figure 8.42) are a gaggle of tools that operate much like their real-life analogs, and all have similar options. All the Brush tools operate by clicking and dragging the left mouse button. Note that the right mouse button will bring up a context-sensitive menu.
Figure 8.42
Some Tool icons and their functions.
The Pencil tool and the Paintbrush tool are almost identical, except that the Paintbrush tool gives a soft-edge mark, while the Pencil tool lays down a sharp, hard edge with the line it creates.
The Ink Pen tool, while it might seem to be very similar to the Pencil tool, operates completely differently. The difference is very obvious when you examine the options. Essentially, the Ink Pen has variable nib shapes like a nib-pen would have. You can vary the pressure, ink flow, application angle, and so on.
The Air Brush tool simulates an airbrush, allowing you to adjust the pressure and paint flow rate, yielding a soft, blended edge. Just like the real thing. But unlike the real thing, you can use a fill gradient on the paint.
The Eraser tool obviously removes the paint from an image. You can adjust the pressure and the size and twiddle with a few other variables, like setting a hard edge to the Eraser.
The Blur or Sharpen (sometimes called Convolve) tool is used to adjust the clearness of various portions of an image. It can be used to enhance lines in a muddy image or to blend sharp edges together. When blurring, it functions very much like a drop of water on a water-based ink would work.
The Smudge tool is another way to blend or blur an image, except that it operates the same way a thumb or finger would do, as it is pushed across a page of ink, pencil, or paint.
Selection Tools
In general, the Selection tools are used to specify which pixels in an image are to be used for a given operation—deletion, movement (translation), cutting to the Clipboard, or what have you. In most cases you can add to a selection collection by holding down the Shift key and selecting more pixels, and you can remove from a selection by holding down the Control key and selecting the pixels you want to remove from an existing selection collection.
To use the Magic Wand, you just select that tool, and then click in the area of interest. All adjoining pixels that match the original pixel (within tolerance) will then be selected.
Fill Tools
The Fill tools operate by starting at a point in an image and spreading out from there. You indicate where the fill start point is by clicking once in the image at the spot you desire. From the Options pane you can select a pattern or a solid color for use with the standard Bucket Fill tool (the bucket o’ paint tool) or select a gradient for use with the Blend tool.
In a slight departure from the Bucket Fill tool, the Blend tool requires you to click and drag the mouse in order to indicate the direction of the gradient as well as the size of the area over which the gradient will be created.
Other Tools
The other tools in Figure 8.42 have a variety of operation modes.
The Zoom tool zooms you in closer to the image with each click of the mouse button. To zoom out (farther away), you merely hold down the Control key while clicking the mouse button.
The Angle and Measurement tool is really quite a handy tool. If you click the tool down at the vertex of an angle to be measured, you can drag the cursor around in an arc and see the angle displayed in the status bar (see Figure 8.43). You can also draw a line between two points and see the measurement in the status bar as well.
The Move tool gives you the ability to “grab” a layer, path, or selection and drag it around the image to reposition it.
Add Text lets you add text to an image. You can edit the text up until the text is committed to the image, after which the text cannot be edited as text—you will have to move the pixels around instead or redo the text.
Tool Options
Every drawing tool has different adjustable settings that can be accessed via the Tool-box’s Tool Options pane. The contents of this palette change depending on which tool is being used.
Check back to Figure 8.40 to see the location of the Tool Options in the Toolbox. Figure 8.44 shows the Paintbrush Options, with the Brush Selection dialog box open. Unseen in the figure is the fact that the Paintbrush tool has been selected in the Toolbox, so the Paintbrush Options are being shown.
Tip
Tool option settings persist from session to session until they are changed.
Figure 8.44
The Tool Options palette for the Paintbrush tool.
Brush-like Tools
The Tool Options palette for the various Brush-like tools will appear in the lower panes when you select one of the Brush-like tools. Some of the options are the same between all the tools; indeed, the Pencil tool and the Paintbrush tool have exactly the same options. Other Brush-like tools have their own specific options.
Table 8.3 shows the most commonly used options.
Table 8.3 Brush-like Tool Options
Selection Tool
The principal options available for selection tools are Antialiasing, Feather Edges, and Mode. Antialiasing applies anti-aliasing techniques to the edges of the selection where they form corners. Certain corner pixels will be selected in a semitransparent fashion so that the selection does not have “jaggie” edges. This leads to a smoother-appearing selection.
Feather Edges is similar to Antialiasing, except that the smoothing is accomplished with a border that is added around the entire selection where the pixels are selected in a semitransparent fashion.
There are four selection modes, as shown in Table 8.4. Setting a mode in the options creates a default selection mode that can be overridden by using the Control or Shift keys.
Tip
To confine the brush painting to a specific area, use the Selection tool or the Freehand Selection tool to make a selection before painting. Then the brushwork will only be applied within the selected area. This is a handy technique to avoid “overspray” with the Air Brush.
Fill Tools
The Fill tools are used to create large area fill effects, using solid patterns, gradients, or patterns.
Both the Bucket Fill tool and the Blend tool have the ubiquitous Opacity option, which works with them the way it works with all the other tools. They also share the Mode option (refer back to Table 8.2 for more detail).
Bucket Fill Tool
The Bucket Fill tool has the following custom options: Fill Type, Affected Area, and Finding Similar Colors.
Fill Type There are three Fill Types: FG (foreground) color fill, BG (background) color fill, and Pattern fill. The effects of FG and BG color fill are pretty obvious. Pattern fill requires you to select a pattern that will be painted into the fill area. There are a number of prepackaged patterns, and you can also create your own patterns.
Tip
To create a custom pattern, make your pattern and save it in one of the image file formats that Gimp supports. You need to save the pattern file somewhere inside the Gimp’s pattern search path. To find the pattern search path, choose File, Preferences, Folders, Patterns. You need to ensure that your pattern is tileable so that as the pattern repeats, there will not be any seams between each repetition. A later chapter covers how to make tileable textures (basically the same as patterns).
Affected Area There are two options for Affected Area: Fill whole selection and Fill similar colors. Fill whole selection fills the entire selected area with the fill color or pattern. Fill similar colors will apply the fill pattern to adjacent, contiguous (connected to the original) pixels that are sufficiently similar to the original pixel where the tool was clicked.
Finding Similar Colors The options Fill transparent areas, Sample merged, Threshold, and Fill by are only available when the Fill similar colors option is used. Fill transparent areas allows the fill operation to continue into transparent pixels. Sample merged allows layers other than the upper layers to be included in the fill merge. The Threshold setting is how Gimp determines the degree of similarity that will be considered when considering similar colors.
The Fill by setting lets you choose which component of the image Gimp should use to calculate similarity and to determine the filling borders. For example, if you choose the Red channel, when you select a pixel, Gimp searches for contiguous pixels that are similar for the red channel to the selected pixel.
Blend Tool
The Blend tool has a different set of options, in addition to the standard mode and opacity settings: Gradient, Offset, Shape, Repeat, Dithering, and Adaptive supersampling.
Gradient The Gradient option provides a dialog box that allows you to specify how a color gradient works. Basically, you indicate a starting color and ending color, with possible in-between color values. As the gradient filling happens, the color being applied gradually changes from one color to another according to the specification. There are a large number of prepackaged gradients that you can choose from, or you can create your own. A checkbox called Reverse is available to cause the gradient to work in the opposite direction.
Offset Offset indicates the steepness of the gradient or how quickly the change in color takes place.
Shape Shape indicates the overall topology that the gradient filling will follow: Linear, Bilinear, Radial, Square, Conical, Shaped, and Spiral. Experiment with these options to see the cool effects you can create.
Other Tools
The Zoom tool has a few interesting options.
Auto-resize window. If you select the Auto-resize window option, then the window will grow to accommodate a zoomed-in view as long as the window can fit on the screen.
Tool Toggle. By default, clicking the Magnify tool in an image window will zoom in (the default), and holding down the Control key while clicking will zoom out. The Tool Toggle option allows you to change this behavior around, so that the default behavior is to zoom out, and holding down the Control key will zoom in.
You can also click and drag the Magnify tool so that you create a zoom rectangle.
Measure has only one option:
Use info window. This handy option puts the measurement information in an external window as well as in the status bar.
The Move tool has two option sets:
Move. The first option set, Move, lets you specify which of the movable entities you want to be able to transform or move. These are layers, selections, and paths.
Tool Toggle. The other option set, Tool Toggle, indicates how the Move tool decides what to move. “Pick a layer or guide” allows that clicking the tool on the screen in the image document will select a layer or a guide. “Move the active layer” will not attempt any layer or guide selection but will simply start moving the current layer.
The Text tool lets you type in text to be added to an image. There are several options:
Font. The Font option lets you select a font from the pop-up list. You use the Size option to set the font’s size, in one of several selectable metrics: px (pixel), in (inches), mm (millimeters), pt (points), or pc (picas). There are more size metrics available as well, via the size list’s More option.
Hinting. Hinting tells the program to use the adjustment settings to fiddle with the fonts in order to make them clearer with really small font sizes. Force auto-hinter, when chosen, tells the program to always try to calculate the settings needed to make suitable characters.
Antialiasing. When enabled, Antialiasing will help to create smoother edges for characters, giving a more readable result.
Color. You can use the Color option to set the color of the characters the next time text is committed to the image.
Justify. Lets you justify the text, right, left, centered, and full (fill).
Indent. Controls the indent spacing of the first line.
Line Spacing. Controls the space between lines. The number specified determines how many pixels to add or subtract from this space.
Letter Spacing. Controls the space between letters. The number specified determines how many pixels to add or subtract from this space.
Text along Path. Only available if a path exists. Bends the text along the path.
Path from Text. Creates a select path from the selected text. Allows you to modify the shape of letters by moving path control points.
MOVING RIGHT ALONG
In this chapter we had our first peek at the world of textures. As the book unfolds, we will examine the uses for textures in more detail.
Then we looked at a powerful imaging tool, Gimp, which we can use to create and edit textures. As you have seen, Gimp has a very complete feature set.
In the next chapter we will expand our understanding of using textures in game development by learning how to skin objects, such as player models and vehicles.