Lesson 1: Move Your Sprite

Introduction

So first I’ll ask you to make a new project, and immediately rename it to “Cat Movement” as naming is a very important aspect of programming. Nobody will understand what you mean by “Untitled 1”.

If you want to take a look at the result, here it is:

This looks cool, but how do we make this a reality, and also learn something along the way? Let me show you.

Move 10 Steps

So first we need to make the cat move. In Scratch we do that by using movement blocks. They help us tell the sprite where to go. What we need here is the simple move 10 steps block. Just grab it and drop it in the code area. To run a script in scratch you have to click it, in complex projects this may prove a bad habit, however in a simple project like this one it is totally fine.

Just click the block and you’ll see the cat move by a tiny bit. What we want though, is so that the cat moves periodically in circles, and moves by much more than it does now. Now how do we do this? Do we try to make it move by more entering more steps into the input field? Well, that just makes the cat jump to a completely new spot. We want the cat to more or less walk across the screen, turn, walk up, turn, walk to the left, turn etc.

Repeat Loops

The “correct” and efficient solution to this, is a repeat loop. What it does is it repeats all of the blocks inside it a certain number of times. Go to the control tab and get one. Then put the move 10 steps block into the loop. Click the script to watch the cat go a fair bit to the right. To make the cat go further to the right just adjust the value in the repeat loop e. g. from repeat 10 to repeat 20. This is how it should look right now:

Repeat loop

When Green Flag Clicked

To make the script run when the green flag is clicked (the green flag is the “start” button for every project in scratch), so that people who don’t have access to the code can also watch the cat move, we need to grab this block:

Green flag block

It is located in the “Events” tab and can be attached on top of every script, so just attach it to our repeat loop like this:

New game loop

Now if you click the green flag (above the project preview) you should see the cat move.

Go to x: y:

For you it may appear as if the cat is stuck on the edge of the screen. That’s because we haven’t set it’s initial position. To do that, go to the “Motion” category and grab a go to x: y: block. Enter -180 for x, and -120 for y because we need the cat to start in the bottom left corner. It should now look like this:

our script with initial position

Piecing it all together

Now that we have the foundation for this project we can now make the cat move in a full circle. So let’s make a plan first:

• Step 1: The cat moves to the opposite lower end of the screen and turns
• Step 2: The cat moves to the right upper corner and turns
• Step 3: The cat moves to the left upper corner and turns
• Step 4 the cat moves to the bottom left corner and turns

Step 1:

We are sort of done with this one already, we just need to adjust the value of the repeat loop to 36, and we have to turn the cat after it moves. For that we’ll use the point in direction block. Adjust the value to 0 since we want the cat to be pointing up. Your code should now look like this:

Script with point in direction block added

Step 2:

Now we just need to copy the code from the previous step, adjust it a little, and attach it to our existing script. Change the value of the repeat loop to 24 and change the point in direction to -90. Your code should now look like this:

Step 2

Step 3:

Here we also just slightly adjust the code from step 1. Change the repeat loop back to 36 and make sure the point in direction says 180. This is how your code should look like:

Step 3

Step 4:

This one is almost exactly like step 2, but instead of point in direction -90 use 90. The final result should look like this:

Step 4

Final adjustments

If you’re already satisfied with the result these are optional, but they will teach you even more than this project already has.

Make the cat walk

As you can see now, the cat is not walking, it’s sort of gliding across the screen. I think that looks a bit boring. Go to costumes:

As you can see the cat has 2 costumes, not just one. My idea is to switch between them as the cat moves.

Switch back to the “Code” tab and look for the “Looks” category. In the looks category there is a block called switch to next costume. Insert that block into each repeat loop and run the project, you should see the cat walking now.

Circle Multiple times

As you may have realized by now, the repeat loop makes sprites (objects on the screen, like our cat) do stuff multiple times. So if we want the cat to go around the screen more than once: just wrap a repeat loop around everything (except the go to x: -180 y: -120).

DONE, FINALLY!

Now we are officially done. See you in the next lesson. Bye ;)