# Hands

Hands in a game environment can come in many shapes and sizes. During our research in Chapter 1, we discovered that Kila is to have a fully working hand, meaning all the fingers can be animated separately. If you are at all unsure about the number of fingers your character should have, talk it through with your lead artist.

Although we already have determined the hands we need for Kila, I will illustrate in this section how to develop various resolutions for a hand, covering any eventuality. The best starting point for this task is to build the higher-resolution version and then work down.

If you already have a selection of hands at your disposal, as I do in my Morgue, you can simply import one that's appropriate, attach it, and keep working. But let's say you're starting from scratch. You'll need some sample hand images that you can import into Maya and use as a guide. The image in Figure 3.61 is the one we will use as a base in this discussion.

#### Building a Finger

Before we continue, let's look briefly at how the finger is going to bend, and the best way to build this. Load the file called BendingTest.ma (located on the CD in the 03 directory). It comprises five primitive fingers, as seen in Figure 3.62 (top). If you move along the timeline, the fingers will bend (Figure 3.62, bottom).

##### Figure 3.62. Finger bending test

Notice that the finger on the far left is pinching badly as it bends, while the one on the far right keeps its shape. This is an example of how adding a few polygons in the correct place can help. It may very well be, however, that in your game the character's fingers are never seen up close, so the far-left finger will do just fine. So let's begin with building a simple finger. Once we have one finger complete, we can duplicate it and use it for the rest of the hand:

1.

Start with a new scene and go to Create > Polygon Primitives > Cube. Create a cube with a Width of 6, Subdivisions Along Width of 3, Subdivisions Along Height of 2, and Subdivisions Along Depth of 2 (Figure 3.63).

##### Figure 3.63. Cube configuration to start the finger

2.

Use the Split Polygon tool to follow the cuts shown in Figure 3.64 in the middle. This defines the knuckle areas.

##### Figure 3.64. Add the knuckle definition, and then begin to mold the shape.

3.

With the knuckles in place, start to shape the rest of the finger. Move the knuckles down the finger until they are correctly positioned. Then, as in Figure 3.64 at the bottom, taper the whole finger down toward the tip.

4.

Looking from the side view (Figure 3.65), our finger is a little flat. We need to give it more shape. Subdivide the finger further, but this time don't use the Split Polygon tool. Instead, go to Edit Polygons > Cut Faces Tool.

##### Figure 3.65. Divide the finger so that we can add more shape.

Like the Split Polygon tool, Cut Faces cuts the faces for you, but in this case you define a single straight line that determines the axis of the slice. Maya then slices through the entire mesh, following this line. A word of warning: Be careful when applying this tool; it will cut through both sides of the mesh.

Try it here: Select an area between the top of the finger and the next knuckle, holding down the mouse button. A line appears, spanning the entire view panel. Move the mouse, and the orientation of the line alters, to determine the line that will be sliced across the finger.

Make sure the line is completely vertical, and then let go of the mouse button. A line has been cut all the way through the mesh, saving you the effort of having to create each cut individually.

5.

Continue to work, making a total of three slices, until the finger looks like that in Figure 3.65 (middle).

6.

Now that you have these extra divisions, you can add definition to the finger. Look at your own finger from the side and try to match it (Figure 3.65, bottom).

7.

Switch to the top view and continue shaping, as illustrated in Figure 3.66.

##### Figure 3.66. Shape the finger additionally from the top view.

8.

Moving on, create the fingernail. Using the Split Polygon tool, create a cut at the end of the finger to outline the actual fingernail (Figure 3.67, middle). Manipulate the vertices until you achieve the required shape (Figure 3.67, right).

##### Figure 3.67. Create the fingernail.

9.

While you're at the fingernail end, you can remove a couple of unneeded vertices. You should wind up with two vertices on either side of the nail, as shown in Figure 3.68 (left). Select these and weld them to the vertices above them (Figure 3.68, right).

##### Figure 3.68. Tidy up the fingernail by removing these vertices.

10.

