« Back to Blog

Phaser Platformer Series: 3 Better Jumping

posted on 19 March 2021

There are a couple of ways we can improve the jumping in our game. At the moment if you hold down the up arrow, you just keep on jumping. The second you land on solid ground you launch straight into another jump. You might want this for some games, but for our platformer, it feels a bit too much like you’re bouncing. Also, because of the way we have collisions set up, we can bounce off coins and that feels broken. We want the user to have to repress the up arrow in order to jump again, no holding down and bouncing around, please. We’ll be making this:

See the Pen
Phaser Platformer: 3 Better Jumping
by Digitherium (@digitherium)
on CodePen.

To do this we a jumping flag as a global variable

jumping = false;

Then in our update loop we change our bit of jumping code:

if (standing && cursors.up.isDown && (!jumping)) 
{
  ...
}

We used to check if our hero is touching the floor and the up arrow is pressed. Now we add an extra check before we allow our hero to jump. They must not already be jumping.

player.setVelocityY(jumpVelocity);
jumping = true;

We set the Y velocity which makes our hero jump, then we set the jumping flag to true. The hero will not be able to jump again until that jump flag has been set to false. We do this in an else if statement. If the up arrow is not down (i.e. it has been released after pressing it) AND our hero on the floor then we set jumping to false.

if (standing && cursors.up.isDown && (!jumping)) {
      player.setVelocityY(jumpVelocity);
      jumping = true;
  } else if (!cursors.up.isDown) {
      if (player.body.touching.down) {
          jumping = false;
      }
  }

So now our hero can only jump if they are on the floor and there is fresh press on the up key.

Jumping is starting to feel pretty good, there is something else we can improve though. If you try and jump off a ledge last minute, you’ll see you generally fall instead of jumping. It would feel much nicer if we can players a little bit of extra leeway for jumping. We’ll tackle this next with an edge timer.

view all the code on codepen
download the source on github.