In this tutorial we’ll be creating a simple Scratch program that uses input from the keyboard to control the motion of a sprite, a cat. This is no ordinary cat, this is the party hat cat! When the program is complete you’ll be able to move the cat back and forth on the screen, have the cat pick up a party hat, put it on, and start playing music.
This is no ordinary cat, this is the party hat cat!
To follow along with this lesson you’ll need to have Scratch installed. If you don’t already have Scratch installed on your computer, or if you’re unfamiliar with what Scratch is, I recommend reading the first tutorial: Getting Started with Scratch.
Concepts covered in this lesson:
- Cartesian coordinates.
- Creating a sequence of steps using blocks.
- Iteration, or repeating a sequence of steps again and again.
- Conditional statements: performing an action when certain conditions are met.
- Keyboard input: using the arrow keys to control the movement of a sprite.
- Coordination: triggering an action in another sprite by broadcasting a signal.
Start a new project in Scratch. If you’ve just started the Scratch program you won’t need to do anything else. If you had been working in Scratch and have a program loaded, save your work first and then click File > New to create a new Scratch project. The Scratch window should look like this:
Let’s first rename our sprite to something more meaningful than “Sprite1”. Click in the text field at the top of the scripts (center) panel, and change the text from “Sprite1” to “Cat”.
The top of the scripts panel should look like this now:
Moving the Cat
To move our cat we’ll need to use one of the motion blocks from the blocks palette. To view the motion blocks, click on the button at the top of the blocks palette. You should see a list of all the blue motion blocks in the palette now. At the top of the list should be the block. Drag this block into the scripts area, like so:
To make our cat move, click on the block once. After you’ve clicked the block, the cat should have moved to the right, and the location information shown at the top of the scripts area should have changed as well:
Let’s take a brief detour right now to look at how the position of a sprite can be described on the stage. Notice that the value shown for “x:” is now 10, and before you clicked the move block it was zero. The numbers shown beside “x:” and “y:” represent the position of the cat on the stage. When the sprite moves to the right or left the number shown for “x:” or the x-coordinate will increase or decrease. When the sprite moves up or down, the number for “y:” or the y-coordinate will increase or decrease. The very center of the stage has an x-coordinate of zero and a y-coordinate of zero, this is known as the “origin”. This coordinate system was invented by the French mathematician and philosopher René Descartes, and is therefore referred to as the Cartesian coordinate system. The image of the Scratch stage shown below illustrates how Cartesian coordinates can be used to locate a position on the stage:
To the right of the origin the x-coordinates are positive increasing numbers: 1, 2, 3, … To the left of the origin, the x-coordinates are represented as negative numbers: -1, -2, -3 … If you move all the way to the left of the stage, the x-coordinate is -240, and all the way to the right is 240, making the width of the stage 480.
Similarly, the y-coordinates increase when moving up from the origin and decrease as the sprite moves below the origin. The upper limit of the stage is 180 and the lower limit is -180, making the height of the stage 360.
Try it out:
- Drag the cat sprite on the stage. Can you move the cat so only the x-coordinate changes? So only the y-coordinate changes?
- What happens to the y-coordinate when the cat moves below the middle of the stage?
- What happens to the x-coordinate when the cat moves to the left of the middle of the stage?
- Where is the cat when both the x-coordinate and y-coordinate are negative? What about when they are both positive?
A Sequence of Steps
At this point our cat may be someplace other than the center of the stage. To put our cat back at the center you could just drag the sprite to that location, or alternately, we can use the block.
Drag the from the motion blocks palette onto the scripts area, but don’t join it with the block yet! If the x and y coordinates are not both zero, you can change them by double-clicking in the white field following the “x:” and “y:” labels. Your script should look something like this now:
Click on the block to re-center the cat sprite. Now click the block again. The cat’s x-coordinate should be 10 again. Keep clicking the block. What happens? Can you get the cat to go off the screen? If you’ve clicked the move block until the cat stops, the cat’s tail, whiskers and one foot may still be visible and the x-coordinate should be 269.
When the cat reaches the edge of the stage, it would be nice to have the cat change direction and start moving in the opposite direction rather than stop somewhere just off the edge of the stage. Scratch provides a motion block that does just that! Look for the block and drag it onto the scripts area, joining it with the block, like so:
By joining two blocks together we’ve just created a sequence. When you click on the block now, the block will behave as if you’ve clicked it.
Let’s start with the cat at the origin again, click the block. Now click the block again, and again until the cat gets to the edge of the stage. Oh no! What happened?
Why is our cat upside-down?
Why is our cat upside-down? By default sprites are allowed to rotate, but in this program we only want to be able to move to the left or right. There are three buttons just to the left of the cat sprite at the top of the scripts area that control rotation of the sprite:
The button enables the sprite to rotate, the button prevents the sprite from rotating, and the button allows the sprite to face left or right only. To restrict the ability of our cat to face only left or right, click the button.
Now that our cat is no longer upside-down, try repeating the previous steps. Re-center the cat sprite and click the block until the cat reaches the edge of the stage. The cat sprite should change the direction it’s facing now and continue moving in the opposite direction.
Try it out:
- What happens if you click the button and repeat the steps above?
We’ve just been experimenting with iteration, repeating a sequence of steps again and again. It gets a bit tiresome to keep clicking the same block over and over, however. Thankfully Scratch provides us with yet another block that can eliminate the tedium of repeatedly clicking a block.
At the top of the block palette, click on the button. The orange control blocks should now be shown in the block palette. Drag the funnily shaped block onto the scripts area, but don’t let go of the mouse button yet! As you drag it onto the scripts area, hover the block over the and blocks. What happens? The block should open up around the blocks. A thick white line should also appear at the top of the block. OK, now you can release the mouse button! All three blocks should be connected together. You can also drag the resulting block and connect it to the bottom of the block like so:
Now click anywhere on the script that you’ve created. What happens?
Ugh, that cat is making me dizzy!
Ugh, that cat is making me dizzy! How do we make it stop? Just click on the script again to stop it. Whew, that’s better!
Let’s add a control block to the start of our script that will allow us to start and stop our program using the buttons. At the top of the control block palette look for the block. Drag the block to the top of your script, like so:
Now, when you click the green flag above the stage it will start your program, and you can stop the program by clicking the red stop sign.
Keyboard Input and Conditional Statements
Although that might be entertaining for a bit, it would be nice if we could have some control over the cat’s movement. Instead of constantly moving back and forth, what if the cat moved only when the arrow keys were being pressed? When the right arrow key is pressed the cat faces to the right and moves right, and when the left arrow key is pressed, the cat faces left and moves left, otherwise the cat remains motionless.
What we need is a way to check to see if the arrow key is being pressed, and if so, run the move sequence. That’s where the block comes in. On the control blocks palette, look for the sixth block from the bottom, this should be the “if” block. Drag this onto the scripts area for the cat just as you did with the “forever” block. Drag the “if” block so that it encloses the and blocks, as shown below:
Did you notice the recessed hexagonal shape in the “if” block? That’s where we need to put the condition that we’re checking for. In this case we’re checking to see if a key has been pressed. What we’d like our program to say is: “if the right arrow has been pressed, move ten steps, and if the cat is on an edge, bounce.”
Click on the button to reveal the sensing blocks palette. About midway down the panel, look for the block. Instead of moving the sprite on the stage, this block just returns a value that can be used by a control block. In this case, it returns a Boolean value, which means that it can be either “true” or “false”. The Boolean data type is named for the English mathematician George Boole.
Try it out:
- Click on the block in the sensing blocks palette. A speech bubble should appear above and to the right of the block that says “false”:
- Now, hold down the space bar and click on the again. What does the speech bubble say?
Examine the block. Do you see the inverted black triangle to the right of the word “space”? That indicates that there’s a pull down menu available for this block. Click the the triangle and a menu of available keys should appear. You’ll find the arrow keys at the top of this list. Select “right arrow”. Now drag your block into the recessed area of the “if” block. Your script should now look like this:
Try it out:
- Click the green flag to start your program. Is the cat moving?
- What happens when you press the right arrow key? What happens when you release the right arrow key?
- Does anything happen when you press the left arrow key? Any other key?
Well, that’s better, but the cat faces left when he bumps the edge of the stage and he just keeps on going! To keep the cat facing in the right direction, let’s add another block that tells the cat which way to face.
Click the again to display the motion blocks palette. Now select the block and add that to you script just before the block. Your updated script should now look like this:
Now, when you run your program by clicking on the green flag, pressing the right arrow key should move the cat to the right of the stage where the cat should stop and face left. But now the cat is stuck!
But now the cat is stuck!
How can we move the cat left? Easy, just right click on the “if” block and select “duplicate” from the pop-up menu. You should get a copy of the entire “if” block, including the “point in direction”, “move” and “if on edge, bounce” blocks. Drag and drop this new block right below the existing “if” block. Now change the key pressed in the new block from “right arrow” to “left arrow”, and change the direction from “90 (right)” to “-90 (left)” as shown below:
Now when you run your program and click the arrow keys the cat should move left and right. We’re almost there!
Before we continue, let’s make this look more like a party. Let’s change the background that the cat is moving on. In the sprite list, click on the Stage (on the left of the gray divider). The Stage will be shown at the top of the scripts area. Click on the center tab, Backgrounds, to view the backgrounds for the Stage:
Click the “Edit” button for “background1”. The Paint Editor window will be displayed:
Click the “Import” button and select the “party-room” image from the “Indoors” folder of the background images:
Click “OK” to import the “party-room” image to the background, and click “OK” again” to set this as the background for the Stage. You can also change the name of the background to something more meaningful than “background1” like “Party Room” by double-clicking the “background1” text. Your Scratch project should now look like this:
In the sprite list, click on the Cat sprite and select the Scripts tab. The cat seems to be floating in the middle of the room right now. Let’s move him to the lower left corner of the stage.
Try it out:
- How can we change the script so that the cat always starts in the lower left corner of the stage? The lower right?
If you recall, the x and y coordinates are both negative for the lower left region of the stage. Click on the x-coordinate of the block and set it to -160. Click on the y-coordinate and set it to -100, as shown below:
Coordination: Picking Up the Hat
Let’s give our cat a party hat! In the sprite list panel click the button to view the New Sprite file dialog. Open the folder named “Things” and look for a sprite named “partyhat3”:
Click “OK” to add the sprite to the sprite list. It will show up in the list as “sprite1”. You can rename the sprite to “Party Hat” just as we had renamed the cat sprite earlier.
Let’s move the hat to the opposite side of the stage from the cat, so he has to put some effort in to reaching it. We want to set the hat’s x-coordinate to 180 and its y-coordinate to -100 when the green flag is clicked.
Try it out:
- What blocks do you need to drag onto the hat’s script area to move the hat to x, y coordinates 180, -100? Don’t look at the answer!
Click on the button and drag the onto the script area for the hat. Next click the block and drag the block to the script area and connect it to the bottom of the other block. Change the x-coordinate to 180 and the y-coordinate to -100. Your hat script should look like this now:
Try running the program now. What happens when the cat reaches the party hat? Not much, right? Let’s fix that now. Click on the Cat sprite and display the script by clicking the Scripts tab.
Now, click the button and drag another block from the control blocks palette and drop it within the block after the last block, like so:
Click the button to reveal the sensing blocks palette. We want something to happen when the cat sprite touches the hat, so find the block and click the down arrow to show the options. There should be an option for “Party Hat”. Select this and then drag the block into the recessed area of the block.
Here’s where we need to coordinate with the Party Hat sprite. We want to send a message to the Party Hat to tell it that it’s just been picked up. To do this we can use the block. This will broadcast our message to the other sprites in our program so that they can respond. To set our message, click the down arrow, and select “new…” Type in “Hat Picked Up” as the message in the dialog that is displayed, and click “OK”:
Your script should look like this now:
What should happen next? The cat should put the party hat on, right? But how can we do that? First, let’s make the party hat sprite disappear, then we’ll create a new cat costume with the party hat on the cat.
Let’s revisit the party hat script. Click on the Party Hat sprite in the sprite list and select the script tab in the scripts area. Now, we need to have the party hat respond to the message we just sent.
Click on the button to display the control blocks palette. Now find the block and drag it into the scripts area for the Party Hat sprite. You may have noticed that this block is just like the block. These blocks are special in that they begin a sequence of blocks and they respond whenever special events occur. In this case, the instructions that follow this block will occur whenever the message “Hat Picked Up” is broadcast.
Click the purple button now to reveal the looks blocks palette. The block that we’re looking (ha!) for should make our party hat disappear! Drag the block to the scripts area and connect it to the base of the block, like so:
Try it out:
- Start the program. What happens when the cat touches the party hat?
- Start the program again. Wait…what happened to the party hat?
Wait…what happened to the party hat?
Just above the block you’ll find the corresponding block. Drag this block into the scripts area and connect it to the bottom of the script that begins with the block:
Start the program again. Now the party hat should disappear when the cat touches it and reappear when the program is started.
The final bit of magic is to make the hat reappear on the cat’s head. To do this we’ll need a change of costume.
Click on the cat sprite in the sprite list, and select the costumes tab. There are already two costumes for our cat, as shown in the image below:
You can safely delete the existing “costume2” by clicking on the button. This costume could be used to animate the cat walking, but it won’t be used in this program. Now click the “Copy” button for “costume1”. This makes a new “costume2” that is identical to “costume1”.
Click the “Edit” button for “costume2” to bring up the Paint Editor window. In the Paint Editor click the “Import” button and browse for the “partyhat3” in the “Things” folder that we had used earlier for the Party Hat sprite. Drag the party hat and place it on the cat, as shown below:
Click “OK” when you’re satisfied with the way your cat is wearing the party hat.
Finally, let’s rename the costumes so that we can more easily identify them. Rename “costume1” to “Cat Without Hat” and “costume2” to “Cat With Hat”. The costumes for our cat should look like this now:
Now, click the Scripts tab, and then click the button to display the looks blocks palette. At the very top of the list should be the block. If the costume “Cat With Hat” is not shown, click the down arrow to reveal the costume options and select “Cat With Hat” from the list. Now drag this block into the script and add it just after the block, as shown below:
Now try running the program. What happens when the cat touches the hat? Hurray, our cat is wearing the hat! But wait, if we restart the program our cat is still wearing the hat, oh no! Just as with the and blocks earlier, our cat’s costume must be set to its initial state.
Hurray, our cat is wearing the hat!
Drag the block to the scripts area and add it just after the block. You may need to select the costume name “Cat Without Hat” from the list by clicking the down arrow. Now try running your program again. The cat shouldn’t have a hat when the program starts now.
As a final touch, lets have the cat say “Let’s Party!”, and then we’ll play a music loop.
Drag the block into the scripts area and add it after the block. Change the text from “Hello!” to “Let’s Party!” by double-clicking the text. Test it out, does it work as you expected it to?
Now, let’s add some music. We’ll put the script to play the music in the Stage scripts area and have it triggered by the “Hat Picked Up” message.
First we need to select our party music. Click on the Stage in the sprite list and then select the Sounds tab in the scripts area:
There is already a sound called “pop” in the list of sounds for the stage. You can play it by clicking the button. Doesn’t sound much like a party, does it? You can delete the sound by clicking the button. We’ll import a new sound for our party music. Click the “Import” button and browse to the Sounds > Music Loops folder. Try out the different music loops to see which one you like. In this case I’ve selected “Techno2”:
Click “OK” the music loop should now appear in the list of sounds.
Now let’s switch to the Scripts tab for the stage. We want the music to play after the cat puts on the hat, so we’ll start our script with the block. In order to play our music loop over and over again we can use the block. Connect this block to the base of the first block. Now click on the button to reveal the sound blocks palette. Drag the block into the scripts panel and drop it within the block. The complete script for the stage should look like this:
That’s it, our program is complete! Start the program. When the cat touches the hat the music loop should begin to play and keep looping. If you want it to stop, click the red stop sign.
The complete project for this tutorial can be downloaded from the Scratch website.
Feel free to experiment with the program you’ve just created. Here are some ideas to help you get started:
- Add another sprite to the program. Trigger the sprite to appear after the cat says “Let’s Party!”
- Make a different hat appear at the opposite side of the stage after the cat picks up the original hat. See if you can get the cat to change hats again.
- Instead of playing the same music loop over and over again, try playing a sequence of different music loops.
- EXTRA CREDIT: Add more party goers (sprites) and have them dance to the music when the music starts. Hint: Have the sprites move a few steps forward, and a few steps back. Repeat the motion in a “forever” block.