Introduction

Platformers are perhaps one of the most successful genres of game in existence, and certainly one of the most iconic. Arguably the most important mechanic of a platformer is the jumping. This tutorial will outline the basics of a smooth jump mechanic. I have used Java and the Slick 2D library for this tutorial, but the concepts I have used here are easily applicable with different tools.

Variables

In the extract from the code below, you will see the necessary variables and constants needed to create the jump mechanic:

<p>// Some necessary constants.<br> public static int width = 640, height = 480;
 public static int floorHeight = height - 64;
 
 // Variables that controls the player's position and velocity on both axes.
 private float x, y, speed;
 private float jumpStrength, weight;</p>

The width and height constants represent the width and height of the window. They are used to a) create the window and b) perform some calculations in respect to the jumping mechanic. The floorHeight constant represents the maximum value of the player's y position. Below that, the x and y variables represent the position of the player. The speed variable represents how quickly the player can move on the x-axis. The jumpStrength and weigth variables are used in the jumping calculation and will be covered later. Below is shown the initial values I used for these variables:

<p>@Override<br> public void init(GameContainer gc) throws SlickException
 {
  // Example values for player variables.
  x = 0;
  y = floorHeight;
  speed = 3;
  weight = 1;
 }</p>

Rendering

This code renders the scene. None of this should need explanation, as I am simply rendering rectangles to the screen. Voila:

<p>@Override<br> public void render(GameContainer gc, Graphics g) throws SlickException
 {
  g.setColor(Color.white);
  g.fillRect(0, height - 32, width, 32);
  
  g.setColor(Color.gray);
  g.fillRect(x, y, 32, 32);
 }</p>

Movement Calculations

This section will detail the movement along the x-axis and- of course- the jumping calculations. Movement on the x-axis is simple- based on the player's input, increase or decrease the player's x position by the speed:

<p>// Basic movement on the x-axis.<br>  if (gc.getInput().isKeyDown(Input.KEY_D))
   x += speed;
  else if (gc.getInput().isKeyDown(Input.KEY_A))
   x -= speed;</p>

You can, if you choose to, use a delta variable to ensure the speed of movement is independent of the framerate. I was just lazy and didn't want to over-complicate the tutorial. Next, we have to make the player jump, which is shown in the following code:

<p>// Jump code<br>  if (gc.getInput().isKeyDown(Input.KEY_SPACE) && y >= floorHeight) // Must be on the ground to jump.
   jumpStrength = 24; // Will result in the player moving upwards.
  
  y -= jumpStrength; // Move the player on the y-axis based on the strength of the jump.
  jumpStrength -= weight; // Gradually decrease the strength of the jump by the player's weight.
  
  if (y >= floorHeight) y = floorHeight; // Ensure the player does not fall through the floor.</p>

The first if statement should be fairly obvious- if the player presses spacebar, and if they are on the ground, set the jumpStrength variable to 24. Next, we subtract jumpStrength from the player's y-position every frame. We also decrease the jumpStrength by the player's weight. This should create the illusion that the player is jumping in a parabola shape. Finally, we check if the player is below the floorHeight. If so, set their y position to the floorHeight. Your full update/tick method should look as follows:

<p>@Override<br> public void update(GameContainer gc, int delta) throws SlickException
 {
  // Basic movement on the x-axis.
  if (gc.getInput().isKeyDown(Input.KEY_D))
   x += speed;
  else if (gc.getInput().isKeyDown(Input.KEY_A))
   x -= speed;
  
  // Jump code
  if (gc.getInput().isKeyDown(Input.KEY_SPACE) && y >= floorHeight) // Must be on the ground to jump.
   jumpStrength = 24; // Will result in the player moving upwards.
  
  y -= jumpStrength; // Move the player on the y-axis based on the strength of the jump.
  jumpStrength -= weight; // Gradually decrease the strength of the jump by the player's weight.
  
  if (y >= floorHeight) y = floorHeight; // Ensure the player does not fall through the floor.
 }</p>

This code should be called once every frame.

Step 1: Conclusion

Conclusion

Now we have the basics of a jumping mechanic. There are still some improvements that you could make. Here are some ideas you could try to do on your own: