2D Physics

In 2D games, physics is used to create realistic movement for characters, objects, and environments. The most fundamental concepts in 2D physics are position, velocity, and the coordinate system in which movement occurs. Understanding these principles is essential for making objects move smoothly and naturally in your game.

This guide will focus on simple 2D physics by explaining the 2D coordinate system, position and velocity vectors, and how velocity affects position. We’ll also explore an example of a platformer character jumping, using a combination of jump velocity and gravity.

The 2D Coordinate System

In a 2D game, the world is represented on a coordinate plane with two axes:

• The x-axis represents the horizontal position, with increasing values moving to the right.
• The y-axis represents the vertical position, with increasing values moving downwards (in most 2D game engines, unlike in traditional mathematics where the y-axis increases upwards).

The position of an object is represented by a pair of coordinates (x, y), where:

• x is the horizontal position.
• y is the vertical position.

For example, a player at position (100, 150) is 100 units to the right of the origin (0, 0) and 150 units down from the top of the screen.

(0, 0)------------------->
      |                   x-axis
      |
      |  Player
      |     (100, 150)
      y-axis

Position Vectors

In 2D physics, a position vector is used to represent the location of an object on the coordinate plane. It contains the x and y coordinates that describe the object’s position.

For example, if a character is located at position (x = 100, y = 150), we can define the position vector as:

let position = { x: 100, y: 150 };

The position vector tells us where the object is in the 2D space.

Velocity Vectors

A velocity vector describes the rate at which an object’s position changes over time. It defines how much the position changes in both the x and y directions per unit of time (usually measured in seconds or frames).

• Velocity in the x-axis (velocityX): This determines how fast an object is moving horizontally. A positive value moves the object to the right, and a negative value moves it to the left.
• Velocity in the y-axis (velocityY): This determines how fast an object is moving vertically. A positive value moves the object downward (due to gravity, for example), while a negative value moves it upward (such as when jumping).

For example, if a player has a velocity vector of (velocityX = 2, velocityY = -5), it means:

• The player moves 2 units to the right every frame.
• The player moves 5 units upward every frame.

let velocity = { x: 2, y: -5 };

The velocity vector tells us how fast and in which direction the object is moving.

How Velocity Affects Position

In 2D physics, the position of an object is updated by adding its velocity to its current position over time. This is typically done in the game loop, where the game updates the object’s position every frame.

The new position of the object is calculated as:

newX = currentX + velocityX * dt
newY = currentY + velocityY * dt

Where dt is the delta time, or the time elapsed since the last frame. In many cases, dt can be assumed to be 1 for simplicity.

Example: 2D Platformer Character Jump

Let’s use a simple example of a platformer character performing a jump.

In a 2D platformer, a character’s movement typically involves horizontal movement and jumping. When the player presses the jump button, we give the character an initial upward velocity. Meanwhile, gravity is constantly pulling the character downward, giving them a constant downward velocity.

The Jump

1. The player presses the jump button.
2. The character’s velocityY is set to a negative value (e.g., -300) to simulate an upward movement.
3. Over time, the velocityY increases due to the force of gravity pulling the character down (e.g., +10 per frame).
4. The character moves up, slows down as gravity counteracts the jump, and eventually begins falling.

Gravity

Gravity is applied every frame, increasing the character’s downward velocity until they land on the ground.

Here’s an example of the logic for jumping and gravity:

let position = { x: 100, y: 300 }; // Initial position
let velocity = { x: 0, y: 0 }; // Initial velocity
const gravity = 10; // Gravity constant
const jumpVelocity = -300; // Initial jump velocity

function update(dt) {
  // If the player presses the jump key, set the initial jump velocity.
  if (playerPressesJumpKey) {
    velocity.y = jumpVelocity;
  }

  // Apply gravity every frame to simulate falling.
  velocity.y += gravity;

  // Update the player's position using the velocity.
  position.x += velocity.x * dt;
  position.y += velocity.y * dt;

  // Check if the player has landed on the ground (at y = 300, for example).
  if (position.y >= 300) {
    position.y = 300; // Reset the position to ground level.
    velocity.y = 0; // Reset the vertical velocity to 0 (no more falling).
  }
}

Jump Breakdown

1. Initial Jump: The player presses the jump key, setting the velocityY to -300. This causes the player to move upward.

2. Mid-air: As the player ascends, gravity adds a positive value to velocityY, gradually slowing the ascent.

3. Apex of the Jump: When velocityY reaches 0, the player stops rising and starts falling as gravity continues to act on them.

4. Descent: As gravity continues to increase velocityY, the player accelerates downward until they hit the ground.

---

In 2D physics, movement is achieved through a combination of position vectors and velocity vectors, with velocity determining how much and in what direction an object moves each frame. In a platformer, jumping involves applying an initial upward velocity and letting gravity gradually pull the player back down to the ground. Understanding these concepts allows us to build realistic movement systems for characters and objects in our 2D games.