Finally, using reference or your own finger, continue working on the overall shape until you are happy with the results (Figure 3.69).

##### Figure 3.69. Using your reference, keep shaping the vertices.

11.

Referring back to our bending test in Figure 3.62, we can see that the finger we've just designed will more than likely pinch underneath as it's deforming. Let's try to fix that. As illustrated in Figure 3.70, split the polygons until you get two upside-down V shapes, almost mirroring the knuckles above.

##### Figure 3.70. Create extra polygons underneath the knuckle to help the finger deform better.

12.

For the last time (on this finger, anyway), work on the general shape until you are satisfied.

What we have now is a decent finger modelalthough it may have a bit too much detail or too many polygons for the actual character you are building. Figure 3.71 shows how the finger we have just built can be reduced to a lower iteration in a matter of minutes. All I did to achieve this was to snap the vertices I didn't want to the ones I wanted to keep, and then weld the whole finger using a low distance of 0.1 or 0.01.

##### Figure 3.71. The high- and low-resolution versions of the finger

Before continuing, delete the history on your finger and save as Kila_Finger.mb.

#### Creating All the Fingers

As we progress with building the hand, I will demonstrate the lower-resolution version next, for comparison. The technique is the same, no matter which finger you use.

1.

Now it is time to use our guide image, the one in Figure 3.61. Switch to the top view and import the image as an image plane. Go to View > Image Plane > Import Image and select the image called Hand_Top.jpg (on the CD in the directory 03/Scans).

2.

Size at the moment is not really an issue, as long as the proportions are correct. So instead of altering the image plane, simply rotate and scale the finger until it matches the middle finger in the image, lining it up with the knuckle as in Figure 3.73. Keep the rotations to 90 degrees for now.

##### Figure 3.72. Import the guide image as an image plane.

3.

Before creating the other fingers, check that the proportions are correct. As in Figure 3.74 (left), move the finger to the right of the image's middle finger and compare the proportions. The size looks fine, so go ahead and compare the knuckles' positions. Make any necessary adjustments (Figure 3.74, right) before proceeding.

##### Figure 3.74. Double-check the proportions.

NOTE

It's important to get the finger right, because any changes you make later will involve altering five fingers instead of one.

4.

Once you are happy with the finger's proportions, duplicate it four times. Then position and scale each copy to fit its corresponding finger in the image (Figure 3.75). Don't do the thumb yet, however (you will need to edit the thumb a bit more before positioning it).

##### Figure 3.75. Create the other fingers for the hand.

5.

Now we'll look at the thumb. It's shaped differently from the fingers, and it's set on an angle. So before positioning it, we want to reshape it. Waiting to do this later would make the task more difficult. You can achieve the desired shape by simply selecting areas of vertices and scaling them up until the digit looks thicker, resembling a thumb (Figures 3.76 and 3.77).

##### Figure 3.77. The finger now looks more like a thumb.

6.

To finish the thumb, reposition it so it lies over the thumb in the guide image (Figure 3.78, left). Then rotate it around its X axis by 45 degrees (Figure 3.78, right).

##### Figure 3.78. Position the thumb so it matches the image.

7.

The fingers are ready; you may want to move the fingers up slightly as I have done in Figure 3.79, so they lie above the thumb.

##### Figure 3.79. Move the fingers up slightly so they lie above the thumb.

8.

Moving on, combine all the digits so they are a single mesh. As you can see in Figure 3.80 (top), we still have the ends of the fingers capped. Before we start work on the palm, remove these caps (Figure 3.80, bottom).

#### The Hand

Now we can start on the main part of the hand. Use the Append To Polygon tool to bridge the gaps between the fingers and between the forefinger and thumb (Figure 3.81), filling in the outer areas.

##### Figure 3.81. Use the Append To Polygon tool to bridge the gaps between the fingers and thumb.

Next, bring the fingers up to meet the thumb by selecting the edges (Figure 3.82, left) all around the outer ring of the fingers. Select them all the way underneath, too. Use the Extrude Edge tool to pull the edges out to meet the thumb (Figure 3.82, right). Finish by flattening the new edges. You can use the Scale manipulator, or the small square on the Extrude Edge manipulator to do this.

