Quick Tip: Avoid “Game & Watch” Gravity in Your Characters’ Jumps

Ever seen the old Game & Watch games where characters were either on the ground or in the air, with no transition in between? That can be a cool effect when used in the right place, but it looks stiff and jerky in most games. In this Quick Tip, I’ll show you the difference between the Game & Watch approach and a more realistic (but still simple) approach that uses a jump velocity and gravity.

Note: Although this tutorial is written using JavaScript, you should be able to use the same techniques and concepts in almost any game development environment. Also, big thanks to Kenney.nl for the awesome free platformer sprites!

1. The Naive Approach

The naive way to approach making a character jump would be to just set the characters y position to a higher coordinate, leave it for a second, and then set it back to the previous value.

For example:

var jumpSpeed = 1000;
function jump() {
    character.y -= 25;
    setTimeout(function () {
        character.y = characterGround;
        stage.update();
    }, jumpSpeed);
}
function gameloop(){
    //When player presses W: call the jump function
    jump();
}

I have set up a jsFiddle demo to demonstrate this approach. Use the W key to make the character jump:

This seems to work pretty well. We can change the jumpSpeed variable to make the character jump faster or slower.

However, when we decide to add movement to our character, we see this becomes a problem. See the jsFiddle below (use W to jump, A and D to move left and right):

I certainly do not know of anybody who jumps like that. We need a way to make our character gradually “fall” back to the ground. By using the notion of gravity, we can accomplish just that. (Another problem is that our character can jump while already in the air, so we’ll fix that too.)

2. Jumping With Gravity

If we look at a formal definition of gravity (Scroll down to the Earth’s gravity section), we can see that an object falling freely near the Earth’s surface increases its downwards velocity by 9.81 m/s (32.1740 ft/s or 22 mph) every second that it falls.

All this means is that the speed at which it falls increases over time. In other words, it accelerates towards the ground.

To translate this into some working code, we need to add a y-velocity variable for our character; every frame, he’ll move downwards by the amount of this y-velocity. When the game first starts the character’s y-velocity will be 0, since he is on the ground. To make him jump, we will set his y-velocity to a negative number, propelling him into the air. During every frame that he is airborne, we will add a set value (which we’ll call gravity) to his velocity, accelerating him towards the ground as time passes.

Below is how the code might work:

var yVel = 0;
var gravity = 1.2;
var isJumping = false;

function jump() {
    if (isJumping == false) {
        yVel = -15;
        isJumping = true;
    }
}

function gameloop(){
 if (isJumping) {
     yVel += gravity;
     character.y += yVel;
         if (character.y > characterGround) {
             character.y = characterGround;
             yVel = 0;
             isJumping = false;
            }
     }
}

We first set yVel to 0, set a gravity variable (which you can change to make the character descend at a different rate), and set an isJumping variable to define whether he’s already jumping.

If the user attempts to jump while already in the air, nothing happens; otherwise, we set yVel to -15. (Change this value to make the initial jump higher or lower.)

Inside the gameloop(), if the character is jumping, we add some gravity to the yVel which makes the character “fall” a certain amount on each tick of the game loop. If he hits the ground we set isJumping back to false so we can make him jump again

I have another jsFiddle you can try out, fork, and customize. Try changing the gravity and yVel values, so you can really get a feel for how this technique works:

3. Conclusion

In this short tutorial you have learned how to make your character jump more realistically by incorporating some gravity. I hope you have found this tutorial useful and thanks for reading!