Learn scratch programming ebook

I created this sprite using these tools: Click Ellipse Tool and click hollow mode.. 21 Lesson 3: Adding Music Dance to the Beat In this lesson 2, we make our sprite dance.. Step 2: Mo

1

‘

Scratch Programming

By Jessica Chiang

2

Content Index

Introduction: What is Scratch? 4

Lesson 1: Introducing Scratch and Creating Sprite 5

Step 0: Learn What Can You Do with Scratch 5

Step 1: First Look at Scratch 6

Step 2: Create Your First Sprite 8

STEP 3 CREATE BACK, LEFT SIDE, and RIGHT SIDE VIEWS 11

Lesson 2: Animating a Sprite (Dance) 15

Step 1: Dance 15

Step 2: Finishing and Testing 18

Step 3: Kick Up a Notch 19

Lesson 3: Adding Music (Dance to the Beat) 21

Step 1: Dancing and Popping 21

Step 2: Hip-Popping 22

Step 3: Wrapping it up 24

Lesson 4: Create a Music Sprite 25

Step 1: Create a Music Sprite 25

Step 2: Move Music Loop to the Music Sprite 28

Step 3: Turn Music On and Off 30

Lesson 5: Working with the Stage 33

Step 1: Create a Simple Scene 33

Step 2: Adding Simple Movement Scripts to Sprites 34

Step 3: Do the same for Donut Man and Donut 36

Step 4: Test 38

Lesson 6: Create Music with Music Tool Kit & Audacity 39

Step 1: Create a Tune using Sound Tool Kit 39

Step 2: Create a Sound Clip using Audacity 41

LESSON 7: TURN YOURSELF TO A SPRITE USING GIMP 48

Step 1: Get GIMP 48

Step 2: Load a Photo of Yourself to GIMP 49

Step 3: Select Yourself in the Photo Using Free Select Tool 50

Step 4: Delete the Background 53

Ste 5: Save the Result Image 55

Step 6: Import Yourself to Scratch 57

LESSON 8: PROJECT – MANIKIN DANCE 61

Step 1: Create the Manikin Parts 61

Step 2: Connect Body Parts Together 63

3

Step 3: Create Multiple Dancing Postures 66

Step 4: Make It Dance 72

Lesson 9: The Pong Game 74

Step 1: Understand how the Pong Game works 75

Step 2: X-Y Coordinate System and Rotation in Scratch 78

Step 3: Modify the Pong Game 80

LESSON 10: STORIES TO ANIMATION PART I 82

Step 1: Create a Story Line 82

Step 2: Create Sprites 83

Step 3: Creating the Village Background 84

LESSON 11: STORIES TO ANIMATIONS PART II 101

Step 1: Get to Know Your Stage 101

Step 2: Put Storyboard Together 103

Step 3: Create Scene Transition Using Broadcast Messages 105

LESSON 12: SCROLLING PLAFORM GAME – Game Design 117

LESSON 13: SCROLLING PLATFORM GAME – SPRITES 123

LESSON 14: SCROLLING PLATFORM GAME – GAME RULES 135

LESSON 15: Scrolling Platform Game – Platforms 144

Lesson 16: Mini Mario Game Part 5 – Scrolling Intro 158

Lesson 17: Platform Game Wrapup 167

Step 1: Create a Variable to Represent Scrolling Amount 167

Step 2: Make Platforms Scroll 168

Step 3: Modify the Brick and CoinToPass to Stop Them from Following Mario 171

Step 4: Upgrade the Bullet and Turn Brick to a Mini Platform 174

CONCLUSION 177

4

Introduction: What is Scratch?

Scratch is developed by the Lifelong Kindergarten group at the MIT Media Lab Here is how Scratch website describes Scratch

"Scratch is a new programming language that makes it easy to create your own interactive stories, animations, games, music, and art and share your creations on the web."

I started to use Scratch about one and half year ago and am amazed at howwell it's designed I've been a professional programmer for more than 8 yearsand started to use Scratch to teach my 9-year-old boy and his classmates toprogram I also used it to create small educational software for kids I am

amazed at how well Scratch is designed and how fun it is to use With this

series, I aim to guide you, step-by-step, to go from creating animating Sprites(Lesson 1 to Lesson 4), the Stage (Lesson5), using Scratch multimedia

tools(Lesson 6 and Lesson 7), creating 2D animations (Lesson8 to Lesson9), then finally to creating a scrolling platform Scratch Game (Lesson 10 to

Lesson15) To showcase your creation, I will show you how to share your

projects, both on Scratch site and on your own Google Site to display (Lesson16)

5

Lesson 1: Introducing Scratch and Creating Sprite

Have you heard of Scratch? No, not what you do to your itch, but Scratch fromMIT the famous school for the curiously brainy people? If you have not heard,seen, or played with Scratch, then you’ve been missing out Because it is a log

of FUN!!!

Step 0: Learn What Can You Do with Scratch

Scratch is a programming language for all, even for kids In fact, Scratch,

