To do this: Click on the stage object in the Sprites List Click on the Control button at the top of the Blocks Palette Drag a “when [green flag] clicked” block to the Scripts Area.[r]
Trang 1How to Create Computer Animations
Using SCRATCH
By Sally Kyvernitis, June 2009
Table of Contents
1 Overview of this tutorial 2
2 What is SCRATCH (where can I get it – for free)? 2
3 Open and run a SCRATCH project 3
4 Look at SCRATCH scripts 4
5 More about SCRATCH scripts 5
6 Copy a SCRATCH project – Exercise 6
7 Duplicate a sprite (add 2nd second ball) - Exercise 6
8 Rename a sprite & change it’s costume – Exercise 8
9 Make costume changes while the project is running – Exercise 9
10 Add sound – Exercise 10
11 Modify script (change starting position) - Exercise 11
12 Change the background – Exercise 11
13 Add new sprite (paint your own) – Exercise 12
14 Modify scripts again (make game end when a ball hits the floor) – Exercise 13
15 Change the ball speed – Exercise 14
16 Create a variable that will let the user change the speed – Exercise 15
17 Experiment with SCRATCH Error! Bookmark not defined. 18 SCRATCH Reference Cards 18
19 Show what you’ve learned 19
20 Share your project 20
If you would like to get an electronic copy of this (and other computer tutorials),
please visit http://astro.temple.edu/~sallyk/tutorials/
Trang 21 Overview of this tutorial
In this tutorial, you will learn about a new exciting computer language called SCRATCH which lets you animate your computer To create a SCRATCH project, you first select a background and add characters (called “sprites”) to that background Then, you tell your sprites what to do, for example when the program starts or when a certain key is pressed You can tell your characters to move around, change their appearance, make sounds and much more You start out this tutorial by opening up a sample SCRATCH project – a simple game of ping pong After running and examining how this program works, you copy this game and make certain changes to it (following step by step instructions) During this process, you will be learning about:
How to make sprites move, change costumes, and make sounds
How to program the scripts that tell the sprites what to do (how to start a scripts, using variables, testing conditions, repeating blocks, how to stop scripts)
After you have modified your copy of the Pong game, you should have a good understanding about SCRATCH and how
to use it Then (on your own), you will study and modify open various projects that come with the SCRATCH program From the SCRATCH MIT website, you will find and modify more interesting projects that others have posted Finally, you will come up with an idea for your own SCRATCH project – something that ties in with the concepts you have been learning in camp When you have finished your project, you can share it to the SCRATCH MIT website so that others may learn from you
2 What is SCRATCH (where can I get it – for free)?
SCRATCH is a language that helps you write programs to animate your computer Using SCRATCH, you can create computer games, animated stories, moving art, music/dance performances
Scratch projects are made up of objects called sprites You can make a sprite look however you want – by giving it a costume (you can import any image or draw your own in the Paint Editor) You can make sprites do things (like make sounds or react to other sprites) by dragging blocks together to form scripts When you double-click on a script, all
the blocks of the script run (from top to bottom) and you can see your sprite doing the things you told it to do
SCRATCH is free download available from MIT – you can install it from this URL:
http://scratch.mit.edu/download
For a SCRATCH reference guide, click on this link then click on “Reference Guide”:
http://info.scratch.mit.edu/Support
Trang 33 Open and run a SCRATCH project
To see what a SCRATCH Project can do, open up a sample like this:
Click on Start – Programs – SCRATCH
Click on Open, double click on the Games folder, then double click on “Pong 2”.
Run the program by clicking on the green flag (in the upper right of the screen).
Then in the Stage Area (in the upper right of the window), you should see a blue ball falling down With your mouse, move the “paddle” (black line) so that it is under the ball If you do, the ball will bounce off the paddle, but if you let the ball fall into the red (“lava”), the game stops You can always just start the game again by
clicking on the green flag Once you feel understand how the game works, click on the red stop sign to stop the
game (or just let the ball fall into the red)
Take a moment to look at the different areas within the SCRATCH window:
o Stage Area (where your animations run),
o Sprites List (shows all the “sprites” in your project and the stage upon which they are animated),
o Scripts Area (shows the instructions you gave the selected sprite)
o Blocks Palette (shows all the different kind of instructions you can use to direct sprites)
o Notice also the “Mouse X” and “Mouse Y” indicators just under the Stage Area These values change
whenever you move your mouse If you move your mouse to the upper left corner of the Stage Area, “Mouse X” should be about -240 and “Mouse Y” should be about 180 Move your mouse to the other three corners
to see those mouse values
Start gam
Stop game
Current Mouse positio
Blocks Palette Scripts Area
St a g e A re a
Sprite List
Trang 44 Look at SCRATCH scripts
If you look in the Sprites List (lower right of window), you will see the stage and the 2 “sprites” that are part of this project (a ball and a paddle) To see the scripts of an object, click on that object in the Sprites List and then look in
the Scripts Area
If you click on the ball in the Sprites List, you will see (in the Scripts Area) the scripts of the “ball” object
These scripts are pretty easy to read and understand As you can see, all scripts start when the green start flag is clicked (i.e., when the game starts) – and they all happen at the same time
Script of “ball”
This script says when the green flag is clicked, the ball should
go to a position (mouse_x=13, mouse_y = 157),
wait until it touches red (on the bottom of the stage),
then, the game should stop
Another Script of “ball”
This script says that when the green flag is clicked,
the ball should check (forever – as long as the game is running) to see if the ball is
touching the paddle
whenever the ball touches the paddle, the ball should play a sound (water drop), change direction (like a bounce), & then move forward
Another Script
of “ball”
This script says that when the green flag is clicked,
the ball should check (forever – as long as the game is running)
to see if the ball is on the edge (of the playing area) and if so, bounce off and move forward
Click on the paddle and you will see only one script
Paddle’s Only Script
This script says that when the green flag is clicked,
the paddle should forever make its x position (left-right position) match the x position of the player’s mouse
Click on the stage and you will see that the stage does not currently have any scripts.
Trang 55 More about SCRATCH scripts
Block
Palette What these blocks can do Stack Blocks (Sample) Reporters
Control
Start
Blocks
Four “Hat” blocks (curved top) can make a sprite (or the stage) begin running the stack of blocks
below it For example, when a key is pressed
none
Motion Position, direct, or move a sprite.
Looks Make a sprite say things or changeits costume or color/effects
Sound Play sound effects, play music.
Pen
Make a sprite draw on the stage
(pen color, pen down, pen up) –> use with motion blocks
none
Sensing What is value of something?Is something is true? none
Control
Testing
Run certain blocks only if something is true
(The IF block)
none
Variables Create / delete numeric variables.Set/change their values.
Samples:
Numbers (on values sensed &/or variables).Do arithmetic, logic none
Control
Repeating
Run blocks repeatedly
Control
6 Copy a SCRATCH project – Exercise
Use the Save As button to save your own copy of the Pong Game Save the project as “your name pong” (put your name in for “your own name”) Before clicking OK, put your name in for Project Author and change the description
Trang 6in “about this project”.
7 Duplicate a sprite (add 2nd second ball) - Exercise
Let’s make the game a little more interesting by adding a second ball In the Sprites List, right click on the “ball” sprite and select “duplicate” Then you should see a second ball (named “Sprite1”) in the Sprites List
Trang 7When you click on this new sprite (in the Sprites List), you see that this new sprite has all the same scripts as the original “ball” sprite had Run your game (by clicking on the green flag) and see how the game now works
Trang 88 Rename a sprite & change it’s costume – Exercise
Change the name of the new sprite (from “Sprite1”) to “ball2”, change its costume so it looks like a soccer ball, and change the size of the soccer ball To rename the new sprite,
Click on Sprite1 in the Sprites List
At the top of the Scripts Area (where you currently see the name “Sprite1”), type “ball2”
To change the “costume” of ball2
make sure you are still clicked on ball2 (in the sprites pane),
then click on the Costumes tab (in the scripts
pane),
click on the Import button,
double click on the Things folder, then
double click on “soccer1”
Click on the “X” icon next to the “spinningglobe”
costume – to delete the old blue costume
Make ball2 smaller by clicking on the “shrink sprite” icon (above the Stage Area) then clicking on ball2 several times (in the Stage Area) When you like the size of the ball, click on the normal (arrow) icon – to stop the shrinking behavior
Shrink Sprite icon game
Normal icon
(stop
shrinking)
Trang 99 Make costume changes while the project is running – Exercise
It might be fun to make “ball” have 2 costumes and change those costumes while the project is running
First, import two costumes for “ball”:
click on “ball” in the Sprites List
click on the “Costumes” tab in the Scripts Area
Click on “Import” (in the Costumes tab of the Scripts Area of “ball”) Double click on the
“Things” folder, then double click on “baseball1”
Import a second costume: click on import (Things folder should already be open), then double click
on “basketball”
You can shrink or grow the size of the “ball” sprite (in the Stage Area) if you like (as you did in the previous step)
When do you want the costume to change? If we put the “next costume” block inside the “forever if touching paddle” block, then the costume will change every time “ball” touches the paddle
To make “ball” change costumes whenever it touches the “paddle”:
Make sure “ball” is selected in the Sprites List
Click on the “Scripts” tab (of the Scripts Area)
Click on the “Looks” button in the Blocks Palette
Slide the “next costume” block inside the “forever if touching paddle” block
Run the game again and make sure that “ball” changes costumes whenever it touches the paddle
10 Add sound – Exercise
Trang 10You may have noticed that ball2 (which now looks like a soccer ball) does not make a sound like the other (blue) “ball” when it hits the paddle To troubleshoot this problem,
Click on “ball” in the Sprites List and then look at the Scripts Area Notice that there is a block that says to play a water_drop sound Click the Sounds tab (in the Scripts Area) and note that “ball” has a water_drop sound
Now click on “ball2” in the Sprites List and note that there are no sounds in the sounds tab for “ball2” This is the reason why ball2 makes no noise when it hits the paddle
To resolve this problem, import the water drop sound (click on import, double click on the effects folder, then double click on water_drop) While you are at it, import another sound, for example you could import the sound
“Zoop” from the Electronic folder
Now, change the sound that ball2 makes by modifying a block in the scripts pane
In the play_sound block, select “Zoop” (or the other sound you imported to ball2) from the pick list
Play the game again and test that both balls make the sounds you wanted
Trang 1111 Modify script (change starting position) - Exercise
Notice that when you start the game, the two balls seem to be on top of each other If you look at the scripts for
“ball” and “ball2”, you can see that they both have blocks that move them to position x:13, y:157 (This explains why both balls seem to be starting out “on top of each other”.) Improve the game by changing the initial position of “ball” (to something else) To do this,
In the Script Area for “ball”, find the “go to x: y: ” block
Change the x value to something different, for example, x:-13 (a position to the left of the other ball)
Run the game again and make sure that the two balls don’t start out in the same position (on top of each other)
12 Change the background – Exercise
To make the game more realistic and interesting, change the background to be a moon
To change the background,
Click on the stage in the Sprites List,
click on the Backgrounds tab (in the Scripts Area),
click on the Import button,
double click on the Nature folder, then
double click on “moon”
Now play the game again Do you notice anything different (other than a different picture)? If so, how & why?
Trang 1213 Add new sprite (paint your own) – Exercise
You may have noticed that the game now does not stop – this is because the stage’s background (now a moon picture) does not have any red for the balls to touch to stop the game Add an object that will do what the red did – stop the game whenever a ball touches it We’ll paint a new sprite for this So,
click on the “Paint new sprite” icon
Then (in the Paint Editor), click on the “zoom out” icon (magnifier with minus sign) several times (so the drawing canvas does not scroll)
Click on the black color, click on the line draw icon, and you can also select a brush size from the list
Using your mouse, draw a straight line all the way across the top of the drawing canvas
If you make a mistake, you can click the Undo button and try again When you are done, click OK
(At the top of the Scripts Area), rename this new sprite “moonfloor” (enter the new name at the top of the scripts pane)
In the stage pane, use the mouse to position your new sprite (moonfloor) to the very bottom of the stage
Zoom out
Select
color
Draw Line
Trang 1314 Modify scripts again (make game end when a ball hits the floor) – Exercise
To make the game end when a ball hits the bottom (the moonfloor you just made), you must modify a block in a
“ball” script Replace the “touching color red” condition to be “touching moonfloor” To do this:
Make sure you are clicked on “ball” in the Sprites List
Click on the “Sensing” button at the top of the Blocks Palette (because the “touching” block is found under the
“Sensing” block palette)
Drag the “touching color red” block from the Scripts Area and drop it into the Blocks Palette (just to get rid of it) Then the “wait until” block has an empty space where “touching color red” used to be
Slide the “touching” block from the Blocks Palette into that empty space
Then select “moonfloor” from the pick list in the “touching” block
Run your game to test it – make sure the game stops when “ball” hits the moonfloor
Do the SAME THING for ball2 (the soccer ball): make the game stop when the soccer ball hits the moon floor
Blocks Palette Scripts Area