Book Image

Scratch Cookbook

By : Brandon Milonovich
Book Image

Scratch Cookbook

By: Brandon Milonovich

Overview of this book

Scratch 2.0 is an easy to use programming language that allows you to animate stories and create interactive games. Scratch also gives you the capability of using programming to calculate complicated calculations for you. Scratch Cookbook will lead you through easy-to-follow recipes that give you everything you need to become a more advanced programmer. Scratch Cookbook will take you through the essential features of Scratch. You'll then work through simple recipes to gain an understanding of the more advanced features of Scratch. You will learn how to create animations using Scratch. Sensory board integration (getting input from the outside environment) will also be covered, along with using Scratch to solve complicated and tedious calculations for you. You'll also learn how to work through the exciting process of project remixing where you build on the work of others. Scratch Cookbook will give you everything you need to get started with building your own programs in Scratch that involve sounds, animations, and user interaction.
Table of Contents (17 chapters)
Scratch Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The Hello World project


If you've done much programming before, you may have already seen a program similar to this. If this is your first time programming and you go on to learn more, it is likely you'll get used to doing many of these types of programs. It is customary in many programming packages for your first experience to be a Hello World program.

Getting ready

This is a rather simple program that we'll work with for the rest of the chapter to get us settled in Scratch. Our first task is to get our sprite to tell the world "hello". From there, we'll do a few other fun things.

How to do it…

Follow these steps:

  1. Use the background and sprite you imported from earlier in the chapter or import new ones; it's up to you!

  2. Activate the script area you need by clicking on the sprite you have in the program in the area below the stage (not the stage itself). If you were working with backgrounds above, you may need to go to the script area, and then change the tab from Costumes to Scripts.

  3. Next, we need to work with the block palette to build our program. First we'll give the sprite the functionality to output hello world to the screen. Remember the Block palette we talked about in the beginning of the chapter? Now it's the time to put it in use. Click on the second category of blocks labeled Looks. These purple blocks handle anything to do with the appearance of your sprite.

  4. Now from the Looks category, click and hold the block to the script area.

  5. Click on the area that has the word Hello!, and then change this to say Hello World!. If you want, you can also change the 2 to any other number you'd like. This number 2 represents the amount of time our message will be displayed.

  6. Try double-clicking on your newly added block. Watch the stage. Your sprite will display the message, and you have created your very first program. Don't worry; they get much more fun as we go along!

    Let's continue by adding a control block to our script.

  7. Choose the Events category. Drag over the first block in this category and drop it right on top of the Looks block we already placed on the stage.

    They look together as puzzle pieces, and you'll see a white line as you hover over the spot (which Scratch is anticipating you will drop the block onto). This can be tremendously useful once you get into having several blocks within others.

    Note

    The preceding screenshot is known as a top-hat block. It gets its name from being like a top-hat and going on top of a script. These top-hat blocks are ones that start of a sequence of programming and can't be built on from above. Almost all of the blocks from the Events category are top-hat blocks.

  8. Now that we have the "When green flagged clicked" block in our program, we no longer have to double-click on the script to run the script. If you click on the green flag on the stage, everything underneath the When green flag clicked block will run for us. We'll start most of our programs this way, so that we'll get accustomed to just dragging it in quite often.

How it works…

So, what is happening behind the scenes right now in our program? Basically, when we click on the green flag on our stage, this sends a signal throughout the program that is received by the When green flag clicked block (known as a listener). Once this listener is activated, the program sequentially works through the list of commands connected to the When green flag clicked block until they are all completed. Once finished, the program is done. As you'll see in some of our programs later, you can have as many of these listener blocks in your program as you want. You can then run multiple parts of your program simultaneously.

There's more…

Now that we have this basic program, why not make it a little more interesting? Scratch gives us so many ways we can do just that! Let's take the chance now to add a bit more to our Hello World program.

Note

