068229_bc_appd.

qxp

12/21/06

11:47 AM

APPENDIX

Page D-1

Creating
Graphics
and Sound

ames require graphics and sound effects, but this book is more
focused on programming than the details of media production.
If youre not comfortable creating graphics and audio on your own,
heres some step-by-step instructions for creating the media needed in the
Mail Pilot game in Chapter 7.

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-2

Using GIMP Tools

GIMP has a number of tools common to high-end graphics editors. Figure D-1 shows
the primary tools of GIMP. Different versions have slight differences in appearance,
but the basic tools look the same.
Fuzzy Select

By Color Select

Crop & Resize

Path
Rect Select
Zoom In and Out
Clone Tool
Foreground/
Background Color

Pencil
Brush
Pen, Pattern, and
Gradient Indicators
Smudge

Tool Options

Figure D-1: The primary tools of GIMP.

Rect Select: Select a rectangular region.

Fuzzy Select: Select a contiguous region of the same color.
Zoom In and Out: View details or overall view.
Crop & Resize: Discard all of the image except a specific rectangle, or resize
the entire image.
Clone Tool: Duplicate specific pixels for touch-up.
Foreground/Background Color: Double-click to select color.
By Color Select: Pick selected/similar color throughout layer.
Path: Select using Bezier paths (control point curves).
Pencil: Draw hard lines (no anti-alias).

D-2

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-3

Brush: Draw soft lines (with anti-alias).

Smudge: Move pixels in the immediate vicinity.
Pen, Pattern, and Gradient Indicators: Show the current status of these drawing and filling instruments. Double-click to open a dialog.
Tool Options: The leftmost tab always shows options of currently selected tool.
Other dialogs can be docked into this display for convenience.
Experimentation and the excellent online help at http://docs.gimp.org should
help you figure out how to use GIMP well enough to get started. If you want to learn
more, check out the excellent free online book Grokking the Gimp at http://
gimp-savvy.com/BOOK/index.html.

Creating the Airplane Sprite

The primary figure in Chapter 7 is an airplane modified from an existing bitmap. The
new image isolates a smaller part of the original image and adds transparency.
Heres how you use GIMP to create a plane sprite from the 1945 bitmap:

1. Install GIMP if necessary.

Linux machines usually already have the GIMP installed, but youll probably
have to install it on your Windows or Mac machine. You may also have to install
the GTK toolkit, which is also free and included on this books Web site.

2. Open the 1945.bmp file from the shooter directory of the SpriteLib
package.
Use File Open to open the file in GIMP.

3. Use the Crop tool to select only the piece you need.
Use the zoom in/out tool to view a particular part of the image. Figure D-2
shows how to use the crop tool to select a smaller part of the image.

Watch Your Step

When cropping an image to use as a sprite, try to crop as
closely to the actual image as you can. Having an image thats
larger than necessary will cause you problems later when youre doing collision detection. Also, because everything but the main subject of the
image is usually transparent, you dont want to take up a lot of file space
for pixels you wont be displaying.

4. Add transparency to the new image.

Creating the Airplane Sprite

D-3

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-4

Figure D-2: Crop away everything but a rectangle containing the piece you need.

In the Image window, use the menu system to select Layer Transparency
Add Alpha Channel. (Alpha channel is a fancy term for allowing
transparency.)

Information Kiosk
An alpha channel is one way to manage transparency in computer
graphics. Truthfully, I wont use the alpha channel here for long.
Im just telling GIMP that I want to allow transparency here, because the
format of the image I loaded (BMP) doesnt normally handle transparency.

5. Use the By Color Select tool to select the blue color of the original images
background.
The original image has a blue background, but Im going to eventually add a
more interesting ocean background, so I need to change the blue to transparent
so the plane wont appear to be flying in a blue box.

6. Delete the original blue background.

Use Ctrl+X to delete the blue area you just selected. Now the plane should show
a checkerboard background indicating transparency, like Figure D-3.

7. Save the image as plane.gif.

Pygame can read plenty of image formats, but the GIF format has a terrific
advantage: It can handle basic transparency automatically. Use the File
Save As command to save the file. Name it plane.gif, and save it in the same
directory as your game. Select the default option in all the dialogs that come up.

D-4

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-5

Step Into the Real World

You dont have to use the GIF format, but its nice because it handles transparency
automatically, so you dont have to apply a color key. Since I have the image in an
editor anyway, I decided to handle transparency here and save myself a step later on. I actually
prefer to do the transparency in the PNG format, but Ive had some problems with the way
pygame renders PNG files. If you use a format that doesnt support transparency, youll need to
use the color key trick shown in Chapter 6 to add transparency to your object.

