Get Kids into Coding with Scratch

Create a Jumping Movement

Steve Kinney

Steve Kinney

Get Kids into Coding with Scratch

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

The "Create a Jumping Movement" 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 implements the ability for a sprite to jump with velocity and detect when it touches the ground.


Transcript from the "Create a Jumping Movement" Lesson

>> So right now Pico can fall, you know what Pico can't do? Jump, right? So let's figure it out, and we're gonna do it in a separate project, but we're gonna figure out that mechanic where we know how to make things go down, but you know what they say, what goes down must go up.

>> Wait.
>> [LAUGH] And then go back down again, [LAUGH] right? it's a joke, [LAUGH]. So let's create a character. It can be Pico, it can be somebody else. Let's talk a little bit about how to jump, cuz right now we only know down, we only know velocity that increases.

Jumping is basically a combination of velocity goes up and then velocity goes down, right? And so if you think about this, when you throw a ball up into the air, it leaves your hand pretty fast and it slows down until it doesn't have any more energy. And then it turns around and gravity takes over and then it's falling.

So what we need to do is have something go up so that it then can go down. All right, let's look a little at this idea of jumping. Do we want another one or somebody else?
>> Somebody else.
>> Somebody else.
>> Try Nano.
>> Nano's not-
>> Or whatever his name is.

>> Pico?
>> No, Nano.
>> Nano doesn't really have a jumping motion. I mean, that could be a jumping motion, right? All right, let's do it.
>> That's what I used for the apple one.
>> All right, Nano's got some jump action here. All right, so have this concept of falling, and we have this concept of falling with velocity, all right?

So we wanna do a jump. There's two ways to think about the jump, there is, like we saw before, have a known number where you know where you start, right? And so right now, let's just make Nano's life a little bit easier, let's say negative 100, right? So we know that the theoretical ground that Nano stands on Is at negative 100, right?

And the things that we need to figure out is how high can Nano jump, right? And then what we wanna do is go determine that height, figure out how high that jump is, and then go back down to that start point. And again, this will work when there's a known ground that doesn't change, which is the first one to kinda do, cuz it gets trickier after this, and we'll have to do some math to get a real platformer working.

Cuz you don't wanna run into walls, you might have multiple floors. There will be some math, I'm warning you all, but it's predominantly addition and subtraction with a little bit of division and multiplication at various points. We will not go into trigonometry today, friends. We'll save that exploration for a different day.

All right, so we wanna figure out how to make a jumping motion because we know that shooting them up and shooting him back down isn't great. So we could just say, let's try something like this. Let's say, when the green flag is pressed, it could be a different button at some point.

Actually, we'll make it the space key, how about that? But let's make a game loop once again. And we'll say, so we're trying to see if that space key is pressed, right? Cool, I will zoom in a little bit. That's the wrong zoom in. If the space key is pressed, we could just simply have him go up and then go down, right, and it'll work.

>> Go down until it hit something, though.
>> Or eventually we'll do with our ground detection first and then we'll do it with ground detection, right? And so we could say something like, we'll do something very similar to what we do with the falling. We'll say, hey, for 10 times, what we wanna do is change y by 1, this is gonna feel okay.

And then we will wait, you like half a second, right, Caleb? Half seconds feels good? I'll just do it.
>> You can't just jump to-
>> You can't just jump and shoot it right back down. That doesn't work. And then we could say something like-
>> You can't double jump.

>> At one point we will be able to unfortunately, even though we don't want to. So actually want to change y. Yeah, and then we will go ahead and we will change y by negative 1. And this is gonna have our same velocity issue. That jump, that jump isn't much.

>> Use weak legs.
>> I mean, and then we change the values, [LAUGH]. We can change the values. So we can either have happened more, which will be a bigger jump but slower, or we can have 10 but by increments of 10, right? I mean, that is a jumping mechanism.

>> Oops.
>> I don't feel good about it, but it exists, all right? It works. It is a jump. I think that we can do better. If we take in this idea of velocity that we had before, then we could theoretically have them start up high, slow down and then come to the ground just like the falling.

>> I think this should be point two.
>> Yeah, I also agree with you that he was hanging in the air a little bit too long.
>> He was floating.
>> He's floating for a second, right? I think we had some velocity, it will be a little bit happier.

All right, let's trash that. Okay, before when we had that velocity, we stored in a variable, does that make sense? I'm just gonna rename this one. Actually, I don't know if that's, it could be for everyone. And so we'll go ahead and we'll call this one, you can call it Velocity Y, you can call it Speed Y.

What do we like, Speed Y or Velocity Y?
>> Can I call it jump?
>> Because it's gonna change, whether or not he's jumping, you could call it jump.
>> Speed, velocity. Speed, okay. Let's pick speed. Speed Y, cuz it's gonna be the direction that we should go.

So when the game starts, we do wanna set Speed Y to 0 just to set everything the way it was. And then theoretically in our game loop, we should be, Changing the y, By whatever that speed is. If it's positive, he goes up. It's negative, he goes down, right?

And so, now what we could do is we could say. So, we changed every time and then if the space key is pressed, I get error, let's put it over here. If the space key is pressed, then what we'll do is we will set y to, let's start with 10.

Let's try that one out. And again, we might need to adjust. Not changed by 10, no, we wanna set it to 10.
>> Is it set or changed?
>> We wanna set it to 10 and I'll show you why in a second. Now, immediately you're gonna see what happens.

Let's just say I'm gonna put in the code that puts Nano back to where he's supposed to go when I hit the green flag for reasons that you will very quickly see. Hit the spacebar. So it set my variable to 10, yeah. My variable, Speed Y. And away we go.

