In Tutorial #1
Cat Animation
Move and talk
Click to do
Create games and animations! Green start button
Repeat loops
Free online program! Cat Game
For Mac and PC, not iPad/iPhone/Android (yet) Arrows to move
Fun exposure to computer programming concepts. Edit/Change costume
Developed in 2003 at MIT – Free accounts! Random mouse motion
http://scratch.mit.edu Variables for score
IF statements
Editing sprites
Large community: learn from other projects In Tutorial #2
Or share your own creation! Cloning
User-defined functions
1. Open browser In Tutorial #3
2. Go to http://scratch.mit.edu Message events
2. Click “Join Scratch” to make an account Backgrounds
3. Click on “Create” and go!
Editing Screen Overview
This is where the animation / game is shown Change Scripts / Costumes / Sounds
for a sprite using these tabs
These are the start/stop buttons
These are categories of
commands
These are commands
for your script.
This is where you can have multiple “sprites” This is where you can put commands,
Sprites can have scripts to control actions. edit sprite costumes, change sounds
A – Make the cat do something
1. Under scripts, click on the purple “Looks” from the command category list
2. Drag a “Say Hello! for 2 secs” block over to the script work area
3. Drag another “Say Hello! for 2 secs” block over and connect it under
4. Change the text from “Hello!” to “I catch mice…”
5. Double click on the two connected script commands
6. The cat should say the two phrases
“Looks” button
Script work area
B – Make the cat do something repeatedly
1. Under scripts, click on the “Motion” button from the command category list
2. Drag a “go to x: 0 y:0” block and a “move 10 steps” block to the script area
3. Under scripts, click on the “Control” button from the command category list
4. Drag a “Repeat 10” block and a “Wait 1” block over to the script area
5. Connect the blocks as below right
6. Double click the blocks to run your script
7. Double click again. The cat should return to the starting spot!
Motion and Control
A repeat block is used when you know exactly how many times you need to do something!
C – Run the script when you click start
1. Under scripts, click on the “Events” button
2. Drag a “When clicked” block the script area
3. Attach the script underneath the “When clicked” button
4. Change the “Repeat” block to only run 5 times
5. Change the “Move” block to move 20 times
6. Click the “Green Flag” button to start the animation
Green Flag
Events
The Green Flag and Stop buttons run your game / animation.
D – Make a new costume for the cat
1. Click the “Costumes” tab
2. Right click the top cat sprite (labeled “costume 1”) and select “duplicate”
3. Select the new costume “costume 3”
4. Click on the cat image in the right workspace
5. The cat should be selected
6. Click on the flip left-right button
Costumes tab “costume 1”
left-right button
Selected cat
workspace
Scratch can use vector graphics which look
nice on big and little screens.
Bitmap graphics not so much…
E – Move the cat left and right
1. Under scripts, click on the “Events” button
2. Drag two “When space key is pressed” blocks into the script area
3. Under scripts, click on the “Looks” button
4. Drag two “Switch costume to costume3” blocks into the script area
5. Under scripts, click on the “Motion” button
6. Drag two “Change x by 10” blocks into the script area
7. For left direction: Change the “space key” to “left arrow” then attach one “switch
costume 3” under and one “change x by” underneath. Modify the 10 to be -10
8. For right direction: Change the “space key” to “right arrow” then attach one
“switch costume 3” under and one “change x by” underneath. Modify “costume 3”
to “costume 1”
Events, Looks, Motion
Now the left and right arrow buttons can make the cat change direction.
x values are for left and right, y values are for up and down
F – Move the up and down
1. Under scripts, click on the “Events” button
2. Drag two “When space key is pressed” blocks into the script area
3. Under scripts, click on the “Motion” button
4. Drag two “Change y by 10” blocks into the script area
5. For up direction: Change the “space key” to “up arrow” then attach one “change y
by” underneath.
6. For right direction: Change the “space key” to “down arrow” then attach one
“change y by” underneath. Modify the 10 to -10
Events, Motion
Now the arrow keys can make the cat move around.
x values are for left and right, y values are for up and down
G – Make another sprite
1. Next to “New Sprite” click on “Choose sprite from library” button that looks like a
little face
2. Scroll down in the library to find “mouse1”. Notice all the different sprites!
3. Select “mouse 1” and hit “ok”
4. Now there should be two sprites on the screen
“Choose from library”
“New Sprite”
H – Make the mouse run
1. Select the mouse sprite in the bottom left area so that it is highlighted
2. Under scripts, click on the “Operators” button
3. Drag a “pick random 1 to 10” into the script area
4. Under scripts, click on the “Control” button
5. Drag a “forever” block into the script area
6. Under scripts, click on the “Motion” button
7. Drag a “turn 15 degrees” block, a “move 10 steps” block and a “if on edge bounce”
block to the script area
8. Change the first pick random value from 1 to -10
9. Connect the blocks as below and double click on “forever”
Operators, Control, Motion
Click the red stop sign to
stop your mouse!
Highlighted mouse sprite Forever events run always,
until you stop the script
I – Keep score
1. Under scripts, click on the “Data” button
2. Select “Make a Variable”
3. Set the variable name to “Score”
4. Hit OK
5. “Score 0” should appear in the top left
Data
A variable is a piece of data that can change.
The value of a variable varies!
Variables have names so that you can read and write values
J – Change the score
1. Select the mouse sprite in the bottom left area so that it is highlighted
2. Under scripts, click on the “Control” button
3. Drag a “if then” block and into the script area
4. Under scripts, click on the “Sensing” button
5. Drag a “touching ?” block into the script area and change it to “Sprite 1”
6. Under scripts, click on the “Data” button
7. Drag a “change score by 1” to the script area
8. Under scripts, click on the “Looks” button
9. Drag a “Think Hmmm for 2 secs” to the script area and change it to “Squeak!” for 1 sec
10. Add the blocks as below such that the if is inside the forever loop, the if checks the
“touching Sprite 1?” condition, and if true the score changes and mouse squeaks.
Control, Sensing, Data, Looks
Highlighted mouse sprite If statements only do something if a
condition is met
K – Start the mouse sprite moving
1. Select the mouse sprite in the bottom left area so that it is highlighted
2. Under scripts, click on the “Control” button
3. Drag a “When clicked” block to the script area
4. Under scripts, click on the “Looks” button
5. Drag a “hide” button and a “show” button to the script area
6. Under scripts, click on the “Data” button
7. Drag a “set Score to 0” button to the script area
8. Under scripts, click on the “Control” button
9. Drag a “wait 2 secs” button to the script area and change it to wait 9 seconds
10. Connect the blocks as shown
Now, when the script is run, the mouse
will hide, the cat will talk and walk, and
then the mouse will appear and run
around.
It is important to initialize values
when you start a script
L – Finishing touches
1. Select the mouse sprite in the bottom left area so that it is highlighted
2. Under scripts, click on the “Looks” and get a “Set size to %” button
3. Initialize the mouse to start at 50% of normal size
4. Do the same thing for the cat (steps 1-3) to start the cat at 50% of the normal size
5. Change the mouse action when the cat catches him (inside the if statement)
6. Select the mouse sprite in the bottom left area so that it is highlighted
7. Add a control >> wait block inside the if statement to wait 1 second
8. Add a motion >> go to block
9. Add two operators >> pick random
10. Set the random value to be -100 to 100
Now, when the cat catches the mouse
the mouse should squeak then jump
to a new location on the screen.
The scratch screen size is:
x from -240 to 240
y from -180 to 180
M – Editing sprites
1. Select the mouse sprite in the bottom left area so that it is highlighted
2. Select the “Costumes” tab and right click the “mouse 2” image
3. Right click the mouse and select duplicate, “mouse 3” should be selected
4. Click on the red color at the bottom and select the “T” text button at right
5. Add two “x” values over the mouse eyes.
6. Modify the mouse script to switch
Costumes, show hide, and wait
N – Smoother motion and saving your game
1. The cat motion is not very smooth
2. Replace the four up/down/left/right commands
with a single forever loop and four if commands
3. Change the name for your game in the box under
the top left SCRATCH logo.
4. Save your game! Under File, select “Save Now”
To delete blocks you can right click and delete
You can make your own backdrops
You can switch backdrops using scripts
You can makes sounds and music
You can learn about lists and clones and events
You can make an account (free!) and share projects
You can look at other projects for inspiration!
TUTORIAL #2 Step O
1. Make sure you saved your first tutorial. File -> Save now
2. Make a new game: File -> New
3. Delete the original sprite. Make a new sprite using the
“paint” option that looks like a want. Call it ship.
4. Change to vector mode. Draw a ship facing to the right
with the point front at the center cross.
5. Paint a new sprite called shot.
6. Paint a new sprite called alien.
7. Paint a new sprite called star.
TUTORIAL #2 Step P
8. Change the background to Script for ship sprite
gray so the stars show up. To
do this, click on “Stage” then
select the “Backdrop” tab.
Draw a big gray rectangle.
9. Select your ship sprite and
add scripts to your ship to
make it move.
TUTORIAL #2 Step Q
Script for shot sprite
10. Add scripts to the shot sprite.
11. Select “More blocks” and select
“Make a block” then type the
name “MakeClone” and click “Add
number input” then change the
number input label to “waittime”
12. This will let you make your own
function that takes an input value
and does something every time
you call it!
13. Clones let you copy a sprite. Make
sure you delete clones when not
needed!
TUTORIAL #2 Step R
14. Add scripts to your alien sprite.
Script for alien sprite
TUTORIAL #2 Step S
15. Add scripts to your star sprite.
16. Play and adjust values as needed! Script for star sprite
TUTORIAL #3 Step T
1. Make sure you saved your second tutorial. File -> Save now
2. Make a new game: File -> New
3. Click on the stage. Select “Choose Background from Library” button
4. Select the brick wall
5. Click on the stage again, select “Choose Background from Library”
6. Select the woods.
7. Click on the Backdrops tab. You should now see three different backdrops
“Stage” selection and
“Choose Background from Library”
TUTORIAL #3 Step U The “broadcast” and “when I receive”
1. Click on the Cat Sprite. blocks are under events.
2. Make two variables named Score and Time
3. Add the following scripts to your cat sprite.
TUTORIAL #3 What is happening in step U?
1. Messages are a way to send signals to all
the sprites at once.
2. Each message starts a phase of the
program.
3. The sprite must initialize for each scene.
Set location, set visibility, set costume, etc.
Variables are reset, everything is initialized
for that step.
4. Each scene of your program should be self-
contained and not affect another scene.
5. The join block lets you join a number to a
string of text characters.
6. Using messages helps with timing issues.
7. The heart of the game is the “repeat until”
block and timer condition. This keeps the
game going for a set amount of time.
8. The “timer” will count up from 0. The Time
variable is displayed and will count down
from 10 to 0.
9. The “floor” command rounds the value of
the Time variable down.
10. It runs for 11 seconds so the player can play
while 0 is displayed for one second.
TUTORIAL #3 Step V
1. Paint a new sprite.
2. Select “Convert to vector in the bottom right.
3. Create a black lined rectangle in the middle.
4. Fill the rectangle with white.
5. Add text in the middle: “Click to Start”
6. Right click or shift-click the sprite and select duplicate.
7. Change the text in costume2 to GAME OVER
Text and fill with color buttons
TUTORIAL #3 Step W
1. For Sprite2, select the Scripts tab.
2. Add the code below for the second sprite.
3. The “and” condition is only true when both the mouse is touching the
sprite and the mouse is clicked down.
TUTORIAL #3 What is happening overall?
Introduction
1. Each scene (or phase or segment) of
Describe rules and
your program is a separate part.
gameplay
2. The transitions are very important. Moves to start after a few
3. Things should be hidden at the end seconds.
of a scene if not used in the next
scene. Start
4. The elements of a scene must be Initialize game then
initialized at the start of a scene. This play game
means variable values are set to their Moves to Stop after 11
seconds of gameplay.
initial values. Sprite location, size,
and visibility is set to the initial
values. Stop
5. For infinite game play, an infinite Game is over, let
loop must be created. player know.
Moves to Finish after 4
seconds.
Finish
Final scene
Moves to Start only when
button pressed.
• Scratch looks at the blocks in your project and determines
how to make things happen according to your instructions.
• For most computer languages (python, C, java) this is done
by typing in text. Missing a comma can break everything!
• Waterbear is a project inspired by Scratch that can show
you the resulting code. http://easyj.team2648.com/
• These tutorials are shared online:
– https://scratch.mit.edu/projects/17064873/
– https://scratch.mit.edu/projects/67685516/
– https://scratch.mit.edu/projects/89906152/
• Scratch has a large community. When you
“share” a game, others can look at your game
and learn from your work.
• You can “remix” other people’s work and your
shared projects can be remixed by others.
– Remember to acknowledge the original project!
• Looking at the code in other projects is a great
way to learn!
• Scratch runs in Adobe Flash, so it only works on
PCs or Macs. Scratch does not currently work on
iPads or mobile phones without problems.
• Phosphorus can allow shared Scratch projects to
run on iPads and mobile phones. There may be
issues with some projects.
• Just put the project number in to run a Scratch
app in the phosphorus environment.
– https://phosphorus.herokuapp.com/
– http://phosphorus.github.io/#67685516
• You may need to add touchscreen controls to
your project to let people use your games without
a keyboard.
• You can open the app on your phone, then add a
link to your home screen to make it look like a
real game.
