博文

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-c...
发表评论
阅读全文

A small manifest for reviewing hand-picked animation frames

When a character animation is assembled from reviewed frames, filenames alone often do not explain which frames belong in the loop or how long each should be shown. A small manifest can make the decision explicit and easier to review. Here is a deliberately simple example you can adapt to your own renderer. It is an illustrative format, not a claim about any tool's export format: { "animation": "idle", "frames": [ { "file": "idle_00.png", "duration_ms": 120 }, { "file": "idle_03.png", "duration_ms": 80 }, { "file": "idle_07.png", "duration_ms": 120 } ], "loop": true } The sequence is defined by array order, so gaps in the filenames are fine: they can represent frames you chose to omit. The three durations add up to 320 ms. A renderer must define how it handles missing files or invalid durations; silently substituting another image can...
发表评论
阅读全文

A browser animation pause check for hidden tabs

Browser animation previews can behave strangely after a tab has been hidden. A large elapsed time may skip the visible portion of a sprite sequence when the tab returns. Before treating it as an artwork problem, decide whether your preview should pause, catch up, or restart. Choose the intended behavior For an art review, pausing while the page is hidden can be useful: the viewer resumes at the same pose. A real-time game or synchronized timeline may instead need to catch up to a shared clock. Neither behavior is universally correct; document the choice and test it in the environment where the animation runs. For a pause-on-hide preview Start a known animation and note its current pose. Switch to another tab for several seconds, then return. Check that the first visible update does not apply the whole hidden interval as one animation delta. Confirm that repeated hide-and-return cycles do not start multiple animation loops or duplicate sound and event callbacks. Test on the target brows...
发表评论
阅读全文

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...
发表评论
阅读全文

How to estimate space for a sprite sheet before exporting

By Allen Zhao on behalf of MotifDeck. Prepared with AI assistance. A sprite sheet is a texture that holds several frames. A quick capacity estimate can tell you whether a proposed sheet has enough space before you spend time arranging frames. This estimate assumes a regular grid of equal-size cells; a tight packing algorithm can produce different results. Start with the complete cell size Write down the canvas width and height of one frame. Then add the space you want on both sides of that frame. For example, a 32 × 32 frame with 2 pixels of padding on each edge needs a 36 × 36 cell. This assumes padding belongs to every cell; if your exporter shares padding between neighbors, use that exporter's actual spacing rule instead. Count the columns and rows Divide the sheet width by the cell width and round down. Repeat for sheet height and cell height. Multiply the two whole numbers. For a 512 × 512 sheet and 36 × 36 cells, each dimension holds 14 cells, leaving 8 pixels unused along th...
发表评论
阅读全文

A practical animation handoff note for 2D game teams

By Liangqi Zhao for MotifDeck. Prepared with AI assistance. A folder of animation frames is only part of a game-art handoff. A concise note preserves ordering, timing and context so the next person can reproduce the sequence. This checklist is independent of the art tool used. Describe the sequence Name the action, for example walk_right , and record whether it loops, the file order and timing. Specify whether each duration applies to an individual frame or the whole sequence. If a character is mirrored, check whether asymmetric accessories still look correct. An illustrative manifest This JSON is an example team note, not a MotifDeck export format or an engine import specification. Replace the values with your own files. { "action": "walk_right", "loop": true, "frames": [ { "file": "walk_001.png", "duration_ms": 100 }, { "file": "walk_002.png", "duration_ms": 150 }, { ...
发表评论
阅读全文

A Practical Pivot and Canvas Check for 2D Character Animation

By Liangqi Zhao for MotifDeck , an AI game art workspace. This guide was prepared with AI assistance. A character can look steady in each image but jump when a game switches frames. Separate the canvas, the visible silhouette, and the reference point used to place the character. 1. Keep a consistent canvas Place each frame on a canvas with the same dimensions. If one frame is cropped more tightly than another, a renderer that places every top-left corner at the same coordinates can make the character jump. Keep original frames separately so the crop can be revisited. 2. Choose a meaningful anchor For a walking character, a point near the feet can be a useful reference. For a flying character, the body center may work better. A pivot is a placement reference, not an instruction to freeze the drawing. Record it in pixels or normalized coordinates and check how the target engine interprets it. 3. Test at actual playback size Place frames on the same background and play the sequence. L...
发表评论
阅读全文