Tài liệu 2D Artwork and 3D Modeling for Game Artists- P5 pdf

If you were to scale the head portion of the map down to a tiny little piece, how much texture detail would show up once the texture skin was reduced to 256×256 pixels?. In this chapter,

20 Relax the arm.

21 Repeat steps 18–20 for the other arm

22 Stack these two arm pieces on top of each other (one side will have to beflipped to match)

Figure 6.33 After

stacking the hand parts, unwrap the cuffs of the arm using Interactive: Cylinder mapping.

Figure 6.34

Unwrap the arms using Interactive: Cylinder mapping.

That completes the arms Just move the components away for now, and at the endyou’ll organize the map neatly Before you continue, choose File, Export, Send UVUpdate to transfer your work back to 3D Studio Max It would also be a good idea

to switch back over to Max and save your file so you won’t lose your work Now let’smove on to the head portion of the slogre, which represents the most detail of themodel

Step 3: Unwrap the Head and Body

Normal human characters have fairly spherically shaped heads, and therefore anInteractive: Sphere mapping would suffice However, ‘tis not this case for this lovelybeast, which will require a combination of Interactive: Sphere mapping plus somecutting and stitching to get it just right I also want to get more of the neck in therebecause, according to the sketches in earlier chapters, the underside has a verysnake-like appearance

1 In a Top view, lasso one of the tusks as shown in Figure 6.35 and cut it away

Be sure to deselect any points of the head that you may have accidentallygrabbed; if you cut the wrong points, however, you can always re-join themwith the rest of the head’s U-V mesh and try again

2 Once the tusk is cut away, apply Planar 2 mapping Because the tusk won’tget much detail other than a cloudy, off-white texture, you don’t have tounwrap or relax it.

3 Repeat steps 1 and 2 the other tusk, stack them, and set them aside (seeFigure 6.36)

4 The remaining cluster of points at the top-left of the Material map representsthe entire head and body Select that, and apply Planar 2 mapping (seeFigure 6.37) This will give you a nice profile of the character with which towork

5 Use the Lasso tool to select the forward portion of the head, which willrequire the most detail on your behalf Zoom in to the neck region andselect the points that spill downward from the head as well (see Figure 6.38);just be sure to uncheck the Back Faces option when doing this or you’ll grabpoints through the mesh Once it is selected, cut and move the head away

6 Apply Interactive: Sphere mapping to the head, again centering it on theselection Align the mapping technique along the +z axis, and align the seamalong the −y axis (Don’t do this manually; use the alignment control panel

in that mapping section!)

Figure 6.36

Apply Planar 2 mapping to the tusk.

Repeat steps 1 and

2 for the other tusk, and stack them.

Unwrap the Slogre’s U-V’s

Figure 6.37 Select

the remaining points

on the Material map and apply a Planar 2 mapping.

Figure 6.38 Select

the forward portion

of the head and cut

it away.

7 Relax the selection (see Figure 6.39).

8 The lower portion of the map has points that could be joined, so select themand click the Join button Then, reselect the entire head and relax it again(see Figure 6.40)

9 The face in the center of the map may be a little scrunched, even after ing This is due to the fact that there is a sharp transition between the facepoints and the rest of the head, and DeepUV is doing its best to relax it allproportionally This is why I kept the top portion of my map unjoined, soDeepUV didn’t have to wrestle with it Zoom into the face area and select it,and click the Relax button again to see it smooth out a bit (see Figure 6.41)

relax-Figure 6.40 Join

the broken portion of the neck area and relax the head again.

Figure 6.39 Apply

an Interactive: Sphere mapping to the head and relax the selec- tion.

10 You’re finished with the head and face; move that map out of the way fornow.

11 Select the rest of the body in the Left view, with Back Faces unchecked (thisallows you to select just one half of the body, as shown in Figure 6.42)

12 Cut the selection away from the other half of the body and relax it

13 Select the other half, and relax it as well Stack the two pieces together (seeFigure 6.43)

unchecked.

Pack the Map

As I mentioned in the previous chapter, it’s best to pack these maps manually soyou can give preference to items that need more detail The logic is thus: Thelarger the scale of an individual map item on the Material map, the more texturedetail you’ll be able to apply to it If you were to