unlike all other programming languages, is designed first and foremost for

kids Because it’s designed for kids, it’s very easy to learn and use They cancreate animations like never before For older kids or teens, they can create single-level or multi-levels Scratch games

But Scratch is not just for kids or teens Teachers and adults can use Scratch

to create effective education tools such as math quiz, physics simulation, andeducational videos

Since I knew about Scratch from a coworker, I have been using Scratch,

teaching Scratch, and now writing on Scratch As you can tell, I just cannot get enough of Scratch I have two school-age boys and I’ve been looking for ways to quickly create games and animations to help them learn Scratch is what I’ve been looking for and more It’s just a tool so awesome, so fun, and

so easy to use and master, that I am sure, once you start, you will be just likeme: Can’t Get Enough!

6

Without further ado, let’s start using Scratch!

Step 1: First Look at Scratch

Start Scratch Program Sprite Preview lets you preview a project Sprite

Selection and Creation lets you select an existing Sprite or create a new

Sprite Sprite Editor lets you edit a Sprite’s Scripts, Costumes, and Sounds Tool Box is like a bucket of Lego; it provides single script blocks for building combo script blocks

Let’s take a look at available sample projects Click “Open” on the top of the Scratch window

8

Step 2: Create Your First Sprite

Now let’s create our first sprite Delete the cat sprite by right click on “sprite1”and select “Delete” Then click the (“Create new sprite” button) to openthe Paint Editor I created this sprite using these tools:

Click Ellipse Tool ( ) and click hollow mode ( ) Draw three circles

9

Click Ellipse Tool ( ) and click solid mode ( ); draw a littledark solid circle inside the medium circle, which will be the eye Use Eraser tool ( ) to trim the smallest circle; this will be the ear

10

Use Fill Tool ( ) to fill the face and the eye ball

Click Select Tool ( ) button and select both eyes; move them to the face

Click Select Tool ( ) button and select left ear; drag it to its place

STEP 3 CREATE BACK, LEFT SIDE, and RIGHT SIDE VIEWS

To create back view, make a copy of costume “front” (click “Copy” button next

to costume “front”) Use Erase tool to erase eyes and mouth Use Eyedroppertool to copy the face color Then use Fill Tool to paste the color in the empty area Click OK to save Rename this costume as “back”

12

Then copy the costume “back” Erase extra body parts Redraw body parts

Refill color of the face and the pants using Eyedropper Tool and Fill Tool Click

OK to save and rename this costume as “facing left”

13

Copy the costume “facing left” and click to flip the figure horizontally

Click OK to save and rename the costume as “facing right”

We’ve just created four costumes for the same sprite: “front”, “back”, “facingleft” and “facing right”

14 THIS CONCLUDES TODAY’S LESSON IN NEXT LESSON WE WILL MAKE HIM

DANCE

15

Lesson 2: Animating a Sprite (Dance)

In Lesson 1, we created a sprite and also created four costumes: “front”,

“back”, “facing left”, and “facing right”

In this lesson, we will make our sprite dance

Step 1: Dance

Open the “dance” project that we created in Lesson 1 Click “Sprite1” and

change its name to “dancer1”

17

Click “Looks” Drag out “next costume” block and drop it inside “forever” block

to form a combo block

18

Step 2: Finishing and Testing

We are almost done with creating our first animation To wrap it up, drag

“when clicked” and drop it above “forever” block Now click the button

to start the animation switch

We are done with the first animation Try viewing in full-screen mode or

“presentation mode” by clicking

19

Step 3: Kick Up a Notch

You can add more costumes or make dancer1 dance faster I added two extracostumes: “front2” and “back2” I also change “wait 1 secs” to “wait 0.5 secs”

to make dancer1 dance faster

20

21

Lesson 3: Adding Music (Dance to the Beat)

In this lesson 2, we make our sprite dance In this lesson, I will show you how

to make him dance to the beat And not just to the beat but to the Hip-Pop

beat!

Step 1: Dancing and Popping

Open project “dance” Select sprite “dancer1” and click “Sound” button

Drag “play sound pop” block and drop it under “next costume” block Now click

to play

23

Click each clip to listen to the demo “DrumMachine”, “HipHop”, and

“HumanBeatbox1” are among my favorites So I think they are cool enough for our first loop Import all three Delete the less interesting “Pop” Now the Sounds editor for sprite “hip-pop” should now look like the snapshot below

24

until done blocks and drop it under first play sound _ done

block Select sound for each block to your liking Double click this combo block

to test

Step 3: Wrapping it up

Remove the “play sound pop“ block from the motion combo block Then add a

“when clicked” on top of the music combo block

25

Lesson 4: Create a Music Sprite

In this lesson, I will show you how two sprites can communicate with each

other via variables We will use the dancer sprite created from Lesson 3 but extract its music playing scripts to a new sprite call Hip-Pop

Step 1: Create a Music Sprite

Let’s create a Music Sprite or a sprite that controls playing and stopping of

background music To create a new sprite, click to open Paint Editor

