Building SpriteGen: three details that make a sprite sheet useful

I build SpriteGen, a browser-based tool for generating sprite sheets with AI. The frontend uses Astro and React, with backend services on Cloudflare Workers.

A generated character can look good as a still image and still be awkward to animate. Here are three implementation details from the project that are useful beyond AI generation, including when working with existing frames.

1. Preview the animation before exporting

The result view includes a canvas animation preview with play/pause and an adjustable frame rate. It reads frames in row-major order: left to right, then the next row.

For frame index i, the cell coordinates are:

const column = i % columns;
const row = Math.floor(i / columns);

Playing the sequence makes it easier to spot visual jumps and an awkward transition between the last and first frames. A static sheet alone makes those problems harder to judge.

For pixel-art previews, canvas image smoothing is disabled. The preview also starts paused when the browser reports a preference for reduced motion.

2. Give uploaded frames a consistent baseline

SpriteGen also has a frame-packing tool. Uploaded frames can have different dimensions, so it builds equal-sized cells from the widest and tallest frames, plus padding. It places each frame horizontally in the center and vertically at the bottom, without resizing it.

For an upright character, bottom alignment helps prevent differently sized frame images from appearing to bounce vertically:

const x = column * cellWidth + padding
  + Math.floor((maxFrameWidth - frame.width) / 2);
const y = row * cellHeight + padding
  + maxFrameHeight - frame.height;

That is a simple packing rule, not a solution for every animation. It cannot fix a character drawn at inconsistent positions inside its source frames.

File ordering matters too. Natural numeric sorting keeps frame_2.png before frame_10.png.

3. Export for the next step in the workflow

A GIF is convenient for reviewing or sharing an animation. For using the frames elsewhere, the tool also supports individual PNG frames in a ZIP and an atlas bundle containing the sheet image, TexturePacker-style JSON Hash metadata, and Aseprite-style JSON metadata.

For the standard animation export, GIF playback and Aseprite frame durations use the selected preview frame rate. That keeps the timing someone reviews aligned with the timing they export.

Format support does not remove the need to check the result in the target engine. Frame geometry, motion continuity, and the loop boundary still need inspection; AI output can need cleanup.

You can try the workflow at SpriteGen. If you work with sprite animations, which export format or preview control would make this more useful for your workflow?