Macromedia Flash MX Game Design Demystified phần 6 potx

You could make all your background and environment graphics in raster format, and your characters in vector format.. Grab the paint bucket tool K, select the linear gradient you just mad

7. Select the 30% alpha #016D3D color swatch and apply it to the outer outline Use the arrow tool to select the red outline and delete it

For the greatest optimization of vector graphics, be sure to draw only as much detail

is appropriate for the size at which the object is going to be displayed For instance,

notice that I didn't draw any spots or little scratches on the apple Most apples have

these characteristics, but this particular one doesn't need them because it will be

viewed at a small size Including that level of detail would only make my apple file

larger and more processor intensive when animated In short, don't put detail where

you don't need it!

Remember that this technique can be applied to almost everything you draw Adding lighting and shadows give your work a more professional look, and it's a finishing touch that will make your gaming graphics stand out from the rest

Adding Depth

Adding the illusion of depth to the graphics in your games is a good way to make objects appear more real engaging, and to encourage the user to pay attention to certain objects at certain times In short, depth can make your gaming world a more captivating environment and a more exciting experience

To give the illusion of depth to any of your gaming graphics, you mainly manipulate the attributes of color, focus, or speed We'll examine each of these areas here, and I'll use the example of the platform game Ice World (see Chapter 15, "Ice World: A Platform Game") In every game, of course, the user controls or

manipulates the main character In some games, the user also has control over other environment

such as platforms, bad guys, items to collect, and background elements By working with depth, you will be able to show dramatic changes in characters and environments, where you can attract the user's attention whatever elements you choose

Color

Color (and color changes) can make your most important game elements pop out Typically, the main

character, bad guys, and collectable items are the main focus of a game, and therefore the ones you want to design to receive the most attention

Though it's not so apparent here in black and white, the game characters and elements with which the user interacts most are the most brightly colored

Choose bright, bold colors and lots of contrast to make your main characters stand out To have the

pop even more, you can apply a black outline to them This provides great contrast between the characters the environment elements

If the main characters are the ones you want to bring forward, it stands to reason you'd want to downplay background elements, such as platforms and ledges I use more muted colors for these elements It's also a good idea to remove their outline paths to help them blend into the environment

You can divide up the background elements among layers to create an illusion of depth In our example, I've limited myself to two layers, because multiple layers can be very processor intensive To visually separate the two, I used the visual convention of making the elements darker the further they are in the background If have already drawn your background in Photoshop, you can darken it easily by simply adjusting the

If you want to make this adjustment in Flash, you can convert your background into a symbol and add a Tint effect (from the Color drop-down menu in the Properties panel) Tint it with a darkish color that works for design Make sure the percentage of the tint is between 10 and 90 so that you can really see the effect—outside of that range the effects are not very apparent

Focus and blur

Focus is a very important feature in your world; it's a fairly easy way to help you add great depth to the environment and to call attention to central elements You can add or remove focus from your elements by applying a blur effect This is best done in a raster program Although the effect can be achieved to a certain level in Flash, blurred vector graphics are often too processor intensive to use in your game For optimum performance, it's best to blur only background elements so that you can get away with using raster blurs, and keep Flash from having to do any blurring at all

Speed

Drop Shadows

Where you may run into some difficulty with raster-image integration is in the area of performance JPEGs are the most optimal raster format to import in terms of size, so

we have to deal with their limitations in other areas Specifically, JPEGs don't support

an alpha channel (so, no transparency), and they come in with a rectangular outline bounding box, unless you trim them in Flash, as we discussed earlier in this chapter you wanted to blur a main character, you'd need the transparency of an alpha

to help blend it in Unfortunately, transparency and alpha channels are only

in formats that are larger in size and therefore not great options for use in Flash However, of those larger formats, PNG is the most manageable and therefore most useful (as opposed to TIFF, which supports great-looking alpha channels but is not recommended for import into Flash)

The property of speed comes into play when the user interacts with the game and off a chain of reactions that cause the elements of the game world to animate The illusion of speed is created in the ActionScript, which is written to make the graphics move, and move at the right speed To give you a simple example from our platform game, open the ice_world.swf file in the Chapter15 directory Notice that as the main character walks forward, the elements further in the background appear to move slowly than the elements closer to the user

