Tài liệu 3D Game Programming All in One- P15 pdf

Draw an object that encompasses the hair, and set the fill to match the color of thehair you used in the bits that show in the head area as in Figure 9.32.. In the next chapter, we will

Hair and Hands

Next we'll tackle the hair andhands of the Standard Male

We'll do these two togetherbecause they both use skin(flesh) tones (the guy is going tohave a bald spot) Once theseare done, we are finished withthe skin part of the skin Orsomething like that

Both of the next subsectionswill be using the skin layer inaddition to other layers

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 thehair you used in the bits that show in the head area as in Figure 9.32

3 Copy that object and paste thecopy into another new layer

Modify the fill of that object

(Reminder: You can do this bydouble-clicking on the object withthe Object Select tool and thenclicking on the Fill color box.)

4 Set the hair RGB color value tothose listed in Table 9.5

5 Select the Texture check box

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

dis-7 Set Angle to 90 and Scale to 50

Figure 9.31 Finished face and neck.

Figure 9.32 Filled hair template area.

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

dia-9 Merge the new layers you created with your skin layer, using the Merge Visibletechnique I showed you earlier

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

11 Now for the bald spot If you look athow the triangles in the UV templateare arranged you can see that theupper-left corner of the hair area andthe upper-right corner of the hair areameet when they are wrapped backonto the model The place where theymeet is the crown of the head, whichjust so happens to be one of the twoplaces where classic male-patternbaldness begins!

Choose the Air Brush and set its size

to about 32, its density to about 25,and its foreground color to the high-light flesh tone found in Table 9.4

12 In each of the corners, spray somebald skin on, sparser toward the innerareas and denser as you move towardthe corners, until you have a substan-tial patch of bare skin and a sur-rounding area of varying thinness(see Figure 9.34) Don't worry aboutoverspraying the edges, those areasoutside are not going to be rendered

Chapter 9 ■ Skins328

Table 9.5 Hair Color RGB Settings

Figure 9.33 Textured hair.

Figure 9.34 The font of wisdom under

construction—the bald spot

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

3 Start a new vector layer

4 Using the Pen tool with the Segment Type set to Freehand, LineWidth set to 2.0, and Color set to black, draw the lines that sep-arate the fingers Use Figure 9.36 as a guide

5 Put the Pen tool back into Point to Point mode, and draw a gernail Make sure the line color is black, and use a

fin-fairly bright pink for the fill color

6 Place your lines and fingernails appropriately (as

in Figure 9.36), and fiddle with the shapes untilyou are happy

7 Set the opacity of the layer to about 10 or so Thatbright pink fingernail color is not so bright any-more

8 Merge the two layers you just created into the skinlayer

9 Using the touchup brushes (ninth from the tom of the Tools toolbar) and the Air Brush tool,add shading and irregularity to the lines as in Fig-ure 9.37

bot-10 Weaken some of the darker lines Add lighter lights around the main knuckles and darker wrin-kles around the other knuckles

high-11 Eventually you will arrive at something that worksfor you, similar to Figure 9.38

The Clothes

We'll spend most of our time remaining in this chapterworking on the jacket You've already learned and appliedalmost all of the new skills required to do the clothing

The Jacket

It's a leather jacket Quite a nice one too Wouldn't mindone like that myself! The color is a basic brown, with theusual darker shadows and lighter highlights, just like withthe flesh tones Things to note are that the jacket "blouses"

at the waist and at the cuffs This is a wrinkling effect thatoccurs as the material is gathered in for the seam work inthose areas

1 Start off by drawing objects around the back, the front,the waist, the cuffs, the collar, and the sleeves in a fash-ion similar to what we've done in the past (see Figure9.39) Make sure you do this on a new layer and name

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

Chapter 9 ■ Skins330

Figure 9.38 The finished

hands

Figure 9.39 The jacket pieces.

