Home > Articles > Programming > Games

Building a Game from Scratch, Part 1: Setting the Foundation

  • Print
  • + Share This
This article is the first in a multi-part series from the author of Sams Teach Yourself Scratch 2.0 in 24 Hours in which we create an online game by using the Scratch 2.0 educational programming language.
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:

  1. Click the Stage in the Sprites Pane to select it.
  2. In the Palettes area, click the Backdrops tab. Notice that the default backdrop is a white playfield called backdrop1.
  3. 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.
  4. As you can see in Figure 3, Scratch includes a number of built-in media asset libraries. Specifically, there are three:

    • Backdrop Library
    • Sprite/Costume Library
    • Sound Library

    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?

  5. In the Backdrop Library, select the Space category and double-click the stars backdrop to add it to your project.
  6. 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.

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:

  1. Click the Choose sprite from library button in the Sprites Pane to bring up the Sprite Library.
  2. 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:

  1. With the Spaceship sprite selected, click the Costumes pane in the palette area.
  2. The Paint Editor appears, as shown in Figure 4.
  3. 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.

  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.
  5. 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.
  6. 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.

  7. 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.
  8. 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.
  9. 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.
  10. 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!

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:

  1. With the Spaceship sprite selected, navigate to the Sounds pane.
  2. In the Sound Library, choose the Electronic category and import the whoop sound file.
  3. 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.
  4. 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

  5. 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.
  6. 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.

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.

See more books and articles by Timothy L. Warner.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020