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?
Also make sure your render scale is an integer (e. g. , 2x/3x) and snap to that grid too, otherwise you’ll still get shimmer even if you round the camera.
Integer scaling only works if both the camera and sprite positions snap to the same 1/renderScale grid, like 0.5px steps at 2x, otherwise you’ll still see shimmer.
Yep, you need to quantize the final screen-space draw position after camera transform, not just the camera, and keep sampling point/nearest with no filtering so the GPU doesn’t blend subpixels. If you still want smooth camera motion, keep the camera float for logic but snap a separate renderCamera (or snap the view matrix) right before drawing.
Also make sure your render target and viewport scale are exact integers (e. g. , 320×180 upscaled 4x) or you’ll get shimmer even with snapping and nearest sampling.
Yeah, integer scaling is the big one, and pairing it with a fixed internal resolution plus nearest-neighbor sampling keeps the whole pipeline from introducing subpixel wobble. If the camera needs smooth motion, move it in subpixels but snap the final draw position (or the render target blit) to whole pixels before presenting.