##### Figure 3.82. Extrude the edges at the end of the fingers to create the hand.

Tip

If you are experiencing problems aligning the edges of the fingers you can align the edges manually by using the standard Move manipulator and snapping the edges to the grid. First, open up the Move tool options and deselect Retain Component Spacing. With this setting turned off, when we use the grid snap tool to align the edges they will all keep their original spacing relative to one another. Select the edges and, holding X, move them along the Z axis. All the edges will align themselves along a straight line perpendicular to that axis. Release X, and position the edges correctly.

Now it's time to work those vertices. Shape the existing palm and upper hand areas using the guide image and any reference material you have (Figure 3.83).

##### Figure 3.83. Work on the vertices to shape the new polygons for the palm and upper hand.

You now need to do another extrude. You should have a complete loop at the inner side of the hand (Figure 3.84, left). Select the edges around this loop and extrude them (Figure 3.84, middle). For this extrusion, pull it right down to the wrist and scale it inward, across the X axis (Figure 3.84, right). Look in the Channel Box; you will have all the attributes for the extrusion available. Set Divisions to 2.

##### Figure 3.84. Extrude the edges around the upper hand again.

More work on the vertices is needed now, shaping the palm, upper hand, and upper wrist areas until the entire hand is correct. Start by rounding off the wrist area and working your way up. We appear to have quite a few polygons in the palm area, and it would be easier to edit if we removed some of the unnecessary ones. Select the edges shown in Figure 3.85 (left); they should lie between the tendons on the back of the hand. Select the same edges on the underside, too, and then go to Edit Polygons > Collapse to remove them (Figure 3.85, right).

##### Figure 3.85. Collapse some of the edges making up the hand, cleaning up the area and making it easier to edit.

Kila's arms were made up of 10 subdivisions around the axis, so the wrist area of the hand should match this. As shown in Figure 3.86 on the left, select every other edge and collapse them. This leaves 12 remaining (Figure 3.86, right), but we can remove two more later after we have worked some more on the area.

##### Figure 3.86. Reduce the polygons in the wrist so it will match up more closely with the arm.

Now we have a simpler mesh to work with more easily. Continue shaping the palm and upper hand; use the tendons on the back of the hand as a guide, lining up the edges to follow them.

Looking at the hand on the left in Figure 3.87, we could use some more vertices across the middle to fill it out. As you did earlier, use the Cut Faces tool to cut a line all the way through the hand (Figure 3.87, right). Then shape the upper part of the hand until you are happy with it (Figure 3.88).

##### Figure 3.88. Shape the upper part of the hand.

Next, rotate the hand so you are looking at the palm (Figure 3.89, left). Our next job is to create the muscle that lies at the base of the thumb. Following Figure 3.89 (right), split the polygons outlining the muscle, adding a second line across the center that will let you define the muscle.

##### Figure 3.89. Add the large muscle at the base of the thumb.

The final addition to our hand will be the knuckles. To add these, you'll add an X above each finger (Figure 3.90, right). Do this as you've done before, by splitting the polygons. Then pull upward the vertices that are now in the center. This will make the knuckles more pronounced.

##### Figure 3.90. Split the polygons above each finger to make knuckles.

And there you have ita hand for Kila. Admittedly, it probably has more polygons than it needs, but we can remove these when we come to the optimization process in Chapter 5, "Model Optimization."

#### Hand Resolutions

As mentioned earlier, I followed the same procedure for the other hand, but using the lower-resolution finger. Figure 3.91 shows both hands.

##### Figure 3.91. Our high- and low-resolution hands, both produced using the same procedure.

The hands may look quite different up close, especially with the wireframe visible. But look at them in Figure 3.92, at a distance similar to how they will be viewed in a game. From afar, you can hardly tell the difference. This is the key to creating anything for games: If you can't see it in the game, don't waste time creating it.

