Devlog · Paw & Sword · Animation

Teaching pixel cats to walk in 8 directions

Why side-view heroes felt wrong, how five drawn views and some mirroring give eight directions, and the traps in flipping sprites.

For a long time, the heroes in Paw & Sword could only face left or right. When a hero walked up a path towards the hunting ground, they did it sideways, like a crab with a sword. This post is about why I changed that, how eight directions are built from five drawings, and the small traps that come with mirroring sprites.

Why side-view only felt wrong

Side-view sprites are the classic shortcut for small games, and they work well when the camera looks at a flat stage. Paw & Sword's town and hunting grounds are seen from above at an angle. Paths run up, down and diagonally. Heroes cross the map in every direction all day.

With side-view only, three things went wrong:

  • Vertical walking looked like sliding. A hero walking north showed their side walk cycle while moving up the screen. The feet moved left-right while the body moved up. Your eye notices that even if you cannot say what is wrong.
  • Groups lost their shape. When five heroes walk to a boss together, the fun is seeing a party converge. When everyone faces left or right, the party looks like a row of cut-outs.
  • Fights lost their aim. A healer standing below a knight and "facing" him with a sideways sprite does not read as aiming at him. With directional poses, you can see who is hitting whom.

Since the whole game is built on the idea that watching is the game, this was not polish. It was a core readability problem.

Paw & Sword key art: cat heroes walking towards the viewer down a cobblestone path in a pixel-art town
Heroes walk towards you, away from you and diagonally. Sideways-only was not enough.

Eight directions from five drawings

Eight directions sound expensive: north, north-east, east, south-east, south, south-west, west and north-west. But a character seen from a fixed camera is mostly symmetrical from left to right. So the game uses five drawn views and gets the other three by flipping:

  • Drawn: front (walking towards you), back (walking away), side (east), and the two right-hand diagonals (south-east and north-east).
  • Mirrored by the game: west, south-west and north-west.

That cuts the drawing work for directions by three eighths, and the saving multiplies. Paw & Sword has 45 classes, each with seven rank looks, and each look has several clips: idle, walk, attack, skill, getting hurt. Every view you do not have to draw is saved hundreds of times over.

The game picks the view from the direction a hero is moving or attacking. If you build something similar, one tip: do not switch views on every tiny change of angle. A hero walking at nearly exactly 45 degrees can flicker between two views every frame. Keeping the current view until the new direction is clearly closer looks much calmer.

The traps in mirroring

Flipping a sprite is one line of code. Making it look right takes more thought.

  • Handedness flips. A knight with a sword in the right paw holds it in the left paw when mirrored. At hunting-ground size this is almost never noticed, so I accept it. A design that depends on one side, like a shield emblem with lettering or an eyepatch, is a problem, and I avoid that kind of detail.
  • Flip around the feet, not the canvas. If a sprite is not perfectly centred in its frame, flipping it around the middle of the canvas makes the hero jump sideways when they turn. The flip has to happen around the point where the character stands.
  • Lighting direction. If the art has a strong light from one side, the mirrored view is lit from the other side. Soft, mostly top-down lighting hides this.
  • Weapons and effects. A swing or spell effect that extends far to one side needs room on both sides of the frame after mirroring, or it gets clipped.

How many frames is enough?

Most strips in the game run 8 to 10 frames. Fewer frames save work but look choppy, especially at 2x battle speed, where a 4-frame walk turns into a shuffle. More frames look smoother but multiply the cost across every class, look and view.

For walking, 8 frames give a full stride with a clear contact pose for each foot, which is what makes a walk feel grounded. Attacks need a little more: an anticipation pose, the strike, an impact frame and a recovery. A ninth or tenth frame often goes into the anticipation, because a readable wind-up is what lets you see a hit coming.

The higher rank looks reuse the poses of the Normal look as a reference. The cat and outfit change, the motion does not. That keeps 45 classes moving with the same rhythm, and it keeps each class consistent with the one-cat-per-class rule.

What changed after the switch

The difference is bigger than I expected. Heroes leaving town now walk down the path towards you, and heroes coming home walk away up the screen with their backs turned. A party gathering for a boss looks like a party. And in a fight, the direction a hero faces tells you who they are targeting.

The cost is real: more clips to produce and more to check. The next post covers how those clips are kept consistent: the 8-frame sheet rule, feet lines and size pops.

Can Fabrika mascot: a purple cat engineer with goggles and a wrench, leaning on a wooden sign

The door is open

Players, press, publishers and collabs: all welcome.