(For more resources related to this topic, see here.)
Adding words to a sprite
One of the first things we need to know to tell a story using Scratch is to display words on the screen to convey the story.
Getting ready
Start off by importing a new sprite (unless you like the default) as well as a background you like. Also, start thinking about a story you want to tell—or you can just follow what we do here!
This family of blocks are the say and think blocks:
So what’s the difference between all of these blocks?
Two of these blocks help with timing. These are the first and third in the picture that include a time condition. These are the ones we will focus on because we generally want to control how long the words are displayed on the screen.
The story we are going to make here is going to be told by Monkey Mike. We labeled our sprite this to make understanding the logic of the programming a bit easier.
Now we’re ready to get building a story!
How to do it…
Follow these steps to get going:
- Drag over the block with the green flag that we used to start our programs from the Events category. We’ll start our story by clicking on the green flag on the stage.
Still using the older version of Scratch (Scratch 1.4)? All of the blocks in the Events category can be found in the Control category. This new category was added with the new version of Scratch.
- Next, we’re going to return to the Looks block category and drag over the think block, the first one including the timing.
- Enter Hmm…I guess I’ll start telling a story. into the text block.
- Click on the green flag and test the program. You should see a thought bubble pop up as if your sprite is thinking. It should be similar to the following screenshot, depending of course on the background and sprite you chose:
You may wish to adjust the number of seconds for which the thought bubble appears. You do this by changing the number associated with the think block in the code. Enter the number of seconds it shows for how long you expect your viewer to need to read the text. The same rule applies for other texts being displayed.
- Now, we can drag in our next block—the say block—again including the timing element.
You might be wondering what is the difference between the say and think blocks. Both accomplish similar goals. You can think of them as cartoons. The think block imitates the thoughts of the character while the say block suggests that the character is saying something. Note that neither makes the character make a noise.
- Enter the text in this block as Hi, my name is Monkey Mike. We can continue creating a basic story by adding more and more of these blocks to our code.
If you want to end your story with the text remaining on the screen, just use the say or think block without the timing element. This will keep the text on the screen until the viewer either starts the program over or does something else to trigger it (we’ll learn more about this option later).
How it works…
So far, this program is relatively simple. Our code so far is:
We can see this sequence of code starting off with the green flag being clicked. Following that, our sprite thinks about starting the story, and then he begins. Naturally, your program may vary depending on how much you’ve digressed from the story we are using here.
See also
- For more information about timing your story, particularly with multiple sprites in the story, see the next recipe, Adjusting the timing
Adjusting the timing
There is a good chance that the story you have in mind includes more than one sprite. This means that you are also going to need to think about timing in your story since you don’t want to have both sprites talking at the same time.
Timing can become more and more complex depending on the program, especially as you add more and more sprites and length to your story. A good way to handle this situation is to think ahead of time as to when you want your sprite to speak, and when you want them to simply observe. Having this planned out will help you program much more quickly.
Getting ready
Continuing with our existing story, add another sprite. For example, we added a frog to our program in the bottom center. Copy over the same code (that we used for the first sprite) to make the second sprite think and talk. Note that if you duplicated the sprite, this is done for you. You’ll notice both of them talking at the same time, which is what we are going to learn to fix (see the following screenshot showing roughly what you should see). Our example is relatively simple, but you can apply this concept to even the most complicated Scratch programs.
Remember, you don’t need to recreate the code for the new sprite. With the original sprite selected, click and drag all of the code (beginning with the top hat block) on top of the picture icon of the sprite located below the stage. Your code should then appear in the script area of both sprites.
This is what you should see when you run your program:
How to do it…
Our next step is to get the timing right, and then we’ll worry about making our characters say something different from each other. Follow these steps:
- For our story, we want Monkey Mike to start things off and have Frog follow. We know that Monkey Mike thinks for two seconds, so there needs to be a delay of at least two seconds on what Frog thinks. Notice that in the Control blocks we have a block called wait 1 secs with the 1 being an input box for you to change the number. While working in the script area for Frog, drag over the wait block and place it directly underneath the block with the green flag, as shown in the following screenshot:
- Next, change the value in the block you just dragged over to 2 instead of 1.
- Now, we’ll want to add another wait block in between the think and say blocks we have for Frog. Make this block 2 seconds long as well.
- If you run your program now, you’ll still notice a bit of a problem. We still need to make Monkey Mike wait while Frog is talking. Return to the script area for Monkey Mike. Place a wait block in between the think and say blocks, just as we did for Frog. Change this value to 2 as well.
- Now, change the text of Frog’s thought bubble to I wonder if Monkey Mike notices me down here. Then, change the say block to Hi, you can just call me Frog.
- Run your program and see what happens. It should flow much better now that we’ve adjusted the timing.
How it works…
So now you’re probably wondering what is happening behind the scenes. Let’s look at the two pieces of code.
Our code for Monkey Mike is shown here:
And here is the code for Frog:
The biggest thing to notice in thinking about how the script runs in our program is that since both scripts begin with the block with the green flag, both scripts start simultaneously.
In essence, you can have an unlimited number of scripts running simultaneously in Scratch. We’ll learn soon how to get different scripts started with other Events blocks. This will give us much more control over our programs.
While we may have made it appear—when watching the story—that the sprites are waiting for each other, really what is happening is that each script is playing independently of the other. We just adjusted the timing effectively to give the story the timing we want.
There’s more…
Maybe you don’t want to have to click on the green flag to start the story. An alternative is to use the when key pressed top hat block instead, also from the Events category:
If you replace the green flag block with this new block, your story will start by pressing a specific key on the keyboard. By default, the block is triggered by the Space bar. You can change this by clicking on the black down arrow located next to the word space.
You’ll see that this is the block we will use quite frequently (to get different aspects of our program to start) when we get into creating games and other programs.
For now, we’ll stick with using the standard green-flag block for most script starting, but think of this as a good alternative in your own programming.
See also
- For more details on timing, see the Adding words to a sprite recipe
- To see how to get your sprites to interact, take a look at our next recipe, Sprites interacting with other sprites
- Later in this article in the Basic broadcasting and receiving recipe, we’ll explore a fun way to get background communication in your program
Sprites interacting with other sprites
When making your story, there is a good chance you will want to get movement on the stage so your story is a bit more exciting. This recipe focuses on how to have sprites react when they are touching or moving around other sprites.
Getting ready
For this recipe, we’re going to continue working with the story we built in our previous recipes of this article. Our goal for this recipe is to get Frog to move across the screen and react to Monkey Mike when they touch.
How to do it…
Let’s get started:
- To begin the movement of Frog, the user will have to click on the sprite. We’ll need to provide directions to the user in order to accomplish this. At the end of Frog’s dialogue (from before), add another say block and give it the text Click me to get me moving.
- Now we’ll introduce a new top hat block. This is the when this sprite clicked block, located under the Events blocks category. It changes based on the sprite you are working on, so for ours it should indicate you are working with Frog.
- We’ll drag this block over and begin a new script in the script area..
- Drag over a forever loop from the Control blocks underneath our new top hat block.
- Place a move 10 steps block (from Motion) and the if on edge, bounce block (also from Motion) into the forever loop.
Change the number of steps to something low, such as the number 2, to make sure the sprite moves slowly.
- Select the second orientation option in the 3-button option area of the sprite settings, as shown in the following screenshot.
First we have to click on the settings option:
And then:
- Now, if we run our program and click on Frog on the stage, we’ll see Frog move slowly back and forth across the stage. Our next step will be to have the sprites interact when they touch.
- We want Monkey Mike to react when Frog comes in front of him. In order to do this, we’ll need to head over to the Sensing category of blocks. We’ll also need a new Control block. Change the sprite we are working with to be Monkey Mike.
- Underneath the dialog of Monkey Mike, drag over the forever block. This block is going to be triggered by a new sensing block.
- Into the loop you created in step 9, drag an if () then block.
If you are working in Scratch 1.4, steps 9 and 10 can be combined by using the forever if block. This block was eliminated in the new version of Scratch.
- Drag over the touching block inside the look you just created, as shown in the following screenshot:
- Change the touching block by clicking on the black drop-down arrow and selecting Frog.
You can use the touching block to sense when your sprite is touching any other sprite, or the mouse-pointer, or an edge. This will be very useful when we get into more advanced topics.
- Now we need to make Monkey Mike say something when he is “touched” by Frog. Drag in the say block (with time element) and drop it within the forever block.
- Change the text to say Hey Frog, don’t block my view.
- Now run your program to give it a test! Frog will pass in front of Monkey Mike and Monkey Mike will state his observation that Frog is in his way. This will continue as long as you let it go.
How it works…
As in our previous recipes, we have several scripts—all running at once. We learned about a new block, the when this sprite clicked block. This block is similar to our other top hat blocks in that it starts off a script. You can always use this block to start something when you want that particular sprite to be clicked. This only applies to the specific sprite you are programming though, so if you want to click on Frog and have something happen to Monkey Mike, you’ll have to use a workaround (we’ll talk about this in the next recipe).
Now let’s take a look at the script for Monkey Mike. You should have something like the following screenshot:
Once Monkey Mike finishes his dialog at the start of the story, he waits for Frog to pass by his field of vision. This block is essentially a combination of two other Control blocks available to us, so saves us time in terms of coding. We also have, available for use, the forever loop, which we’ve used before. Secondly, there is the if block. Any block with an if embedded creates an if statement, which is triggered when the statement is true. Our combined block that we used makes Monkey Mike constantly look for that statement to be true, and then repeats the code inside until the story is manually stopped.
If you are extending the story and still want Monkey Mike to say something about Frog passing by, you’ll have to create a separate script to handle the forever if loop. This method of creating the code works well when you want nothing else added. However, now you can’t add more talking after the loop. Also note that if your Frog isn’t large enough, or close enough to the monkey, part of this code will never need to run.
There’s more…
Perhaps we don’t want Monkey Mike to comment on Frog passing by for the entire story—after all, there is a good chance this will affect how your story flows. We also have the option of using another block combination as an alternative.
Here, we see that we can integrate the repeat loop and the if loop to create a loop that looks for the trigger a certain number of times—in our case 10. You can change this number if you want to something lower or something higher.
The logic of this section of code isn’t too complicated. We see that the repeat loop continues what is inside it, 10 times. In other words, our code will check the condition we set (that is, whether or not we are touching Frog) 10 times, and then will stop checking and move on to whatever else we tack onto this script.
See also
- To see more ways for sprites to interact, check out the next recipe, Basic broadcasting and receiving. This recipe will teach you a lot about basic techniques of background communication that we’ll need to use in future projects.
