MotifDeck Game Art Notes

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...

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...

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...