##### Figure 3.92. Although there is a difference of 604 polygons between these two hands, you can't tell when they're viewed in the game.

One hand has 1010 polygons, but the other has only 406. Using the second, lower-resolution version could save you 604 polygons, freeing up precious processor power. And this isn't the lowest we can go; we can reduce the number of polygons even further.

Look at Figure 3.93; these are some of the hands in my Morgue. You can see how they differ. You could remove some of the fingers if they will not be needed, merging them so they are no longer individual; or you could merge them all, leaving a mitten-type hand.

##### Figure 3.93. A collection of hands at various resolutions

Many games use finger merging not only to cut down on the polygon count, but also the joint count. You see the mitten hand on all the main characters of the ever-popular Grand Theft Auto series on PS2. In that type of game, you need all the processing power you can squeeze out of the system in order to run everything that is happening in the background. Using the mitten-type hand can also mean you use 4 joints to animate it, rather than the 15 needed to move a fully rigged hand, again saving processing power.

Other games move the detail up a notch and just combine the pinkie, ring, and middle fingers, leaving the index finger and thumb free. This type of hand is useful for characters that need to hold weapons, or that may briefly be seen up close. The separate index finger gives the illusion of a fully working hand.

If you're on a tight budget and the hand does not need to be animated, you can always create a hand in a dynamic pose. This means you only need the wrist joint to animate it and, depending on the game engine you're using, you can swap the hand models when you need a different pose.

TIP

It is important the lowest version possible for a hand. This is an area that can eat up lots of power, so if you don't need a fully working hand, don't use one. You can easily create a low-resolution version from the high version that we built in this chapter. Simply select vertices you want to remove and, holding down the V key, snap them to the vertex that you want to keep. Just remember you will need to weld them, or the polygons will still exist.

#### Attaching the Hand to the Model

All that is left to do now for Kila's hands is to attach them to the model. We will use the higher version for this discussion. If we have enough polygons in our budget, it will be nice to keep some of the detail, since she is the main character and we may wind up seeing her hands up close.

1.

Delete the history, and save your current file as Kila_Hand.mb. Then load the last active file containing the body, which was Kila_Details.mb.

2.

Import the hand into Kila_Details.mb, by going to File > Import and opening Kila_Hand.mb.

3.

No doubt the hand in your file is absolutely massive, so scale it down. As a guide, the hand should be about the same size as the span from chin to forehead on the face (Figure 3.94).

##### Figure 3.94. Scale the hand to match Kila's face.

4.

Position the hand at the end of the wrist, overlapping the first strip of polygons with the palm down, as shown in Figure 3.95.

##### Figure 3.95. Position the imported hand at the end of the wrist.

5.

Delete the first strip of polygons from the hand (Figure 3.96, left), and then combine both meshes so that you can stitch them together. If you had a mirrored instance for the arm geometry, it will have been removed and you will need to re-create it.

##### Figure 3.96. Trim back the hand before combining both meshes.

6.

Match up vertices that lie closest to one another and weld them (Figure 3.97), as you did when you stitched the limbs to the torso. Because you have 10 subdivisions on the arm and 12 on the hand, there will be an area where you have to weld three vertices together. Start at the top and then move to the bottom, working on the sides last.

##### Figure 3.97. Stitch the hand to the arm by welding vertices that are close.

7.

Because you began with differing numbers of vertices, you will end up with an area that looks "wrong"maybe it's just not as smooth as it should be. Since you welded the side vertices last, this is where the problem area lies. There are quite a few polygons on the hand, so you can afford to lose a few from here. Select the edges highlighted in Figure 3.98, and collapse them.

##### Figure 3.98. Collapse these edges to smooth out the wrist area.

Work some more on the problem area until you are satisfied with the shape (Figure 3.99).

##### Figure 3.99. The attached, finished hand

When you're done, delete the history and save your work as Kila_WithHands.mb.

Game Character Development with Maya
ISBN: 073571438X
EAN: 2147483647
Year: 2004
Pages: 169
Authors: Antony Ward
Simiral book on Amazon