Saving your work in any type of programming you do is important! Stop now and change the name shown above the stage to something you'll remember. By default, Scratch saves to your own project folder on the Scratch website. Give the file a name. If you view the project page, you can add notes and instructions to your project.

Adding some motion

The next thing we'll do is make our sprite move across the stage. Under the Motion category of blocks in the block palette, grab the first block and drag it underneath the current set of blocks you have. It looks similar to the following screenshot:

You now have three blocks in your script for this program. The following are the steps to be performed to move our sprite across the stage:

Click on the green flag on the stage. You should see your sprite greeting you with the Hello World! phrase from before, and then move the sprite a small amount to the right.

Note

Movement to the right is denoted by positive numbers, and movement to the left is denoted by negative numbers (unless of course you change the sprite's direction using other motion blocks). An easy way to think of it is the comparison to an x-y coordinate plane; it works the same way.

We can continue to press the green flag and our sprite will move. Experiment a bit with the value in the motion block you just added. Change it to a larger number, then maybe even a negative number.

What if we want our sprite to keep moving though once we press the green flag? This part is easy! We're going to introduce a new block that you're going to learn to use quite a bit when you program. Under the control set of blocks, you'll see the one that is labeled forever. It looks as though it wraps around something, and it does! We're going to call this a forever loop.

Note

A forever loop is also called sometimes an infinite loop in programming. Once you get into higher-level languages, you might find an infinite loop to be trouble. Can you guess why? It's because if you make a complicated enough program, you may not know when the infinite loop is continuing forever, so it has the potential to wreak havoc on your program. It's hard for that to be an issue in Scratch, though, so we won't worry too much about that for now.

Drag this forever loop into your program. As you drag, essentially try and place it between the looks block you added and the motion block. The forever loop will expand as you hover, so it looks like it will wrap around the motion block.

Your code should now look similar to the following screenshot:

Try pressing the green flag and see what happens. Your sprite should move to the end of the stage and then stop. Our goal is to get our sprite to bounce off the screen and then go back and forth.

In the Motion blocks, we'll see another block we can use to make this happen. It's called the if on edge, bounce block, which is towards the bottom of the list. Drag this block directly underneath the move 10 steps block we've added already, and still in the forever loop. You should immediately see your sprite begin to bounce back and forth on the stage. If not, try clicking on the green flag button again.

Special sprite settings

You've probably noticed by now that your sprite isn't staying upright as it bounces across the screen. Scratch has some easy settings to fix this. On your sprite, if you want to access settings (shown beneath the stage), click on the small blue icon in the corner. You'll see the following screenshot:

Here we have several bits of information that can be helpful in building our programs. Notice the three buttons to the left of the picture of your sprite. The following are the ways in which these buttons affect the orientation of your sprite:

  • If you click on the first button, your sprite will be able to rotate when it bounces off of objects such as the edge of the screen. This is the default for every sprite in Scratch.

  • If you click on the second button, this fixes the orientation of your sprite such that it will only face back and forth. Click on this one for our Hello World program; your sprite should straighten out and then move across the screen as you would expect an animal or person to do.

  • The last one fixes the orientation of your sprite completely. It won't change the direction the sprite will be looking, and your sprite won't go upside down at all. This may be useful in future games we make where we want fixed objects moving.

Now we'll examine a few of the other things that are in the sprite settings area. The first of these is the label for the sprite, ours is currently labeled Sprite1. You can change this name to anything you want that might make it easier to identify throughout your program. This is particularly helpful when you make a more complicated program that has many more sprites to keep track of.

Also, take a look at the three numbers below the sprite label. Two of these, the x and y values, tell you the location of your sprite on the stage. Remember how we said the stage is essentially a coordinate plane? Think of the center as the origin where x: 0 and y: 0. Negative values move to the left (or down for y) and positive values move to the right (or up for y). You also see a direction label. This tells you the direction your sprite is currently facing in degrees.

Note

Before proceeding with the next part, try changing the number of steps your sprite moves within the loop. Change the number first from 10 to something higher, and then try a lower number between 1 and 10. You'll see this adjusts the speed of your sprite when it's in the loop. This is because the sprite moves the number of steps you set and then continues to repeat. By increasing the number you are increasing the number of steps that occur only one time through the loop, but not increasing the time it takes. As a result, your sprite speeds up. This works the same way in decreasing your speed with a lower number of steps.

Pointing towards the mouse

Now let's say instead of our sprite just bouncing back and forth on the screen, we want to have it follow our mouse. This can be a nice addition to our program, and may come in handy in future programs we make.

The following are the steps we have to do in order to accomplish this:

  1. Drag in a new block from our Block palette. Notice the Motion block that says point towards has an empty space. Click on the down arrow in this empty space, and then select mouse pointer.

  2. Now drag this block into the program directly underneath the if on edge, bounce block.

    Note

    If you have other sprites in your program, you can change the point towards block to point at other sprites in the program. This might come in handy in later programs where we have objects "chasing" other objects.

  3. Now run your program by clicking on the green flag. Move your mouse around the stage; and your sprite will follow the pointer.

Note

A convention we'll use in this book for blocks such as the block we just used is to indicate with parentheses customizable areas such as blank spaces or drop-down selections. For example, for the last block, we'd refer to it as the point towards block.

Duplicating code

It's not going to take too long for us to add more and more sprites to our programs. Let's learn how to do this now while we're still getting started. There are two ways to accomplish this:

Our first task is to copy code to a new sprite. The following are the steps to perform this task:

  1. Begin by importing a new sprite into your program. Recall from above how to do this.

  2. Once you have a new sprite, keep the script area from the original sprite selected and then click and hold the top-hat block containing all of our code so far.

  3. Drag this over the area underneath the stage showing all of the sprites.

  4. Drop the code on top of the new sprite.

It won't look similar to what had happened before, but you'll be able to click on the new sprite now and see that the exact code you just dragged in is duplicated there. This can be a great method to duplicate code you need for many sprites.

Run your program and test what we've done. You should see both sprites greeting the world, and then follow your mouse pointer around the stage.

Now we can also consider a situation where we might want to duplicate the code within a sprite. This part isn't really necessary for our Hello World program, but it is nice to know how to perform this using the following steps:

  1. Remember those four buttons we talked about above the stage? The first one is a clone tool. Click on this tool, and then click on the part of the code you wish to duplicate. This can either be the top-hat block containing all of the code, or just some of the blocks below it.

  2. As you move your mouse, you'll see that you are dragging a copy of the code you just clicked. Click anywhere in the script area to drop the code. If you were duplicating just a piece of code (note that because we used a forever loop, we can't do this part now), you can add it to the bottom of the code you are copying. If you have repetitive actions that need to occur in sequence, this can be an easy way of copying code quickly.

  3. Try adjusting your program a bit to get used to Scratch.

  4. Select the script area of your second sprite and change the number of steps per loop that run. If your first sprite is still set to 10, change the other sprite to something (for example, 2 or 3). Experimenting with various blocks and programs we develop here in this book will be a great way to become a Scratch expert pretty quickly.

We've done a lot of introductory tasks to get our Hello World program working in this chapter. You should now have a good understanding of the basics that you need to complete everything in this book. Each chapter will lead you into a different aspect of programming with Scratch, many of which will get you into more and more advanced programs as you go. As it was mentioned before, be sure to follow along near your computer and work with Scratch as you go. Practicing as you go helps you build your skills much better than just reading along.

Most importantly, have fun!

See also

This chapter is focused on the basics you'll need to get going in Scratch. In our next chapter we're going to focus on getting you ready to use Scratch to tell stories. If you're not looking to tell stories, it still may be useful to look over some of the recipes in Chapter 2, Storytelling to prepare you for using some of those techniques in other things we'll do later on in the book.