動畫影格邊界不同時，如何讓 2D 角色保持穩定貼地
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.
來源：DEV Community · dev.to