Delta Time & Fixed Timesteps

Frames don’t arrive at a perfectly steady pace. One frame takes 16 ms, the next 21 ms, and a player on a 144 Hz monitor gets more than twice as many frames as one on a 60 Hz laptop. If you move things “a bit per frame”, your game runs at a different speed on every computer. The fix is delta time.

What is delta time?

Delta time (dt) is the number of seconds since the previous frame — about 0.0167 at 60 FPS. Instead of “move 2 pixels per frame”, you say “move 130 pixels per second” and multiply by how many seconds actually passed:

let last = performance.now()
function loop(now) {
  const dt = (now - last) / 1000  // milliseconds → seconds
  last = now
  player.x += player.speed * dt   // speed is in pixels per SECOND
  render()
  requestAnimationFrame(loop)
}

Timers are just numbers

let cooldown = 0
function update(dt) {
  cooldown -= dt                    // counts down in real seconds
  if (input.fire && cooldown <= 0) {
    spawnBullet()
    cooldown = 0.25                 // 4 shots per second, on any machine
  }
}

When variable dt goes wrong: tunnelling

If a frame takes a long time (a hitch, a slow machine, a background tab), dt becomes large, and fast objects take huge steps. A bullet can be in front of a wall in one frame and behind it the next, so the collision check never sees an overlap. Physics also becomes less accurate and less repeatable.

The fixed timestep

The standard fix: keep rendering as fast as the screen allows, but run the simulation in small, constant steps. Accumulate real time, and spend it in fixed slices:

const STEP = 1 / 60   // physics always advances in exact 1/60 s steps
let accumulator = 0

function loop(now) {
  const frameTime = Math.min((now - last) / 1000, 0.25) // clamp huge hitches
  last = now
  accumulator += frameTime
  while (accumulator >= STEP) {
    physicsUpdate(STEP)       // deterministic, same on every machine
    accumulator -= STEP
  }
  render()
  requestAnimationFrame(loop)
}