Making a Player Skin


Now for the Big One—the player skin, or more accurately, the character skin, because the following section could apply equally as well to computer-controlled characters sometimes called AI (Artificial Intelligence) players or NPCs (Nonplayer Characters).

The character we'll use as the basis for this section is one affectionately called the Standard Male Character. He was created to be the base model for derivatives to be used in the Tubettiworld game that is currently in development at Tubetti Enterprises.

Figure 9.23 shows an early prototype of the Standard Male Character striking a heroic pose in the wilderness, confronting his, um, well, some trial or tribulation, I guess. This character began life as a concept sketch I did while nestled in front of a roaring fire on vacation in the Laurentians. My wife told me what the character should look like, and I sketched him about a hundred times until she was happy with it (see Figure 9.24).

click to expand
Figure 9.23: The Tubettiworld Standard Male Character model rendered by the Torque Engine.

click to expand
Figure 9.24: Concept artwork for the Standard Male Character.

I sent the concept artwork to a talented young man who goes by the name Psionic (http://www.psionic3d.co.uk) on the Internet, and he created the original model prototypes for me. The model came out pretty well, but as I said, the character in Figure 9.23 was an early prototype. The main issue was the skin color—it was too pasty. But that was soon fixed. We have since used that model to generate variations in gender, build, ethnicity, and animation sets, mostly by modifying skins, but with some model changes as well—especially for the female versions.

The point here is that for all of your serious artwork, models, skins, and so on, it's a good idea to create concepts beforehand—on paper or digitally, it doesn't matter. This way you have a tool to communicate the idea that you have in your head. It may take weeks or months to get a model completed, and it can happen that you stray unacceptably far from your original concept. It's especially important to have concept artwork if you want to sell a game idea to build a team and recruit talent to help you. If they can go away with a few pictures in their minds of what your dream is, it will help you a great deal.

The Head and Neck

Now on with the show. Take a look at Figure 9.25. This is the unwrapped UV template for the Standard Male. I've labeled the various parts in the picture to help identify what goes where. The file C:\3DGPAi1\resources\ch9\player.bmp has the proper template in it (though without the labels) for you to work with. Let's get started.

click to expand
Figure 9.25: UV template for the Standard Male.

  1. As before, open the template file, this time called C:\3DGPAi1\resources\ch9\player.bmp, save it somewhere as a PSP file, and work with that.

  2. Create a new raster layer and name it "Skin" in the New Raster Layer dialog box. You are going to create a lot of raster layers in this procedure— make sure you label each one as I indicate.

  3. Using whichever technique you like best, cover the entire face and neck part of the template with a flesh color, as in Figure 9.26. (I use the RGB values shown in Table 9.4 for a basic flesh color. Of course, you are free to twiddle the numbers to get something you like.) Make sure you apply your color to the skin layer and not to the background layer that holds your template.

    click to expand
    Figure 9.26: Basic flesh tone applied to the skin layer.

    Table 9.4: Flesh-Tone RGB Settings

    Color Component

    Value

    Basic

    Red

    215

    Green

    165

    Blue

    95

    Shadow

    Red

    183

    Green

    133

    Blue

    83

    Highlight

    Red

    247

    Green

    187

    Blue

    107

    Tip

    Normally you can draw a vector object directly to a vector layer or create it as a raster on a raster layer. The problem is that once you've drawn it, you can't adjust it. The solution is to draw your object as a vector on a new vector layer and then add it to a raster layer when you have finished with it. You do this by setting all the layers you aren't interested in to invisible (click on the eye icon next to each layer in the Layer palette). You want to have only two layers visible: the vector layer of the object you just made and the raster layer you want to add it to. Then you choose Layers, Merge, Merge Visible.Your vector layer will be converted to raster form and added on top of the raster layer. Then just set all the rest of your layers to be visible again by clicking on their eye icons one more time.

    Tip

    In Figure 9.26 you can see the lines of the UV template through the skin layer's flesh color. Do this by reducing the opacity of the skin layer to about 95 percent or so. In the Layer palette, slide the Opacity slider left until it gets to the value you want. The lower you set the opacity, the more you can see of the layer beneath it—however, the less your skin layer's colors will look like their actual settings.

  4. Now comes a bit of magic. You need to get some basic skin shading done next. There is a highlight and shadow image template that I like to use to get the basic head shades in place. Figure 9.27 shows the template, and you have a copy of it (C:\3DGPAi1\resources\ch9\hilite.png) that you can use for your own purposes. Open this file in Paint Shop Pro.

    click to expand
    Figure 9.27: Hilite template.

  5. With the hilite.png image file active, choose Edit, Copy.You must make sure that you have no selections in the image. You can make doubly sure by choosing the Selection tool and right-clicking inside the image; this will deselect any selections that might exist—sometimes they can be so small that you don't notice them.

  6. Find your working copy of player.psp in Paint Shop Pro, and choose Edit, Paste, Paste as New Layer. This will paste the hilite image you copied into a new raster layer. Rename the layer as "Hilite". The first thing you will probably notice is that it is larger than the head and neck template area.

  7. Choose Image, Resize and you will get the Resize dialog box. Clear the Resize All Layers box, and then in the Pixel Dimensions frame, set Height and Width to 80, and choose Percent from the combo box to the right. Click OK.

  8. Now lower the opacity of the new layer to about 80 percent.

  9. Make the skin layer invisible.

  10. Drag the image around until you get the best fit over the UV template of the head and neck.

    You should get an image that looks like Figure 9.28.

    click to expand
    Figure 9.28: Hilite template applied over the head and neck UV template.

    Being the astute observer that I know you are, you've no doubt noticed that although the hilite template fits quite well at 80 percent of its full size, it's not exactly right. For one thing, the eyes are wrong—the hilite of the eye area needs to be slanted to match the contours of the UV triangles. We're going to fix that right now.

  11. Make sure that the new raster layer with the hilites on it is active by making sure that its entry in the Layer palette is selected. Then choose the Selection tool, which is the fifth tool from the top of the Tool palette.

  12. Select an area around the right that encompasses the eye, the brow above, and a small amount of the upper cheek below, but no part of the bridge of the nose.

  13. Choose Image, Rotate, Free Rotate. In the Free Rotate dialog box, click on Left and then click on Free. Type 5.00 into the Free box and click OK.

    Tip

    The hilite.png template was created by taking several full-face photos and drawings and stretching the contrast of each quite a bit in grayscale.The images were then all overlaid and averaged to give a resulting template. That result was then tested in a few models and manually tweaked a few times. The originals were chosen to be all of the same face shape and type. Different templates for different ethnicities and face shapes were made this way.

  14. The eye area has rotated. Press Ctrl+Up Arrow to nudge the selection up once and then Ctrl+Right Arrow to nudge it once to the right.

  15. Right-click in the image to deselect the selection, and check to make sure that it is aligned correctly. If it isn't, press Ctrl+Z and you will get your selection back. You can then rotate it or nudge it some more.

  16. When you have the eye hilites placed, repeat this process for the other eye.

  17. Lower the opacity for the hilite layer to about 20 percent, and raise the opacity of the skin layer to 100 percent.

  18. Save your file (just a precaution).

Now you have something like Figure 9.29, with the rough shading and coloring of flesh tones showing the major features of the face. At this point it becomes a case of filling in the details. You can go ahead and do it however you like. Zoom in close and use the Air Brush and Paint Brush tools. Add lip color, eyebrows, eye details, and ears. You might find it hard to put actual eye color in, but give it a try.

click to expand
Figure 9.29: Hilite template applied over the skin layer.

Eye detail can be added by creating ellipse objects on a scratch vector layer, sizing and rotating them correctly, and placing them over the eye areas. When you create eyes remember that the colored area in the center, the combined pupil and iris regions, usually has a white or otherwise light spot offset a bit to one side and a bit above center, as shown in Figure 9.30.


Figure 9.30: An eye.

Also remember that certain areas of the face are usually lighter in tone than others, like the upper part of the lower lip, the upper eyelid, the nostrils, and so on.

You can make a good five-day stubble by using the Paint Brush with the density set low, like 25 percent or so. Dab the brush in the areas where it is needed. Make a moustache by applying the stubble brush over and over to the upper lip. Encourage yourself to experiment!

Eventually you will end up with something like Figure 9.31.

click to expand
Figure 9.31: Finished face and neck.

Hair and Hands

Next we'll tackle the hair and hands of the Standard Male. We'll do these two together because they both use skin (flesh) tones (the guy is going to have a bald spot). Once these are done, we are finished with the skin part of the skin. Or something like that.

Both of the next subsections will be using the skin layer in addition to other layers.

Hair Textures

Hair has a pattern, though not a specific pattern. There is often quite a bit of randomness, but nonetheless there is a grain, if you will, like the grain in a wooden plank or the lay of a lawn. There's a clue there!

Try this:

  1. Locate the hair portion of the UV template in your working file, player.psp.

  2. Draw an object that encompasses the hair, and set the fill to match the color of the hair you used in the bits that show in the head area as in Figure 9.32.

    click to expand
    Figure 9.32: Filled hair template area.

  3. Copy that object and paste the copy into another new layer. Modify the fill of that object. (Reminder: You can do this by double-clicking on the object with the Object Select tool and then clicking on the Fill color box.)

  4. Set the hair RGB color value to those listed in Table 9.5.

    Table 9.5: Hair Color RGB Settings

    Color Component

    Value

    Red

    251

    Green

    178

    Blue

    129

  5. Select the Texture check box.

  6. Click the Current Texture display box and select Grass02 from the list that pops up.

  7. Set Angle to 90 and Scale to 50.

  8. Click OK to close the Color dialog box and then again to close the Properties dialog box. You will get something similar to Figure 9.33.

    click to expand
    Figure 9.33: Textured hair.

  9. Merge the new layers you created with your skin layer, using the Merge Visible technique I showed you earlier.

  10. After you do this, the layer will be named "Merged". Rename it to "Skin" again, by right-clicking on the layer's name in the Layer palette, choosing Rename, and then typing in the name.

  11. Now for the bald spot. If you look at how the triangles in the UV template are arranged you can see that the upper-left corner of the hair area and the upper-right corner of the hair area meet when they are wrapped back onto the model. The place where they meet is the crown of the head, which just so happens to be one of the two places where classic male-pattern baldness begins!

    Choose the Air Brush and set its size to about 32, its density to about 25, and its foreground color to the highlight flesh tone found in Table 9.4.

  12. In each of the corners, spray some bald skin on, sparser toward the inner areas and denser as you move toward the corners, until you have a substantial patch of bare skin and a surrounding area of varying thinness (see Figure 9.34). Don't worry about overspraying the edges, those areas outside are not going to be rendered.

click to expand
Figure 9.34: The font of wisdom under construction—the bald spot.

The Hands

The hands need to be skinned on three sides. You should use the basic flesh tone, with some shadow color for areas between the fingers.

  1. Once again using the Pen tool with the Point to Point Segment Type, draw an object that surrounds the area that comprises the hand UV template (Figure 9.35).

    click to expand
    Figure 9.35: Hand area.

  2. Set the fill color of the object you just made to the basic flesh tone.

  3. Start a new vector layer.

  4. Using the Pen tool with the Segment Type set to Freehand, Line Width set to 2.0, and Color set to black, draw the lines that separate the fingers. Use Figure 9.36 as a guide.

  5. Put the Pen tool back into Point to Point mode, and draw a fingernail. Make sure the line color is black, and use a fairly bright pink for the fill color.

  6. Place your lines and fingernails appropriately (as in Figure 9.36), and fiddle with the shapes until you are happy.

    click to expand
    Figure 9.36: Finger lines and fingernails.

  7. Set the opacity of the layer to about 10 or so. That bright pink fingernail color is not so bright anymore.

  8. Merge the two layers you just created into the skin layer.

  9. Using the touchup brushes (ninth from the bottom of the Tools toolbar) and the Air Brush tool, add shading and irregularity to the lines as in Figure 9.37.

    click to expand
    Figure 9.37: Adding hand details.

  10. Weaken some of the darker lines. Add lighter highlights around the main knuckles and darker wrinkles around the other knuckles.

  11. Eventually you will arrive at something that works for you, similar to Figure 9.38.

click to expand
Figure 9.38: The finished hands.

The Clothes

We'll spend most of our time remaining in this chapter working on the jacket.You've already learned and applied almost all of the new skills required to do the clothing.

The Jacket

It's a leather jacket. Quite a nice one too. Wouldn't mind one like that myself! The color is a basic brown, with the usual darker shadows and lighter highlights, just like with the flesh tones. Things to note are that the jacket "blouses" at the waist and at the cuffs. This is a wrinkling effect that occurs as the material is gathered in for the seam work in those areas.

  1. Start off by drawing objects around the back, the front, the waist, the cuffs, the collar, and the sleeves in a fashion similar to what we've done in the past (see Figure 9.39). Make sure you do this on a new layer and name it "Jacket".

    click to expand
    Figure 9.39: The jacket pieces.

  2. Set the fill color to the basic brown, using the values shown in Table 9.6.

    Table 9.6: Jacket Color RGB Settings

    Color Component

    Value

    Red

    140

    Green

    68

    Blue

    62

  3. On the Tool Options palette, just to the right of the Presets box, is another box with brush configuration choices. Click on that box, and then choose Small Bristles Hard from the icon list.

  4. To get that stippled leathery look, choose the Air Brush and set it as shown in Table 9.7.

    Table 9.7: Air Brush Settings

    Setting

    Value

    Shape

    Round

    Size

    26

    Hardness

    100

    Step

    10

    Density

    50

    Thickness

    100

    Rotation

    0

    Opacity

    90

    Blend Mode

    Normal

    Rate

    5

  5. Merge all your new layers onto the skin layer.

  6. Spray the leather areas of the jacket with short sharp strokes—just enough to get the stippled look to appear. Do this for all the leather areas: back, front, collar, and sleeves. Figure 9.40 gives an idea what I've done: The back (on the left) has the stippled look, while the visible part of the front (on the right) does not.

    click to expand
    Figure 9.40: Getting close to that leathery look.

  7. Use the Lighten/Darken brush (the tenth brush down in the Tool palette) to make the contours of the gathers at the bottom of the front of the jacket.

  8. Use the Smudge brush and the other touchup brushes to tweak the contours to your liking (for example, as in Figure 9.41).

    click to expand
    Figure 9.41: That leathery look.

  9. You can create the zipper and the zipper flap by using the Pen tool to draw a line from the neck to the bottom. Make one line with a width of about 3.0, and then copy it and paste the copy next to the original line.

  10. Edit the properties of the new line and change its width to 7. This will be the flap.

  11. Merge the new layers to the skin layer, and then touch up the zipper area with stippling and make other tweaks to get it to coordinate with the other areas of the jacket.

  12. You can do all the other areas of the jacket in the same way as shown in steps 4 to 11.

The Trousers

The trousers can be done using exactly the same techniques as used for the jacket. You just need to use different colors and perhaps a different texture or airbrush density or step value. By now, you should be pretty handy with the toolkit in Paint Shop Pro, so I'll leave you to do the trousers on your own. Don't forget to make a belt—it goes at the bottom of the trouser area in the UV template.

The Boots

The final area to apply texture to is the boot area. Again, you've practiced all the techniques required to make the boots as well. There is one thing I want to show you, though, that will help, and that is the built-in textures in the Color dialog boxes.

If you click on the Color box in the Materials palette, or the Color box in the Properties dialog box of an object, you will see a tab for Patterns, and then to the right side, a box for Textures. The textures will be applied to whatever color mode (tab) you have selected, so that you can have, say, textures applied to patterns. In the Pattern list there is a Tire Tread pattern that would be suitable for the bottom of the heel of a boot, and in the Textures list there are many textures that would be suitable for different parts of the boot.

Make sure you save your work in player.psp, and then save another version as C:\3DGPAi1\resources\ch9\player.jpg.

Figure 9.42 shows the complete skin for the Standard Male.

click to expand
Figure 9.42: Standard Male skin.

Trying It On for Size

As you learned earlier in the chapter, you can use the Show Book Models shortcut and load the player.dts model. You will be able to view the Standard Male character with your new skin on it. You'll probably see areas that need fixing up, and so go ahead and do just that.




3D Game Programming All in One
3D Game Programming All in One (Course Technology PTR Game Development Series)
ISBN: 159200136X
EAN: 2147483647
Year: 2006
Pages: 197

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net