Figure D-3: The cropped plane image with its transparent background ready to be saved.

Building the Cloud Graphic

The Mail Pilot game requires a cloud graphic. You might be able to find a cloud
image that suits your needs, but it wont be easy. Fortunately, modern graphics tools
(such as GIMP) come with some great features for building something that will work.
Heres what you do:

1. Create an image of suitable size.

I started out at 300 200 and then cropped the image closer at the end of the
process. Remember, smaller images are harder to hit and easier to avoid. Since
the cloud is an enemy in this game, a smaller image size will lead to an easier
game, and a larger image will make the game harder.

2. Draw an outline.
Use the pencil or brush drawing tool to make a lumpy cloud outline.
Building the Cloud Graphic

D-5

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-6

3. Select the interior of the cloud.

The Fuzzy Select chooses contiguous regions. Use it to select the center of
the cloud.

4. Choose the gradient tool.

A gradient is a smooth transition between colors. The gradient tool in GIMP
looks like a green square fading to white.

5. Choose gray values for foreground and background color.

The two color squares on the GIMPs main window refer to foreground and
background color. Double-click each to set the color. Set the foreground to a
light gray, and the background to a darker gray. The darker you make your colors, the more menacing the clouds appear.

6. Select a shaped spherical gradient.

Double-click the gradient tool to get a series of options. There is a drop-down
box with various shape options. Choose Shaped (spherical) from this list.

7. Apply the gradient to the selected area.

Drag anywhere inside the selection to create the gradient fill.

8. Add transparency to the image.

Choose Layer Transparency Add Alpha Channel to add transparency to
your image.

9. Remove the background.

Use the Fuzzy Select tool to remove the background and border. You should
now have a cloud on a transparent background.

10. Crop the image as close as you can.

Make the image around the cloud as small as you can so you dont have a lot of
empty space there to disturb the illusion.

11. Save the cloud as a GIF image.

Save it as a GIF with transparency, in the same directory as your game.

Step Into the Real World

I gave instructions here using the GIMP, because its my favorite graphics editor, its
free, and I can give you a copy. If you want to use some other tool, of course you
should feel free to do so. Any high-end graphics program will have the same general tools that
I describe in the GIMP, although they will have different names. You also dont have to use the
techniques I describe here. Its your game. Make clouds. If you know a better way, go for it. If
not, start with the method I describe and make your own improvements on down the road.

D-6

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-7

Building a Scrolling Background Graphic

Chapter 7 includes a scrolling background that gives the illusion of water. Recall from
the chapter that this type of graphic requires the same image at the top and bottom of
a large image, and that no seams should be apparent on the large graphic.

Information Kiosk
The water graphic Im showing you now is based on a simple
and effective tutorial for making a random water texture
which I found on the GIMP Talk forum (www.gimptalk.com). Of course,
you can use my image if you want, or you can use another editor. Most
high-end graphics tools have the same capabilities but might name things
differently.

Heres one easy way to build the ocean graphic using the GIMP:

1. Create a new image.

This image should be 640 pixels wide by 1440 pixels tall (three times as tall as
the intended game.)

2. Use the Lava script built into GIMP.

GIMP has a scripting language called Script-Fu (I love these guys). A special
script called Lava comes with most versions of the GIMP. From the menu
system, use Script-Fu Render Lava to find it.

3. Change the gradient.

A dialog appears. Click Gradient to pick a new color scheme. Find a gradient with blues and greens on it. (Hint: If you want to see how various
gradients will work, experiment with a smaller image before working on this
large surface.)

4. Run the script by clicking OK.

It will take a few moments, but eventually youll see the image.

5. Copy the top and set its size to 640 by 480 pixels.
Use the rectangular selection tool to select the top section of the picture. Make
sure your selection is 640 480 pixels.

6. Paste the copy to the bottom of the image.

Paste the section you just copied carefully onto the bottom of the image.
When this step is complete, the bottom and top of the image will look exactly
the same, but there will be an obvious seam two-thirds of the way down the
image (as shown in Figure D-4).

Building a Scrolling Background Graphic

D-7

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-8

The seam
Figure D-4: After you copy the top, there is a seam.

Watch Your Step

To complete pasting in GIMP, you have to click once outside the
selected area. This click nails down your selection into its
final place.

7. Blur the seam.

You dont want the user to see the seam. To make it less obvious, zoom
in and use the Smudge tool (shown in Figure D-4) to make the seam less
noticeable.

8. Save the image in the same directory as your game file.

Step Into the Real World