scale the head portion of the map down to a

tiny little piece, how much texture detail

would show up once the texture skin was

reduced to 256×256 pixels? Not a lot, my

friend So in this case, the pieces that need

the most detail are the head, followed by the

body, arms, legs, and so on Figure 6.44 shows

my map, packed with preferences to those

com-Figure 6.43 Cut, relax,

and stack the two body halves together.

TIP

When you place and scale the pieces on the map, use Edit, Free Transform in conjunction with the Shift key to scale the pieces uniformly.

latest — to view it, add an Unwrap UVW modifier to the stack, and in its panel, clickthe Edit button (see Figure 6.45) Now you’re ready to texture the slogre To com-mence this process, save your scene in Max, then skip to Chapter 12.

Figure 6.45

Export the final sion of the map back

ver-to Max.View the completed mapping

in Max using an Unwrap UVW modifier.

In this chapter, I showed you how to import your slogre mesh from Chapter 4 andcomplete it using 3D Studio Max attaching, optimizing, and smoothing techniques.The U-V coordinates, which represent the way the skin texture for the model will

be wrapped around it, were exported to DeepUV This program allowed us to late and unwrap individual portions of the slogre’s U-V’s, thereby generating a two-dimensional and easily texturable skin map The combination of Max and DeepUVrendered this entire operation painless and swift and prepared the model for itstexturing phase, which is covered in Chapter 12

iso-PART THREE

Texturing the UV’s with

DEEPUV

7 Game Texturing

with Photoshop

with Photoshop

with Deep Paint 3D and Photoshop

Deep Paint 3D and Photoshop

CHAPTER 7

Game Texturing

In this chapter I’ll introduce you to the vast world of game texturing This will be

a primer, so to speak, for the chapters that follow Specifically, this chapter covers

■ The game texturing arena

■ Different types of textures

Types of Textures

Even though we’re headed towards pure photorealism in games (hmmm, I’d sayaround the year 2012), not every game that’s developed now or in the future willrequire an environment that appears purely photorealistic In fact, sometimes it’scool to create a game that appears cartoon-like or bizarrely unreal — so don’t panictoo much when trying to make things look perfectly real I’ll be covering many dif-ferent types of textures as this book progresses, many of which simulate the realworld, but also others that would fit nicely with Hanna-Barbera! That said, let’s dis-cuss the various texture categories:

■ Hand-drawn textures ■ Seamless textures

■ Photo-based textures ■ Animated textures

■ Compositing textures

Hand-Drawn Textures

For the most part, I’ll show you how to create textures from scratch using eitherPhotoshop versions 6 or 7 (both are nearly identical in general functionality andtool locations) Of course, it’s easier to get a picture of something real, clean it up,and make a texture out of it; however, I want you to be able to make just about any-thing by hand should the need arise

Inorganic Versus Organic

Throughout this book, I tend to categorize models and textures as inorganic and

organic By inorganic, I mean that, whatever it is, it’s most likely portraying

some-thing carved from steel, wood, or even rock — mostly inanimate objects By organic,

I mean objects or other entities that have fluidity to their shape, or are in fact alive.Organic, to me, are things that relate directly to living things Rock-based textures Ilike to contain within the inorganic category, despite their worldly origins, becausethey represent materials used more for building things

I believe inorganic textures (rocks, metals, walls, floors, and the like) to be the easiest and most fun, as well as being the most realistic For example, I made theMars rock texture shown in Figure 7.1 in under a minute using only a handful ofthe default filters that come with Photoshop I couldn’t believe how realistic it was;

I honestly didn’t expect it to look that good (I’ll show you how to make it in thenext chapter)

Organic textures — that is, any living (or once alive) carbon-based life form or part

of something living — can be either unbelievably easy or a total pain to create.Animal and reptile skins are usually easy to make by hand because they take thesame path as rock-texture creation — usually you can achieve a great base texturefor them using only a handful of Photoshop’s filters Textures for humans, insects,

or anything else with complex detail, however, can be a real challenge for someonelike me who has limited freehand artistic ability Figure 7.2 shows a weak example

