Read Foundation Game Design with ActionScript 3.0, Second Edition Online
Authors: Rex van der Spuy
Foundation Game Design with ActionScript 3.0, Second Edition (13 page)
I encourage you to go back to parts of this chapter that might have been little fuzzy the first time through to try to get a solid understanding of them before continuing much further. If you don't get it all just yet, don't worry! If you managed to get the little Hello World program running and you generally understand what made it work, you're in the game!
In the next chapter, you'll take a bit of break from programming and learn how to use Photoshop to make graphics for your games. In
Chapter 3
, you'll see how you can use those graphics with the skills you learned in this chapter to start programming your first interactive game world.
Making Game Graphics
Over the next two chapters you're going to learn the two most essential skills of video game design: how to make game graphics, and then how to program them. All of the most important core techniques of game design are in these two chapters. It's these techniques that you're going to build on to make the rest of the game projects in this book.
Flash Builder is just for writing programming code, not for making the graphics that your games will use. So you need to use some graphics software to make those graphics. This chapter is about making game graphics using Photoshop. In the next chapter I'll show you how to program these graphics using AS3.0 programming code so that they become completely interactive.
This chapter assumes you've had no or very little experience using Photoshop or any other graphic design software. It starts right from the beginning and covers all the basics. If you have a lot of experience making computer graphics, flip through this chapter just to see what kind of graphics to make, the file names they should have, and where and how they should be saved. Although this chapter focuses on the use of Photoshop, which is the most widely used graphic design software, you can use any software you like that produces PNG files: Fireworks, GIMP, Illustrator, or any other software you're comfortable using.
By the end of the chapter, you will have created the background game world shown in
Figure 2-1
.
Figure 2-1.
A background game world
You will also have created a game character made out of basic shapes, shown in
Figure 2-2
.
Figure 2-2.
A game character
And you'll have made some button graphics that you're going to use to control this character, shown in
Figure 2-3
.
Figure 2-3.
Buttons to control your game character
All these graphics will be made with Photoshop and saved in a file format called PNG (Portable Network Graphics). PNG image files are generally the best for Flash games.
Here's what you'll learn in this chapter:
- How to open a new file in Photoshop.
- How to use Photoshop tools to create basic shapes.
- How to use layers to organize shapes.
- How to apply special effects to your graphics.
- How to save your graphics as PNG files that you can then program with AS3.0.
So let's get started building a game world!
Photoshop is complex software with thousands of different settings that you can change and customize. It's also frightfully easy to accidentally “customize” the layout with a few unwitting clicks that will make windows, panels, and tools disappear—apparently for good. This is especially a problem if you're new to Photoshop and are exploring the software. You might drag or click a window into apparent oblivion.
Fortunately it's quite easy to make all these windows reappear in their proper positions. Photoshop uses a concept called
workspaces
which are collections of windows and Tools panels that are grouped in different arrangements, depending on the kind of work you're doing. When you first install and launch Photoshop, it loads a workspace called
Essentials
. There's no reason to change this workspace, and it's the one that I recommend you use while you're learning, therefore it's the one on which I've based the instructions in this book.
Here's how to confirm that you're working in the Essentials workspace. You can also confirm this by selecting Window
Workspace from Photoshop's main menu. You should see a checkmark next to Essentials. Further down the same menu you'll see an option called Reset Essentials. This is the magic option! If you ever lose any of your windows or Tools panels and can't find them anywhere, select Reset Essentials, and they'll all pop back into the places they were in when you started Photoshop for the first time. You'll also see a big button called Essentials near the top left corner of the workspace. If it looks pressed down, you're working in the Essentials workspace.
You can also selectively hide and display windows and Tools panels from the Windows menu in the main menu bar at the top of Photoshop's workspace. All the windows and panels that are visible in the workspace will have a checkmark next to them. If there's a window you're looking for and can't find it on the screen, select it from the Windows menu.
In this first section you're going to create a background game environment that your character will inhabit. I'll walk you through every step of the process, and at the end of it you'll have produced an image that looks like
Figure 2-4
.
Figure 2-4.
The game world
First, launch Photoshop and set up a new file that you can use to draw your background scene.
- Launch Photoshop.
- Select FileNew from the main menu. A dialog window will open that will ask you for the name of the new file that you're creating and what size you want to make your image. Here are the options that you should change:
- Name: background
- Width: 550 pixels
- Height: 400 pixels
- Name: background
You can leave all the other settings as is. When you're done, the New file dialog window should look like
Figure 2-5
.
Figure 2-5.
The New file dialogue window should look like this.
If the New file dialogue box that you see doesn't look exactly like this, there's a good chance that you're using a slightly different version of Photoshop than I am. This book was written using Photoshop CS 5.1, which was the latest at time of publication. If you're using an earlier or later version, it's likely that some of the options you see won't be exactly the same or may be in slightly different places. However, I can assure you they'll all be there somewhere! Use your judgment and intelligence and look for them.
Adobe makes tiny little tweaks to the layout and placement of tools and menu items from version to version, but it rarely makes radical changes. In fact, in the 20 years that I've been using Photoshop, the basic features that I'll describe in this chapter really haven't changed much at all. That's a good thing because it means the time you put into learning Photoshop tends to be a good long term investment. It also means that if you're using a much older version of Photoshop, even one that's 10 years old, such as Photoshop 5, you'll still be able to follow most of the instructions in this chapter and produce great game graphics.