Making an indie game, most things you can figure out eventually: you can learn to code and write your own scripts, and whatever software you can't work out already has a YouTube tutorial somewhere. Art is where that stops working — the wall most people quit at.
Character animation especially: idle, walk, run, jump, attack — a dozen frames each at minimum, sometimes several dozen. And if you can't draw, there's no obvious way in.
There's a different route now. Generate the animation as AI video, then run it through a browser tool that turns it into sprite frames your engine can actually read. No drawing tablet, no Photoshop, nothing to install.
Here's the whole workflow.
Step 1 — Lock the style, generate your base art
Start by finding an art style you like and using it as reference. Not sure what prompt to write? Skip the guesswork: hand a reference image to an AI assistant, describe the character you want in plain language, and let it hand you a prompt back.
Two things here save you a lot of pain later:
- Use a flat solid background. Green, blue or red for opaque assets; black for semi-transparent ones like skill VFX. Keying gets dramatically easier.
- Pull the camera back. Ask for the character to occupy less of the frame, so it has room to move once it animates.
Step 2 — Generate the animation video
Feed that flat-background image in as a reference image and let the AI animate it. Any image-to-video model can handle this, so use whichever one you're already comfortable with.
One thing worth spelling out in the prompt: keep the camera locked and the background color unchanged. A drifting camera or a shifting backdrop will wreck the keying step.
At this point your character moves. What you still need is a transparent-background PNG sequence or a sprite sheet — something a game engine can import. That's where FramePacker comes in.
Step 3 — Turn the video into a sprite sheet with FramePacker
1. Extract frames
Open FramePacker, load the video, pick the time range you want, set a frame count, hit extract. More frames means smoother motion, and also more images to wrangle. It's a tradeoff, not a free win.
2. Remove the background (two different approaches)
Open any single frame, click Color swap, then click the background in the image to drop into preview mode. From there, the settings depend on what kind of asset you're dealing with.
For fully opaque assets — characters, monsters, props:
Work Tolerance and Edge Cleanup Boost until the background is gone. If color spill is still clinging to your character's outline, switch to the Post-processing tab and raise Despill Strength to clean up the fringe.
For semi-transparent, glowing, gradient assets — VFX, particles, light effects:
Switch Tolerance off first, then remove the background using Blend Recolor Strength. Finish in Post-processing with Despill Strength to strip whatever's left.
3. Apply to every frame in one click
Once a single frame looks right — background gone, watermark cut out with the rectangle tool — hit Apply All. Every frame gets the same treatment. Twenty frames, two hundred frames, it doesn't matter. You're not doing this by hand.
Worth knowing: batch apply works by replaying your edit actions across the frames. That's perfect for background removal, where precision demands are forgiving — but it isn't a pixel-perfect clone of your edit. So once it's done, scroll the frame list and check for stragglers. Got two or three bad frames? Open them individually and nudge them.
If the transparent edges look a little harsh, add a pass of Soften — again, edit one frame, apply to all — to smooth the seam between opaque and transparent pixels.
4. Organize tab — decide what actually ships
When editing's done, move to the Organize tab. It has a few automated tools for deciding which frames survive.
- Find Duplicates. AI-generated animation loves to hold one image across several frames, especially in the beat before or after a movement. This flags them so you can pull them out of the working set in a single click.
- Reduce Frames. Too many frames? Thin them out here.
- Find Jump Frames. On longer animations — or after a batch pass where you're not fully sure nothing got erased by accident — this pinpoints the transitions between movements, which makes over-cleaned frames easy to spot and fix.
-
Find Loop Frames. Hit the button, pick a loop preference (auto, prefer short, prefer long), and search. It returns several loop candidates, each scored on cycle length, smoothness, and coverage. Preview them in the built-in player; when one looks right, click Trim to Loop Body. Everything outside the loop drops out of the working set, and you're left with a clean looping animation.
5. Export the sprite sheet
Head to export and pick Sprite Sheet. You can set output resolution, plus the character's scale and offset within the frame.
The sprite sheet settings let you define max atlas size, rows and columns, and frame padding. There's also a Trim Transparency option that crops each frame's empty edges before packing — smaller file, tighter atlas. One catch: if you turn that on, you must also pick a data file format.
That data file is what tells the engine where each frame sits on the sheet. Three options:
| Format | Best for | Notes |
|---|---|---|
| JSON | Unity (+ TexturePacker Importer) | TexturePacker's generic format. Clean structure, easy to parse with your own script or third-party tooling. |
| tpsheet | Godot | Requires the TexturePacker Importer plugin. |
| plist | Cocos Creator | The Cocos2d-x atlas standard. |
6. Reference animation overlay — a surprisingly useful feature
Before you export, there's one more tool aimed squarely at game dev: reference animation comparison.
If you've built several animations for the same character — walk, run, idle — you can nominate one as the reference and overlay it while you work on the others. It answers three questions: is the character the same size and in the same position? Do poses hand off naturally between actions? Does the timing match?
Overlay your idle animation on your attack animation, for instance, and you can see exactly how far off the character sits between the attack's last frame and the idle's first. Nudge scale and offset until they line up, and your character won't visibly teleport when the engine switches states.
7. Export formats — pick the one that fits the job
Sprite sheet isn't the only way out. There are seven formats, and they split by what the file has to do next: get into an engine, get shown to a person, or stay editable.
| Format | What you get | Best for | Watch out for |
|---|---|---|---|
| Sprite Sheet | One PNG atlas plus a JSON / tpsheet / plist | 2D engines — Unity, Godot, Cocos. One texture, fewer draw calls | You must pick a data file when you use Trim Transparency |
| ZIP | Loose PNG frame sequence | Engines or tools that want individual files; handing frames to an artist; archiving the source | More files to track, and no atlas batching |
| WebM | Video with an alpha channel | Browser games, transparent overlays in a web UI, Godot and Unity video playback | Heavier than MP4, and not every editor reads the alpha channel |
| MP4 | Video, no alpha | Trailers, YouTube and X uploads, portfolio reels, sending a cut to a composer | Lossy — don't archive your frames as MP4 |
| GIF | Looping animated image | Reddit, Discord, itch.io devlogs, READMEs, quick progress shares | 256 colors; gradients band badly and files balloon |
| APNG | Looping animated PNG with full alpha | Clean transparent previews for docs and portfolios; sticker packs | Bigger than GIF, and some platforms only show the first frame |
| SCML | Spriter project file | Retiming, adding bones, swapping parts — anything where the animation has to stay editable | Needs Spriter or a Spriter-compatible runtime |
All of them let you set resolution, scale, and offset freely. So pick by where the file is going, not by which one sounds most technical.
If you're building an indie game and art has been the thing standing in your way, open a browser tab and give it a try.
Top comments (0)