A practical pivot check when flipping a 2D character

By Liangqi Zhao, on behalf of the MotifDeck team. Prepared with AI assistance.

A character that jumps sideways when it turns is often flipping around the middle of its image instead of the point used to place it in the world. This check isolates the art transform from the game’s movement and collision logic.

Mark one point before flipping

Choose a stable pivot, such as the midpoint between the feet in the neutral pose. Draw a temporary cross at that point. Pause the animation on one frame and note the cross’s world position. Flip the image horizontally without moving the character. The cross should stay at the same world position.

A numeric example

Suppose the image is 64 pixels wide and its pivot is 20 pixels from the left edge. In continuous image coordinates, a horizontal reflection about that pivot maps x to 40 − x. The pivot at 20 stays at 20; the left edge at 0 moves to 40, and the right edge at 64 moves to −24. This assumes the pivot itself remains fixed in the world. Pixel-center indices use a different convention, so check your engine’s coordinate system.

Browser preview

In a simple CSS preview, set transform-origin: 20px 100%; and apply transform: scaleX(-1); to the image. This flips the image around the chosen horizontal origin; 100% places the vertical origin at its bottom edge. The 20px value must be in the image’s displayed CSS-pixel coordinates: if a 64px image is displayed at 128px wide, scale the horizontal pivot to 40px. See MDN’s transform-origin reference and scaleX reference.

Test the whole action

  1. Flip the paused neutral frame several times. If the cross moves, check the transform origin and the displayed image size.
  2. Step through the action in both directions. Different trimmed frame bounds may need individual offsets to keep the chosen point stable.
  3. Check attachments separately. A weapon or effect may need its own mirrored offset, and a shadow may be better kept independent.
  4. Test collision boxes and gameplay coordinates in the engine. Mirroring artwork alone does not automatically make every hitbox or attached object correct.

For an example of inspecting actual motion and selected transparent frames before export, the MotifDeck motion sample is public. MotifDeck is our own game-art workspace; this pivot check applies regardless of which art tool you use.

评论

发表评论

此博客中的热门博文

How to Check Secondary Motion in a Character Animation

A scarf, feather or loose accessory can help a character feel responsive, but it can also make a loop difficult to read. Check the main pose first, then review the accessory on its own. 1. Establish the main action Pick a clear starting pose and a few moments that explain the action. If the silhouette is hard to understand without the accessory, fix the main poses before polishing secondary movement. 2. Watch for delayed motion Play the sequence at a normal speed, then step through it. A loose scarf may lag behind a turn and settle afterwards. Compare adjacent frames for sudden jumps or reversals that have no visible cause. There is no single correct delay: a heavy cape and a light ribbon should behave differently. 3. Inspect edges on different backgrounds Transparent frames can hide stray pixels or soft halos against a checkerboard. Preview against both a light and a dark solid color. Check narrow gaps between the accessory and body, especially where their silhouettes overlap. 4. Test...
阅读全文

How to diagnose reversed or scrambled sprite frames after export

By Allen Zhao for MotifDeck. Prepared with AI assistance. When a character animation plays backwards or jumps between poses after import, check the frame order before redrawing the artwork. 1. Record the intended sequence In the source editor, note the selected frames in the order they should play. Keep intentional repeated frames and a reverse leg: a list of unique images would lose that information. Record frame durations too, since a hold can make a correct order feel unusual. 2. Inspect exported names Compare the filenames with the intended sequence. Plain alphabetical sorting puts frame1.png , frame10.png , then frame2.png . Zero-padded names such as frame01.png , frame02.png and frame10.png sort in numeric order in that example. Do not rename your only copy; back it up and check project references first. 3. Check import and playback separately Look at the engine’s imported frame list or atlas metadata before pressing play. If that list already differs from the exported sequence...
阅读全文