| Anyone who works on a computer knows that things take longer to do than we think they should. Creating graphics is no exception in fact, it could be one of the worst offenders, because graphics programs are so full of features that you can't help but keep trying more effects. What we all really want is to create all the effects we want quickly. This section covers several techniques I have learned that help me create more professional-looking artwork in less time. Most of them are simple, eye-catching effects we'll create entirely in Flash. Whenever it's possible to do this, it saves you the time and trouble of managing transfers between programs. Even more important, it keeps your vector-art file sizes small, which of course improves the streaming of your game. Every byte helps! Light and Shadow Lighting is a key element of your gaming graphics. In this exercise I will show you how using lighting skillfully in your game can spice up your graphics and help them look more realistic and professional. I'm using as an example a flat drawing of an apple that I drew for the game Fruit Smash (which you can find in the OtherGames directory on the CD), but you can apply it to any graphic element in your game. Start with a character or object that is not lighted yet. 
Think about where you want your main light source to come from. Most of the time you can visualize this. But you may also find it helpful (especially the first few times) to sketch it out on paper to see how the object might look. I save a lot of time by sketching out ideas first, since drawing them digitally in Flash can take some time. 
Once you've chosen the direction for your light source, be consistent in applying it to all of the other objects in your game. For instance, if you were to take each of the apples in the image above and use them in one graphic with the light sources coming from different angles, they would seem not to be in the same environment, and would be unbelievable or strange and distracting. Draw the main highlight on the object. For the apple example, I am going to make a radial gradient from yellow to green and position it in the direction from which the light is coming. The yellow and green I choose are specific to this particular apple, with the lighter color (in this case, yellow) representing the more concentrated light source; you should, of course, pick colors that are appropriate to your object. We are going to replace the solid-green fill with the new radial gradient. 
When you've chosen the two new colors, add them to the Color Swatches panel. Open the Color Mixer and create a radial gradient with the two colors you just added to Color Swatches, and apply the radial gradient to the object. 
When a light shines down on an object, it not only makes that object brighter, it also creates a shadow cast from that object. In our example, the apple doesn't touch the ground, so the shadow is only on the apple, making the apple darker on the opposite side of the light gradient. This shadow will consist of two alpha levels of a dark green. Because it is transparent, you can put it on a higher layer or group it floating on top of the main gradient. Create a new layer, and use the pen tool to draw the shape of your shadow. 
In the Color Mixer, create a fill color of #016D3D, at 50% alpha, and add it to the Color Swatches panel. Change the alpha to 30% and add it to your Color Swatches panel as well. With the paint bucket tool, select the 50% alpha #016D3D color swatch and apply it to the center outline, to get a darker effect. 
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 as 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 will 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 and 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 variables, 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 to 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 characters pop even more, you can apply a black outline to them. This provides great contrast between the characters and the environment elements. If the main characters are the ones you want to bring forward, it stands to reason you'd want to downplay your 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 you have already drawn your background in Photoshop, you can darken it easily by simply adjusting the brightness. 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 your 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. 
 | 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 or bounding box, unless you trim them in Flash, as we discussed earlier in this chapter. If you wanted to blur a main character, you'd need the transparency of an alpha channel to help blend it in. Unfortunately, transparency and alpha channels are only supported 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). |
