Check out a free preview of the full Get Kids into Coding with Scratch course

The "Movement Direction & Looks" Lesson is part of the full, Get Kids into Coding with Scratch course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to change a sprite's position and the direction it's facing on the stage. Switching between costumes to achieve a walking animation is also covered in this segment.


Transcript from the "Movement Direction & Looks" Lesson

>> One of the things to keep in mind, I'm gonna change the backdrop for one moment. I know we like the basketball, but I'm gonna change it to make a point. And we're gonna change it to this X, Y grid. This is how direction works in Scratch. So your Scratch, Canvas, Stage, what have you, is 480, let's say, pixels, just 480.

Doesn't matter what it is, 480 wide and 360 tall, right? And in the middle, in the center, is location 0, 0. So X is horizontal, Y is vertical. So if you wanted to, right now, you can see over here that we are at x of 0 and y of 0.

If I made this 100, and we zoom back out, you can see that he moved 100. If I make this negative 100, it's the other direction. So negative is to the left, positive is to the right, 0, 0 is the center. The same is true of the y, which is up and down, so 100y, it goes up 100.

0 in the center, -100 is down. So for instance, if we wanna have some idea of gravity, we want them to go down, so negative numbers, and then positive numbers are up. We've got 180, so each direction. So 180 positive, 180 negative, cuz that times 2 is 360.

Yay, math. And then 240 in each direction gives you the 480, all right? And so just understanding how direction works, if you needed to go diagonal, then you'd have to do up 100x, up 100y. So, we'll show how to use some of the movement blocks in one second.

Actually, let's put this back at 0, 0, and I'll show you. We could do something like- Throw the green flag in here, zoom in just a little bit. When the green flag is clicked, we can say, for instance, go to, 100, 100, and then Arnold goes up 100, and to the right 100.

If we wanted him to go backwards, we could say, positive 100, but negative on the X. And so he's gonna end up in that other corner, right? The other thing to kind of keep in mind is, Arnold is facing the direction right now. If you look down here, if you know degrees and angles, it's great, if you don't, you can just twist this thing, and there he goes.

I could do that all day, and I won't because there's people watching me. Right now he's facing, 91 degrees. There we go, 90. And so move, in this case, there's a move. Where is it? Move 10 steps will be, move 10 in whatever way Arnold is facing. So right now he's facing right.

So if I say go to -100, x negative 100, y positive 100. We'll go there, and then he will move 10 steps. We got the basics of movement in place. So you have a bunch of different options. You can also say this is when the green flag is clicked.

Like I said before, you've got these options for different keys. So for instance, we could say, hey, when the green flag is clicked, we're gonna go to that initial position. And then every time they hit the right arrow, that's gonna be- When we move our character, right? Green flag, he goes back, right?

So whenever these events happen, those pieces of code underneath the big yellow hat block will go ahead and execute. So this is whenever the green flag is clicked, moving back to restarted. Whenever the right arrow key is pressed, we'll move ten steps. Start and move. I'm gonna give you a second, I'm gonna pause, and your job is to make Arnold go the other way, right?

Cuz right now, he will run face first into the wall, and that's not gonna, you know, now he's hurt. Now his face is pressed up against the wall. I can keep it in the right arrow, nothing happens. So take a few minutes and let's try to make him go left, just to kind of get a feel for everything, and get our sea legs, you know what I mean?

Awesome, so our mission was, we got Arnold going right, we wanna make him go left. And so let's find a bunch of ways that this will technically do what we asked it to do, but possibly not in the way that we intended it to do it, right? Because like I said, they'll do what you want for now, but generally speaking, maybe not always the way that you wanted it to happen.

I think there's a life lesson in there, somewhere. So we'll say left arrow, and we will say, we'll go move negative 10 steps, right? Cuz that should be our understanding of X and Y. So negative will hit the green arrow. All right, he goes right. He moves left, but this leaves something to be desired.

It looks like he's moonwalking, right? Ideally, most of us do not walk backwards when we go in the other direction most of the time, we tend to turn around. Otherwise there's great risk to bodily injury. So we knew that we had direction before. So theoretically, I should be able to set a direction if he turns around, right?

So let's do that. And so we'll say point in direction. And if you don't remember the numbers, if you just click on the number in a direction block, you can go ahead and you can turn it, right? So now, Arnold should turn the other way if and when we hit the left arrow.

Everything's gonna go great. He walks right, haven't go left. Well, okay, first of all it looks like now, we need to move positive ten, but that's not our biggest problem. So let's change that to a positive ten. What's the problem with Arnold right now? Can anyone- [LAUGH]
>> He's standing on the roof, or on his head, it's unclear at this moment, cuz he lives in a grid of emptiness and sadness.

But that is probably not what we wanted, and also, I'm hitting the right arrow now. You can see that the yellow code is flashing. So it looks like I also need to put him back, but we've got bigger problems. The act of putting him back is not gonna solve all my issues, but let's at least get that in place.

We'll drag them in there. We'll hit the green flag to put him back. Everything's great, everything's in topsy turvy world. There's an easy way to fix this, which is, if we go and we have the direction, you can see there's a bunch of different ways. There's like, yo, don't let him turn it all.

There's also left, right. And so now if we set it to left right, we hit the green arrow. He goes this way, he goes this way, he goes this way, he goes this way, everything is better. One of the things that you will commonly see in a Scratch project though is, people can change stuff, right?

And so a lot of times when the green flag is clicked is a great time to set up your game again, right? And so, for instance, that's when we put them at negative 100, positive 100. We can also say, set rotation style, left, or right? One of the things I wanna point out too is, for a lot of these things which makes the setup a lot easier.

Notice I just moved him to apparently 34 Negative 13, it's important, but if you actually look at- You look at the blocks now that, the default there is 34, -13, 34, -14. A lot of these will be set to wherever he currently is. So a lot of times, you don't necessarily need to remember.

You're gonna put Arnold the way you want him to be, and n the way you want him to be in the way that you want them to be, or any Sprite really. And then all of these movement ones, the defaults, now you can change it to whatever you want, but by default, they'll be wherever the Sprite is right now.

So, out of the box, we'll say, when the green flag is clicked and gotta set up our project, we will set the rotations of the left and right, we'll move them to where they are supposed to go. So we have a little bit of confidence that everything will behave as it's supposed to.

The only thing that I would probably change about this at this point would be, it'd be nice if the legs moved. You know? So we can do that too. This is under Looks, where we've got a whole bunch of options. You can make them say stuff, that is the visual say stuff, because as you know, the one after that doesn't exist.

That will, like, say, we'll just go there forever, or you have it wait for like two seconds. You can also switch to a particular costume, but in this case, what we're gonna do is just switch to the next costume, cuz there are only two, right? One foot forward, the other foot forward.

So if we just switch, rotate to the next costume every time, we should be able to kind of create a walking movement. And we've got a little bit of animation now. If you wanted to, if you're making your own Sprite, you might choose to have more than two, right?

There might like the more you have in between, the more fluid the motion is going to be. And for a lot of these things, we need to do what's called play testing, which is, yeah, it's great. Which is, you have to play your game, which makes this workshop very hard to prepare for because I don't want to tell you how long I played Snake.

It's not important, I had a high score. And so now he moves, you can add more movements. Like I said, I'm gonna leave. There'll be one or two times when we make our own Sprites today, but I know that I will spend several hours tweaking them, and they'll each become more horrifying than the last.

So, a lot of times we'll use bulk ones in there, but you can play without that in between things as well. And so now we've got the ability to move around.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now