The Quest for Realism

Making your game look more realistic can be a challenge when you're working within Flash's drawing limitations You can draw realistic-looking graphics in Flash as vector art, but in most cases that would actually be too processor-intensive for Flash to handle The most common way create realistic graphics is by working with a raster program like Photoshop, and then importing them into Flash as JPEGs But beware: Even with the compression abilities of JPEGs, if you use many raster files, your game file size could get out of hand So, predictably, you have to make trade-offs I usually recommend using a combination of both formats, weighted toward one or the other format type depending on the look you are going for For example, let's say you're creating graphics for an isometric world You could make all your background and environment graphics in raster format, and your characters in vector format The fact that background and environment graphics are mostly static and rectangular will probably work in your favor; given that when graphics are imported into Flash they are rectangular, that's a lot less trimming you may have to

do As for the characters, because they are mostly small and, once animated, will need quite a frames, you'll need to fill in less detail and will also benefit from the vector graphic's small file

You can create a basic drop shadow from a couple of gradient shapes For our example, we will apply the shadow to a floating menu, but you can apply this basic concept to your own user interfaces and also to more complex shapes

1. Using the rectangle tool (R) with a bevel of 10 pixels, create a rectangle in the middle of the stage To set your bevel, before you draw the rectangle click the Round Rectangle Radius button, located in the Options section of the Tools panel, and enter a value for the Corner Radius setting in the text dialog that pops up

2. With the arrow tool (V), select the stroke of one edge of the rectangle and scale it by 200% (Ctrl-Alt-S Windows or Command-Option-S on the Macintosh) While the line is still selected, and with Snap to Objects selected in the View menu, move the line to connect with the place where the line and the corner curve meet

If you use Flash's quick keys, this exercise goes very quickly Here we're assuming

you have your keyboard shortcuts set to default

3. While the line is still selected, copy it (Ctrl-C in Windows or Command-C on the Mac), paste it in place (Ctrl-Shift-V in Windows or Command-Shift-V on the Mac), and move it outside the rectangle, creating the start of a border around the rectangle

4. Repeat steps 1–3 for the strokes on the other edges

5. Create your drop-shadow gradients

Make a linear gradient from #000000 100% alpha to #000000 0% alpha, and add it to the Color Swatches panel Then make a radial gradient from #000000 100% alpha to #000000 0% alpha Place the #000000 100% alpha color for both linear and radial gradients in the middle of the gradient spectrum, and add it to the Color Swatches panel

6. Grab the paint bucket tool (K), select the linear gradient you just made, and apply the gradient to the long top area

7. Select the fill transform tool (F), and use the transformation knobs to edit the gradient so that it fades from 0% alpha at the top to 100% alpha at the bottom

8. Repeat steps 6 and 7 for the bottom, left, and right sides

9. Grab the paint bucket tool (K) again, select the radial gradient that you made, and apply it to all the corner sections

10. Select the fill transform tool (F), and edit your radial gradients so that the center of the gradient intersects with the hairline strokes

11. Still using the fill transform tool, move the scale and stretch handles until all the gradients meet seamlessly (Go ahead and delete the lines; you will be able to see your gradients much more easily.)

You should be able to apply this technique to just about anything Try modifying the colors and the alpha percentage to get different looks

The same drop-shadow technique, applied to a user-interface item

