YourTool guide
How frame-based pixel animation works
A frame animation is a sequence of still drawings shown for chosen durations. Motion comes from their differences and timing; the editor does not need to move a vector shape between positions. This makes small changes to a sprite’s silhouette especially important.
Separate spatial layers from time
Layers divide a drawing into parts such as background, body and highlights. Frames divide the animation into moments. A cel is the pixel content of one layer at one frame: changing a cel should not unexpectedly repaint every moment.
In Pixel Studio the layer order, visibility and opacity are shared across the animation, while cels belong to individual frames. Hide a background layer to hide it throughout the preview. Duplicate a frame when you want the next moment to start from the current drawing rather than from empty cels.
Timing changes the movement
FPS describes how many equal-duration frames fit into one second. Duration in milliseconds gives each frame its own hold time. At 8 FPS, the equal-frame duration is 1000 ÷ 8 = 125 ms. A longer hold on one drawing can create a pause without adding identical copies.
Frame count alone is not animation length. Add the durations to find the loop time. Avoid treating a high FPS value as a substitute for deliberate spacing between positions.
Use onion skin as a reference
Onion skin overlays neighboring frames with a tint so you can judge spacing and alignment. It is an editing aid, not another layer in the exported sprite. Lower its opacity if it obscures the active frame.
For a bouncing dot, draw key positions at the top and bottom first. Add intermediate positions, then compare the previous and next frame. Equal spacing suggests steady movement; tighter spacing near a turning point suggests a slower change there. Test the loop’s last-to-first transition too.
- Keep a stable reference point when the object should stay anchored.
- Preview at the intended size, not only at a large editing zoom.
- Inspect silhouettes without detailed shading before polishing every pixel.
Choose an export that keeps what you need
A flattened PNG contains one rendered frame. A spritesheet places rendered frames horizontally or vertically, but ordinary PNG does not store the playback durations or editable layers. A receiving game or animation program needs that information separately.
Four 32×32 frames produce a horizontal 128×32 sheet or a vertical 32×128 sheet. Save the versioned Pixel Studio JSON to retain cels, layers, frame order and timing. The current studio does not export animated GIF; a spritesheet is not a GIF disguised as PNG.