How should I smooth sprite movement without making pixel art shimmer?

programming web dev
1

Hey everyone, I’m working on a small canvas pixel-art game and trying to smooth camera and sprite movement, but my sprites start shimmering when I interpolate positions. If I round everything, motion looks choppy. If I keep subpixel values, the art gets soft and edges crawl.

const x = prevX + (nextX - prevX) * alpha;
const y = prevY + (nextY - prevY) * alpha;

ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(sprite, x, y);

What is the usual fix here for smooth motion and stable pixel edges without introducing blurry rendering?

BobaMilk

2

@BobaMilk yup, the usual fix is: keep physics/world/camera positions as floats, but snap the final screen-space draw position before drawImage.

So not drawImage(sprite, x, y) directly — do const sx = Math.round((x - cameraX) * scale) / scale and same for y, or just round to whole pixels if scale is 1. The really solid setup for pixel art is rendering the game to a low-res offscreen canvas with integer-snapped positions, then scaling that canvas up by an integer with imageSmoothingEnabled = false.

Quelly