Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Lesson 3 – Creating and Using Graphics
What you will learn:

how to delete a sprite and import a new sprite

how to draw using the pen feature of Scratch

how to use the pen up and pen down feature

how to change the colour of the pen

how to set the position of the sprite using coordinates

how to make a sprite appear and disappear using show and hide

how to use the Broadcast feature in Scratch to create subroutines

how to import an image as a sprite from outside Scratch

use advanced search to select a suitable image from the Internet

that some file formats (GIF or PNG) support background transparency and these are the best file
types to use
Contents
Exercise 1 – Drawing Shapes Using Scratch................................................................................................... 2
Exercise 2 – Using Sprites from Outside of Scratch ..................................................................................... 13
Introduction to Scratch Programming (2 nd Edition)
Page 1 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Exercise 1 – Drawing Shapes Using Scratch
In this lesson, you will use Scratch to draw shapes and patterns on the screen and use coordinates to set
the position of the sprite while drawing.
The stage in Scratch is mapped by positive and negative coordinates.
In the centre of the stage, X = 0 and Y = 0. The X coordinates go from -240 to 240 and the Y coordinates
go from -180 to 180.
Y= 180
Y= 180
X= -240
X= -240
The centre position of any sprite is
defined by its coordinates
indicated below the stage
X= 240
X= 240
Y= -180
Y= -180
1.
Introduction to Scratch Programming (2 nd Edition)
Page 2 of 18
Use the scissor
tool to delete
the cat.
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
2.
Click the
new sprite
button.
3.
4.
Introduction to Scratch Programming (2 nd Edition)
Page 3 of 18
Choose the
Things folder.
Choose the
Drawing Pencil
sprite.
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
9.
3 – Creating and Using Graphics
5.
Use the scissor tool again to delete the
script that comes with the pencil.
6.
From the purple Looks menu, pull in the
show command.
7.
From the dark green Pen menu, pull in the
clear command.
8.
From the dark blue Motion menu, pull in
the go to command.
Set the coordinates of the go to command to x: 0 and y: 0.
10. Double-click all the commands (the pencil should appear).
Introduction to Scratch Programming (2 nd Edition)
Page 4 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
11. Copy these scripts.
This script always clears
the screen, and shows and
centres the pencil
whenever you press the
space bar.
This script draws a square
using coordinates when
you click the green flag.
Introduction to Scratch Programming (2 nd Edition)
Page 5 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Using negative coordinates
This section of script creates a triangle.
The change pen colour by command
changes colours (you can experiment with
the values).
Introduction to Scratch Programming (2 nd Edition)
Page 6 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
12.
3 – Creating and Using Graphics
Create these additional scripts.
This script creates a circle.
This script creates a hexagon.
13. Link all the scripts for the square, triangle, hexagon and circle together.
14. Run the script and you should see the result pictured.
Introduction to Scratch Programming (2 nd Edition)
Page 7 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Using Broadcast
You can run each script separately and then link them using the broadcast command.
15. Introduce the broadcast command into
the script area and click the down
arrow.
16. Select new.
17. Create new messages called triangle,
hexagon and circle.
18. Add the broadcast command to the end of each section of script.
19. Add the when I receive commands to the top of the triangle, hexagon and circle scripts to create the
script shown in the picture below.
The show and hide options should make the pen appear and disappear.
Introduction to Scratch Programming (2 nd Edition)
Page 8 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Extension Activity 1
1.
Disable your existing scripts by removing the when green flag clicked command from the script.
2.
Use the script you created earlier to clear the screen, and show and centre the pencil.
3.
Copy the script below to draw a small circle (hint: 24 × 15 = 360 degrees). This ‘repeat’ script will
become a building block for more complex scripts.
Introduction to Scratch Programming (2 nd Edition)
Page 9 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Drawing More than One Circle to Create a Pattern
4. Edit the script as shown and then run the script.
Changing Colours
5. Edit the script as shown and then run the script.
Introduction to Scratch Programming (2 nd Edition)
Page 10 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Making the Pen Appear and Disappear
6. Add in show and hide commands from the looks menu at the beginning and end of the script.
This command starts the script.
This command clears the previous drawing.
This command sets the start position of the
pencil.
This command sets the pen size.
This command shows the pen.
This command repeats to draw 10 circles.
This command changes the pen colour for each
circle.
This command changes the start position for
each circle.
This command repeats to draw each separate
circle by putting the pen down then lifting it.
each time.
This command hides the pen at the end.
Introduction to Scratch Programming (2 nd Edition)
Page 11 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Over to You
Now that you have learned the basic of pen programming, you can experiment with your own ideas and
designs.
Extension Activity 2
Use the skills that you have learned to create a program that writes your own name.
Hint: Plan the coordinates on squared paper first.
Introduction to Scratch Programming (2 nd Edition)
Page 12 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Exercise 2 – Using Sprites from Outside of Scratch
Understanding the Best Graphic File Types to Use for Scratch
There are four main different types of files used for pictures on the Internet. These are: bitmap, JPEG,
PNG and GIF.
Each of these file types has different properties and, although you can use any of these in Scratch, only
two are suitable because they support transparent backgrounds.
File type
BMP
JPEG
PNG
GIF
Stands for....
Bitmap
Joint Picture Expert Group
Portable Network Graphics
Graphic Interchange Format
Supports transparent
backgrounds
No
No
Yes
Yes
Suitable for Scratch?
No
No
Yes
Yes
It is very easy to convert between these file types using standard software such as Microsoft Paint, but it is
more difficult to create a transparent background from a file that did not have one to start with.
When importing sprites, it is much easier to start off with a file of the correct type which already has a
transparent background.
1.
Open a suitable Internet browser.
2.
Go to the Google Images advanced search options to limit your search to GIF or PNG files.
3.
These are the image file types that support transparent backgrounds.
Introduction to Scratch Programming (2 nd Edition)
Page 13 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
4.
Choose a sensible image and save the picture in your own folder.
5.
Working in Scratch, click the centre button next to the words New sprite: below the stage.
6.
Browse for the location where you stored the image that you found on the Internet.
Introduction to Scratch Programming (2 nd Edition)
Page 14 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
7.
3 – Creating and Using Graphics
When the sprite appears on the stage, resize if necessary using the tool at the top of the screen.
Resize tools
Editing the New Sprite so that it Can be Used as a Drawing Tool
8. Click the Costumes tab and then the Edit button next to the sprite costume.
9.
Click the Set costume center button, then move the cross lines so they line up where you want them to
be (in the example at the tip of the pencil).
Introduction to Scratch Programming (2 nd Edition)
Page 15 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Extension Activity – Editing the New Sprite to Create Animation
1.
Select the new sprite.
2.
Click the Costumes tab.
3.
Click Copy to create a new costume.
4.
Click the Edit button to change the second costume and use the Paint Editor to edit the sprite (in this
example it is reversed).
Introduction to Scratch Programming (2 nd Edition)
Page 16 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
5.
You should now have two costumes with the second one reversed.
6.
Now create a script that animates the sprite from one costume to the other.
Introduction to Scratch Programming (2 nd Edition)
Page 17 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3 – Creating and Using Graphics
Use what you have learned to make the new sprite draw shapes of your choice.
Introduction to Scratch Programming (2 nd Edition)
Page 18 of 18
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Lesson 4 – Pac-Man-Style Game
What you will learn:

