CREATING GAME ART FOR 3D ENGINES- P5 docx

Highlights, dropshadows, bevels, and other effects can be set up and saved as a Layer Style and easily applied to any other layer, in any file.. By using a Layer Mask, we preserve the en

layers pallet as often as you might think; consider working without these tools whileyou are painting your images and using the I key to activate the ink dropper and the B key to switch to using the brush Use the Alt+Tab key combination to bouncebetween 3ds Max and Photoshop

Using Layers for Flexibility

Layers tend to be underused in Photoshop Just as in other software solutions, layersadd power and flexibility to your design process With layers, you can move andmanipulate different aspects of your design separately Without layers, you committoo quickly to different changes and lose the flexibility to make further changes longafter the design is completed

Using Layer Effects

There is a tremendous amount of power available in Layer Effects Highlights, dropshadows, bevels, and other effects can be set up and saved as a Layer Style and easily applied to any other layer, in any file Using Layer Effects, you can almostinstantly create shadowed and highlighted textures that look 3D Many of the tex-tures in this chapter utilize Layer Effects

Using Layer Masks for Nondestructive Editing

When we erase a portion of an image for any reason, as soon as we save, those erasedpixels are gone forever By using a Layer Mask, we preserve the entire image If youerase too much, Layer Masking allows you to paint it back in, even a year later This

is because the Layer Mask allows you to paint-add or paint-subtract on an image,using any size, style, or opacity of brush you prefer Layer Masking is described inmore detail in the later section “Texturing the Oil Drum.”

Using Actions to Save Time

We can minimize repetition in Photoshop by using actions Actions allow you torecord commands and then repeat that sequence of commands automatically asneeded by clicking a button One of the processes that takes a lot of repetition is thesaving out of a PSD file so that you can check your texture in 3ds Max Althoughyou cannot use the native PSD file for the actual texture in the game, it is sufficientfor checking how the texture is coming together on the model in 3ds Max Usuallyyou will find something wrong with the texture, meaning you must go back andtweak it, turn off the template layer, save the texture, take a look, turn on the tem-plate layer, tweak again, and so on Every time you do these types of tasks, it costsyou time Making an action in Photoshop takes about one minute and pays for itselfthe first day you implement it For an action to work smoothly, you need to keepyour templates on a standard layer name, like template Use as many layers as you

need to make the texture work; the texture as you see it, but with the template layerturned off, is what you will have on your model when you are finished

It is better to wait on actions until you are comfortable with the sequences youare trying to automate When you are ready to automate any task, the procedure tocreate an action is as follows (see Figure 4.1):

1 Make sure the Actions pallet is up

2 From the flyout on the right, select Create New Action

3 Give the action a name (call it SaveNoTemplate) and assign a function key

(F12).

4 Click the Record button

5 Turn off the template layer

6 Save the PSD file with Ctrl+S (so that you are not prompted for a name tosave to)

7 Turn on the template layer

8 Click the Stop button at the bottom of the Actions pallet to stop the recording.Make sure Toggle Dialog On/Off is turned off so that you will not be prompted

to name the exported file You can find this toggle in the Actions pallet to the left ofeach listed action

If both Photoshop and 3ds Max are open and this action is implemented, youwill be able to change the texture while the template is visible and press F12 to see

an updated texture on your model You can flip between Photoshop and 3ds Max byusing the Alt+Tab keys Being able to see the results quickly and easily on the modelwill improve your result If you have a dual-screen setup, you can keep both appli-cations visible at once and work even more efficiently

Preparing the UV Template

Figure 4.2 shows a basic template layer setup in Photoshop The background layerhas been converted to a regular layer and renamed as template A new layer wascreated for the actual texture and thus named texture The templatelayer has beendragged above the texturelayer so that it is on top The Blend mode of the template

layer is set to Screen so that it shows through anything on the layers beneath it Youcan paint on the texturelayer and still see the template In this image, notice thatthetemplatelayer has been set to Screen mode and is positioned above the texture

