Get Kids into Coding with Scratch

Creating Platformer Hero

Steve Kinney

Steve Kinney

Temporal
Get Kids into Coding with Scratch

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

The "Creating Platformer Hero" 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 creates the hero sprite and backdrop for the platformer game. Implementing a code block that fixes the sprite falling into the ground without showing the sprite movement is also covered in this segment.

Preview
Close

Transcript from the "Creating Platformer Hero" Lesson

[00:00:00]
>> So, with the jumping, we had this idea of acceleration, right? Kind of immediately going, falling we had acceleration, jumping we had a mixture of, jumping up until we hit that stopping point and then turning around and going back down. And now we have the idea of like, cool, we hit, we start going at 10, it really ever only goes 8 if you look, because we're already multiplying by that 0.8.

[00:00:23]
So again, you might adjust the numbers accordingly, but we've got this kind of idea of resistance and friction. Which is we push the ball, the friction slows it down at a constant rate at this point. But we get that kind of better feel that we might be used to seeing in a lot of other games, and that feels a lot more natural than just moving by one pixel, moving by ten pixels over and over and over again.

[00:00:44]
Yeah, those little things and we'll add a lot to the value of it and they all have to do is just thinking about what is the mechanic that you wanna do, and what is the feel that you are trying to get. Okay, we're gonna do something here where I'm gonna have to say this real quick, we'll call it Rolly Ball.

[00:01:01]
That seems like a great name for this, Rolly Ball. All right, we're gonna do something where I'm gonna show you what we're gonna kind go towards, And then we'll maybe look at how to do it. So don't bother with the code, in fact, we're not even gonna look at the code.

[00:01:23]
Well, the mechanic we kind of want to do, so here's that drifting that we just did, right? That we had before. Feels natural., feels good, right? This feels right. And then we can jump, got that kind of jumping motion. But what we didn't have previously is one, the ability to hit our head on things.

[00:01:47]
And then two, The idea of a floor that could be somewhere else, right? And so we're gonna need one new trick, and then we're gonna kind of need to pull together all the previous tricks if we're gonna kind of get this mechanic working. I think this one still, no, this one can't even.

[00:02:08]
It's got a little thing with the jump where we don't stop the jump if it's hit its head, so it can do that motion, which we can adjust. I kind of like it. But, we want to start to pull together all these things. We just need one or two more tricks that I think are really useful when making a platform again that kind of ties a lot of these epic pieces back into each other.

[00:02:30]
I'm not going to keep playing this for another ten minutes, that's not gonna be what I do. All right, so with that, let's go ahead and see how we might do that. Let's make a new game. I don't wanna worry about, if you haven't noticed about me, I get sad when I have a sprite that looks like it should be running or jumping and it's not.

[00:02:58]
So for my own sanity I'm gonna go make myself something that doesn't look like it has to be moving in any given way. That's why there was a square there before because otherwise I will spend the next two hours designing a sprite that is not of any use to you.

[00:03:16]
So, I'm gonna paint a new one. As you can see from the thing I did before, I'm going to choose to use a square. You want to make something else, you make something else. I'm going to make a square because I am crazy. There is a square. Bigger, smaller, we like it?

[00:03:40]
Nah, this feels right, feels good. Bigger? Bigger, okay, we got, go big or go home.
>> Better.
>> Better, okay. I'm just gonna make sure it's in that middle point though. Yeah, otherwise, it's weird where your sprite is like all the directions are off, slightly smaller. That feels good.

[00:04:07]
All right, we're gonna call this Epic hero. And you know what? Even better, now it is an Epic Hero.
>> He looks like he's got [INAUDIBLE]
>> He is, he had too much pizza at lunch.
>> That reminds you someone? [LAUGH]
>> What are you talking about? This is what happens when we lay open the sprite editor.

[00:04:50]
Okay, we've got our hero. He looks heroic, ready to rock and roll.
>> His name is Bob.
>> Name is Bob, okay, let's do that. Bob, how about this? Bob, the epic hero and also,
>> The builder.
>> The builder.
>> [LAUGH]
>> Today I learned that there's not really limits on the length of a sprite name that I'm aware of.

[00:05:16]
Maybe there is, I didn't reach it in that moment. And then the backdrop let's go ahead, someone give me a color.
>> Red.
>> Red.
>> And green.
>> And green.
>> All the colors. Clearly sparkles, neon beige.
>> Neon beige.
>> Neon. [LAUGH]
>> Do that.
>> Those are two polar opposites.

[00:05:41]
>> Let's get a cool little platform. Do something like that maybe, just something for it to jump around on. That's a little off. [INAUDIBLE]
>> And some neon beige. Well, so there's two things. If I'm doing a color detection, I got to keep it all one color. If I change this at one point to like sprite detection, if instead of a backdrop, I make the sprite like if touching this, then I can literally have all sorts of different colors, right?