how to delete, draw, animate and resize a sprite

how to move a sprite using keyboard control

how to design a maze on the stage

how to stop the sprite moving over the maze

how to get rewards to randomly appear and disappear

how to set up scoring

how to chase the Pac-Man with an automated sprite
Ideas for developing the game further:

Introduce more rewards.

Set a time limit or a target score.

Introduce further moving sprites that work against the player.

Make it into a two-player game.

Further sprites could be added to block/unblock sections of the maze. This could make the game
change as it is played.

There could be different levels with the background changing after a time.
Contents
Exercise 1 – Creating the Maze ...................................................................................................................... 2
Exercise 2 – Creating the Packman ............................................................................................................... 4
Exercise 3 – Creating Variables ..................................................................................................................... 8
Exercise 4 – Setting up the Points Score ....................................................................................................... 9
Exercise 5 – The Chaser ................................................................................................................................ 11
Introduction to Scratch Programming (2 nd Edition)
Page 1 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Exercise 1 – Creating the Maze
1.
Select the scissor tool and delete the cat sprite.
2.
Click the stage icon.
Introduction to Scratch Programming (2 nd Edition)
Page 2 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3.
Select the Backgrounds tab and click Edit.
4.
Use the Fill tool and set the whole background to red.
5.
Set the pen colour to black and draw a simple maze on the background.
6.
Click OK.
Introduction to Scratch Programming (2 nd Edition)
Page 3 of 12
4 – Pac-Man-Style Game
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Exercise 2 – Creating the Packman
1.
Click the Paint new sprite button.
2.
Working in Paint Editor, draw an orange circle.
Introduction to Scratch Programming (2 nd Edition)
Page 4 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
3.
Working on the Costumes tab, click Copy.
4.
Select the copied costume and click Edit.
5.
Select the transparency colour from the colour chart.
Introduction to Scratch Programming (2 nd Edition)
Page 5 of 12
4 – Pac-Man-Style Game
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
6.
Paint the open mouth of the Packman. Click OK.
7.
Rename the sprite to Packman and costumes to Packman1 and Packman2.
8.
Click the shrink sprite tool and resize the Packman so that it will fit in every part of the maze.
Introduction to Scratch Programming (2 nd Edition)
Page 6 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
9.
4 – Pac-Man-Style Game
Create the scripts for the Packman as shown.
Animates the Packman
Remember to set the wait times to 0.1 seconds.
These commands allow the player to drive
the Packman using the arrow keys.
This command makes the Packman bounce
off the maze.
Use the pipette tool to set to the same colour as
the maze.
Introduction to Scratch Programming (2 nd Edition)
Page 7 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Exercise 3 – Creating Variables
1.
Click the Variables instruction set and click Make a variable.
2.
Make a variable called Score.
3.
Amend the animation script so that it sets the position of the sprite to top right-hand corner of the
game and resets the score to zero at the beginning of each game.
Introduction to Scratch Programming (2 nd Edition)
Page 8 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Exercise 4 – Setting up the Points Score
1.
Click Choose new sprite from file.
2.
Browse for the Things folder.
3.
Select the banana. Click OK.
Introduction to Scratch Programming (2 nd Edition)
Page 9 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4.
4 – Pac-Man-Style Game
With the banana sprite highlighted, create the script as shown.
This command sets the start position.
This command shows the banana.
This command makes something happen if
the banana touches the Pac-Man.
This command changes score.
This command hides the banana.
This command waits a
random amount of time.
This command chooses a random position.
This command shows the banana.
Introduction to Scratch Programming (2 nd Edition)
Page 10 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
Exercise 5 – The Chaser
1.
Create a new sprite that will chase the Pac-Man and end the game if it catches it!
2.
Create the chaser script as shown.
This command sets the starting position.
This command sets the starting direction.
This command chases the Pac-Man.
This command makes the sprite bounce
off the maze.
This command makes the sprite bounce
off the banana.
This command ends the game if the
sprite touches the Pac-Man.
This command makes the sprite bounce
off the edge.
Introduction to Scratch Programming (2 nd Edition)
Page 11 of 12
© ZigZag Education, 2013
Introduction to Scratch Programming v1.4 (Second Ed)
4 – Pac-Man-Style Game
The game should look like this when it starts:
Introduction to Scratch Programming (2 nd Edition)
Page 12 of 12
© ZigZag Education, 2013