Focal press 3d game textures create professional game art using photoshop mar 2006 ISBN 0240807685 pdf

3D Game Textures 3D Game Textures Luke Ahearn AMSTERDAM • BOSTON • HEIDELBERG • LONDON NEW YORK • OXFORD • PARIS • SAN DIEGO SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Focal Press is an imprint of Elsevier Acquisitions Editor: Project Manager: Assistant Editor: Marketing Manager: Becky Golden-Harrell Andrew Therriault Robin Weston Christine Degon-Veroulis Cover and interior design by the author with assistance from Eric DeCicco Focal Press is an imprint of Elsevier 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA Linacre House, Jordan Hill, Oxford OX2 8DP, UK Copyright © 2006, Elsevier Inc All rights reserved No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher Permissions may be sought directly from Elsevier’s Science & Technology Rights Department in Oxford, UK: phone: (+44) 1865 843830, fax: (+44) 1865 853333, E-mail: permissions@elsevier.com You may also complete your request on-line via the Elsevier homepage (http://elsevier.com), by selecting “Support & Contact” then “Copyright and Permission” and then “Obtaining Permissions.” Recognizing the importance of preserving what has been written, Elsevier prints its books on acid-free paper whenever possible Library of Congress Cataloging-in-Publication Data Application submitted British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library ISBN 13: 978-0-240-80768-3 ISBN 10: 0-240-80768-5 For information on all Focal Press publications visit our website at www.books.elsevier.com 06 07 08 09 10 11 10 Printed in the United States of America Working together to grow libraries in developing countries www.elsevier.com | www.bookaid.org | www.sabre.org Contents Dedication vii Acknowledgments ix Introduction xi The Concept Artists A Basic (Game) Art Education xvii A Brief Orientation to Computer Graphic Technology 40 A Quick Overview of Photoshop for Game Artists 78 Prepping for Texture Creation 106 The Sci-fi Setting 148 The Urban Setting 172 The Fantasy Setting 226 The Outdoor Setting 296 Game Effects 316 Index 339 To Julie, Ellen, and Cooper Acknowledgments Becky Golden-Harrell at Focal Press Brian Grabinski, Mark Birge-Anderson and Jose Vazquez, the concept artists Ann Sidenblad, a great friend and one of the best digital artists I know, for providing her invaluable feedback Nick Marks for his initial input on this book and for being the crazy fresh pimp of game art NVIDIA—Doug Rogers, Kevin Bjorke, Gary King, Sébastien Dominé, Carrie Cowan, and Derek Perez, for information and help developing the shader section Alkis “Atlas” Roufas for the Genetica2 demo on the desk Michael S Elliott for the use of the Tengwar-Gandalf font 328 3D GAME TEXTURES Figure 9-15 The progression of the steps to create the muzzle blast • Filter > Blur > Radial Blur—Amount 25, Blur Method Zoom, Quality Good To create the elongated part of the muzzle blast: • Open a new 512 × 512 document in Photoshop with a black background • Create a new layer named orange • Set your foreground color to orange RGB: 255, 150, 0, • Use a large, soft brush (100 pixels) and set the Shape Dynamics to Fade—25 pixels Drag a long orange line from the bottom to the top • Use a smaller brush (50 pixels) and set the Shape Dynamics to Fade—55 pixels Drag a white line from the bottom to the top of the image • Use the Smudge Tool (27 pixels, 74%) and smudge out from the center of the image and upwards • Filter > Distort > Ripple—Amount 75%, Size Large • Filter > Blur > Motion Blur—Angle 90, Distance 25 pixels • Filter > Blur > Radial Blur—Amount 25, Blur Method Zoom, Quality Good • I did a little more smudging to strengthen the flames Impact Effects: Bullet Holes and Debris When you fire a gun in a game, the muzzle blast may be notable, but it’s the effect the bullet or projectile has on the surface it strikes that is really satisfying If little to nothing happened when you fired a weapon, you wouldn’t feel as immersed or excited by the game The effect is not only cool, but it also is an important interaction with the game world In fact, a player is usually made aware of the effect his interaction has on the game world (other players being part of the game world) through visual effects Impact effects give you important visual clues as to how close you are to hitting the target you are aiming at It is a particularly tense event in a game to hear the sound of a bullet impact near you and see the hole and debris and realize that you are the target In a stealth shooter, where you are both hunter and prey, this is an important part of CHAPTER 9: GAME EFFECTS 329 game play Of course, auditory and even tactile effects (vibrating controller) play an important role, too, but you can more easily play a game without speakers than without a monitor This section is entitled Impact Effects with the added Bullet Holes and Debris because almost any interaction with a game world is an impact that spawns an effect: weapons effects are just a subset of impact effects But weapons effects are usually the most commonly needed and complex effects created for a game I am limiting the examples of impact effects in this chapter to basic weapons effects because the same principles apply to the creation of virtually all other effects The bloody hole and red spray from a gunshot wound, the tracks left behind and dust kicked up by a vehicle’s tires in the desert, a swarm of insects, and most other effects are all created in the same manner as other effects created in this chapter Some effects are relatively simple: you fire a gun and blow dirt from the ground or leave a hole in a metal panel But some can be pretty dramatic In some games you can shoot a window and blow the glass pane into a thousand shards If you are in the position to create effects such as these for a game, you will quickly realize that you need a spreadsheet to track the weapon types, ammunition or projectile, world surfaces, and the description and needed assets for each impact effect This spreadsheet can also include the associated sound files and even special case events like malfunctions and misfires Here I will walk you through the basics of creating impact effects for an average bullet on the most common surfaces First, we list the most common surfaces in an average game world: • • • • • • • • Cloth Concrete/Plaster/Brick Dirt Glass Grass Metal Water Wood For each of these surfaces we must create a texture that the game engine can display over the surface (like a decal) and look as if a bullet left a mark at the point of impact We also need to create a particle/debris image for each surface and variations for some of the surfaces For example, a bullet hitting the thin metal of a tin garden shed might simply put a neat hole right through the metal with little to no debris coming from the point of impact, but the same bullet slamming into the heavy metal of a blast door may only slightly dent the metal but send a shower of debris, even red-hot sparks, flying from the point of impact Although you may come up with a neat list of the materials in your world, these materials may all look vastly different For example, heavy metal can be rusted or freshly painted, wood can be old (desaturated and brownish) or new (brightly painted furniture or 330 3D GAME TEXTURES highly polished panels) The challenge here is to create a bullet hole decal for a certain material (wood, for example) that will work equally well in many situations (old wood, painted wood, etc.) I find that a grayscale image with good light, shadow, and alpha treatment works best as it tends to blend with the material it is displayed on top off This method also allows you to focus your efforts of how a given material will react to a bullet impact regardless of the color or condition of the material For example, wood generally splinters, glass shatters, metal is dented or punctured, etc By leaving the color information out, you can create an effect that will adopt the color of the surface it is displayed on and spew the appropriate particles for the material type The key to creating a good impact and debris set is to consider the physical properties of the material first; how hard, brittle, squishy, etc is the material, and how will it react to the impact of the specific projectile that will be hitting it? Then focus on the highlight and shadow of the hole and debris Experiment with the effects in Photoshop and ingame and adjust the alpha channeling to obtain the best results A deeper hole may be small with an almost solid black center while a shallow dent may be wider and almost transparent with only a hint of light and shadow Here are the basic surfaces I usually work with in a game They are listed alphabetically and not by importance Cloth If you kick in the door of the average crack house and start blazing away with your nine, chances are you will hit a sofa, stained mattress, or some dope shag carpeting When you are taking down that stained mattress, you want to know it’s really dead, so the game artist better give you some good visual feedback Cloth tends to rip and tear and leave strings or fibers when it is destroyed To create the impact and particles for cloth, I started with a simple stringy pattern and applied the Bevel and Emboss layer style and finally added some additional strings and darkened the hole to give it depth See Figure 9-16 for the progression of the cloth bullet hole and Figure 9-17 for the bullet hole, debris, and the effects in context Figure 9-16 The progression of the steps to create the bullet hole for cloth CHAPTER 9: GAME EFFECTS 331 Concrete/Plaster/Brick These three materials are very common in game worlds and similar in their effects The holes and debris are almost interchangeable, but you may want to differentiate between light concrete, heavy reinforced concrete, and/or bricks and heavy ceramics because of the frequency and wide variety of these types of materials Light concrete or plaster will leave a cleaner hole and produce a more wispy puff of debris See Figure 9-18 for the light concrete/plaster effects set This effects set was created as most of the other effects were, using various brushes and the Bevel and Emboss layer style as a beginning For the heavier, reinforced concrete, I made the holes shallower and rougher and the debris essentially the same as the lighter concrete I also added a puff of dust to the context image We created the puff earlier in the chapter in the section on Particle Effects, so you could see a more complete example of an effect (Figure 9-19) For the bricks I went with a simple circular hole as if the brittle brick was blown out in a large shallow circle I think the shallow carvedout look works for most brittle brick and tile surfaces I made the debris contain some small chunks since it seemed the brick would be blasted outward, whereas the concrete would powder under the impact (Figure 9-20) Dirt Dirt tends to crater when impacted so I created a wider, shallower, crater-like hole and a longer, wider, spray of dirt grains (see Figure 9-21) Glass In general, one of two things can happen when glass is impacted in a game world, a hole and debris are spawned or the glass shatters into pieces and falls out of the frame For the glass to break and fall usually involves the glass disappearing and being replaced with a particle system of falling glass shards This involves less asset creation and more technical setup We will look at the hole and debris option Often, when glass is impacted by a projectile, it doesn’t shatter but a spidery hole appears This can be the case for thick, reinforced, or bulletproof glass For this set the hole is a black circle with a faint inner glow for some depth and thin white lines emanating out from the center (use the Fade option for this) The glass debris are some simple shapes I dodged and burned See Figure 9-22 332 3D GAME TEXTURES Grass I created the grass effects set based on the techniques used for the cloth and dirt set The hole created when grass is shot wouldn’t be a clear hole, but a dark patch where the grass was displaced with a few blades overhanging The debris would be dirt and grass blades I colored the debris greenish so it would look like grass blades, but could have left it desaturated if I needed it to be more versatile See Figure 9-23 Metal Metal is another potentially big category I created three basic scenarios: the light metal with a clean hole, the heavier metal that will get dented inward and punctured when shot, and the dense metal that will only dent when impacted Each hole is a variation on a bevel and emboss with some dodging and burning See Figure 924 for the light metal, Figure 9-25 for the heavier metal, and Figure 9-26 for the dense metal Water When water is shot is sprays upward and outward Here I show you the simple decal/debris version we have been working with Some games make the water splash more complex, resembling the muzzle blast of the gun we look at earlier See Figure 9-27 for the water impact and splash Wood Wood will splinter when shot, so I created a simple hole similar to the grass impact There is a depression with splinters that overhang the hole The debris is obviously splinters or chips of wood See Figure 9-28 Conclusion That’s a basic rundown of in-game effects The asset creation is the easy part; it’s working with the various systems to get the effect you want that is the real challenge This chapter has provided you with a basis to create the assets for any effect you may be required to create for a game CHAPTER 9: GAME EFFECTS 333 Figure 9-17 The cloth bullet hole, debris, and the effects in context Figure 9-18 The light concrete/plaster effects set and the effects in context 334 3D GAME TEXTURES Figure 9-19 The heavier concrete effects set and the effects in context, with a puff of dust that drifts away after the initial impact We created the puff earlier in the chapter, in the section on particle effects Figure 9-20 The brick effects set and the effects in context CHAPTER 9: GAME EFFECTS 335 Figure 9-21 The dirt effects set and the effects in context Figure 9-22 The glass hole and debris effects set and the effects in context 336 3D GAME TEXTURES Figure 9-23 The grass effects set and the effects in context Figure 9-24 The light metal effects set and the effects in context CHAPTER 9: GAME EFFECTS 337 Figure 9-25 The medium metal effects set and the effects in context Figure 9-26 The dense metal effects set and the effects in context 338 3D GAME TEXTURES Figure 9-27 The water effects set and the effects in context Figure 9-28 The wood effects set and the effects in context INDEX Adjustment layers, 94, 100 Alpha channels, 32, 46–48, 50–51, 120–121, 160, 189–193, 204–205, 249 Angle distortion, 116–117 Animated effects, 314–316 Animation, 70–72, 74–75 Art, Auto settings, 114–115 Background images, 50, 302, 304 Backup, 109 Banding, 129–130 Banners, 274–279 Bearskin, 239–242 Bevel and Emboss, 98 Bitmapped files, 44 Blending modes, 94, 98–100 contrast, 100 darken, 99 difference, 100 exclusion, 100 hard mix, 100 HSL, 100 lighten, 99–100 normal and dissolve, 99 Blooming, 73–74 Blur, 103 Books, 252–264 Box mapping, 61–62 Bricks, 58, 130, 173–181, 331–332 Brightness, 14–17 Brightness/Contrast tool, 100 Brush Strokes, 103 Brushes, 101 Bullet holes, 313–314, 328–336 Bump mapping, 67–68, 285–286 Candles, 246–250, 323–325 Candlestick, 246–248 Chests, 242–246 Chroma, see Saturation Chrome highlights, 66 Cloning, 101, 142–143 Cloth, 330–331 Color Picker, 15–16, 18–19 Color studies, 299 Color systems, 17–18 Colors, 2, 13–17, 100, 297, 299 choosing, 21–22 cold, 21–22 emphasis, 18–20 HSB model, 14, 16 primary, 18 RGB model, 14, 16 secondary, 18 warm, 21–22 Compression, 44–46, 49–51 lossless, 46 lossy, 46, 51 Concept art, 150–151, 171–173, 226, 288–289 Concrete, 174, 199–205, 331–332 Configuration options, 45 Consoles, 45 Context, 131, 297 Contrast, 17 Coronas, 73–74, 323–326 Cracks, 133 Crates, 5, 8, 46, 62, 196–199 Crop tool, 124–127 Cropping, 109, 124–128 CS, 80, 100, 102, 134–135 Cube mapping, 285–289 Cylindrical mapping, 63–64 Darkness, DDS tools interface, 49–51 DDS, 48–50 Debris, 328–336 Decals, 314–315 Decoration, 254–256 Depth, 12–13, 24–27, 67, 178–180 Detail texture, 160–164, 209–219, 227, 238–269 340 3D GAME TEXTURES Diffuse map, 284–285 Digital cameras, 112–121 auto settings, 114–115 lenses, 115–117 DirectDraw Surface, see DDS DirectX Texture Compression, see DXTC Dirt, 134, 187–189, 300, 332–333 Distort, 103 Doors, 4, 7, 57, 110, 212–219, 279–282 Drip stains, 181–182 Drop Shadow, 98 DXT1, 50–51 DXT3, 50–51 DXT5, 50–51 DXTC, 48, 50–51 Edge copy, 139–143 Emitters, 319–320 Environment map, see Cube mapping Extract tool, 304 Fading, 49 Fantasy setting, 224–293 Ferns, 47, 306–307 File Browser, 87–88 File formats, 42–54 DDS, 48–50 DXT1, 50–51 DXT3, 50–51 DXT5, 50–51 DXTC, 48, 50–51 PSD, 42, 51–54 File size, 44–46, 50 Fill, 94, 100 Filter Gallery, 102 Filters, 97, 101–104 artistic, 102 blur, 103 brush strokes, 103 distort, 103 high-pass, 134 lighting effects, 230–231 noise, 103 offset, 104, 137–138 other, 104 pixelate, 103 render, 103 sharpen, 103 sketch, 104 stylize, 104 texture, 104 Fire, 72, 248–250, 315, 317, 323–325 Fisheye, see Lens distortion Flame, see Fire Flash, 119–120 Flattening, 53–54 Floors, 156–160, 228–230 Fonts, 252 Forest, 294–311 Form, 2–4, Four-way tiling, 136 Fractals, 75 Frames, 185 Free Transform tool, 128–129 Fur, 239–242 Game effects, 312–336 Game engines, 45, 55, 131–132 Game technology, 40–77, 131– 132 Gas, 317 Gems, 262–264 Geometry, 13 Glass, 185–187, 332–333 Glowing trails, 73–74 Google, 123–124 Grass, 300–301, 333–334 Grates, 34–35, 112–113, 156–160 Grayscale images, 46 Grid tool, 56 Grids, 43, 54–57, 91–92 Guides, 56, 90–92 Hard drives, 109 Hardware, 45 Healing, 101 Hide/show, 94 Highlights, 9–10, 30–33, 66 High-pass filter, 134 Hinges, 36–37 History, 88–89, 92 Hot keys, see Keyboard shortcuts Hot spots, 129–130 Hue, 14–15, 100 id Software, 45 Illumination maps, 249–250 Image processing, 72–76 Images, 42–48 exporting, 47 quality, 45–46 resolution, 108, 113, 286 rotating, 125–126, 128–129 saving, 47–48 scaling, 128–129 size, 42, 54–57 skewing, 128–129 Inner Glow, 98 INDEX 341 Inner Shadow, 98 Internet, 122–124 Muzzle blasts, 47, 315, 326– 328 Keyboard shortcuts, 82, 84–87 Naming conventions, 145–147 Noise, 103 Normal layers, 94 Normal mapping, 67–68 Numbers, 209–210 NVIDIA, 48–51 Lava, 71–72 Layers, 48, 52–54, 92–100 blending modes, 94, 98–100 fill, 94, 100 hide/show, 94 locks, 94–95 masks, 94 normal, 94 opacity, 94 sets, 95–96 tools, 94 thumbnails, 94 type, 94 Layer effects, 36–37, 94, 96–98 Layers palette, 92–96 Layers window, 52–53 Lens distortion, 115–116 Lenses, 115–117 Light, 2, 6–10, 32–33, 66, 132–135 absorption, 17 and brightness, 17 Light switches, 38–39 Lighting, 117–120, 320–323 Lighting Effects filter, 230–231 Liquefy tool, 103 Locks, 94–95 Logs, 304–305 Lossless compression, 46 Lossy compression, 46, 51 Luminosity, 100 Mandelbrot viewer, 75 Mapping, 4–5, 32–33, 43, 56, 60–64, 242–244, 252–253, 282–290 cube, 285–289 cylindrical, 63–64 normal, 67–68 planar, 61 Masking, 46, 48 Masks, 94 Material shaders, 65 Matte, 289 Menu bar, 81–82 Meshes, 60, 314–315 Metal, 151–153, 205–209, 237–238, 334–335 Microsoft, 48 MIP map filtering, 49 Modular design, 57–60 Mortar, 178–180 Ocean waves, see Waves Offset, 104, 137–138 Oil stains, 204–205 One-way tiling, 135 Opacity, 94 Options bar, 81–83 Organic tiling, 137 Outdoor setting, 294–311 Outer Glow, 98 Output files, 44, 46, 48 Overlays, 296–297 Page edges, 262–263 Palette Well, 81, 83 Palettes, 81, 83–84 Parchment, 265–267 Particle effects, 315–321 Paths, 104 Pattern Maker, 143 Patterns, 143–145 Perspective, 2, 22–27, 126 one-point, 24, 26 two-point, 24, 26 three-point, 24, 27 Photo reference, 108 Photoshop, 78–104 CS, 80, 100, 102, 134–135 plug-ins, 67 textures and, 110–112 work area, 81 Pigment, 17 Pipes, 164–165, 207–209 Pixel shaders, 65–66 Pixelate, 103 Pixels, 55–56, 65–66, 68 Planar mapping, 61 Planks, 194–196 Plaster, 30–31, 235–237, 331–332 Plug-ins, 67 Polygons, 13, 47, 68, 132, 172 Position, see Angle distortion Power of Two, 54–56, 175–176 Projected textures, 132–133 PSD, 42, 51–54 342 3D GAME TEXTURES Quick studies, 27–39 RAID array, 109 Rain, 189–190 Raytracing, 72–73 Reflection map, see Cube mapping Reflection, 32–33 Render, 103 Resampling, 126–127 Resizing, 109 Resolution, 108, 113, 286 Resource, 108 Roads, 132 Rocks, 305 Rogers, Douglas H., 48 Rug, 239–242 Rulers, 90–91 Runes, 254 Rust, 34–35, 205–206 Saturation, 14–16, 100, 297 Scales, 256–260 Scanners, 121–122 Sci-fi setting, 148–172 Seams, 140–141 Sets, 95–96 Shaders, 11–12, 32, 43, 64–76, 282–290 image processing, 72–76 material, 65 pixel, 65–66 vertex, 65 Shader effects, 66–72 Shadow, 2, 6–10, 30–31, 66 Shadow/Highlights command, 134–135 Shape, 2–4 Sharpen, 103 Sharpening, 49 Show/hide, see Hide/show Signs, 211–213 Sketch, 104 Skins, 60 Sky, 309–311 Sky dome, 309 Skybox, 309–311 Smoke, 317–318 Snap tool, 89–90 Source files, 44, 46 Sparks, 317 Spherical mapping, 63 Stairs, 28–29 Static effects, 314 Status bar, 81, 83 Steam, 317 Stones, 139–145, 228–235 Storing textures, 145–147 Stucco, 53, 235–237 Stylize, 104 Subsurface scattering, 68–69 Tables, 238–239 Testing, 143–145 Textures, 2, 11–13 cleaning, 123, 140 projected, 132–133 storing, 145–147 tactile, 11 visual, 11–12 Texture collections, 122 Thin film, 69–70 Three-way tiling, 136 Thumbnails, 94 Tiles, 58, 75–76, 109 Tiling, 58, 108, 121, 129–145, 175–177 one-way, 135 three-way, 136 four-way, 136 organic, 137 Tilt, 114–115 Toolbar, 81–82 Transparency, 44–46, 50–51 Tree bark, 300–301 Tree branches, 302–304 Trim command, 127–128 Type layers, 94 Undo, 88–102 Urban setting, 170–223 UV mapping, see Mapping Value, see Brightness Vanishing point, 24, 26–27 Vector files, 44 Vertex shaders, 65 Viewfinder, 114–115 Walls, 30–31, 60, 136, 153–156, 181–184, 232–235 Warehouse, 170–223 Water, 70–71, 130, 335–336 Waves, 70–71 Wax, 250 Weapons effects, 326–336 Weather, 320–321 Weathering, 187–189, 218–219 Windows, 65–66, 111, 173–174, 184–193, 269–274 Wood, 69–70, 174, 193–199, 235, 335–336 Work area, 81 Yoda, 108 ... shader technology for artists Three: A Quick Overview of Photoshop for Game Artists Photoshop is the right hand of the game artist While there are many 3D applications, Photoshop pretty much... of beautiful art is the hard part All you have to now is set up your art in a way that allows you to quickly find, alter, and output your textures for use in a game xiii xiv 3D GAME TEXTURES Chapter.. .3D Game Textures 3D Game Textures Luke Ahearn AMSTERDAM • BOSTON • HEIDELBERG • LONDON NEW YORK • OXFORD • PARIS • SAN DIEGO SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Focal Press is