Taking a Graphic Approach

Before you dive into your visual tasks, there are a few important topics to think about: What types of graphics will be most appropriate for your game? What kinds of tools will you need to create your graphics and animations, and how can you best use them? Once you are finished with your graphics, who is going to actually put them in the game? If you're not doing the programming yourself, have you established the right communications and processes to make this go as smoothly as possible?

If that burst of questions scared you a little, don't worry. We all have to ask them over again for every project. And here we're going to help you learn how to answer them.

If you're working with a production team possibly even if you're working by yourself! it might be helpful to use a checklist. Having one will help everyone keep track of what needs to get done, and when, and what has already been completed. A checklist is best broken down into major sections (such as still graphics and animations), with a brief description for each item. The tasks will vary with your work, of course, but as you read through this chapter, you'll pick up ideas for what you might include.

To see a copy of the checklist we used for the Word Search game in Part 3 of this book, open the asset_checklist.pdf file in the Chapter11 directory on the CD.

Different Types of Graphics

The main decision you need to make in choosing a graphic format is whether to use raster or vector images. A raster is a two-dimensional, rectangular, pixel-based grid. Raster graphics obviously also pixel-based can be created with programs like Adobe Photoshop, Procreate Painter, and Microsoft Paint (to name a few). Some of the common raster file formats are GIF, JPEG, PNG, and BMP. A vector is, for our purposes, a mathematical formula that describes shapes that make up an image. Vector graphics can be created with programs like (again, to name only a few) Macromedia Flash, Macromedia Freehand, Corel Draw, and Adobe Illustrator. Common vector formats include EPS and SWF.

A raster image for a game background, created in Photoshop.

A vector version of the same game background, drawn in Flash.

When using raster graphics in your game, the JPEG file format is the most commonly recommended. In most cases, a JPEG will give you a small file size and is not processor intensive. One drawback of this format is that it does not support alpha channels (the Flash feature that allows your image to be transparent). Sadly, raster formats that support alpha channels can produce very large files and are not optimal for Flash gaming use. If you have to have an alpha channel, I would suggest using the GIF format. GIFs support one level of 0% alpha and, if compressed, could give acceptable results. BMP (short for bitmap) is not a strong format for game purposes, and BMPfiles should be imported into Flash only if absolutely necessary or for tracing purposes.

The optimal way to create vector graphics for your games is to make them directly in Flash (more on that below, in the "Identify Your Tools" section).

Of course you need to look at the different formats in light of the visual style you want for your game. Choose the format that seems best, and test out the different flavors of that format to make sure it fits the bill not just visually but also technically. For instance, if your graphics look great but slow the game down 50 percent, that format may not be worth it.

In terms of visual effect, in most cases vector graphics are easier to work with, not only because Flash is a vector graphic program but because of their scalability and support of alpha channels. Raster graphics tend to be somewhat more troublesome. One reason is that they are less flexible (once you scale them, you'll start to see their pixels). Another is that, if you use the JPEG format to keep their size down, you have no alpha channel support. Without that, if you actually want to see through something, you'd have to "cut a hole" in the image.

Identify Your Tools

Equally important to your design process is that you have the right tools for the job. Just as you would do when compiling a shopping list for a home project, think of all the tasks involved and make sure you have the tools and materials you need. Will you be able to create the graphics and animations with nothing more than Macromedia Flash? Are there other programs that can make your job easier? Do you need anything besides software? Your list might include one or more of the following:

Scanner A must if you're going to do any sketching-out of your game ideas and characters (and I'm going to recommend strongly that you do). The device should scan at least 300 dots per inch (dpi), and can work in either black and white or color.

Graphics tablet Whether you plan to trace your scanned artwork or to work from scratch, a graphics (or drawing) tablet and stylus are going to save you a lot of time, and increase your precision as well.

Vector drawing program There are many vector drawing programs out there; the most serious and popular were mentioned in the section above. It is just a matter of identifying the best one for you every artist has his or her preference. Many artists use other vector drawing programs to draw their vector artwork, and some draw right in Flash. In my own experience, it's always been a time-saver to create art in Flash. Importing your art from another vector drawing program tends to mean you've got to optimize the art for gaming use. By creating your vector graphics directly in Flash, you can draw your graphic once and have it be optimized for your game. (If you want any reassurance about Flash's drawing abilities, check out Vectorkid [www.vectorkid.com]. All his vector art was created in Flash 4 and higher.)

Raster drawing program Some art styles (such as photo-realism or a sketchy crayon look) cannot be rendered in any vector drawing program and are best achieved in a raster drawing program. (Even if you could create them in Flash, you would end up with graphics that would be very processor intensive and would really slow down your game.) But use raster art wisely, because even it can slow you down.

3D program You don't necessarily need a specific 3D program, but it could really help if you have to create lots of views or frames of an animated character, or when you need to shoot all of your graphics at specific angles. Learning how to use a 3D program isn't easy, though, and could take up a lot of your time; if you are busy and can afford to, you might consider contracting out to someone else to render your 3D images. (We also discussed 3D imaging in Chapter 8, "The Isometric Worldview.")

Graphic Preparation

Before jumping right in and creating your graphics, you should identify how the ActionScript programmer would like the graphics prepped for implementation, if you're not going to do the programming yourself. Most of the time, the ActionScripter will provide Flash files with placeholder artwork, and it is the artist's job to replace those graphics with the final versions. Communication is very important if you wish to have a fluid transition from graphic creation to implementation.

The library in Flash is key to keeping your assets organized. If you use a lot of movie clips or other symbols, it's a good idea to break your library down into categories, such as User Interface Elements, Characters, Items, Special Effects, and Background Elements. To divide your library, just make new folders by clicking the New Folder icon at the bottom of the Library panel.

Of course every artist has his or her own preferred workflow, and I wouldn't ever say that one was better than another. But if you're looking for a starting point, here's my basic approach to graphics preparation. First I analyze the project's asset checklist, explore the Flash files I've been given, and identify all the placeholders to make sure I understand where I'm supposed to place my graphics and animations. (Placeholders are usually simple, solid-color rectangular fills, although basic text can also be used as a placeholder.) You'll mostly see these placeholders within movie clips, which can be accessed from the Flash file's library. The more movie clips you have, the more helpful it will be to give them specific and descriptive names. For instance, in the Character category you might see my movie clips named like this: Badguy01_leftright, Badguy01_up, Badguy01_down, Badguy02_leftright, Badguy02_up, Badguy02_down, Mainchar_leftright, Mainchar_up, Mainchar_down, and so on. The library stores items in alphabetical order, so your character movie clips will be easy to access.

This rectangular object is a placeholder for a graphic of a piece of fruit in the game Fruit Smash (which you can find in the OtherGames directory on the CD).