Sprite Framing
Automated bounding-box & center-of-mass alignment for sprite sheets.
Settings
WHAT IS SPRITE FRAMING?
Sprite Framing is an automated alignment tool that corrects jittery or off-center animations within a sprite sheet. It analyzes the opaque content of each individual frame and mathematically re-centers it within its grid cell based on its center of mass or bounding box. This guarantees perfectly anchored, smooth animations when imported into your engine, eliminating the need for tedious manual repositioning.
HOW IT WORKS
1. Image Upload
Drag and drop any PNG, GIF, or WebP sprite sheet directly onto the canvas viewport. Your file is never uploaded to a server — all decoding and analysis happens locally in your browser.
2. Parameter Adjustment
Set the Frame Width and Height to match your sprite sheet grid cell size. Choose an Alignment Mode and an Alpha Threshold to define which pixels are considered solid content.
3. Interactive Inspection
After processing, click any frame cell on the canvas to select it. Use the zoom controls or scroll wheel to inspect alignment results at up to 128× magnification. Pan with Space+Drag or middle mouse.
4. Optimized Sheet Download
Use the D-Pad controls to apply ±1px manual corrections to individual frames. When satisfied, download the re-aligned sprite sheet as a lossless PNG.
SETTINGS GUIDE
Frame Width / Height
These values define how your sprite sheet is sliced into a uniform grid. Each cell of width × height pixels is analyzed independently. Values must be at least 4px and cannot exceed the global resolution limit set in Settings.
Alignment Modes
Center of Mass calculates the average pixel coordinate of all opaque content and re-centers it. Center of Bounds finds the bounding box of opaque pixels and centers that rectangle. Original / None skips auto-calculation entirely, anchoring all offsets at (0,0) for full manual control.
Alpha Threshold
Pixels with an alpha channel value below this cutoff are treated as transparent background. Raise the value to ignore semi-transparent anti-aliasing edges and focus only on fully opaque sprite core pixels.