>> [LAUGH].
>> [LAUGH].
>> Not what we wanted.
>> [LAUGH], like I said before, what goes up ideally should come back down, right?
>> It's not what you said at first, but okay.
>> I was setting myself up for the joke of, yeah, we did down and then goes up, right?

Okay, so we've got that. So now what we probably need to do is to have him come down, which is what we can do is over time, decrease that speed. So we could, every iteration, We could go ahead and we could then just change, let me get rid of my variable before it messes me up one more time.

>> Up to the moon.
>> We can do it by, Negative 0.5. So he will fall to gravity, he can jump, but he will, Fall to what seems like oblivion, but Scratch will stop him. But he's got a hopping motion, and you could see that over time, so it is slowing down and then down he goes.

Sets to 10, and that number will keep going down, but it doesn't really matter.
>> Why Nano is acting like flappy bird?
>> I mean, that seems cool. Also you can hit space multiple times and he will-
>> Like Kirby-
>> He will Kirby himself, Kirby flappy bird, right?

>> Not too much like Kirby, Kirby falls down slower-
>> Kirby's got a little bit of a-
>> He's a big balloon.
>> He's a big balloon. He's got a little bit air to him, right? So that could work, if we know the actual amount to, so like in this case, what we could is we could repeat it a certain amount of times slowing down as time goes on.

So we could, for instance, move this out for a second. We could set it to 10. And then we could come back down, there is a bunch of different mechanics here. We could do a touching color here though as well. We could say, let's try this out. I'm winging it for a second here.

>> If touching color-
>> Exactly, you read my mind.
>> If touching color like black, completely black. You could outline everything with black no matter what color it would be. I know it'd always land on it, so then you don't need to do multiple colors. Think that's smart.

>> Unless he's got a black wall and then he can't jump, [LAUGH]. Life's hard. Let's start with this.
>> It'll work.
>> Let's try it, we're winging it now. We'll say if touching color, what do we choose, black?
>> Black.
>> Black. If touching color, black. I'm thinking we can, Set Speed Y to 0, otherwise-

>> And make for he can jump again somehow.
>> Put it there. We should probably give ourselves some black, right? Push that all the way down.
>> Then you can make a nice platformer game. Where did 1 go?
>> Make for he can jump only when he's touching the color black.

>> So we got a jumping motion. Again, he does fall a little bit beneath the ground but it does for the most part get us most of the effect. We give him a general starting point which might not be perfect anymore. So I look at where he is now, let's say negative 149-

>> And then we can make if he's touching a certain color, that can be like lava or something or spikes, whatever you want.
>> Yeah, you can have red be lava. That's a good color for lava and you can say that will stop the game, or black x hits the ground, right?

There's a bunch of tricks that we can do here. And then we can combine this. So we've got a decent jumping motion now. All right, Ashley, you wanna step through this code?
>> Yeah.
>> All right, let's step through it. All right, follow along with me. When the green flag is clicked, we give him some starting location, is that starting location a good starting location?

>> It doesn't have a starting.
>> Okay, perfect. We set the y speed to zero just as the initialization, all right? Go into the game loop. By definition, he's not jumping, right? If the space key is pressed, we set y to 10 and we start 10. But then theoretically, if he's not touching the color, then that becomes 9.5, then 9, then 8.5.

He slows, he jumps less and less and less and less and less.
>> The only thing we haven't made is left and right.
>> Yeah, well, we're gonna make a game where he jumps over things, whatever, we can let them do left and right here too.
>> And I just noticed you can hold the space key to make him jump as high as you want.

>> So how do we fix that? How do we make sure he can't rocket into oblivion?
>> We can still flappy bird?
>> You can still flappy bird. You want to fix that? I think we should fix that? Do we have any hypotheses how to-
>> You can still put black at the top of your screen?

>> Well, that means he could hit his head. But what if I don't want to even let him double jump?
>> Just make only when, so you can only press, only the space key works if you're touching the color. Okay, so you know that if, oops, Space key pressed, then you can do that and touching the color black.

>> So let's try that out.
>> So we'll do the-
>> That only works if he's touching black. Cuz then he won't be able to go up anymore unless he's still touching the color black. Yeah, so let's try it out. So if this and that, so Space key is pressed, and we are touching the color, Black.

This will be interesting because I think we can also get to a point where we're also touching and setting it to zero, but we'll find out. Yep, that'll work. Another way to do it is if you look, that totally works. Let's just talk about other ways, right? When he's not jumping, what's his y speed?

Zero When he is jumping, it is a number, right? And so you could try to see, there is a slight moment in time at the top of the jump where it might also be zero, right, where you could theoretically pull off a rare double jump, so this is probably better.

Another way is to go back on that number. The other option is to have a variable that you turn on and off when he's jumping, all right? So if currently jumping, ignore this. It all depends on what you need to do. For this, I think we should keep this cuz I think this works.

So let's go with this mechanic right now. I do wanna have him next costume if he's jumping for my own, I just wanna see what it looks like honestly. Put in there.
>> I have him when you start he just falls out of the top of the screen.

>> This is his jump motion.
>> When he starts he just falls off out of the [INAUDIBLE].
>> So we've got something here, he jumps, looks like he's eating a taco which is I think apropos for the day. That's probably not what this Sprite was necessarily used for but I appreciate it.

>> I like it-
>> You were the one who said it was good for jumping.
>> And I stand by that. [LAUGH] I think it was the right choice. I am here for it.

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