This particular pattern can be made seamless with the Smudge tool, but some patterns (especially sharper ones) require other techniques. The Clone Brush can be
handy in these situations. Look it up in GIMPs online help if you need it.

D-8

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-9

Creating Basic Audio Files

Its also easy to create sound effects using free tools. I created most of the sound
effects for the games in this book using Audacity. Heres how I made the yay
and thunderclap sound effects for Mail Pilot:

1. Open Audacity or whatever audio recording tool you prefer.

Make sure you have a microphone plugged in and turned on.

Watch Your Step

You might need to adjust your computers audio settings, especially if you dont use the microphone much. Double-click the
Volume icon, which normally appears in the lower-right icon tray in Windows
XP, to open the Volume Control window. Be sure your microphone is not set
to Mute.

2. Click the Record button (the red circle) in the Audacity window and record
your sound effect.
Simply speak or make your sound effect into the microphone. A waveform will
appear as you create the sound. Click the Stop button (two blue parallel lines)
when youre finished.

3. Test the sound (by clicking the Play button).

Make sure it sounds right. It may be easier to start over than to edit a sound that
has a lot of problems.

Watch Your Step

Make sure you dont have too much blank space at the beginning or end of a sound effect; this can throw off your timing,
and the sound effect should happen exactly when you want it to. You can
select a portion of your recording in Audacity and trim off everything but
the selected portion.

4. Modify the sound as needed.

Use the various effect tools to change your sounds. Experiment! Try adding
an echo or reverse effect. Use the Undo command (Ctrl+Z) if you make a
mistake.

Creating Basic Audio Files

D-9

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-10

Information Kiosk
Before you normalize or perform any other effect operation on
a sound clip, you must select it. Click the left-hand panel next
to the tracks wave form to select that track, or drag in the wave form to
select a portion of the track.

5. Normalize the sound.

The default volume of a recorded sound is not predictable. Highlight your
sound and use the Normalize option (choose Effect Normalize) to force the
sound to a predictable maximum level. You can make fine adjustments in your
game, but if you normalize all sound effects in your audio editor, theyll be at
approximately the right level.

6. Export in Ogg Vorbis format.

Pygame works best with the Ogg Vorbis format, which is built into Audacity.
The default settings should be fine for your use.

Transfer
Turn back to Chapter 6 if you need to review the basics of the
Ogg Vorbis format.

Building Looping Sound Effects

The engine sound is a little different from the other effects in Mail Pilot because it is
meant to repeat and is in stereo. There are many ways to make this type of sound, but
heres how I did it in Audacity:

1. Record a humming noise.

I started by recording my own humming into the microphone. Figure D-5 shows
the wave form of the basic sound effect.

2. Trim off the beginning and end of the sound file.

Most of the sound is relatively uniform, but (as with most natural sounds)
the volume starts soft, builds up to a stable volume, and trails off at the end.
Since Im going to repeat this sound indefinitely, Ill trim off the beginning
and the end so the whole effect looks like Figure D-6.To trim a part of the
sound, simply select the part you want to remove and press the Cut icon
(it looks like scissors).

D-10

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-11

Figure D-5: The engine sound right after recording.

Figure D-6: Now Ive trimmed off the beginning and end.

Information Kiosk
You dont need much audio. A second or two should be plenty.
This is supposed to be a repetitive background sound, so dont
make it too long, or your game file will be larger than necessary.

Building Looping Sound Effects

D-11

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-12

3. Duplicate the track.

Select the track and choose Edit Duplicate from the menu bar. Youll now
have two identical tracks, as illustrated in Figure D-7.

Figure D-7: The beginning of a stereo effect.

4. Reverse the second track.

I want the sounds to be subtly different in the left and right ear. There are lots of
ways to do this, but Im going to reverse one of the tracks. Select a track, and
choose Effects Reverse.

5. Assign each track to one ear.

The slider in each tracks information panel allows you to adjust whether it is
heard in the left or right ear. Adjust your sound to resemble Figure D-8, so one
track is heard in the left ear and the other in the right.

6. Test in loop mode.

Hold the Shift key down as you press the Play button (the one with a single triangle) to hear how your recording will sound when it loops.

7. Normalize the sound effect.

Select both tracks and use the Normalize effect to set a default starting volume
for the engine sound.

8. Save the file in the Ogg Vorbis format.

When you save your file to the Ogg Vorbis format, the two tracks will be combined into one file.

D-12

Appendix D: Creating Graphics and Sound

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-13

Use this slider to control which speaker youll hear the audio on.
Figure D-8: The first track is played in the left ear and the second in the right

Building Looping Sound Effects

D-13

068229_bc_appd.qxp

12/21/06

11:47 AM

Page D-14