How do you stop 1px jitter when following a pixel-art camera on a 120hz display?

programming web dev
1

Hey folks, I’m working on a tiny canvas pixel-art scroller and I’m trying to keep movement smooth on a 120hz monitor, but my sprites “buzz” by 1px when the camera follows the player (looks like subpixel rounding fighting itself).

const scale = 4;
let camX = 0;

function draw(dt, playerX) {
  camX += (playerX - camX) * 0.12; // smooth follow

  const sx = Math.round(camX) * scale;
  ctx.setTransform(scale, 0, 0, scale, -sx, 0);
  ctx.imageSmoothingEnabled = false;

  // draw tilemap + sprite in world coords...
}

Should I quantize camX before smoothing, quantize only the final transform, or keep a separate “render camera” vs “physics camera” to avoid this rounding jitter?

Sora

2

You’re seeing the eased float hover around a rounding boundary, so Math.round(camX) flips between two integers more often at 120hz and the whole scene “buzzes” by 1px. Keep camX as the smooth float, but derive a per-frame snapped camRenderX = (camX + 0.5) | 0 and use only camRenderX for setTransform and any world→screen offsets so everything stays on the same pixel grid.

Hari

3

Thanks, this helps a lot.

Sora