of a texture map I made for a butterfly I’ll show you how to make skin texturesfor the Slogre model later on in Part III

Photo-Based Textures

No doubt you’ll encounter many occasions when using a photograph of a brickwall, tree bark, a rusted pipe, or whatever to create your texture will be easier thancreating it from scratch A good example would be if your game called for you tocreate a texture for the side of an old train car Just get a really good snapshot ofthe car in broad daylight, clean it up a bit, and slap it on the side of a 3D model —it’s much easier than spending a couple hours trying to make something real.The most common case of photo-based texture usage probably is with brick walls.Games sometimes have a gazillion of them, and you want the widest variety possi-ble So grab your digital camera, head into the big city, and go nuts Figure 7.3shows a seamlessly tiled brick wall texture I made from a picture I took of the side

of a building I toned it down and cleaned it up a bit so it would be more ate for a video game

appropri-Figure 7.2 A

free-hand texture map applied to the skin of

a butterfly model.

Compositing Textures

Compositing is simply mashing two or more textures together, but typically it’s the

careful combination of a photo and a hand-drawn image I like to make ites, often because a flat-out photo can be too, well, dorky Integrating a part of alive picture with something you’ve created by hand or adding some layer effects to

compos-a picture ccompos-an mcompos-ake compos-a texture work very well in compos-a gcompos-ame Check out Figure 7.4 — Itook the brick texture from Figure 7.3 and, in Photoshop, applied a stucco look toparts of it Now it looks like someone tried to cement over the wall, and over time

Seamless Textures

Seamless textures are an art form in themselves I don’t think there’s a 3D videogame out there that doesn’t have hundreds of seamless textures — that is, texturesthat can be tiled side-by-side (and sometimes above and below) each other without

a noticeable seam The basic technique for making a texture seamless is to first ate the texture, and then offset it evenly using the Offset filter in Photoshop Buthere’s the trick: A good seamless texture has little noticeable repetition in the over-all pattern That is, when the texture is tiled, nothing stands out to make you say,

cre-“Oh, I see It’s just a simple brick wall copied over and over again.”

Making a 256× 256-pixel wall texture for a game is fairly easy—however, a goodartist will spend time weeding out the “sore thumbs” in the image For instance, thetop seamless brick wall texture in Figure 7.5 has obvious shadows that stand out asits tiled — every other row seems much darker and has a brick with stains where itsends meet After playing with it a bit, toning down some of the colors here andthere, I managed to make the wall look nice, smooth, and even

Figure 7.5

A seamless brick wall fixed for proper continuity.

Animated Textures

Often in games you’ll see random belches of steam coming out of a pipe, or a flow

of water gushing down a drain Both are cases of texture animation, but the first

might be considered a sprite, or a series of 2D textures (with transparency, meaning

that all areas surrounding the smoke are transparent in a game engine) chainedtogether to give the illusion of steam The latter could simply be a flat-out AVI ofrushing water that’s overlaid onto a 3D object in the shape of water, then looped

ad infinitum Animated textures can also be as simple as a blinking light on a trol panel–two textures are created; one for the light being on, and one for off

con-The game engine will handle alternating the two during game play (see Chapter 9,

“Advanced Texturing Examples,” where I show a simple on-off animation of twotextures that creates the illusion of a power switch being activated)

Summary

The texturing world is truly divided between two different categories: inorganicand organic Inorganic textures are those that represent man-made objects in thisworld, such as metal, whereas organic textures are those that represent living ornatural things As most artists paint images based on real life, textures are manytimes the result of compositing photographs with filtering effects in Photoshop

Whether your texture is seamlessly tileable for a large wall, or animated as a sprite

to simulate steam, the next few chapters will guide you through these detailedprocesses so you can generate your own outstanding game textures

191

Summary

CHAPTER 8

Inorganic

Texture Tutorials

with Photoshop

Just what are inorganic textures anyway? Inorganic textures are those texturesthat resemble materials such as stone or wood that may or may not be carbon-based, but are not “alive” — at least, not in their final building-material stage Allthe textures I’ll cover here can be created by using the filters that come by defaultwith Photoshop versions 6 and 7, and by using images of real objects I took with mydigital camera.

