Tuning the Jumps in my Phaser Platformer

I found just a few minutes to work on my 8-bit-style Phaser platformer since the weekend. Just about everyone in my family is sick in some way, including myself. So with my limited time I decided to fine-tune the jumps.

In my really basic code so far, a jump was accomplished by hitting space on the keyboard. If the frog was on the ground while space was pressed, the frog's y-velocity was set to a constant number. This worked fine, but it resulted in every jump being the same height. Tapping the spacebar for a millisecond caused the same jump as holding down the key for ten seconds. Well, actually holding down the key caused the frog to jump over and over and over again. I wanted to fix that too.

I was looking for a way to make a longer keypress result in more height, up to a limit. After reading a few ideas tossed out there by other people on the Internet, I decided on what to do. Here is part of my new update function, with the enhanced jump logic (remember, you can find the complete source code on GitHub):

var jumpTimer = 0;

function update() {

    game.physics.arcade.collide(frog, layer);

    if (spacebar.isDown) {
        if (frog.body.onFloor() && jumpTimer === 0) {
            // jump is allowed to start
            jumpTimer = 1;
            frog.body.velocity.y = -400;
        } else if (jumpTimer > 0 && jumpTimer < 31) {
            // keep jumping higher
            jumpTimer++;
            frog.body.velocity.y = -400 + (jumpTimer * 7);
        }
    } else {
        // jump button not being pressed, reset jump timer
        jumpTimer = 0;
    }

    // ... other stuff ...

}

Here's how it works... I've introduced a new variable, jumpTimer, which will keep track of how long the jump lasts. If the spacebar is not being pressed, jumpTimer is always set to 0. No jumping is taking place. But when the spacebar is being pressed, some other stuff happens.

First, I check to see if the frog is on the floor of something and jumpTimer is 0. Obviously, I only want a jump to start if the frog is on the ground. But the other part of that ensures that a new jump can start only if jumpTimer has been reset - and it won't be reset until the player releases the space key. This prevents the endless bouncing when holding down the button. Anyway, if both of those conditions are met, jumpTimer is set to 1 and the frog's y-velocity is set to -400. Why -400? I just liked that value after playing around with it. You might want a different value.

In the other case, jumpTimer is greater than 0 but less than 31, the jump is continuing. Each time in here, jumpTimer is incremented. This happens once per frame, so this function keeps the frog moving up for a maximum of 30 frames. After that, no more velocity will be added and gravity pulls the frog back to the ground. I reduce the amount of velocity added by the value of jumpTimer times 7 in order to slow down the vertical rise the longer the button is held down. This looked slightly more natural. Again, I chose 7 just by playing around with it until I found a number I liked.

Animation of the new jump tests.

I'm happy with how it turned out. Next I think I'll try to add an enemy or something and work on the attack mechanics. While you wait for me to write about that, read today's comic. It's almost time to start thinking about Christmas shopping. Maybe it's already that time. Depends on how much of a procrastinator you are.

Amphibian.com comic for 11 November 2015