Keep a 2D character grounded when animation frames have different bounds
When individual animation frames have different transparent margins, centering each cropped image in the same rectangle can make a character appear to bounce. The pixels are not necessarily wrong: the placement rule is moving the artwork as the bounding box changes.
A steadier approach is to pick an anchor that has the same meaning in every frame. For a grounded walk, that might be the point where the supporting foot meets the floor. For a flying character, a point near the torso can be more useful. The anchor does not need to be the same pixel coordinate in each source image.
Place frames relative to an anchor
For each frame record its anchor in local image coordinates, for example (anchorX, anchorY). To put the anchor at a world-space point (worldX, worldY), draw the frame with its top-left corner at:
drawX = worldX - anchorX
drawY = worldY - anchorY
For example, if the desired ground contact point is (100, 200) and a frame's local anchor is (16, 28), draw that frame at (84, 172). If another frame's anchor is (18, 30), draw it at (82, 170). In both cases the chosen anchor lands at (100, 200).
Check the result in motion
- Put a horizontal guide under the intended contact point and play the sequence at its real size.
- Step through the frames around foot contact. A sliding foot may need a different contact interval or a corrected anchor; simply forcing every foot pose to the ground can flatten a deliberate hop.
- Review weapons, scarves and other secondary details separately. A stable torso anchor does not automatically prevent an accessory from jumping.
- Preserve the original source frames and keep anchor metadata alongside them. If you crop later, recalculate the anchor relative to the new crop.
For a video-to-frames workflow, MotifDeck's public demo lets you inspect and choose frames after viewing the motion. I'm Allen and work on MotifDeck. Its free plan offers limited preview; downloading generated files requires a paid unlock. This guide was drafted with AI assistance and reviewed for its coordinate examples.