1
GE T TING S TA R TE D
Have you ever wanted to create your own computer
game, animated story, tutorial, or science simulation?
Scratch is a graphical programming language that
makes it easy to create those applications and more.
In this introductory chapter, you will:
x
x
x
Explore Scratch’s programming environment
Learn about different types of command blocks
Create your first game in Scratch
When you make a Scratch application, you can save it on your computer
or upload it to the Scratch website, where others can comment on it and
remix it into new projects.
Excited? Then let’s get started!
What Is Scratch?
A computer program is just a set of instructions that tell a computer what
to do. You write these instructions using a programming language, and that’s
where Scratch comes in.
Most programming languages are text based, which means you have to
give the computer commands in what looks like a cryptic form of English.
For example, to display “Hello!” on the screen, you might write:
print('Hello!')
(in the Python language)
std::cout << "Hello!" << std::endl;
(in the C++ language)
System.out.print("Hello!");
(in the Java language)
Learning these languages and understanding their syntax rules can
be challenging for beginners. Scratch, on the other hand, is a visual programming language. It was developed in the Massachusetts Institute of
Technology (MIT) Media Lab to make programming easier and more fun
to learn.
In Scratch, you won’t type any complicated commands. Instead, you’ll
connect graphical blocks together to create programs. Confused? Look at
the simple program in Figure 1-1, and I’ll explain.
A Scratch program that
contains a single block.
The result of running
the program.
Figure 1-1: When you run this Scratch block, the
cat says “Hello!” in a speech bubble.
The cat that you see in Figure 1-1 is called a sprite. Sprites understand
and obey sets of instructions that you give them. The purple block on the left
tells the cat to display “Hello!” in a speech bubble. Many of the applications
you’ll create in this book will contain multiple sprites, and you’ll use blocks
to make sprites move, turn, say things, play music, do math, and so on.
You can program in Scratch by snapping those color-coded blocks
together as you would puzzle pieces or LEGO bricks. The stacks of blocks
that you create are called scripts. For example, Figure 1-2 shows a script that
changes a sprite’s color four times.
First
time
Second
time
Third
time
Figure 1-2: Using a script to change the Cat sprite’s color
2
Chapter 1
Fourth
time
This script waits for one second between color changes, and the four
cats you see here show the sprite’s new color after each change.
TRY IT OU T 1-1
Though we haven’t discussed the blocks in Figure 1-2 yet, read them, look at their
shapes, and try to figure out the steps the script took to make the cat teal. (Hint:
The first purple block returns the cat to its original color.) What do you think would
happen if we removed the wait block from the script?
This book covers Scratch 2, which was released in May 2013. This version allows you to create projects directly in your web browser so you don’t
have to install any software on your computer, and we’ll rely on Scratch’s
web interface for the material in this book.
Now, that you know a little about this language, it’s time to kick off our
programming journey and learn how to use it.
Scratch Programming Environment
To start Scratch, go to the Scratch website (http://scratch.mit.edu/) and click
the TRY IT OUT link. This should take you to Scratch’s project editor interface, shown in Figure 1-3.
Tabs
Cursor Tools
Stage
Blocks Palette
Tips Window
Menu Bar
Scripts Area
Sprite List
Backpack (visible only if you are logged in)
Figure 1-3: The Scratch user interface, where you’ll build your programs
Getting Started
3
You should see a single window with at least the following three panes:
the Stage (top left), the Sprite List (bottom left), and the Scripts tab (right),
which contains the Blocks tab and the Scripts Area. The right pane also contains two additional tabs, Costumes and Sounds, which will be discussed later
in this section. If you’re logged into an account on the Scratch website, you
should also see the Backpack (bottom right), which has buttons that let you
share your project and use sprites and scripts from existing projects.
Let’s take a quick look at the three main panes.
The Stage
The Stage is where your sprites move, draw, and interact. The Stage is
480 steps wide and 360 steps tall, as illustrated in Figure 1-4. The center
of the Stage has an x-coordinate of 0 and a y-coordinate of 0.
y
B
180
Presentation mode
Project name
A
XY
(0,0)
–240
C
–180
240
D
Green flag
Z[
Stop
Mouse cursor
x
Mouse ( x,y )
Display
Area
x: 150
y: 100
Figure 1-4: The Stage is like a coordinate plane with point (0,0) in the center.
You can find the (x,y) coordinates of any point on the Stage by moving
the mouse cursor to that point and watching the numbers in the Mouse
(x,y) Display Area, located directly below the Stage.
The small bar located above the Stage has several controls. The
Presentation mode icon X hides all scripts and programming tools and
makes the Stage area take up almost your entire monitor. The edit box Y
shows the name of the current project. The green flag Z and stop [ icons
let you start and end your program.
TRY IT OU T 1-2
Move the mouse around the Stage and watch the Mouse Display Area. What
happens when you move the mouse outside the Stage area? Now, switch to
icon in the
Presentation mode and watch how the screen changes. Click the
top left of the screen or press ESC on your keyboard to exit Presentation mode.
4
Chapter 1
Sprite List
The Sprite List displays names and thumbnails for all the sprites in your
project. New projects begin with a white Stage and a single cat-costumed
sprite, as illustrated in Figure 1-5.
Thumbnail for
the Stage
X Choose a sprite from library.
Y Paint new sprite.
Z Get new sprite from camera.
[ Upload sprite from file.
Thumbnail for Sprite1
Click the
button to display
sprite information.
Use these buttons to create a
new backdrop.
Figure 1-5: The Sprite List for a new project
The buttons above the Sprite List let you add new sprites to your project
from one of four places: Scratch’s sprite library X, the built-in Paint Editor
Y (where you can draw your own costume), a camera connected to your
computer Z, or your computer [.
TRY IT OU T 1-3
Add new sprites to your project using some of the buttons located above the
Sprite List. Rearrange the sprites in the Sprite List by dragging their corresponding
thumbnails.
Each sprite in your project has its own scripts, costumes, and sounds.
You can select any sprite to see its belongings. Either (1) click the sprite’s
thumbnail in the Sprite List or (2) double-click the sprite itself on the Stage.
The currently selected sprite thumbnail is always highlighted and outlined
with a blue border. When you select a sprite, you can access its scripts, costumes, and sounds by clicking one of the three tabs located above the Scripts
Area. We’ll look at the contents of these tabs later. For now, right-click (or
CTRL -click if you’re using a Mac) the Cat sprite’s thumbnail to see the popup menu shown in Figure 1-6.
The duplicate option X copies the sprite and gives the copy a different
name. You can remove a sprite from your project with delete Y, and you can
export a sprite to a .sprite2 file on your computer using the save to local file
option Z. (To import an exported sprite into another project, just click the
Upload sprite from file button shown in Figure 1-5.) The hide/show option
[ allows you to change whether a sprite on the Stage is visible or not.
Getting Started
5
a new replica of the sprite that has
X Create
the same scripts, costumes, and sounds.
Y Delete the sprite from the project.
the sprite (along with its costumes,
Z Save
sounds, and scripts) to a file.
[ Hide/show the sprite.
Figure 1-6: Right-clicking a sprite’s thumbnail shows this handy menu.
Along with thumbnails for your sprites, the Sprite List also shows a
thumbnail of the Stage to the left (see Figure 1-6). The Stage has its own
set of scripts, images, and sounds. The background image you see on the
Stage is called a backdrop. When you start a new project, the Stage defaults
to a plain, white backdrop, but you can add new backdrop images with any
of the four buttons below the Stage’s thumbnail. Click on the Stage icon in
the Sprite List to view and edit its associated scripts, backdrops, and sounds.
Blocks Tab
Blocks in Scratch are divided into 10 categories (palettes): Motion, Looks,
Sound, Pen, Data, Events, Control, Sensing, Operators, and More Blocks. Blocks
are color coded to help you find related blocks easily. Scratch 2 has more
than 100 blocks, though some blocks only appear under certain conditions.
For example, blocks in the Data palette (discussed in Chapters 5 and 9)
appear only after a variable or a list is created. Let’s look at the various
components of the Blocks tab in Figure 1-7.
Current selection (highlighted)
The top part of the Blocks tab shows the
.
ten groups of blocks.
Click each category
to see the blocks that exist in that category.
The bottom part shows the available blocks
in the currently selected category.
Figure 1-7: An enlarged view of the Blocks tab
Try clicking a block to see what it does. If you click move 10 steps on
the Motion palette, for example, the sprite will move 10 steps on the Stage.
Click it again, and the sprite moves another 10 steps. Click the say Hello!
6
Chapter 1
block (in the Looks palette) to make the sprite display “Hello!”
in a speech bubble for two seconds. You can also access the help screen of a
block by selecting Block help (the question mark icon) from the toolbar and
clicking the block you’re confused about.
Some blocks require one or more inputs (also called arguments) that
tell the block what to do. The number 10 in the move 10 steps block is an
example of an argument. Look at Figure 1-8 to see the different ways blocks
let you change their inputs.
for 2 secs
X
Y
Z
Figure 1-8: Changing the inputs of different types of blocks
You can change the number of steps in move 10 steps by clicking the
white area where you see the 10 and entering a new number X, perhaps 30
as you see in Figure 1-8. Some blocks, like point in direction 90, also have
pull-down menus for their inputs Y. You can click the down arrow to see
a list of available options and select one. This particular command has a
white editable area, so you could also just type a value inside the white box.
Other blocks, like point towards Z, will force you to choose a value from
the drop-down menu.
TRY IT OU T 1- 4
Go to the Looks palette, change the values of block inputs, and click the blocks
to see what they do. For example, experiment with the set color effect to block.
Try numbers like 10, 20, 30, and so on until the cat returns to its original color. Try
the options in the drop-down menu with different numbers. You can click the clear
graphic effects block (also in the Looks palette) to remove your changes.
Scripts Area
To make a sprite do interesting things, you need to program it by dragging
blocks from the Blocks tab to the Scripts Area and snapping them together.
When you drag a block around the Scripts Area, a white highlight indicates
where you can drop that block to form a valid connection with another block
(Figure 1-9). Scratch blocks only snap together in certain ways, eliminating
the typing errors that tend to occur when people use text-based programming languages.
Getting Started
7
Drag
Scripts Area
A white highlight
indicates where you can
drop the block to form a
connection.
Figure 1-9: Drag blocks into the Scripts Area and snap them together
to create scripts.
You don’t need to complete scripts to run them, which means that you
can test your script as you build it. Clicking anywhere on a script, complete
or partial, runs the entire script, from top to bottom.
TRY IT OU T 1-5
Start a new Scratch project and create the script below for the Cat sprite. (The
forever block is in the Control palette, and the other blocks are in the Motion
palette.)
This yellow border
indicates that the
script is running.
You’ll learn about most of these blocks in Chapter 2. For now, click your new
script to run it. (Scratch should highlight the running script with a glowing yellow
border, as shown in the right side of the image.) You can even change a block’s
inputs and add new blocks to a script while it runs! For example, change the number in the move block and watch how the cat’s motion changes. Click the script
one more time to stop it.
You can also easily disassemble a stack of blocks and test each individually. This will be an invaluable strategy when you’re trying to understand
long scripts. To move an entire stack of blocks, grab the top block of the
stack. To detach a block in the middle of a stack and all the blocks below it,
grab it and drag it. Go ahead and try this out.
This feature also allows you to build your project one piece at a time.
You can connect small chunks of blocks, test them to make sure they work
as intended, and then combine them into larger scripts.
8
Chapter 1
You can even copy a stack of blocks from one sprite to another. Just
drag the stack from the Scripts Area of the source sprite to the thumbnail
of the destination sprite in the Sprite List.
TRY IT OU T 1-6
Add another sprite to your project. Drag the script from the Cat sprite and drop it
over the thumbnail of the new sprite. Your mouse arrow must be on top of the new
sprite’s thumbnail for the drop to succeed. Check the Scripts tab of the new sprite
to make sure that it has an identical copy of the script.
Costumes Tab
You can change what a sprite looks like by changing its costume, which is
just an image. The Costumes tab contains everything you need to organize
your sprite’s costumes; you could think of it like a clothes closet. The closet
can have many costumes, but a sprite can wear only one at a time.
Let’s try changing the Cat sprite’s costume now. Click the thumbnail
of the Cat sprite and select the Costumes tab. As illustrated in Figure 1-10,
the Cat has two costumes: costume1 and costume2. The highlighted costume
(costume1 in this case) represents the sprite’s current costume.
Use these buttons to add a new costume
to the sprite.
Use this edit box to change the name of
the selected costume.
Click the x to delete the costume.
The highlighted costume represents the
sprite’s current costume.
You can change the order of the
costumes by dragging and moving
the thumbnails.
Click on a costume’s thumbnail to make
it the current costume.
Figure 1-10: You can organize all the costumes for a sprite from the Costumes tab.
If you right-click on a costume’s thumbnail, you’ll see a pop-up menu
with three options: (1) duplicate, (2) delete, and (3) save to local file. The
first option adds a new costume with an image identical to that of the costume you duplicated. The delete option deletes the selected costume. The
last option allows you to save the costume to a file. You can import that costume and use it in a different project using the Upload costume from file
button (the third button in Figure 1-10). Go ahead and try these options out.
Getting Started
9
TRY IT OU T 1-7
Click the first button above the cat’s image in Figure 1-10 to choose a new costume from Scratch’s library. Then select any image you like from the window that
appears. Apply some of the tips in Figure 1-10 to become more familiar with the
costume options.
Sounds Tab
Sprites can also play sounds, which liven up your programs. You can, for
example, give a sprite different sounds to use when it’s happy or sad. If your
game contains a sprite that looks like a missile, you could make the missile
generate different sounds when it hits or misses a target.
The buttons in the Sounds tab will help you organize the different
sounds your sprites can play. As shown in Figure 1-11, Scratch even provides
a tool you can use to edit sound files. I won’t discuss the details of this tool
in this book, but I encourage you to experiment with it on your own.
Use these buttons to add a new sound to the sprite.
You can type a different name for the sound.
X Y Z
Play, Stop, and Start/Stop
recording buttons.
This sound file is
0.8 seconds.
Figure 1-11: The Sounds tab allows you to organize the sounds of a sprite.
Most of the time, you’ll need only the three buttons at the top of the
Sounds tab. They allow you to choose a sound from Scratch’s sound library
X, record a new sound Y (if you have a microphone), or import an existing sound file from your computer Z. Scratch can read only MP3 and WAV
sound files.
TRY IT OU T 1-8
Select the Sounds tab and click the Choose sound from library button. Listen to
the various sounds that are available in Scratch to get some ideas for your future
projects.
10
Chapter 1
Backdrops Tab
When you select the thumbnail of the Stage in the Sprite List, the name
of the middle tab changes from Costumes to Backdrops. Use this tab to organize the Stage’s background images, which you can change with your scripts.
For example, if you’re creating a game, you might show one backdrop with
instructions to begin and then switch to another when the user starts the
game. The Backdrops tab is identical to the Costumes tab.
TRY IT OU T 1-9
Click the Choose backdrop from library button below the thumbnail of the Stage in
the Sprite List. Select the xy-grid backdrop from the window that appears and click
OK. Scratch will add the xy-grid to your project and make it the default backdrop.
(The xy-grid shows a 2-D Cartesian plane, which is useful when you’re working
with the Motion command blocks.) Repeat these steps and select any other backdrop that you like.
Sprite Info
You can view the sprite info area by clicking the small icon at the top-left
edge of a sprite’s thumbnail, as illustrated in Figure 1-12. This area shows
the sprite’s name, its current (x,y) position and direction, its rotation style
and visibility state, and whether it can be dragged in Presentation mode.
Let’s briefly talk about each of these options.
Click this icon to
see the sprite’s
information.
X
Y
[
\
]
Z
Figure 1-12: Sprite info area
The edit box X at the top of this area allows you to change the sprite’s
name. You’ll use this box many times in this book.
The x and y values Y show the sprite’s current position on the Stage.
Drag the sprite onto the Stage and watch what happens to these numbers.
The sprite’s direction Z indicates which direction the sprite will move
in response to a movement block. Drag the blue line emanating from the
center of the circle icon to rotate the sprite.
The three rotation-style buttons [ (named Rotate, Left-right flip,
and No rotate) control how the costume appears as the sprite changes
its direction. To understand the effect of these buttons, create the script
Getting Started
11
shown in Figure 1-13 and then click each of these
buttons while the script is running. You can find
the wait block in the Control palette.
The Can drag in player checkbox \ indicates whether or not the sprite can be dragged
(using the mouse) in Presentation mode. Switch
to Presentation mode with this box checked/
unchecked and try to drag the sprite across the
Stage to understand the effect of this checkbox.
The Show checkbox ] allows you to show/hide
the sprite at program design time. Try it out and see
what happens. You’ll see several examples of hidden
sprites that do useful work behind the scenes in many
examples throughout this book.
Figure 1-13: Script for
demonstrating rotation
styles
Toolbar
Let’s take a quick look at Scratch’s toolbar in Figure 1-14, starting with some
of the buttons. (The toolbar will look slightly different if you are signed in,
as covered in Appendix A.) Use the Duplicate and Delete buttons to copy
and remove sprites, costumes, sounds, blocks, or scripts. The Grow button
makes sprites bigger, while the Shrink button makes them smaller. Just click
the button you want to use and then click on a sprite (or a script) to apply
that action. To return to the arrow cursor, click on any blank area of the
screen. You can use the Language menu to change the language of the
user interface.
Go to Scratch website
Duplicate
Language
Delete
Shrink
Grow
Figure 1-14: Scratch’s toolbar
From the File menu, you can create new projects, upload (open) an
existing project from your computer, download (save) the current project
to your computer, or revert (undo) all your changes to the current project.
Scratch 2 projects have an .sb2 file extension to distinguish them from projects created in the previous version of Scratch (.sb).
12
Chapter 1
In the Edit menu, Undelete will bring back the last block, script,
sprite, costume, or sound you deleted. The Small stage layout option
shrinks the Stage and gives the Scripts Area more room. Selecting Turbo
mode increases the speed of some blocks. For example, executing a move
block 1,000 times may take about 70 seconds in normal mode and about
0.2 seconds in Turbo mode.
Now that you’ve seen the essentials of the Scratch toolbar, we’ll talk
briefly about Scratch’s built-in Paint Editor.
Paint Editor
You can use the Paint Editor (Figure 1-15) to create or edit costumes and
backdrops. (Of course, you’re free to use your favorite image-editing program, too.) If you want to learn more about Scratch’s Paint Editor, check
out ScratchPaintEditor.pdf (located in the online resources, which can be
downloaded from http://nostarch.com/learnscratch/).
Set costume
center
Transparent
color
Figure 1-15: Scratch’s Paint Editor
For now, there are two important features you’ll need to know about:
setting the center of an image and setting the transparent color. I’ll explain
these features in the following sections.
Setting the Center of an Image
When you command a sprite to turn (left or right), it will turn with respect
to a reference point—the center of its costume. The Set costume center
button (in the upper-right corner of the Paint Editor) allows you to choose
that center. When you click this button, you’ll see crosshairs on the drawing
Getting Started
13
area, as shown in Figure 1-16. The center point is determined by the intersection of these two axes, so to shift a costume’s center, just drag them to a
new position. To hide the axes, click the same button again.
The center of rotation is
determined by the intersection
of these two axes. You can
change the center of rotation
by dragging these axes or by
clicking the mouse on the
desired center point.
Figure 1-16: Changing a costume’s center after clicking the
Set costume center button
TRY IT OU T 1-10
RotationCenter
.sb2
Open RotationCenter.sb2 and run it. This application contains a single sprite with
the costume and script shown below. The costume center is set in the middle of the
square. Run the script and notice the pattern. Then edit the costume to set its center
in the middle of the circle and run the script again to see how the picture changes.
Setting Transparent Color
When two images overlap, the top image will cover some part of the bottom
image. Similarly, sprites cover parts of the Stage. If you want to see what
the Stage looks like behind an image, you need to use the Paint Editor to
make at least part of that image transparent, as the penguin on the right is
in Figure 1-17.
In the Color palette, just click the square with a diagonal red line and
paint with that “transparent” color to make something invisible. You can
think of this icon as a “No Color” sign, similar to a “No Smoking” sign with
a red bar across a cigarette.
14
Chapter 1
Download PDF