Building a Game from Scratch, Part 1: Setting the Foundation
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Have you ever thought of how cool it would be to create your own computer games? If only you liked math and understood weird programming language terms, right? Well, believe it or not, Scratch 2.0 makes it possible for you to build some decent projects without your having to understand the difference between a variable and a vegetable.
There’s no escaping the fact that if you’re looking to become a full-time programmer, you’ll eventually have to get comfortable with logical reasoning, mathematics, and the syntax and grammar of particular programming languages.
However, as a beginner, it's nice to have a visual, drag-and-drop environment to apply creativity and express yourself without the additional burden of all that “programming stuff.”
This is the first of a two-part series in which I’ll give you the schematics of a cool retro arcade game that’s in the vein of Asteroids. If you feel that I’m not providing enough detail in my instructions, then don’t be concerned: I’ve spelled out everything in my book Sams Teach Yourself Scratch 2.0 in 24 Hours. Although having my book isn’t a prerequisite to understanding these articles, I strongly suggest you buy it if you discover that you enjoy Scratch programming.
Let’s begin!
Understanding the Project
In case you don’t know, Scratch 2.0 is a free and online programming environment that makes it easy and fun to learn the basics of programming without getting hung up on arcane syntax and complex mathematical formulas.
Before you do anything else, you’ll need to visit the Scratch website and sign up for a free account. Doing so enables you to save your Scratch projects directly “in the cloud,” participate in community discussions, and so forth.
Once you have your account and you’re logged in, use the site search functionality or the following link to locate our case study project:
Scratch Game Case Study: “Space Game 1”
As you can see from Figure 1, Space Game 1 is an Asteroids clone that hearkens back to the glory days of console videogames (remember the Atari 2600 SuperSystem?).
)
Figure 1 Space Game 1 represents the start of an old-school shoot-em-up in the vein of Atari Asteroids
We’ll build the rest of the game progressively as we proceed through the series. By the end of this lesson, we’ll have the “physical” environment of the game completed.
If you haven’t browsed to the Space Game 1 project page, then please do so now. Here is how the game works:
- Click the Green Flag to start the game.
- Use the keyboard arrow keys to fly the Spaceship around the playfield.
- Press SPACE to fire your cannon.
Yeah, I understand that we haven’t included elements like “enemy” sprites, score-keeping, and the like. What you need to understand is that most computer software is developed in stages. Even though Scratch 2.0 is about as user-friendly a programming environment as you can get, we nonetheless should apply the same programming best practices that enterprise developers use.
To that end, in this article we’ll re-create Space Game 1 by implementing functionality in the following order:
- Building the playfield
- Customizing the Spaceship
Building the Playfield
All the action in Scratch games takes place on the 480x360 pixel grid called the Stage. If you haven’t already done so, click Create from the Scratch website top toolbar to enter the Scratch 2.0 Editor. I’ll give you the briefest of tours of the interface (please read my book for the full details):
)
Figure 2 You build your projects entirely online by using the Scratch 2.0 Editor
- A: The Toolbar allows you to manage your project from a global level, access the help system, and perform sprite-management tasks.
- B: The Stage is where all the action in your project takes place.
- C: The Sprites Pane is where the actors in your project (called sprites, if you haven’t already figured that out) exist and are managed.
- D: The Palettes are how you get to your blocks, sprite costumes, and sound files in your project.
- E: The Scripts Area is where we compose the action in our project; the Stage is simply where we see the end result.
We’re going to use one of the built-in Stage backdrops for our project. Follow these steps to get ‘er done:
- Click the Stage in the Sprites Pane to select it.
- In the Palettes area, click the Backdrops tab. Notice that the default backdrop is a white playfield called backdrop1.
- Click the Choose backdrop from library button to invoke the Backdrop library. When in doubt, hover your mouse over toolbar buttons to see the tooltip help.
- Backdrop Library
- Sprite/Costume Library
- Sound Library
- In the Backdrop Library, select the Space category and double-click the stars backdrop to add it to your project.
- To avoid confusion, delete backdrop1 by clicking its thumbnail once, and then clicking the tiny close button that appears in the top right-hand corner of the icon.
As you can see in Figure 3, Scratch includes a number of built-in media asset libraries. Specifically, there are three:
)
Figure 3 Scratch 2.0 includes lots of default media assets that you can leverage to add “pop” to your project
Not uncoincidentally, these libraries correspond to toolbar buttons found on the three respective tabs in the palettes area. Logical, huh?
That’s all there is to adding a custom Stage backdrop to our project. As you gain experience with programming Scratch, you’ll want to experiment with using more than one Stage backdrop.
Customizing the Spaceship
As I said earlier, the “characters” that make up a Scratch game or interaction are called sprites. Scratch 2.0 gives us their mascot, called the Scratch Cat appropriately enough, as a default sprite. However, we don’t need him—right-click the Sprite1 sprite in the Sprites Pane and select delete from the shortcut menu to make it go away.
Instead, we want to choose a player icon that is appropriate for the space theme of our game. How about a spaceship?
Follow these steps to bring the Spaceship into the project:
- Click the Choose sprite from library button in the Sprites Pane to bring up the Sprite Library.
- Select the Space category and double-click the Spaceship sprite to bring it into the project.
Now then, if you tested out Space Game 1 on the Scratch website, then you know that when you use the arrow keys to move the Spaceship around the playfield, you get a cool flame effect as well as an engine sound. How did we do that?
Customizing a Sprite’s Costumes
The first thing we’ll do is add a second costume to the Spaceship sprite to give it the flame effect. That’s right—each sprite can have more than one physical representation, called a costume. We then can use Scratch programming blocks to switch among the costumes, creating animation effects!
Here’s the procedure, step-by-step:
- With the Spaceship sprite selected, click the Costumes pane in the palette area.
- The Paint Editor appears, as shown in Figure 4.
- We’ll add the flame effect to a duplicate of the spaceship; this duplicate represents an additional sprite costume. Right-click spaceship-a and select Duplicate from the shortcut menu. Voila! Rename the newly created sprite spaceship-a2 by editing the name in the Paint Editor text box at the top of the screen.
- Use the drawing tools on the right side of the Paint Editor to add your flame effect to the spaceship-a2 sprite. For my flame, shown in Figure 5, I used the pencil tool, adjusting the color and line width by using the controls at the bottom of the Paint Editor.
- In the Costumes pane, click back and forth between the two spaceship sprites. Do you see a crude animation effect? Good—we’ll code that into the game soon enough.
- Now for the lightning bolt effect for the Spaceship’s cannon. Start by making a duplicate of the spaceship-a sprite, naming it spaceship-fire.
- In the Paint Editor for the spaceship-fire sprite, click Add, which invokes our friend the Costume Library. Choose the Things category, and import the lightning sprite.
- Play around with the Paint Editor controls until you wrangle the lightning bolt in the proper orientation in front of the Spaceship. I told you that the Paint Editor is a pain in the hind end to use!
)
Figure 4 The Scratch 2.0 Paint Editor gives us rudimentary ability to modify the look and feel of our sprites
The Paint Editor in Scratch 2.0 isn’t the most powerful thing in the world, that’s for sure. If you read my book, you’ll learn how to use external drawing tools to customize sprites in a much more powerful and easier fashion.
If you make a mistake, use the Undo button to step back. Be careful of the Clear button because that will wipe out the entire costume, not only your additions.
Adding a Sound Effect to a Sprite
Finally, let’s add a sound effect to the Spaceship that will eventually trigger when we move the Spaceship around the playfield. If you haven’t played the model Space Game 1 on the Scratch website, then please do so now so you’ll be familiar with our goal.
Ultimately, we want the spaceship to make noise and spit fire when we move it around the playfield. We also want the ship to shoot lightning bolts when the player presses the spacebar.
Let’s start by adding the engine sound. Follow these steps:
- With the Spaceship sprite selected, navigate to the Sounds pane.
- In the Sound Library, choose the Electronic category and import the whoop sound file.
- You’ll now see the Audio Editor, as shown in Figure 5. Click the Play button to test the sound. If you think it’s too loud, don’t worry—we’ll take care of that aspect later when we code the sound.
- What I did in the Space Game 1 project is use my mouse to select most of the clip—say everything but the last 2 seconds—and then clicked Edit > Cut to remove it. As I said before, experimentation is the name of the game here. If you make a mistake, click Undo to restore your previous work.
- We also need a laser sound for the shooting effect. Return to the Sound Library, choose the Electronic category again, and this time import the laser2 clip. We don’t need to modify that one.
)
Figure 5 The Scratch 2.0 Audio Editor lets you perform “surgery” on your audio clips, or even record your own if you don’t like what’s in the Sound Library
Next Steps
As we used to say in the mid ‘80s, “Cool beans!” We’ve laid the foundation of our Space Game project. Our next step in the process is to begin coding the game logic. I’m talking about stuff like “wiring up” the player’s keyboard keys to sprites on the stage, and ultimately including functionality like enemy sprites, collision detection, and the like. Stay tuned for the next installment in this series, and prepare to learn a lot about programming and have a great deal of fun!
About the Author: Timothy L. Warner
Timothy L. Warner is an IT professional and technical trainer based in Nashville, TN. A computer enthusiast who authored his first BASIC program in 1981 on the Radio Shack TRS-80 Model III, Tim has worked in nearly every facet of IT, from systems administration and software architecture to technical writing and training. He can be reached via LinkedIn.