← Blog · 6 min read

How to Animate a Sprite: A Beginner's Pixel Art Guide

Animating a sprite looks like magic, but underneath it's just a handful of still drawings shown in quick succession. If you can draw one pixel-art character, you can make it bob, blink, or walk. This guide walks you through the whole loop, from setting up frames to exporting a finished animation your game engine can read, using free browser tools so you can start right now in PaintLasso's Pixel Studio.

What sprite animation actually is

A sprite animation is a sequence of still images, called frames, played fast enough that your eye reads them as motion. That's the entire trick. A blinking icon might be two frames; a smooth walk cycle is usually four to eight. Nothing else is going on, which is good news: you don't need to learn keyframe curves or rigging to get started.

Two ideas do most of the work:

• Frames are your individual drawings. More frames means smoother motion but more work, so beginners should keep counts low.
• Frame rate (fps) is how many frames show per second. Pixel art rarely runs at film-smooth 24 fps. The classic look lives around 8 to 12 fps, which is choppy on purpose and far easier to draw.

If you're brand new to drawing the character itself, it's worth reading a beginner's guide to making pixel art first so your base sprite is clean before you set it in motion.

Set up your canvas and frames

Start small. A 16x16 or 32x32 canvas forces you to think in clear shapes, and small sprites are dramatically faster to animate because there are fewer pixels to move each frame. Turn on a pixel grid so every pixel snaps cleanly, then draw your first pose on frame one.

To animate, you need a frames system rather than a single static image:

1. Open the Pixel Studio and create a new canvas at your chosen size.
2. Draw your base or resting pose on the first frame.
3. Add a second frame. In PaintLasso you can duplicate the current frame so your next pose starts from the previous drawing instead of a blank canvas, which keeps the character consistent.
4. Repeat until you have all the frames your motion needs.

Duplicating and then nudging a few pixels is the heart of frame-by-frame animation. You rarely redraw a sprite from scratch for each frame.

Draw your key poses and line them up with onion skin

Don't animate in order from frame one to the end. Instead, draw the key poses first, the extreme positions that define the motion, then fill the in-between frames. For a walk cycle the key poses are the two contact moments: one leg forward and planted, then the other. For an idle, your keys are the highest and lowest points of the breathing bob.

This is where onion skin becomes essential. Onion skin shows a faded ghost of the neighboring frame underneath the one you're editing, so you can see exactly how far a foot, arm, or hairline has moved and keep everything aligned. Without it you're guessing, and small drifts pile up into a wobble.

• Enable onion skin in the Pixel Studio so the previous frame appears as a translucent reference.
• Use it to anchor parts that shouldn't move, like the head height in a walk, while you shift the limbs.
• Check that the last frame flows back into the first so the loop has no visible jump.

You can dig deeper into building motion sequences in the animation feature overview.

Build a simple idle or walk cycle

Pick the easiest win first. An idle animation is the gentlest place to start: take your base pose, duplicate it, and move the whole body down by one or two pixels on alternating frames. Add a slight squash to the shoulders and you have a believable breathing loop in two to four frames.

A walk cycle is the next step up. A readable four-frame walk follows this rhythm:

1. Contact: front leg forward and planted, back leg stretched behind.
2. Down/passing: body at its lowest as the rear leg swings under the hips.
3. Contact (mirrored): the opposite leg now forward and planted.
4. Down/passing (mirrored): the other passing position, then loop back to frame one.

Swing the arms opposite to the legs, bob the head down on the passing frames, and keep the torso steady. Four frames is plenty to start; you can add in-betweens later for smoothness. For a fuller walkthrough of timing and looping, the free animation maker guide is a useful companion.

Set the timing and play it back

Now decide how fast the frames play. Set your animation to around 8 to 12 fps and watch it loop. This is the single most underrated step, because timing changes everything: the same four frames can read as a casual stroll at 8 fps or a panicked sprint at 12.

A few practical timing tips:

• Start at 10 fps as a safe default, then nudge up or down until the motion feels right.
• Hold some frames longer than others if your tool allows per-frame timing. An idle often looks better when the resting pose lingers and the movement is quick.
• Watch the loop seam. Play it ten times in a row; any hitch at the wrap point will become obvious and tells you which frame to fix.

Preview constantly. Most animation mistakes are invisible in a single frame and only show up in motion, so loop early and loop often.

Export a sprite sheet or GIF for your game

Once the loop looks good, export it in the format your destination needs. PaintLasso's Pixel Studio can output an animated GIF, a sprite sheet, or a PNG sequence, which covers nearly every use case:

• Animated GIF is best for sharing, previews, or dropping the loop into a post or design mockup. It bakes in your fps so the file plays on its own.
• Sprite sheet is the standard for game engines like Godot, Unity, GameMaker, or Phaser. All frames sit in a single PNG on a regular grid, and the engine slices it back into frames at runtime.
• PNG sequence gives you each frame as a separate file, useful for engines or pipelines that import frames individually.

When you export a sprite sheet, note the frame dimensions and how many frames per row, because your engine needs those numbers to cut the sheet correctly. Keep transparency on so your sprite drops cleanly over any background. Open the Pixel Studio to try the export options on a real loop.

Related: Make pixel art sprites · Make an animated GIF · Animation & onion skin