Table 9.6 Jacket Color RGB

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 getthe stippled look to appear Do this for all the leather areas: back, front, collar, andsleeves Figure 9.40 gives an idea what I've done: The back (on the left) has thestippled look, while the visible part of the front (on the right) does not

7 Use the Lighten/Darken brush (the tenth brush down in the Tool palette) to makethe 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 toyour liking (for example, as in Figure 9.41)

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

the original line

10 Edit the properties of the new lineand change its width to 7 This will

be the flap

11 Merge the new layers to the skinlayer, and then touch up the zipperarea with stippling and make othertweaks to get it to coordinate withthe other areas of the jacket

12 You can do all the other areas ofthe jacket in the same way asshown in steps 4 to 11

Table 9.7 Air Brush Settings

in Paint Shop Pro, so I'll leave you to dothe trousers on your own Don't forget tomake a belt—it goes at the bottom of thetrouser area in the UV template.

The Boots

The final area to apply texture to is the boot area Again, you've practiced all the niques 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

tech-If you click on the Color box in the Materials palette, or the Color box in the Propertiesdialog box of an object, you will see a tab for Patterns, and then to the right side, a box forTextures The textures will be applied to whatever color mode (tab) you have selected, so

that you can have, say, tures applied to patterns Inthe Pattern list there is aTire Tread pattern thatwould be suitable for thebottom of the heel of aboot, and in the Textureslist there are many texturesthat would be suitable fordifferent parts of the boot.Make sure you save yourwork in player.psp, andthen save another version

tex-as C:\3DGPAi1\resources\ch9\player.jpg

Figure 9.42 shows the plete skin for the StandardMale

com-Chapter 9 ■ Skins332

Figure 9.41 That leathery look.

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 loadthe player.dts model You will be able to view the Standard Male character with your newskin on it You'll probably see areas that need fixing up, and so go ahead and do just that

Moving Right Along

In this chapter you learned how UV unwrapping relates to the texture files known as skins.

And you learned how to apply that understanding to images for game objects rangingfrom the simple (a soup can) to the complex (a human character)

I hope you also take away from the chapter the idea that hand-drawn concept artwork is

a useful tool Draw everything in sketch form before you start working on your models

It's a great help

Finally, you can see that a fully featured image processing tool like Paint Shop Pro hasquite a few features to ease the effort of creating images for skins We've only scratched thesurface of what the program can do Don't be shy about using Paint Shop Pro's built-inHelp utility It's well done and chock-a-block-full of information

If you want to make great skins, you are going to need to practice, practice, and practicesome more Here are some of the many ways to do this:

■ Create your own models and make the skins

■ Make skins for other people's models

■ Make skins for other people for popular games like Half-Life and Tribes.

■ Make monster skins, policeman skins, airplane skins, light pole skins

■ Make a set of stock skins

■ Make skin templates that you can use to make the skinning task easier

But most of all, get down and do it!

In the next chapter, we will continue with the visual aspects of developing our game, butthis time we will be looking at how to create graphical user interface (GUI) elements, byusing Torque script to insert images and controls

This page intentionally left blank

Creating GUI Elements

chapter 10

As you've seen by now, there is more to a 3D game than just the imaginary world

into which the player plunks his avatar There is the real need to provide the

play-er with some method to make selections and othplay-erwise control the game

activi-ties Generally, we provide a Graphical User Interface (GUI) to the player to interact with

the program The menu we employed at the start-up of the program, where the playerclicks on buttons to launch the game, change the setup, or quit; the dialog box that showsthe client's loading progress; the dialog box that asks if the player really wants to quit—

these screens are all examples of GUIs

If you take a look at Figure 10.1, you can see a sample of the variety of elements foundwithin these interface screens

Some of the elements arethings we can interact with:

Some of the elements are things we can just look at:

■ frames

■ labels

■ backgroundsAlso, during the course of discussions about graphical user interfaces, you may find the

terms GUI, window, interface, and screen used interchangeably I'll stick to the words

