Stages of Graphic Development


It's fun to just sit down at the computer and start drawing more fun than thinking hard about the visual details of an entire game and determining what is necessary to achieve them. Yet when you're producing professional artwork and animations, that's what you have to do. Dividing the graphic-development process into three distinct stages will help keep you focused and organized, and help you in working with team members and strict client deadlines, saving you time and headaches.

Stage 1: Brainstorm

For this phase, all you need is a plain old pencil and paper. Sketch out all your different ideas for any graphical parts of your game. For instance, let's say you have been thinking about several ways to design a main character in your game. Get all those ideas down on paper. Make sure to think about the various ways the character may appear in the game, such as running, jumping, carrying a book, or hitting a ball.

Initial sketches for the main character of Ice World (see Chapter 15, "Ice World: A Platform Game").

graphics/11fig04.gif

Character sketches may be the most fun of the lot, but don't stop there. Continue with everything else that will appear in the game: backgrounds, objects, obstacles, user-interface layout, and navigation elements. These are all very important aspects of your game.

For example, for our platform game I designed a main character whose left-to-right movements the user will control, and who has to collect items. Notice in the sketches above that I have fleshed out a couple of different ways I could go with the character. Because this game is geared toward a young audience, I have worked to create a character that is child-friendly and by its appearance encourages children to want to move it around a lot. Once they get started, they'll see that they can make the character jump, collect items, and kill bad guys.

Now is also a good time to start fleshing out your game's general color scheme, and thinking about its look and feel. What colors best represent your game's topic or theme? Because our platform game will be marketed to a younger audience, we will be using a lot of pastel colors; against the pastels we've used a bright baby blue, navy blue, and yellow in the main character, which I think stands out really well and is very appropriate for this game. As for a look and feel, we are going for soft and warm, with cartoonlike characters.

graphics/arrow_icon.gif

Open the file ice_world.swf in the Chapter15 directory to see the colors we've been working with for this game.

Brainstorming can be a hard process, but remember these sketches are not for the world to see. They're just a way to help you with your ideas, and ideas aren't wrong.

Stage 2: Focus

Once you've got your ideas on paper, think back to your main vision of the game, and what you wanted the game's focus to be. Look at the sketches you created for your main character. Keep the sketches you feel best fit your game vision. For example, in the sketches I drew, all the characters seem pretty cool to me, but you'll notice that I decided to keep character design B. Why? Because B fits best with our vision of the game, being more of a rectangle shape, and because it has the look and feel we want. This is the stage where you have to make the hardest choices; it's painful to have to jettison good ideas just because they aren't the best fit. We talked some about this in Chapter 2, "The Plan: From Idea to Design"; it's always best if you can focus in quickly on the "right" ideas so you don't have to invest too much time in the others. But even then, don't throw them away; you never know when they'll be right for another project.

graphics/11fig05.gif

Once you've chosen a design and a look and feel that are at least in the direction you want, you can flesh out that design by adding detail to your sketches until you think you've produced a close-to-final version.

Stage 3: Produce

As you may notice, in each phase we produce more detailed work. This is exactly what you want to do: start with all of your initial brainstorming ideas, and end up with what you think will work the best even if you have to let go of some of your pet designs in the process. Once you know the direction in which you want to go with your main character, and know how you want to approach his creation on a technical level, it's time to start drawing the character in your computer. Of course, to do this you've got to scan your sketch. Contrary to popular belief, you don't have to save your scans as TIFFs. And for our purposes that's just as well, since other, smaller formats will serve our needs. I recommend saving the image as an uncompressed BMP file if you're just using it to trace in Flash, or as a JPEG if you plan to use it as actual art in the game. Either is fine, just as long as it isn't compressed. Import your scanned sketch into Flash, place it on a blank layer, and lock the layer. Create another blank layer and make sure it's above the layer that contains your sketch. This way you can draw on that top layer without disturbing your original sketch.

graphics/tip_icon.gif

In general, it's easiest and fastest to trace your sketch using the line tool. This gives you the smallest amount of vector points. Notice how I've traced my character's body, starting off with a line and manipulating that line to match the curve I wish to make. Creating and connecting more of these curves gives me the shape I want, and a highly optimized file as well. (It's highly optimized because the line tool applies a minimal number of points necessary to trace the shape.) Once the shape is rendered, color it in, using colors you picked out in the Focus stage.

When you have a final drawing of your character, you've got to animate it. But it's important to remember that the more frames we create for this character, the bigger our file will be, so it's a good idea to reuse as many frames as possible. In our example game, the character is required to walk left and right. (He must also jump, duck, and die.) Because the left walking animation is a mirror reflection of the right walking animation, we can get away with drawing just a single walking animation. That's easy enough.

The fully rendered main character from the Ice World game, transformed in Flash from a sketch.

graphics/11fig06.gif

But for the jumping animation, we might want our character to look blurred as he jumps. Unfortunately, we can't achieve that effect in Flash; we must look to a raster graphic for that. In other words, to create this animation we have to integrate vector graphics with raster graphics. I use Photoshop to draw my raster graphics. First, I export the vector drawing of the character as a BMP file. (On a Mac, export your drawing as a JPEG.) Then I open it in Photoshop and apply one or more blur effects. Because these raster graphics will be used directly in the game, I export the graphic out of Photoshop as a compressed JPEG, which gives the graphic the best possible combination of good looks and small file size.

When you import any JPEG back into Flash, it imports as a rectangle, so you must break it apart (choose Modify > Break Apart) and trim away the white areas.

graphics/11fig07.gif

After you have broken down the graphic, use the line tool to draw an outline around the part you want to keep. Make the stroke color red, or some other color that will stand out, as these outlines are going to serve as temporary guidelines to help you in your task.

graphics/11fig08.gif

This outline allows you to select the part of the graphic you want to keep and the part of the graphic you want to get rid of. With your arrow tool, select the part of the graphic you want to discard, and press Delete to remove it.

graphics/11fig09.gif

graphics/11fig10.gif

If you did not trim closely enough the first time, you can use the arrow tool to fine-tune the outline.



Macromedia Flash MX Game Design Demystified(c) The Official Guide to Creating Games with Flash
Macromedia Flash MX Game Design Demystified: The Official Guide to Creating Games with Flash -- First 1st Printing -- CD Included
ISBN: B003HP4RW2
EAN: N/A
Year: 2005
Pages: 163
Authors: Jobe Makar

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net