layer When your texture is ready, save it as a JPG or PNG file, with the template

layer turned off

Remember that the template is like your canvas; the better the canvas, the ter the final texture can potentially be The more important faces on the modelshould receive the largest percentage of texture space, and the less visible or hiddenfaces should receive the least Overlap similar shapes where possible to save texturespace

bet-FIGURE 4.1 Creating an action from the Actions window.

FIGURE 4.2 The template is set to Screen mode, and the texture is on the layer beneath it.

TEXTURING THEOILDRUM

The oil drum will be our first textured model As you recall, we unwrapped the sides

of this model with a Cylindrical map and separated the top and bottom faces of themodel with a Planar map Open OilDrumTemplate.tif(located in Files\OilDrumonthe companion CD-ROM) and walk through the steps described in the previous sec-tion, “Preparing the UV Template in Photoshop.” We will apply a digital photo to theoil drum as a Diffuse map; then we will alter a copy of the photo that we will use as

a Reflection map This will cause the oil drum to partially reflect the sky in the game Because we are using a digital photo for the oil drum, we need to make sure itworks well flat The oil drum presents some unique challenges in that the top, bot-tom, and support ribs tend to distort depending on the angle the photo is takenfrom Figure 4.3 demonstrates with two inset images how much curvature there can

be to deal with on a photo of an oil drum Taking multiple shots at different heightsand using only those portions of each image that have minimal curvature is one way

to arrive at a decent texture You can also minimize curvature by taking the shotwith maximum zoom and then stepping back until the image is framed In the back-ground of this image is the finished texture, made up of multiple shots taken to min-imize curvature and to collect overlapping images of the surface

ON THE CD

FIGURE 4.3 The curves of the oil drum must be flattened.

Pushing Pixels with the Liquify Tool

You’ll need to modify many digital photos if you want to use them as suitable tures One of the problems with the oil drum images is that the support ribs had toomuch curvature The Liquify tool in Photoshop, located on the Filters drop-down

tex-menu, allows you to set a brush radius and then click-drag to push pixels in anydirection In Figure 4.4, the Forward Warp tool button is turned on The support ribthat the tool is over curves slightly downward By carefully pushing pixels down inthe middle of the drum and pushing them up at the sides of the drum, you can flat-ten the support rib for the texture The Liquify tool, used with varying brush sizes,made it possible to line up the support ribs and other curving edges in the photos

FIGURE 4.4 The Liquify tool allows us to push pixels around.

Using Offset to Make the Texture Wrap

This particular texture only goes about halfway around the oil drum Whether yourtexture goes halfway around the cylindrical object or all the way around, you aregoing to have to deal with seams The Offset tool, located under Filters, Other, letsyou slide the texture around so you can get the seam out in the open where you cancamouflage it In Figure 4.5, the Horizontal pixels have been adjusted so that youcan see the seam, which appears as a red vertical line on the left of the image At thispoint, the Liquify tool was used to push the ribs at each end of the texture a bit sothey would match up better Then, by using the Clone Stamp tool, the seam wasblended away so that it was no longer obvious

Repairing Seams with the Clone Stamp Tool

In Figure 4.6, three stages of work are shown Notice that the Clone Stamp tool isturned on in the floating toolbar at the left In the first window at the left, two oildrum photos have been laid together and positioned, now that their ribs and otherlines are nearly horizontal At this point, the file has several layers A seam is evidentdown the middle of the image

In the middle window, two white circles indicate where the Clone Stamp toolwas positioned to hide the seam The circle on the left is where the Clone Stamp toolwas initialized (by holding down the Alt key and clicking), and the circle on the

FIGURE 4.5 The Offset tool allows you to slide the seam of a texture

around for easier blending.

FIGURE 4.6 Three stages of using the Clone Stamp tool to camouflage a seam.