27

Select “drum1” or whatever image you like Then click “OK” to save

Rename this new sprite to “hip-pop” It’s seems big for me so I shrink it with

“Shrink Sprite” tool

28

Then use “Move” tool to move the “hip-pop” sprite to wherever you see fit

I place it next to dancer1’s feet

Step 2: Move Music Loop to the Music Sprite

Drag the Music Combo Block from dancer1’s Scripts Tab

29

Drop it to be over sprite “hip-pop” icon Wait until the “hip-pop” sprite is

highlighted before releasing the mouse

Sprite “hip-pop” now has the music combo block from “dancer1”

Delete this same combo block from “dancer1” so there will not be echoing

30

Step 3: Turn Music On and Off

To turn music on and off, we need to create a virtual switch Like a real switch,

a virtual switch can be on or off To create a virtual switch, we use Variables.Select “Variables” Tool Box, and click “Make a variable” button Then enter

“switch” for Variable name

I would like this switch to work this way:

When the animation first starts, the music is playing and

the switch is on Click the “dancer1” sprite to turn it OFF,

and click the “hip-pop” sprite to turn it ON again If the

switch is ON, music is ON; if the switch is OFF, music is OFF

31

For this switch to work, we need following blocks:

For sprite, we will add three new combo blocks The first combo blockturns the switch ON (set music on to 1) when is clicked

The second combo block turns the switch ON (set music on to 1) when

“hip-pop” is clicked

Finally, the third combo block keeps checking if the switch is OFF (switch = 0)

If OFF, then stops all sounds

32

For sprite, we will add one combo block This combo block will turns the switch OFF if “dancer1” is clicked

The Scripts tab of your “dancer1” sprite should look like this

The Scripts tab of your “hip-pop” sprite should look like this

33

Lesson 5: Working with the Stage

A scene, like a movie scene, sets the tone of the story and provides a platformfor the characters in the story

Step 1: Create a Simple Scene

To create a scene, we change the costume of “Stage” We will add two housesand a plate to the “Stage” To do so, double click the Stage icon to select Thenclick “Costumes” and select the only costume, “background1” and hit “Edit”

button

Change the costume by adding two houses and a plate When done, hit “OK”button

34

Step 2: Adding Simple Movement Scripts to Sprites

If you have not already, create three sprites: Mr Meow, Donut Man, and

Donut Now let’s add scripts so that all sprites will show up in the right placeswhen the animation starts (when the Start Flag is clicked)

Move Mr Meow around on the stage and its x-axis and y-axis values would beupdated accordingly

A cool feature is that when sprites are moved, the Motion blocks in the Tool

Box are updated as well

35

To build Mr Meow’s scripts, select Mr Meow from the Sprites Area, then click

“Scripts” tab

From the Tool Box, click the “Control” button and drag “when Start Flag

clicked” block to drop it in Scripts work area

36

Then click “Motion” button in Tool Box Selection and drag “glide 1 secs to

x:-183 y:-110” to the Stage Then attach it under the “when Start Flag

clicked” block

Then click “Looks” button in Tool Box Selection, and drag “switch to costume1”

to the Stage Then attach it under the “glide 1 secs to x:-183 y:-110”

Step 3: Do the same for Donut Man and Donut

In the same way, create the following script for the Donut Man and the Donut.Drag each sprite to a spot you like I dragged my sprites as shown in the

snapshot below but yours will probably be a bit different than mine It’s OK Oryou can enter the x-y values by hand so they are exactly the same as mine

37

Below is what result scripts should look like Again, your x-axis and y-axis

values might be different than mine - it’s OK Mr Meow will glide to x:-184

y:-110 after 1 second and then switch to costume “costume1”

Donut Man will glide to x:-172 y:114 after 1 second and then switch to

costume “regular”

38

Donut will glide to x:-3 y:17 after 1 second and then just show

Step 4: Test

TEST: Move sprites around in the Stage and clicking to see all of the

sprites gliding back to their positions

39

Lesson 6: Create Music with Music Tool Kit & Audacity

In lesson 6, I will show you how to create a tune using Scratch’s

Sound Tool Kit Moreover, I will also show you how to use Audacity®

to create a Scratch sound clip from a MP3 or WAV file

Step 1: Create a Tune using Sound Tool Kit

To add a music script to a sprite, select a sprite and click Sounds Tab

Drag out a “play note ? for ? beats” Click the down arrow to bring up the keyboard

40

To create a simple tune that goes Do-Re-Mi, make a script combo

block like the one below DOUBLE CLICK this block to test it

To add pause between notes, use the block

This is the script which plays the tune of Twinkle, Twinkle Little

Star

41

Step 2: Create a Sound Clip using Audacity

Creating a song using Sound Tool Kit is fine but it takes too much

time Let me clue you in on this wonderful tool called Audacity

Audacity® (http://audacity.sourceforge.net/) is free, open source

software for recording and editing sounds It is available for Mac OS

X, Microsoft Windows, GNU/Linux, and other operating systems