Metlivi Blog

How to Plan a Reusable Sprite Sheet for Several Pet Animation States

For a pet sprite that needs several animations, plan the sheet around how each state will be selected and played: define a shared frame size and anchor, group frames by named state, and settle on a predictable grid before drawing every frame. Keep a layered source file and export the image with metadata when your tool and runtime support it. This makes states easier to revise and helps prevent crops from drifting or being read in the wrong order.

October 15, 20266 min readBy Metlivi Editorial Team
Section 1

Start with the states the pet actually needs

List the pet’s required states before choosing sheet dimensions. A small set might include idle, move, and a brief reaction; the precise list depends on the project. For each state, decide whether it loops, plays once, or reverses at the end. Mark the first and last frame and estimate how many distinct poses the motion needs. This is a planning aid, not a prescribed animation formula.

In Aseprite, frame tags can mark ranges as named animations, and each tag can specify forward, reverse, or ping-pong playback. Naming and tagging ranges as you plan makes state boundaries visible in the source file, even if you later export them together. Aseprite: Tags

Section 2

Choose a frame box and anchor that can serve every state

Set a consistent cell width and height for the animation frames when the receiving tool expects a regular grid. Include room for the pet’s widest pose, raised ears or tail, and any small movement beyond the body. Place the pet relative to a shared anchor, such as the center of its feet or the center of its resting pose. When the pet changes pose, move the drawing around that anchor rather than shifting the anchor itself; otherwise the pet may appear to jump between frames.

A fixed grid is straightforward to slice because every cell has the same dimensions and row or column position. Aseprite’s sprite-sheet import asks for frame width and height, and supports an offset and padding when the image has gaps. If frames differ substantially in size or need individual pivots, an atlas with per-frame metadata may fit better than a uniform grid. Aseprite: Sprite sheets

Section 3

Map states to rows or tags before drawing

Sketch a small layout plan with state names and frame ranges. For a regular grid, reserve a row per state and keep each state’s frames in playback order from left to right. If the number of frames differs by state, leave unused cells empty or use a separate strip per state; do not place unrelated poses into a row just to fill it. A flat sequence is compact but can be harder to inspect; a matrix makes state grouping clearer for people and simple grid-based importers.

There is no universal row-order convention. The importer’s expected order matters: Aseprite’s documentation notes that sheet type affects the order frames are taken when importing, and its export supports horizontal, vertical, and matrix layouts. Pick an order the target engine can interpret, then record it in the project notes or metadata. Aseprite: Sprite sheets

Section 4

Keep the editable source separate from the exported sheet

Treat the sprite sheet as a delivery image, not the only editable source. Keep the native project with its layers, frames, tags, and slices so you can change an individual state without reconstructing it from the flattened export. Aseprite documents that its .aseprite file preserves information such as layers, frames, tags, and slices; the PNG export is useful for consuming the artwork elsewhere. Aseprite: Files

Add metadata if the runtime needs to locate frames or read timing and state names. Aseprite’s export options include JSON data, padding controls, trimming, and tag selection. When using a packed layout or variable-size crops, preserve that metadata with the image: pixel coordinates cannot safely be inferred from row and column alone. Aseprite slices can also store named bounds and a pivot, and slice information can be included in sprite-sheet JSON. Aseprite: ExportSpriteSheet, Aseprite: Slices

Section 5

Decide on padding and trimming with the importer in mind

Padding describes empty space between frames or around the sheet; its correct amount depends on the importer and how the texture will be sampled. Keep cells separated if the target workflow requires visible gaps or if you want to inspect boundaries easily. If frames touch, confirm that the importer can still slice them reliably. Aseprite exposes border, shape, and inner padding as distinct export settings, so check the meaning of each setting in the tool rather than treating “padding” as one universal option. Aseprite: ExportSpriteSheet

Trimming removes transparent margins, which can reduce empty area but may change the exported frame bounds. If you trim frames, retain offsets, pivots, or other metadata needed to place the visible crop back at the shared anchor. Otherwise, a pose with a smaller silhouette can appear to shift even when its original drawing was aligned correctly. For a regular grid workflow without per-frame metadata, avoid trimming individual cells unless the importer preserves their original alignment information.

Section 6

Validate the sheet as an animation, not just an image

Before export, review the planned states in sequence. Check that the first and last frame of each loop join as intended, one-shot actions stop on an appropriate final pose, and the pet’s anchor remains visually steady. Then import the sheet using the target frame order, cell dimensions, offset, and padding. Play every state at its intended timing; a sheet that looks tidy in an image viewer can still have a wrong crop, skipped frame, or swapped order in an importer.

Use this compact check before handing the sheet to the next step:

  • Every state has a clear name and frame range.

  • The grid dimensions, frame dimensions, and reading order match the importer.

  • The pet stays aligned to the same anchor across poses.

  • Cropping and padding do not cut off details or mix neighboring cells.

  • Exported metadata, if used, accompanies the correct image and describes the current layout.

  • The editable source remains available for later revisions.

Section 7

A practical planning sequence

First write the state list and playback behavior. Next decide whether the importer expects a regular grid or can consume frame metadata. Set the cell size and anchor from the widest pose, map each state into rows or named frame ranges, and only then draw and refine the animation. Export a small test sheet early and import it into the actual runtime before finishing all poses. That test reveals layout assumptions while they are still inexpensive to change.

The key planning choice is the contract between the artwork and the importer: a regular grid needs consistent cells and a known order; a packed or trimmed sheet needs reliable metadata and preserved placement information. Make that contract explicit, and the same source animation can remain organized while its exported layout changes to suit the project.

Section 8

Sources

Related reading

Keep exploring this topic