I know, in Part 4 I promised to cover the fancy visuals and parallax scrolling next, but here’s one more nifty game mechanic I wanted to add in first. (It’s quick.)
Double Jumping! Perhaps the greatest — most unrealistic — most lovable game mechanic ever.
This isn’t necessary for all games, and maybe you don’t want to add double jumping to your platformer game. But if you do want to add it, all that it requires is a bit of logic and a couple of Boolean variables. Plus, it will allow you to design cooler environments because the player will be able to reach more places than before.
This is what it will look like:
(Click on the preview below to activate it, then use the arrow keys to move around. Press the up arrow twice to double jump.)
Double Jumping
First things first, we need to declare two new Boolean variables to keep track of the player’s ability to double jump. Name the first one doubleJumpReady. This will keep track of whether the double jump has been used yet. It will be reset to true when the player lands on the floor, and set to false after the player double jumps. (This will prevent the player from jumping more than twice at a time).
var doubleJumpReady:Boolean = false;
Name the second one upReleasedInAir. This will ensure that after the player presses the up arrow once to jump normally, they release the up arrow before they press it again to double jump. If we didn’t include this, the double jump would automatically activate when the player jumps normally if they hold down the arrow key. We want the player to have to press the up key twice, so we need this variable.
var upReleasedInAir:Boolean = false;
We are now ready to implement the code. Just like last tutorial, our actionscript code will revolve around the downBumping conditional in the main game loop. Why do we keep coming back to this one area of in our program? Because it keeps track of any behavior that depend upon whether the play is on the ground or in the air… which is pretty important.
First, we want to make sure that these two variable we just created get reset every time the player lands on the ground. Add these lines inside the min part of the downBumping conditional:
upReleasedInAir = false; //upon landing, reset to false doubleJumpReady = true; //upon landing, reset to true
Next, go to the else part of this conditional. This will happen continuously while the player is not on the ground. Add this to the main part of the else statement:
if(upPressed == false){ // if the player releases the up arrow key
upReleasedInAir = true; // set the variable to true
}
In order to activate the double jump, we want both of our new variables to be true. The doubleJumpReady variable gets set to true any time the player lands on the ground. And we just set upReleasedInAir to true any time the player is in the air, and upPressed is false.
So now, directly underneath the last code you added, you can activate the double jump by checking if the up arrow is pressed while both variables are true. If they are, set the ySpeed to the power of the jumpConstant.
if(doubleJumpReady && upReleasedInAir){ // if both variables are true
if(upPressed){ //and if the up arrow is pressed
ySpeed = jumpConstant; //set the y speed to the jump constant
doubleJumpReady = false; //then, prevent additional double jumps
}
}
If you compile and run your game, you will see that you are now able to double jump! Congratulations!
One more thing…
As part of my continuing effort to improve the game, here is one quick little update that we can add with only two more lines of code:
When the player moves right, he should face to the right.
When the player moves left, he should face to the left.
We can add this small feature by making use of the scaleX property that MovieClips have. This can be used to stretch or flip objects horizontally. If we set scaleX to 1, the MovieClip object will look just how it normally does. So in our case, setting the player’s scaleX to 1 will make him face to the right. Inversely, setting it to -1 will flip the player’s graphics so that he is now facing to the left.
In the game loop, we already have a conditional which moves the player left or right depending on if they are pressing the left or right arrow keys. Modify this by adding a line of code to each part, which updates the player’s scaleX:
if(leftPressed){
xSpeed -= speedConstant;
player.scaleX = -1; // face to the left
} else if(rightPressed){
xSpeed += speedConstant;
player.scaleX = 1; // face to the right
}
And that’s all you need.
(Click on the preview below to activate it, then use the arrow keys to move around. Press the up arrow twice to double jump.)
And here’s the source code: Source Code!
Thanks everyone for the continued support! The next tutorial part has been released — read it now to finally add multilayer visuals and parallax scrolling to your game!
As always, if you have any questions, feedback, or requests, please leave me a comment below. I’m happy to help :-)
AS3 Game Tutorials 
[…] 5: Double Jumping […]
Nice Tutorial :D We are thankful you keep posting new tutorials :D.
No problem :-) The next one is in progress!
how did you find out those collision detection x and y points sir???
Uhmm Ben?? Do you have any idea how to make a Healthbar in AS3?? I have seen a lot but it was on AS2 and I don’t know how to convert AS2 to AS3.
I’m experienced in creating a variety of different types of health bars in AS3, so yes, I can help you out.
This has given me the idea of writing a series of mini-lessons on this site showing how to create small game elements in AS3. For example, how to make a health bar. (If you have an urgent need to know and can’t wait for the tutorial, just message me and I can walk you through the basics.)
Stay tuned!
Nice tutorial. I have one small problem though. It seems like if the player gets going fast enough, he can bust through the walls and fall out of the stage. Do you know hat might be causing this problem?
Well, a good tutorial for starts I’d say :)
All the way to this session i spotted a little bug.
There are the staircases. The staircase has two vertical bars, each to the left and right, and another horizontal bar to seal it. You approach them from the left, and stay static. Jump. When the avatar’s right foot is just below the lower edge of the horizontal bar, move right. And you’re half in the staircase… Maybe this needs improving?
And is it possible to register 9 points instead of just 4 of them? I see that the player can still intersect the platforms.
Yeah, I definitely agree with you about the collision detection: it isn’t perfect. The reason I left the game with only the 4 points instead of 9, or even more was for the sake of brevity and simplicity in the tutorial…. but it isn’t good enough for the final product. Sometime in the next couple tutorials I’ll address this problem and try to eliminate any of the bugs left in the collision system. Thanks for reminding me to fix this problem, I appreciate it :-)
Bro where did you learn all this? I feel like I’m going in circles trying to learn AS3 and adding stuff and I’m only coming up with frustration! Haha. I tried to add a jumping animation to play while in the character is in the air and stop when touching the ground. Plus trying to get a head start and learn for myself the multi-layer background and parallax scrolling and finding more frustration. Anyways thanks for the tutorials again and looking forward to the next tutorial!!
Great tutorials! I’m learning so much from them.
Could you please make one on how to do wall-jumps (like in super mario)?
and maybe also sliding down walls so you can then wall-jump somewhere
Good idea! I’ll see when I can get to it.
Hey, Ben,
Great job so far. I’m looking forward to the next installment, but could you also – at some point – explain how to have the character setting on the ground when the games starts, rather than falling to the ground… as well as those hit test bugs that need worked out.
You’re going to show us enemies/health, pick up/use, and NPC interaction/quest, too, yes? Please? Pretty please?
Yeah, I can cover all of those at some point. I have a feeling that I might end up adding a LOT of parts to this tutorial… basically however many it takes to teach everything someone might want to know about making a platformer. It’ll take a long time for me to crank them all out, but if you’re willing to wait I promise I’ll eventually get to them all.
I’m willing to wait and work along. It’s not as if I have mass time to spend learning all of this, so your walk-through tuts are proving rather helpful.
Has anyone mentioned how great it is of you to share this with us? If not, I will. That’s pretty great of you.
I put in this code, but I am not sure how to get it to work. It’s to reset position to the start when the player falls.
if(player.y > 600){
player.x = 197.35;
player.y = 438.60;
}
Also, I want my background to be bigger, but it won’t stretch far enough. I zoom out to 8% and make it as long as I can, but it is still not as long as I would like it. Any way to scale down everything without messing up the characters placement and movement?
I think that code is working because you are checking for the player.x and player.y, but because we structure our game around a scrolling background, the player’s position **never changes**. Instead you should check if the scrollX or scrollY exceeds a certain amount, and then reset the scrollX and scrollY variables to their initial values.
Genius! Thank you so much; works like a charm, although this method is causing very minor lag for some reason.
How can you put a backround to this ?
I’m about to post a tutorial in the next couple days, explaining just that.
In case you haven’t seen it yet, I just posted the tutorial here: https://as3gametuts.com/2012/02/17/platformer-6/
I hope this helps :-)
this tutorial rocks i even learned how to take away the double jumping. I have one question are you gonna have something that makes it so you cant do something until a certain thing happens? like in an rpg when you get new skills
I might eventually cover adding RPG elements to the game, but for now, here’s a quick way to achieve what you want. Create a Boolean variable called something like “doubleJumpUnlocked”, which starts out false.
Then where we have this code…
if(doubleJumpReady && upReleasedInAir){ // if both variables are true
if(upPressed){ //and if the up arrow is pressed
ySpeed = jumpConstant; //set the y speed to the jump constant
doubleJumpReady = false; //then, prevent additional double jumps
}
}
… just put it all inside a big conditional statement….
if(doubleJumpUnlocked == true){
//all that code
}
Then just set doubleJumpUnlocked to be true at whatever point you want the player to unlock the new skill, and he will be able to double jump. Before that, he won’t be able to.
Thanks for your help and teching .cordial saludo desde colombia.
Ben! Just to clarify, when the character is doublejumping and you hold the UP arrow key, does upPressed still count as true?
Hey Ben,
I’ve been following this tutorial from the beginning and everything worked perfectly since them. I’ve done everything you said but my character won’t double jump and he’s going through the ground straight after jumping (when before he was doing this if I would bump from a certain angle on the platforms). Do you have an idea of what might have gone wrong?
Thank you very much for your tutorials, they are the best I have found so far.
Adrien
Dude, you’re a genius. I am following your tutorials step by step, to learn how to do it so I can make my own platformer (as a school project, with the intend to develop it later on).
I can’t wait for you to make others! Keep up the good work!
If instead of a “double-jump” i was to make a “wall-jump” only available when colliding in midair and, depending on the speed the player has when colliding, it will bounce off
what code would i need to add?
If you’re resizeng you player I’d suggest to use
player.scaleX = -1 * Math.abs(player.scaleX);
instead of
player.scaleX = -1;
so it keeps its original size
Good tip! Thanks!
Hey, this tutorial is great so far and ive also added some other things. I made a select character screen but i think i made it way too complicated and there is probably a way to make it all on the same scene but i did each character on a different scene. Also for the change view side code( the if(leftPressed){
xSpeed -= speedConstant;
player.scaleX = -1; // face to the left
} else if(rightPressed){
xSpeed += speedConstant;
player.scaleX = 1; // face to the right
}
) one of my characters gets bigger when i turn around, any ideas?
I love your tutorials, you’re amazing. I’m hoping you see this and maybe answer my question? If I wanted to have a different animation for a double jump, how would I alter the code to make a new jump animation for the second jump?