Macromedia Flash MX Game Design Demystified phần 6 potx

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 g uys, items to collect, and back g round elements. By workin g 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 m y self to two la y ers, because multi p le la y ers can be ver y p rocessor intensive. To visuall y se p arate 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 p erformance, it's best to blur onl y back g round elements so that y ou can g et awa y with usin g 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-ima g e inte g ration 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 usuall y recommend usin g a combination of both formats, wei g hted toward one or the other format type depending on the look you are going for. For example, let's say you're creating g ra p hics for an isometric world. You could make all y our back g round and environment g ra p hics 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 floatin g menu, but y ou can a pp l y this basic conce p t to y our 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. [...]... 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 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. .. situate your graphics and animations within Flash, convert them to symbols and movie clips, and ready them for the I l@ve RuBoard I l@ve RuBoard Chapter 12 The Sound of Games Why Sound Is Important Managing Sound Effects Creating Sound Effects Creating Music Loops Points to Remember Sound is probably the most neglected area of Flash game design Between hatching a game idea, creating graphical assets, programming,... you develop a game, there are three senses you can use to involve a game player: touch, sight, and Until computers start emitting odors and flavors, those are all we have to work with The visuals (sight) and control (touch) of a game tend to get a lot of attention during game design and development In this chapter we focus our attention on the odd sense out, hearing Sounds used in a game can be any... recorded or licensed for your game Voice can be used in animations before a game, throughout the game to show characters talking, or as a sound effect (for example, a person yelling "Ouch!" when struck by a sword) Music and voice are not always necessary in your games, but sound effects definitely are Here are the top three reasons why you should not neglect sound in your games: 1 Sounds can encourage... pixels to 30 by 30 pixels, and depends on the size of 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... they have been set in the authoring environment—the game player's actions are going to affect the properties In short, as always, there are advantages and trade-offs either way In this section we discuss both ways of using sound effects in your games through the use of several example Sound Placed on Frames I've seen the source files for many Flash games over the last few years, and one thing I often... set the toggle As you can guess, a sound on/off toggle is a button that a game player can click to turn the game sound on and off If you spend a lot of time finding the best sounds for your game, then you probably want people to hear them (and they probably want to, too) But the truth is (sssshhh!) that many players will play your game over the Internet when they are in the office, and they won't want... technique with a game of pool or any other game where two moving objects collide at potentially varying speeds Volume controlled through acceleration Up until now we've been talking about simple speed Now, in our third example, we'll add acceleration into mix, and outline a simple technique used for acceleration and deceleration in racing games Imagine a car sitting at the starting line in a racing game When... odd sense out, hearing Sounds used in a game can be any of the following: Songs— Full-length musical compositions created or licensed for your game Songs can play in the during the game or be triggered to play after something happens (for example, winning the game) Music loops— Short pieces of music that play repeatedly A music loop can range from about 1 second to several seconds, and have a file size... give your game depth and life Setting up flexible, code-based techniques for implementing dynamic changes such as color shifts or tiling will save you a lot of work, keep operations consistent, and improve performance Taking the time to optimize your graphics will save you a lot of time and effort, and of course will improve your game' s performance Think about optimization at every stage of your game from . of the platform game Ice World (see Chapter 15, "Ice World: A Platform Game& quot;). In every game, of course, the user controls or manipulates the main character. In some games, the user. 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. 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.