inter-face and screen as much as possible, although contextually it might make more sense to

use GUI or window from time to time GUI is best used to describe the entire game face with the player as a whole Window is a term that most people tend to associate with

inter-the operating system of inter-their computer

The names of GUI items that are available by default with Torque don't differentiatebetween whether they are interactive and noninteractive GUI elements

If you are familiar with X-Windows or Motif, you will probably have encountered the

term widgets If so, your definition of widgets may be a fair bit broader than the one I am

about to use here In our situation, widgets are simply visual portions of a displayed GUIcontrol They convey information or provide an aesthetic appearance and offer access todefined subcontrol elements

For example, Figure 10.2 portrays a scroll bar Within the scroll bar are the thumb, arrow, and bar widgets These aren't controls in their own right but rather are necessary special-

ized components of the control to which they belong

It is possible for a control to use another control as awidget In fact, every control in a screen can be consid-ered a widget within the control that defines the screen.This will become clearer later on I will only use the term

widget to refer to a specialized component of a control

that is not itself a control

Worth noting is the fact that you can create your own GUI elements using Torque Script

if the ones that are available by default don't suit your needs

Controls

The name says it all—controls are graphical items provided to the program user to control

what the program will do In Torque, interactive controls are used by clicking on them orclick-dragging the mouse across them Some controls, like edit boxes, also require you totype in some text from the keyboard Some of the controls have built-in labels that iden-tify their purpose, and some will require you to create an accompanying noninteractivecontrol to provide a label Noninteractive controls, as the name implies, are used to onlydisplay information and not to capture user input

Chapter 10 ■ Creating GUI Elements336

Figure 10.2 Scroll bar widgets.

Torque provides a number of default controls right out of the box; the most commonlyused ones are listed next You will have encountered a few of these controls in earlier chap-ters, and we will discuss several more of them in this chapter You can use them as is; youcan modify them by adjusting the control's profile; or you can use them as the basis fordefining new controls.

Figure 10.3 shows a screen used to select missions to play There is a list of available sions on the client, some buttons to run the mission or go back to the main menu, and acheck box to indicate whether you want to host this mission for other players Note, too,that there is a background, which is the same as the background used for our Emaga gameprogram's start-up menu

mis-What we'll do is examine each of the screen's GUI elements in detail

GuiChunkedBitmapCtrl

The GuiChunkedBitmapCtrl class is usually used for the large backgrounds of interfaces,like menu screens Figure 10.4 shows such a background The name derives from the con-cept of breaking up an image into a collection of smaller ones (chunked bitmaps) in order

to improve display performance

Here is an example of a GuiChunkedBitmapCtrl definition:

new GuiChunkedBitmapCtrl(MenuScreen) { profile = "GuiContentProfile";

horizSizing = "width";

vertSizing = "height";

GuiArrayCtrl GuiAviBitmapCtrlGuiBackgroundCtrl GuiBitmapBorderCtrl

GuiBitmapButtonCtrl GuiBitmapButtonTextCtrl GuiBitmapCtrl

GuiBorderButtonCtrl GuiBubbleTextCtrl GuiButtonBaseCtrl GuiButtonCtrl GuiCanvas GuiCheckBoxCtrl GuiChunkedBitmapCtrl GuiClockHud

GuiConsole GuiConsoleEditCtrl GuiConsoleTextCtrl

GuiControlListPopUp GuiCrossHairHud GuiEditCtrl GuiFadeinBitmapCtrl GuiFilterCtrl GuiFrameSetCtrl GuiHealthBarHud GuiInputCtrl GuiInspector GuiMenuBackgroundCtrl GuiMenuBar

GuiMenuTextListCtrl GuiMessageVectorCtrl GuiMLTextCtrl GuiMLTextEditCtrl GuiMouseEventCtrl GuiNoMouseCtrl

GuiPlayerView GuiPopUpBackgroundCtrl GuiPopUpMenuCtrl GuiPopUpTextListCtrl GuiProgressCtrl GuiRadioCtrl GuiScrollCtrl GuiShapeNameHud GuiSliderCtrl GuiSpeedometerHud GuiTerrPreviewCtrl GuiTextCtrl GuiTextEditCtrl GuiTextEditSliderCtrl GuiTextListCtrl GuiTreeViewCtrl GuiWindowCtrl

"./interfaces/emaga_back-// insert other controls here

};