This chapter starts with some simple procedures, which you may find a bit boring.Soon, though, things will speed up (Try to pay attention to the particular details ofeach tutorial, because I’ll be going over some of the advanced features that

Photoshop has to offer.) In particular, you will learn

■ How to create the base material for most types of textures

■ How to use Photoshop’s default filters, pictures, or combinations of both tocreate inorganic textures

■ How to create seamlessly tileable textures

■ How to create tileable texture sets

■ How to prepare textures for games

■ How to Automate texture procedures using actions

■ How to combine and composite images

NOTEUnfortunately, I can’t detail every little inorganic texture that might

go into a typical video game Fear not, though; by the time you’re fin- ished practicing the textures in this chapter, you’ll be saturated with information to get you rolling with your own texture creations.

TIP

This chapter assumes you’re cient in Photoshop; for this reason, the instructions in each tutorial may not spell out the details of how to accomplish each task If you have trouble following along, check out the Photoshop tutorials found on this book’s CD-ROM.

Texture Creation

Texture creation is not a random process A good artist will spend time creatingand organizing textures to fit a particular scene or level so that everything comestogether somewhat fluently, and that nothing will seem out of place Textures areusually created in sets — that is, if you’re creating a dungeon, you’ll create a “dun-geon set” by grouping appropriate artwork for the stone walls, floors, and ceilings;and wood textures for the doors, stretching racks, torches, and the like

Here’s a quick guideline/overview of what you should think about before ing on any texture-creation projects:

embark-■ The more time you spend on a texture, the better (or more realistic) it willlook On the other hand, as with any business, time is money Work fast, butwork well

■ There’s more than one way to skin a cat Always think of the fastest or bestway to do any particular step while creating your textures No one way is theabsolute correct way!

■ Work large and reduce Don’t try to create a tileable stone wall that starts offthe size of your thumb By putting in details on a large image and thenreducing the whole thing, you’ll get how-did-you-do-that results

■ Understand everything that each room or scene is trying to convey Is ithappy or sad? What decade or era is it set in? Have detailed knowledge ofwhat your game company wants, and then research the materials you’ll becreating before you begin If you’re not sure, don’t just try to come up with atexture in your head Use life as your reference! Break out your camera and

go to town Literally

■ Group and work with textures in sets Don’t work randomly

■ Don’t make any texture stand out unless it needs to Blend it nicely with itssurroundings

■ Be patient A game’s graphic content can make it sell

■ Don’t re-invent the wheel If a texture exists in some picture, use that instead

of recreating it from scratch

■ Don’t be too detailed unless the game’s engine calls for it In fact, the age game’s texture is around 256×256 pixels in size; not a whole lot of detailcan be crammed into that

aver-195

Texture Creation

With that in mind, all the

follow-ing procedures can be mixed and

matched and placed just about

anywhere in a room, on an

out-side surface, or on an object Use

this chapter to get a good feel for

creating the base material for

things; then, in the next chapter,

you’ll bring it all together and

make some blue-ribbon textures

Brick Textures

Brick textures are among the most often created of all textures, and there are agazillion ways of doing every type In this section, I’ll show you the foundations fortexturing brick, give you some cool tricks and examples, and let you fly on yourown In no time, you’ll make the transition from texturing bricks like the ones inFigure 8.1 to creating walls like the one in Figure 8.2

TIP

As you begin to develop your own games, you’ll probably discover that you use certain textures on a routine basis Rather than re-creating those textures from scratch each time, try recording the creation process in the Actions palette.Then, the next time you need to use that texture, you can simply re-play the procedure.

Brick Procedure #1: From Scratch

To texture the type of brick typically found on the outside of houses, buildings,stores, and whatnot, do the following (note that rather than making an entire brickwall, you’ll make a single, seamlessly tileable pattern to fill any 2D space with abrick texture):

1 In Photoshop, choose File, New Image to open a new 7×4-inch image (seeFigure 8.3)

File, New Image

Hex

3 Choose Filter, Render, Clouds The Clouds filter creates a cloudy blend ofthe foreground and background colors, as shown in Figure 8.5.

Filter: Render, Clouds

Foreground: hex# CE0000

Figure 8.6 Apply

the Noise filter.