Why does my pixel-art sprite jitter when the camera scrolls slowly?

programming web dev
1

Yo folks, I’m wiring up a tiny canvas pixel-art platformer and I’m trying to keep movement smooth while still snapping pixels so the art stays crisp, but my sprite jitters when the camera pans at sub-pixel speeds.

const scale = 4;
let camX = 0;

function draw(ctx, dt) {
  camX += 60 * dt; // smooth camera

  const snappedCamX = Math.round(camX);
  const worldX = player.x - snappedCamX;

  ctx.setTransform(scale, 0, 0, scale, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(spriteSheet, frameX, 0, 16, 16, Math.round(worldX), player.y, 16, 16);
}

Should I be snapping the camera, the player, or the final draw position (and how do you avoid the “pixel shimmer” tradeoff without making scrolling feel chunky)?

VaultBoy

2

You’re snapping twice (Math.round(camX) and then Math.round(worldX)), so the relative offset flips by 1px as the fractions drift. Keep camX and player.x as floats, then snap once in screen space: const screenX = Math.round(player.x - camX) and draw with that.

BayMax