right is where the tool started painting (click-drag, or use a digitizing tablet andpen) This initialization and painting process copies the pixels from the initializationpoint to the destination point; it hides the seam well, but it also creates duplicatepatterns that can detract from the believability of the texture

In the window on the right, some of the duplicate patterns, as well as some ofthe differences between the two sides of the image, have been cloned away You can

do this by initializing the Clone Stamp tool in an area with consistent color and ture and then painting those pixels over an area that has a duplicate pattern Youcan also do it by turning the opacity or flow down and painting different pixels overone another, although this kind of camouflage can lead to blurriness The initialseam and the bottom ring of the drum were done at 100 percent opacity The otherwork was done at varying degrees of opacity and flow, sometimes cloning pixelsfrom one side to the other side of the image to improve overall consistency so thatthe two would look more like one image This image could still be improved upon,but you need to consider how important and visible it is in the scheme of the gameand keep in mind that when it is scaled down to game size, many details will be lost

tex-At this point, the basic texture is done You can add this texture to your ial Editor using the same technique presented in Chapter 1, “Introduction to 3dsMax,” for creating a custom material

Mater-Reflection Mapping in Photoshop

If you want your object to map the environment in Torque, you can add reflectivity

to the material If all you are after is an overall reflection, there is no need to do thing more to your map in 3ds Max other than check the Reflection box in the Mapsrollout of the Material Editor in 3ds Max and assign a value A value of 100 percentwill give you a completely reflective object, similar to placing a mirrored object inthe scene The sky of your scene will reflect in the material This method of generalreflection does not require that you assign a bitmap to the None button in the Mapsrollout of 3ds Max

any-You can use Layer Masking and alpha channels to build the Reflective map into

a single image file Figure 4.7 demonstrates this technique of adding reflection to atexture First, in Photoshop, copy your main texturelayer and desaturate it In thisexample, the upper-left window is the start point The image in the window to theright has been desaturated Adjust the Brightness/Contrast until those values suitthe amount of reflectivity you would like to achieve Whiter areas reflect more,whereas darker areas reflect less Hand-paint or dodge and burn areas if necessary.The third window, at the lower right, has had the grayscale image adjusted to fairlyheavy contrast so that the black areas will not reflect at all

Now copy the contents of this desaturated layer by using Select All, creating aLayer Mask in your primary texture layer, and selecting the Channels tab Turn onand select the Layer Mask channel Paste the grayscale image you recently copiedonto the Layer Mask channel At the upper right of this figure, you can see what theChannels tab should look like at this stage Click the Layers tab and then click the

layer’s thumbnail (The thumbnail is the picture of the actual image for that layer.)Make sure that only this key layer is turned on when you save out a PNG file At thelower right of the figure is a screen shot of how this should look The templatelayer

is turned off, the grayscale layer is turned off, and the original texture layer is turnedoff Only the layer named Tex + Alphais turned on; this layer is a copy of the origi-naltexturelayer, with the grayscale selection pasted into its alpha channel

Defining a Reflective Oil Drum Material in 3ds Max

After you’ve defined the material in Photoshop, it’s time to bring it into a sample slot

in 3ds Max and further define it In the Material Editor, you can apply your texture

to a Diffuse map and to a Reflective map

Dragging a Copy of the Diffuse Map to the Reflective Map Slot

Figure 4.8 shows three stages for adding material with the alpha channel content tothe Material Editor in 3ds Max In the first stage, the material is applied to the dif-fuse channel as usual, but in the Maps rollout, drag a copy of the material from theDiffuse map to the Reflection map When prompted as to whether you would like acopy or an instance of the material, choose Copy, because you want to make sepa-rate adjustments to the Reflective map here Click on the Reflection map to change

FIGURE 4.7 The stages of creating a Reflection map for the oil drum.

its parameters (See the white arrow in the first image.) This takes you down a level

in the Material Editor where parametric adjustments can be made to specificbitmaps

FIGURE 4.8 For reflectivity to work, you must select it in Mono Channel Output.