1. Open the existing rectangle (if it isn't open already), grab the ink bottle tool (S), and apply a red stroke to the outside of the rectangle

2. With the arrow tool, select the vertical stroke at the left of the rectangle, copy it, paste in place, move

to the right, and scale it to about 200%

3. With Snap to Objects on, attach the line to where the top curve meets the horizontal line

4. Repeat steps 2–3 to create guidelines for the right, top, and bottom sides of the rectangle

5. Create your highlight gradients: Make a linear gradient from #3399FF at 100% alpha to #92C9FF at 100% alpha, and add it to the Color Swatches panel Then make a radial gradient from #3399FF at 100% alpha to #92C9FF at 100% alpha, and add that to the Color Swatches panel, too

6. Grab the paint bucket tool (K) and select the linear gradient you just made Apply it to the long top bottom areas and to the left and right vertical areas

Make sure the Lock Fill button near the bottom of the main tool panel is not selected,

or else when you apply your fills, they will look quite odd

7. With the paint bucket tool still active, select the radial gradient you just made, and then apply it to all the corner areas

8. Select the fill transform tool (F), and edit your linear and radial gradients so that they match up seamlessly

9. Use the arrow tool to select the red guidelines you made earlier, and then delete them If the gradientsdon't match up perfectly, try adjusting where the colors start and stop in your gradient spectrum

10. Select the center color, and change it to a solid fill of #3399FF so that it blends with the gradients you've just applied

That's it! Try this technique on your user-interface items; you'll achieve that raster look with the small file

of vector graphics

Putting Text in Perspective

Don't waste your time with 3D programs or third-party plug-ins trying to make killer 3D text when you can

do it in Flash! It doesn't take an artist to pull this off; just follow this easy procedure, and you'll soon be able take a basic font and give it perspective

1. Using the text tool, type the word "HELLO" in 40-point Arial Black, in red Break the font elements all way down (Ctrl-B in Windows or Command-B on the Mac) until they are just fill shapes

2. Figure out where you want the vanishing point to be For this example, I placed mine in the middle

below the text (see the crosshairs)

3. Grab the line tool, and with Snap to Objects on, start connecting the points between the vanishing and the corners of the text characters As you go along, you can delete any lines that overlap (which just get in the way of other lines)

4. Decide how thick (deep) you want the 3D text to be Use the line tool to draw a horizontal line all the way across your stage Apply that same thickness to the top and bottom of each letter

5. Use the paint bucket tool to apply color in between the guidelines you created

Think back to the "Light and Shadow" section—apply brighter variations of one color to signify where light is coming from Our example assumes that the main light source is coming from the top left the fills have been applied, delete all the guidelines

Now you have given your text some perspective, but it still seems kind of flat Let's take it to the level and simulate more depth and real light

6. Using different variations on your original text colors, create and apply some linear gradients to the

Always keep in mind where your main light source is

This lesson is just the beginning Try adding some perspective to your game's user interface, or let it help

to set your perspective for a 3D environment

Tint Change

Here's a tint-change technique that will enable you to create one graphic and, using code, edit its color as times as you want This is very helpful if you have one graphic that needs to be displayed in many colors For example, in a game of 9-ball, you could create just one ball and use tint changes to make nine different-balls A tint change is also very efficient in terms of file size, as it only involves one graphic In the following example, we are going to prepare (visually, not with code) a simple ball graphic for a tint shift

1. Grab the oval tool, and create a circle with no stroke and a fill of black

2. Select the circle you just made With it selected, convert it into a symbol (F8) with the behavior of Clip Right-click or Control-click the circle to see the contextual menu, and choose Edit in Place Select the circle that is inside this symbol you are now editing, and copy it Create a new layer above the existing one and choose Edit > Paste in Place to lay down the circle you just copied Hide the bottom layer

3. Open the Color Mixer; create a radial gradient from #000000 100% alpha outside (right marker) to

#000000 0% alpha inside (left marker), and apply it to the new circle you just pasted

4. Grab the fill transform tool, and move the center of the gradient up and a little bit to the left Grab the scale controller handle and move it until it touches the outside of the circle

5. Hide the top layer and unhide the bottom layer Select the black circle on the bottom layer, and

it to a movie-clip symbol This symbol will be the movie clip to which the ActionScript programmer will apply the tint change (The idea is for the programmer to change only the circle with the flat color applied—the gradient can be applied, as is, to any iteration of that circle to give it the depth and dimension you want.)

That's it for the graphic aspect of this technique! All that's left is for the programmer

add the necessary code to edit the tint value of the movie clip to change its color To

see the ActionScript involved, you can open programmed_example.fla in the

directory on the CD