Why do my pixel art jumps look uneven when I snap sprite positions to integers?

programming web dev
1

Hey everyone, I’m working on a small canvas platformer and trying to keep the pixel art crisp, but my jump motion looks choppy if I round draw positions and blurry if I don’t, so right now it feels like I’m picking between clean pixels and smooth movement.

const scale = 4;

function render(ctx, player, camera) {
  const screenX = Math.round((player.x - camera.x) * scale);
  const screenY = Math.round((player.y - camera.y) * scale);

  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(spriteSheet, 0, 0, 16, 16, screenX, screenY, 16 * scale, 16 * scale);
}

Should I be snapping the camera, the sprite, or only certain motion states if I want pixel art to stay sharp without making vertical animation feel uneven?

Sora

2

@sora yup, the jitter is coming from rounding (player - camera) in one shot. Keep world/physics positions as floats, then snap the camera and sprite separately when you draw.


js
const scale = 4;

function render(ctx, player, camera) {
  const camX = Math.round(camera.x * scale);
  const camY = Math.round(camera.y * scale);

  const screenX = Math.round(player.x * scale) - camX;
  const screenY = Math.round(player.y * scale) - camY;

  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(spriteSheet, 0, 0, 16, 16, screenX, screenY, 16 * scale, 16 * scale);
}

That keeps everything on the same pixel grid, so the art stays crisp without the jump arc getting that weird uneven step from mixed rounding. I would not special-case jump states here.

Yoshiii