Pixel Pet Maker
Tip: drag a .png sheet and its .json onto this page to load them together.
How this works
Pick an animation, draw each frame facing right with the feet at the bottom, and watch the preview.
Export the PNG sheet and the JSON file, then follow the sprite guide (Docs/SpriteGuide.md) to add them to your app.
Your work is saved in this browser automatically. Edits to a swatch recolor every frame.
Loading pets: drop a .png and its .json together (or use the two import buttons). The JSON's frame counts, speeds and
names win over what the PNG alone suggests, and the frame size is detected from the files. Anything that replaces your work can be reversed with Undo replace.
Keys: B pencil, E eraser, G fill, I picker, [ and ] previous or next frame, Space play or pause, Ctrl/Cmd+Z undo, Shift+Ctrl/Cmd+Z redo.
Draw
Animation
Preview
The app rotates your sprite so its feet face whichever edge it stands on. These four views show what that looks like.
All animations
Every row looping at its own speed. Click one to edit it. Handy for spotting a broken or missing frame at a glance.