Changing Mono Channel Output to Alpha

In the second image, you can see that the focus is on the Bitmap Parameters rollout;

in the Mono Channel Output group, click the Alpha radio button Note here that theAlpha Source group is set to Image Alpha You can then click the Go to Parent button(see the white arrow in the second image) to return to the main material interface

Assigning the Material and Turning On the Show Map in Viewport Button

In the third image, you are back at the top level of the Material Editor, where youcan select the object and complete the normal process of clicking Assign Material toSelection and Show Map in Viewport so that the material is assigned to your already-unwrapped and ready model This process for defining a reflective material is thesame if you want the material to be partially opaque; the main difference is that foropacity, you would drag and drop the diffuse material to the Opacity map slot in-stead of the Reflective map slot

Assigning Smoothing Groups to the Oil Drum

Smoothing Group modifications for the oil drum include selecting all the cylindricalfaces and, under the Polygon Properties section, assigning them to Smoothing Group

1, selecting the top of the oil drum and assigning those faces to Smoothing Group 2,and selecting the bottom of the oil drum and assigning those faces to SmoothingGroup 3 After all three sets of faces are on different smoothing groups, you shouldhave smooth cylindrical walls on the drum and realistic edges at the top and bottomwhere the Smoothing Groups change

All oil drum–related files are available in Files\OilDrum on the companion CD-ROM

The main body of the health patch is a textured steel base, generated with variousPhotoshop filters; the raised portions of the texture were done with Layer Effects

Creating Textured Steel

By applying four filters to a gray background, you can create an interesting texturefor the main body of the health patch The filter that makes this texture take on 3Dproportions is the last one, Lighting Effects The first three filters are there merely togive this final filter something to work with

1 Fill the canvas with Gray using the Paint Bucket tool, with RGB values ofR:123, G:123, and B:123

2 Click the Filters drop-down menu, click Noise, Gaussian and set to 10%

3 Click Filters, Blur, Gaussian and set blur to 3.5

4 Click Filters, Artistic, Fresco, and set Brush Size to 2, Brush Detail to 8, andTexture to 1

5 Reapply a Gaussian blur and set it to 3.5

6 Click Filters, Render—Lighting Effects Set Style to 2 o’clock Spotlight Makesure the Spotlight covers the entire page Set Light Type to Spotlight Set thecolor to light blue (189,230,251 RGB) Set Intensity to 10, Focus to 91, Gloss

to 59, Material to 82, Exposure to 26, Ambience to 24, Color RGB value to255,254,199, and Height is set to 78 The Texture Channel is set to Blue, andWhite is set to High

TexturedSteel.psdis available in Files\HealthPatchon the companion CD-ROM

Applying a Layer Style to Create Raised Steel Panels

Layer Styles are a powerful and simple way to create raised, highlighted, and shadedimages In Figure 4.9, the base material is textured steel This base material layer can

ON THE CD

ON THE CD

be copied by clicking over the layer and selecting Duplicate Layer from the click menu In the figure, this layer is called panels You can add a Layer Style to thislayer by clicking the Add a Layer Style button at the bottom of the Layers pallet

right-FIGURE 4.9 Using Layer Styles with Layer Masks to paint in panels.

Following are the settings for the raised panel Layer Style:

• Drop Shadow Blend Mode is set to Multiply, color is black, Opacity is 25%,

Angle is 30 degrees, Use Global Light is checked, Distance is 15 pixels, Spread is0%, Size is 73 pixels, Contour is Linear, Anti-Aliased is not checked, Noise is15%, and Layer Knocks Out Drop Shadow is checked

• Outer Glow Blend Mode is Color Burn, Opacity is 25%, Noise is 15%, RGB is

255,255,190, Technique is Softer, Spread is 0%, Size is 46 pixels, Quality is ear, Anti-Aliased is turned off, Range is 50%, and Jitter is 0%

