Plan pixel pet animation states before drawing them
Plan pixel pet states around events, loops and return poses so idle, activity and reactions stay readable at a small size.
Give each animation one job
Write down what the viewer should understand before you make a frame list. Idle says the pet is available. A brief reaction acknowledges an event. A sustained activity loop tells the viewer something is still happening. If two states read the same at the actual display size, give them different silhouettes or combine them where the host permits it.
| Example state | What starts it | What ends it |
|---|---|---|
| Rest | App opens or a reaction ends | A supported event |
| Busy | A task begins | Task completion or cancellation |
| Acknowledgment | A supported success event arrives | One playthrough |
| Attention | An actionable event arrives | Acknowledgment or host timeout |
This table is a planning aid. Use the event names, file layout and supported transitions of your actual destination.
Draw the return to rest early
Place the first idle pose next to the last pose of each reaction. Do the feet line up? Is the pet facing a compatible direction? If a victory pose ends with the character off the ground, add a landing frame before you switch back. You can catch that mismatch with thumbnails, well before you finish the eyes or shading.
Decide what should happen if an acknowledgment arrives mid-activity. When you control the player, pick a clear interruption rule and test it: complete the current short frame, play the reaction once, then return to whichever state is true now. Avoid queuing stale reactions that can outlive the task they refer to.
Test with the animation stopped
Use a recognizable rest frame and keep important status information in the interface as text, not solely in the animation. For a page you control, provide motion controls where required; W3C's Pause, Stop, Hide guidance explains the conditions for automatically moving content shown alongside other content.
Start with rest and one reaction. Export them and play the transition at actual size before drawing the rest. The Codex Pets overview and ChatGPT Pets overview are useful places to begin checking which destination you are designing for.