PIXAMBAS
FREE PRACTICAL COURSE

Animate Pixel Art Characters for Games

Turn a static game sprite into idle and walking animations. Practice strong poses, timing, onion-skin reference and transparent sprite-sheet exports for 2D game engines.

6 modules · Pixambas · 2026

What you will learn

  • Design an animation-ready character
  • Block the key poses
  • Build a four-frame walk cycle
  • Tune animation timing
What you need

Pixambas Pixel Studio and a modern browser; no account is required.

Build on the beginner lessons through real exercises and checks inside Pixambas. Open Pixel Studio →

My progress

Your course progress stays in this browser.

1 / 6FREE PRACTICAL COURSE

Design an animation-ready character

Start with a simple 32×32 sprite. Allow space for moving arms, legs and head; very dense silhouettes make pose changes hard to read. Pick a side or front view and set a baseline.

Steps

  1. Create a 32×32 transparent project and a sketch layer.
  2. Draw the body using four or five colors.
  3. Mark the floor line, center and total height.

Worked example

Keeping the feet near row 28 helps prevent accidental floating between frames.

Practice

Draw a readable character and save a project backup.

Watch out for: Common mistake: adding tiny details before testing the silhouette.

2 / 6FREE PRACTICAL COURSE

Block the key poses

Movement reads best when you establish clear contact and passing poses first. Arms and legs usually alternate to suggest weight and direction. Slight exaggeration can improve readability at small sizes.

Steps

  1. Duplicate the first frame and draw a contact pose.
  2. Duplicate another frame and reverse the leading limbs.
  3. Alternate both poses slowly and correct the silhouette.

Worked example

During a side-view walk, a forward leg can pair with the opposite arm.

Practice

Create two visibly distinct poses without relying on playback.

Watch out for: Common mistake: moving only the feet while keeping the torso completely rigid.

3 / 6FREE PRACTICAL COURSE

Build a four-frame walk cycle

A useful beginner sequence is contact A, passing A, contact B and passing B. This is not the only valid cycle. Preserve overall proportions and verify that the planted foot does not jump unintentionally.

Steps

  1. Place four frames in contact–pass–reverse contact–reverse pass order.
  2. Use onion skin to compare feet, hips and head positions.
  3. Loop the animation and review it zoomed in and at actual size.

Worked example

Moving the head up by one pixel on passing poses can suggest a subtle bounce.

Practice

Finish a four-frame walk cycle and write down one improvement.

Watch out for: Common mistake: changing the character height arbitrarily on every frame.

4 / 6FREE PRACTICAL COURSE

Tune animation timing

FPS means frames per second. Four frames played at 8 FPS make a half-second loop; fewer FPS slow the motion down. Your drawings do not change—only their perceived timing.

Steps

  1. Test 4, 8 and 12 FPS.
  2. Watch the character for several loops at each speed.
  3. Choose a setting that makes the movement clear.

Worked example

A four-frame 8-FPS loop lasts 0.5 seconds; treat it as a reference, not a rule.

Practice

Explain why you selected your final playback speed.

Watch out for: Common mistake: drawing more frames when the problem is actually timing.

5 / 6FREE PRACTICAL COURSE

Create idle and secondary motion

Idle animations can be very subtle: breathing, blinking or a moving scarf. Distinguish the main action from secondary motion, and avoid changing every detail at once.

Steps

  1. Make a safe copy of the original character.
  2. Create two or three frames for breathing or blinking.
  3. Loop the idle animation and check that the feet stay grounded.

Worked example

A single blink frame within a longer sequence can be enough.

Practice

Produce a separate idle animation and compare its rhythm with walking.

Watch out for: Common mistake: large jumps in a sequence intended to appear calm.

6 / 6FREE PRACTICAL COURSE

Export and import sprite sheets

Sprite sheets contain frames in one image. Pixambas can export horizontal, vertical and grid layouts. A horizontal _stripN file is useful for GameMaker; regular grids can be sliced in Godot or Unity. These are export presets, not direct engine plugins.

Steps

  1. Choose all frames in Export and keep scale at 1 for native pixel art.
  2. For GameMaker choose Horizontal and _stripN, then verify the count.
  3. For Godot or Unity use a regular grid and slice by cell dimensions.

Worked example

Four 32×32 frames make a 128×32 strip or a 64×64 two-column grid.

Practice

Export both layouts, check image dimensions and test an engine import.

Watch out for: Common mistake: using inconsistent frame sizes that make slicing difficult.

Final project

Combine your work from all six lessons. Export a PNG plus an editable project backup. Review the result at native size and write down one improvement for your next version.

Open Pixel Studio →

Check your learning

1. What should remain stable between poses?

2. Which order creates a basic four-pose walk?

3. What changes when you raise FPS from 4 to 8?

4. Why use onion skin?

5. What does _strip4 indicate?

Your best result appears after the first attempt.

Import resources

Godot documentation · Unity documentation

Projects saved in this browser are not synced between devices. Export a backup.