Lin-• Inner Glow Blend Mode is Vivid Light, Opacity is 92%, Noise is 19%, RGB is

190,190,190, Technique is Softer, Source is Edge, Choke is 0%, Size is 54 pixels,Quality is Linear, Anti-Aliased is turned off, Range is 40%, and Jitter is 0%

• Bevel and Emboss Style is Inner Bevel, Technique is Smooth, Depth is 131%,

Direction is Up, Size is 6 pixels, Soften is 0 pixels, Angle is 30 degrees, Use GlobalLight is checked, Altitude is 30 degrees, Gloss Contour is Linear, Anti-Aliased isnot checked, Highlight Mode is Screen, RGB is 255,255,255, Opacity is 75%,Shadow Mode is Multiply, RGB is 0,0,0, and Opacity is 75%

Using Layer Masking Instead of Erase

As you can see in Figure 4.9, the Layer Style has been applied; when this happens,the Layer Style is applied to the entire layer You can use a Layer Mask to help man-age where there are pixels, and thus manage where the Layer Style is present.Adding a Layer Mask to the layer allows you to paint away the entire image andthen add it back in, pixel by pixel If you look at the Layers pallet, the panelslayer

has two thumbnails; the one on the left is for the main texture, and the one on theright is for the Layer Mask When the Layer Mask thumbnail is active (as it is in thisimage), your foreground and background colors in the toolbar are set to white andblack You can paint with a white brush to add pixels to the layer, and paint with ablack brush to remove pixels from the layer

One approach to paint a template precisely with Layer Styles and Layer Masks is

to make black the foreground color, paint the entire layer with the paint bucket,switch the colors so that white becomes the foreground color, and then paint with thebrush Painted pixels rise up with highlights and shadows, as shown in Figure 4.9

To fill the template precisely, make the template layer current and use the MagicWand tool to select the inside of a boundary After you’ve selected the area, clickSelect, Modify, Contract to make the selection area smaller Set the value to 1 or 2pixels and click OK Then make the panelslayer current and fill the selection areausing the paint bucket You can make refinements in this filled image by using thebrush If you want to paint on the main texture, select the layerthumbnail first

Animating a Pulsing Light Using an IFL Material

Creating any animated material using an Image File List (IFL) material is forward An IFL file is an ASCII text file that creates an animation by listing a series

straight-of single images that are displayed for the number straight-of frames listed to the right straight-of eachimage name For Torque, these images must be either JPG or PNG files; usually there

is a subtle transition where the images change as the sequence progresses Forexample, the colors of the images may slowly transition from blue to red The IFLfile (pulse.IFLin this case) must have the following format:

Animating a Transparent Exhaust Material

The exhaust for the health patch uses a gradient and ripple effect to look like gasmoving out of the bottom of the model This texture also combines Opacity mappingwith animated IFL maps so that there is a moving, transparent flow coming outunder the main body of the model Opacity is achieved in a method similar to the

way Reflection mapping is managed with the oil drum The process used to makethis material semitransparent is demonstrated on the video SemiOpaqueMaterials wmvon the companion CD-ROM This file is located in the Videosfolder.

1 Open the 128 × 128 pixel exhaust template in Photoshop

2 Set up the layers for a template, as discussed at the start of this chapter

3 On your texture layer (let’s call it Layer 1), create a gradient between a lightblue foreground and a darker blue background (RGB 220,230,250 and80,160,250) The gradient should be lighter at the top and darker at thebottom

4 Apply a filter to make the image add wave: Filter, Distortion, Ocean Ripple.Set Ripple Size to 4 and Ripple Magnitude to 14

5 Copy this layer and call it Grayscale Desaturate it by going to Image, justments, Desaturate

6 With the Grayscale layer current, adjust Brightness/Contrast (Image, justments) and adjust until the bottom of the image is completely black andthe top nearly white Select, All and then press Ctrl+C to copy the contents