The first thing to note about thisdefinition is the line "// insertother controls here" Typically, aGuiChunkedBitmapCtrl controlwould contain other controls,functioning as a sort of super-container All other controls in agiven screen using this controlwould be children, or subele-ments, of this control This line

is a comment, so in and of itself,

it has no effect on the control'sdefinition I include it here toindicate where you would startnesting other controls

Note the extent property,which specifies a width of 640and a height of 480 These are

"virtual pixels" in a way Anysubelements you insert in thiscontrol will have a maximumarea of 640⫻480 to work with for positioning and sizing These virtual pixels are scaled

in size according to the actual canvas size, which you can change by setting the value ofthe global variable $pref::Video::windowedRes and then calling CreateCanvas, or if youalready have a canvas, calling Canvas.Repaint;—we used CreateCanvas in Chapter 7.TheminExtent property specifies the smallest size that you will allow this control to beshrunk down to when using the Torque built-in GUI Editor We will use that editor later

in this chapter

Chapter 10 ■ Creating GUI Elements338

Figure 10.3 Start mission interface screen.

Figure 10.4 GuiChunkedBitmapCtrl background sample.

The GuiControl class, as shown in Figure 10.5, is a sort of generic control container It's

often used as a tablike container, or as what other systems often call a frame With it, you

can gather together a collection of other controls and then manipulate them as a group

Here is an example of a GuiControl definition:

new GuiControl(InfoTab) { profile = "GuiDefaultProfile";

You can put it on an interface with

no text and then fill in the text asthe game progresses

GuiTextCtrl definition:

new GuiTextCtrl(PlayerNameLabel) { profile = "GuiTextProfile";

Figure 10.5 GuiControl sample.

Figure 10.6 GuiTextCtrl sample.

PlayerNameLabel.text = "Some Other Text";

ThemaxLength property allows you to limit the number of characters that will be storedwith the control Specifying fewer characters saves memory

GuiButtonCtrl

The GuiButtonCtrl, as shown in Figure 10.7, is another clickable control class UnlikeGuiCheckBoxCtrl or GuiRadioCtrl, this class does not retain any state Its use is normal-

ly as a command interface control, where the user clicks on it with the expectation that

some action will be immediately invoked

Here is an example of a GuiButtonCtrl definition:

new GuiButtonCtrl() { profile = "GuiButtonProfile";

Chapter 10 ■ Creating GUI Elements340

Figure 10.7 GuiButtonCtrl sample.

Another feature is the buttonType property This can be one of the following:

This control is also used as a base for deriving the three button classes shown previously

You would probably be better off to use the specialized classes GuiCheckBoxCtrl andGuiRadioCtrl for types ButtonTypeCheck and ButtonTypeRadio, rather than this control,because they have additional properties

So the upshot is, if you use this control, it will probably be as a ButtonTypePush

GuiCheckBoxCtrl

The GuiCheckBoxCtrl, as shown in Figure 10.8, is a specialized derivation of theGuiButtonCtrl that saves its current state value It's analogous to a light switch or, moreproperly, a locking push button If the box is empty when you click the control, the boxwill then display a check box If it is checked, it will clear the check mark out of the boxwhen you click the control

Here is an example of a GuiCheckBoxCtrl definition:

new GuiCheckBoxCtrl(IsMultiplayer) { profile = "GuiCheckBoxProfile";

If you specify the variable property, then the value

of the specified variable will be set to whatever thecurrent state of the control is after you've clicked it

Figure 10.8 GuiCheckBoxCtrl sample.