[00:06:13]
So those are both options. And it's kind of like why a lot of times moving this to a sprite might be better for us, depending on what we wanna do. Cool, so we've got this in place. And there's gonna be some trickiness here. Remember before when we did the dropping kind of fell into the ground, right?

[00:06:40]
What if I told you there was a way to solve for that? Right, and there's a bunch of ways to solve for this. So let's start with a basic following mechanism here. So we'll go ahead and we'll just start with the flag for now. We'll make a, just delete this one.

[00:07:04]
We'll make one called velocity y, speed y velocity y. Again, I'm just picking names that work for me, you can call it whatever you want. And we'll set that to zero in the beginning and we'll say, Forever, And we'll just do the simplest following ever. For a second, we'll say, change velocity y by -1.

[00:07:37]
No, don't pick that set one again, you've already made a mistake with that before. So, change velocity by negative one, they will change y by that velocity. This should look somewhat familiar, right? Because we're snapping everything together that we've learned so far. And we'll go ahead and we'll check touching color, Red.

[00:08:06]
And if that is true, we will set the velocity to zero. All right, let's try this out. That's a really long name. Good bye now, okay, well that doesn't really give us what we want. To do is set the velocity negative zero, change y by velocity. Cuz we're doing it every go around in here.

[00:08:40]
So let's actually move this beneath, that should do the trick. If not, I'll have to debug it. All right, so there is our famous problem that we've had multiple times over and over and over again, right? And it gets worse the higher we drop from, right? Because it already moved, I don't know what, it was like 23, and so it could be anywhere from 22 over, right?

[00:09:15]
By the time it drops. It all depends on the mathematics. And so that's not great. It'd be great if it always dropped 22 because then you just make it look a little 3D and move on with your life. The problem here is that it is inconsistently, because if I drop it from here, right?

[00:09:36]
So a little bit, dropping here it looks like almost nothing. Jumping from up here and into the ground we go. So if we think about this, this is where it just stopping, remember was in the beginning where like somebody's gonna stop. You breathe for a moment, you think about this, which is how would you get him back up to the floor?

[00:09:59]
Yeah.
>> If it would be like, if the purple is touching red, then it sets the velocity to positive one and it's not.
>> Yeah, right? If our little character is touching the red, what we'll do is we'll say, Let's do repeat until, right? Repeat until, We are not touching the red.

[00:10:36]
[LAUGH] Same thing. Not touching the red, I'll just move it up one. Now, this will get us most of the way there. You will notice a new problem that we will have to solve for.
>> That's pretty obvious.
>> Yeah. [LAUGH]
>> [LAUGH]
>> So it's kinda you can see the motion, I don't know how he's jumping like that.

[00:11:17]
I think because I pick them up and I'm not resetting this to anything, so like. Right, so like that's not great, because we can kinda see it happening. So not our best yet, but there was also, even if it wasn't vibrating, you would see that part of the problem is that we see it happening, right?

[00:11:39]
What we really wanna do is have a bunch of stuff that can happen in our game without showing me everything, do a bunch of stuff and show me the end result, right? That doesn't really happen here, we can't do that here now. Hypothetically, this is like a lot of weird code.

[00:11:57]
I am gonna break it out into its own like little helper-
>> Thing is if I put him inside a block then he just floats up to the top.
>> Yeah, right? That's exactly what we saw before, right? Put him here and up he goes, because that's our logic.

[00:12:12]
That is our code is doing what we told it to do not what we wanted it to do.
>> You hang him off that block floating then you just float up to the top.
>> Yeah, he will float, like [SOUND] up he goes. And I think he'll actually keep going.

[00:12:24]
>> Until he's up to it.
>> And then he would. Okay, that's not what we want. What we're gonna do, let's take this out for a second, because I could see myself reusing this. Let's go make a block called fixed landing. What's this over here? Run without screen refresh, which means we can go and move him up without seeing it.

[00:12:48]
Let's do that and we'll put all this code here. We'll actually have it set to zero as well. So if touching a color, I can call fix landing, I could go like adjust for landing. I don't adjust for landing, that sounds like a fight thing. Let's see if I got it right.

[00:13:06]
Nope, did I hit the button? Run a screen refresh. There we go. Boom. There it goes. Yeah, the game is not meant for me clicking and dragging my dude midway through. So now as he drops, is technically dropping too far and moving back up, right? You're just blissfully unaware that any of that happened, right?

[00:13:51]
Because if I turn this off, you can see it again. So we'll stop it. All right, he does that motion, but because we're gonna do all this logic of moving them back up until he's not touching the rat again, we don't see any of that. We're not doing a render, until we're done with the logic.

[00:14:19]
And so now, Or if I drop him on the ground, We just put him in the right spot and we don't worry about it, yeah.
>> Does that mean that you can see him moving if he's in the ground when you're doing it, move?
>> If he's in the ground, I'll just move him above the ground again.

[00:14:43]
>> Well, yeah, but if we add moving left or right, would that mean that we wouldn't see him moving until he's above the ground?
>> Let's add left and right.

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