Ad-of the Grayscale layer Now turn Ad-off the visibility Ad-of the Grayscale layer Youare done with it

7 Add a Layer Mask to Layer 1 Go into the Channels tab, and turn on thevisibility of the Layer Mask channel Select the Layer Mask channel so that

it is the active channel

8 Use Ctrl+V to paste the grayscale image you made Go back to layers Clickthe thumbnail for Layer 1

9 Select Layer 1, and click-drag until you are over the Create a New Layerbutton This creates a duplicate layer in the position over Layer 1 Renamethe new layer Layer 2 Repeat this process to create Layer 3andLayer 4

10 Select Layer 2and activate the Move tool in the toolbar Click three times

on your keyboard’s down arrow to move the layer contents down three els Select Layer 3and click six times to move the layer contents down sixpixels Select and move Layer 4down nine pixels

pix-11 Turn on Layer 1, and make sure all other layers are turned off Save out thefile as exhaust1.png Do the same for Layer 2,Layer 3, and Layer 4, creating

exhaust2.png,exhaust3.png, and exhaust4.png

12 Using a text editor like Notepad, create a text file that looks like this:

exhaust1.png 2 exhaust2.png 2 exhaust3.png 2 exhaust4.png 2

13 Save the text file as Exhaust.IFL

When you are finished, your layers should look like Figure 4.10 Only Layer 4isvisible in this image so that you can see the image has been moved down; this is theway the layers should be set up when exhaust4.pngis saved out

ON THE CD

Applying the Materials in 3ds Max

Figure 4.11 shows the finished health patch, with the three textures applied The top

of the health patch is a mesh named light, and it has the pulse IFL image applied.The main body of the health patch is named body2, and it has the textured metal ma-terial applied with Layer Styles to create raised paneling The bottom of the healthpatch is named exhaust, and it uses IFL animation as well as an Opacity map

Simplifying the Scene When Working with Opacity

When working with Opacity maps for Torque Game Engine assets, it is a good idea

to work with just one visible object in the scene at a time Testing and refining opaque materials in 3ds Max is difficult if more than one object is visible, becauseyou will see through one and into another, and the result will be confusing To getrid of distracting meshes, select the object you are working with, and from the right-click menu, click Hide Unselected

semi-Using Mono Channel Output for the Exhaust Material Opacity Map

In Figure 4.11, the exhaust material is current in the Material Editor, and the Diffuseand Opacity maps are evident in the Maps rollout; here an IFL (text file) is callingfour different PNG files in sequence Just as with the reflective texture we used forthe oil drum, the Opacity map for this material has its Mono Channel Output valueset to Alpha

FIGURE 4.10 The transparent exhaust material is set up for animation.

HealthPatchTextured.maxand associated texture files are in the Files\HealthPatch

folder on the companion CD-ROM.

For the weapon, you can use a metal texture for the stock of the gun and a gradientcolor for the fins on the barrel of the gun In Figure 4.12, an area of the gun texturehas been selected with the Polygonal Lasso tool When the foreground color is grayand the background color is white, you can achieve a three-dimensional effect byusing the Gradient tool, with the Reflected Gradient setting The idea is to try tomake the gradients blend in to one another as you work your way across the gun, sothat the shape looks connected and continuous The BlueBrushedMetal layer isturned off in this image

To create BlueBrushedMetal, follow these steps:

1 Start with a new file that is 300 × 300 pixels

2 Use the Paint Bucket tool to fill the canvas with gray (RGB 150,150,150)

3 Click Filters, Noise, Add Noise—15%, Gaussian, Monochromatic

4 Click Filters, Blur, Motion Blur and set to 45 pixels

5 Change the Canvas Size to 256 × 256

6 Click Image, Mode, and set it to RGB Color

7 Click Image, Adjustments, Hue/Saturation, and adjust so that Hue is 210,Saturation is 20, and Colorize is checked

FIGURE 4.11 The finished health patch uses meshes, each with its own material.

ON THE CD