Speed  | The property of speed comes into play when the user interacts with the game and sets 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 more 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 to 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 too 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 raster 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 few frames, you'll need to fill in less detail and will also benefit from the vector graphic's small file size. |
Drop Shadows You can create a basic drop shadow from a couple of gradient shapes. For our example, we will apply the drop shadow to a floating menu, but you can apply this basic concept to your own user interfaces and also to more complex shapes. | If you use Flash's quick keys, this exercise goes very quickly. Here we're assuming that you have your keyboard shortcuts set to default. |
-
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 box that pops up. 
-
With the arrow tool (V), select the stroke of one edge of the rectangle and scale it by 200% (Ctrl-Alt-S in 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. 
-
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. 
-
Repeat steps 1 3 for the strokes on the other edges. 
-
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. 
-
Grab the paint bucket tool (K), select the linear gradient you just made, and apply the gradient to the long top area. 
-
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. 
-
Repeat steps 6 and 7 for the bottom, left, and right sides. 
-
Grab the paint bucket tool (K) again, select the radial gradient that you made, and apply it to all the corner sections. 
-
Select the fill transform tool (F), and edit your radial gradients so that the center of the gradient intersects with the hairline strokes. 
-
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. 
User-Interface Lighting Giving your user interface some highlights with gradient fills can be simple and effective, although it may take a bit of practice. This type of lighting effect is great for relatively large objects, because such objects have room to display the fine gradations of color in a gradient. (On smaller objects viewed at 100%, sometimes the gradients look a little odd, since they don't have room to display properly.) To show you how to use this technique, we will walk through adding a gradient highlight to our existing rectangle that has the drop shadow. -
Open the existing rectangle (if it isn't open already), grab the ink bottle tool (S), and apply a red hairline stroke to the outside of the rectangle. 
-
With the arrow tool, select the vertical stroke at the left of the rectangle, copy it, paste in place, move it to the right, and scale it to about 200%. 
-
With Snap to Objects on, attach the line to where the top curve meets the horizontal line. 
-
Repeat steps 2 3 to create guidelines for the right, top, and bottom sides of the rectangle. 
-
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. 
-
Grab the paint bucket tool (K) and select the linear gradient you just made. Apply it to the long top and 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. |
-
With the paint bucket tool still active, select the radial gradient you just made, and then apply it to all of the corner areas. 
-
Select the fill transform tool (F), and edit your linear and radial gradients so that they match up seamlessly. 
-
Use the arrow tool to select the red guidelines you made earlier, and then delete them. If the gradients don't match up perfectly, try adjusting where the colors start and stop in your gradient spectrum. 
-
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 sizes 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 just 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 to take a basic font and give it perspective. -
Using the text tool, type the word "HELLO" in 40-point Arial Black, in red. Break the font elements all the way down (Ctrl-B in Windows or Command-B on the Mac) until they are just fill shapes. 
-
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). 
-
Grab the line tool, and with Snap to Objects on, start connecting the points between the vanishing point 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). 
-
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. 
-
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 the light is coming from. Our example assumes that the main light source is coming from the top left. Once 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 next level and simulate more depth and real light. -
Using different variations on your original text colors, create and apply some linear gradients to the text. 
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 you 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 many 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-colored 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. -
Grab the oval tool, and create a circle with no stroke and a fill of black. 
-
Select the circle you just made. With it selected, convert it into a symbol (F8) with the behavior of Movie 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. 
-
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. 
-
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. 
-
Hide the top layer and unhide the bottom layer. Select the black circle on the bottom layer, and convert 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 to 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 Chapter11 directory on the CD. |
The variations on this technique are endless, and the file-size benefits are amazing. Try applying this technique to a game character that needs to appear many times but in different colors. Or use it to make elements of your game editable by the user. Tiling Tiles come in two shapes, to be used in two different scenarios. As shown below, for isometric games they are drawn in diamond shapes; for non-isometric games they are drawn as squares. Tiles used in an isometric game (top row), and tiles used in a non-isometric game. 
When it comes to creating the perfect tile, the most important factors to keep in mind are how well one tile flows into the next, and how to manage and control the complexity and file size of all the tiles. The resolution of a tile typically ranges from 10 by 10 pixels to 30 by 30 pixels, and depends on the size of your game's viewable area. The recommended file size for a single tile can range from 500 bytes to 5,000 bytes! What size is best for your game? Wouldn't we all like to have an easy formula for that! But you've got to find out for yourself what works best for your game; each setup (not to mention each game) is going to be different. 
To keep your file size to a minimum, it's highly recommended that you use symbols to create the effect of textures and other repeatable patterns and elements in your designs. For example, the simple circle repeated in the figure above is a library symbol. I duplicated it throughout the diamond, and applied a tint effect to make the instances different colors. This is going to save me a lot of time and space. Still, the more symbols and vectors you add to your tile, the more processor intensive it may become, so use as few as possible to achieve the effects you want. Sample "transition" tiles you could use to go from grass to concrete. 
Now that you have an idea of how big to make your tiles and how they should be constructed, what about putting them all together? Let's say you've created a pointy grass tile and a spotted concrete tile for your game. How are you going to integrate those two tiles seamlessly in your gaming world? You will need to draw a few other types of tiles in order to make the transition from grass to concrete appear more natural. | The guidelines for tile size, resolution, and integration for vector graphics can also be applied to raster graphic tiles. |
Putting it all together. 
Game Animations There are two different ways in which animations are integrated in a game: externally and internally. 
External animations are found on common screens of a game (such as the splash screen, instruction screen, or credit screen). For example, animations within a game introduction, on main menu areas, or in character-selection areas would be considered external. External animations do not necessarily need to be optimized or restricted to a certain resolution. Typically, you will find internal animations in a game engine. For example, any character animations and animations with which the user interacts within the game engine are internal. Internal animations must be optimized to achieve the best possible gaming experience. 
Here we will analyze an internal animation used in the engine for the unfinished game Grave Robber, shown in Chapter 9. It is a character that the user controls with the arrow keys. This character consists of three animations: walk up, walk left, and walk down. For example purposes we will see how much we can optimize the walk-left animation. With a movie frame rate of 24 frames per second (fps), the optimal rate for games, I started out with an eight-frame walk animation. There are a few ways you can optimize this series. 
Important keyframes Draw the fewest frames needed to achieve the motion you want to create. For example, the minimum feasible frames in a walk animation show legs in and legs out (the first and third keyframes in the Optimized Walking Animation figure above). Extending a keyframe By extending a keyframe for more than one frame, you can get away with using the smallest possible number of keyframes. Especially at 24 fps, the frames go by fast enough that the human eye will not notice a difference between eight individual keyframes and four keyframes extended to two frames each. Symbols When you create an animation, sometimes you will have to or want to reuse certain frames. When this happens, be sure to convert the graphics you intend to reuse into symbols, to be stored in the document's library. You'll notice in the Optimized Walking Animation above that frames 2 and 4 are both the same symbol. With these three techniques I was able to reduce the number of frames in this animation from eight to three, with a difference of almost 4 KB. That's only one small file, but if you apply these techniques to all the animations in your game, you stand to save quite a lot more. |
