Yotsuba Games
Back to Guide
Workflows

Animating Tails and Whips from an Authored Path

When a tail or whip can be authored as a path from the start, animate its centerline and rebuild the tube for every frame. This preserves its contour and lighting better than repeatedly warping a finished image. See docs/ai/samples/spine_route_a_monster_tail_demo.ppl for a large tail and docs/ai/samples/spine_route_a_whip_demo.ppl for a thin whip.

Basic graph

Multi Path
  -> Keyframe Clip.path
  -> Layers to Surface.paths
  -> Surface Light Preview
  -> Animation Render
  1. Draw the centerline as two to four Bézier segments from root to tip.
  2. Use the Raise role. Start around a 5-10px radius for a large tail or 2-3px for a whip.
  3. Start the width curve around 1.0 at the root and 0.15-0.3 at the tip. A zero-width tip can blink out between frames, so inspect the whole sheet.
  4. In Keyframe Clip, move each joint and its neighboring handles together. Keep the preceding segment's endpoint identical to the following segment's start point.
  5. Enable path_pixel_perfect in Layers to Surface and review every frame from Animation Render.

Because every pose starts from the authored path, deformation error never accumulates from one frame to the next.

Practical size bands

Asset Guideline Result
Large tail 60px+ long, 4-10px root radius Recommended; rounded form and stepped lighting remain readable
Medium tail 30-60px long, 2.5-5px root radius Usable silhouette; inspect the tip and light band in every frame
Small tail Under 30px long with a roughly 1px tip Not recommended; the probe separated at the tip in one in-between frame
Thin whip 60px+ long, 2-3px body radius Usable centerline; a subpixel tapered tip can blink out

In the recorded probe, approximately 122px and 61px tails remained one 8-connected component through all eight frames. The approximately 31px tail split into two components in one in-between frame at its thinnest tip. For smaller assets, use Path Stroke or hand-authored pose switching.

Bend limits

  • A gradual Bézier segment can remain useful with roughly 70-80 degrees of tangent change from entry to exit.
  • At a joint, begin with 30-45 degrees between neighboring tangents. Add an intermediate key instead of changing more than 60 degrees in one frame.
  • A local reversal beyond 90 degrees, especially around 160-180 degrees, can keep a continuous line while making the tube overlap itself and form a thick knot or loop. Redraw that key pose by hand.

Frames 0-5 in the monster-tail sample are ordinary swishes. Frame 6 is an intentional roughly 170-degree reversal, and frame 7 returns to rest. The whip sample also uses frame 6 as its deliberate limit probe.

Repairing a bad frame

  • Missing thin tip: raise its final width value to 0.2-0.35, or render the thinnest section with Path Stroke.
  • Flickering rounded highlight: increase the radius or reduce the shadow. A flat single-color line often reads better at a 2px body width.
  • Self-overlap during a crack pose: redraw that frame and add two or three SpriteSheet Trail ghosts at interval 1.
  • Manual cleanup: copy the completed frame into an editable Pixel Canvas and repair the detached pixels as a non-linked drawing.

Animating an already-finished image

This workflow requires an authored centerline. Patterns, scars, or scales on an existing finished image do not automatically follow the rebuilt tube.

The separate A63 entry—a spine path plus a broad influence mask that bends an original image—is still in design and is not implemented. Its planned practical range is a 64px-class part with about 30-45 degrees of local bending. One-pixel details, dithering, and bends beyond 90 degrees will remain poor cases, so the two workflows will continue to serve different source materials.

Animating Tails and Whips from an Authored Path — PixPipeline User Guide