How do you keep pixel art sprites crisp while the camera pans smoothly?

programming web dev
1

What’s up everyone? I’m working on a little canvas-based pixel art game and I’m trying to get smooth camera panning without making the sprites look like they’re swimming. If I snap everything to integers it’s crisp but the camera feels jittery, and if I allow subpixel positions it looks smooth but the pixels blur or shimmer on movement.

What’s your go-to boundary between “world units” and “screen pixels” so you get both smooth motion and crisp rendering without a bunch of special-case hacks?

Quelly :smiling_face_with_sunglasses:

2

Let the camera move in floats, but round the camera’s screen-space offset right before you draw so every sprite lands on whole pixels.

Also make sure canvas image smoothing is off, or the browser will blur your scaled sprites.

Sora