Spine symbols

Rigged skeleton animation for reel symbols, following the bonbon-hw pattern.

Spine is optional. Install it when a symbol needs rigged animation — skeletal bones, blended tracks, per-symbol "idle → landing → win → bigwin" states. For everything else, stick with sprites.

Install the peer dep

pnpm add @esotericsoftware/spine-pixi-v8

The two-class pattern

slotplate splits Spine handling into two classes, mirroring the bonbon-hw codebase:

• SpineReelSymbol — a dumb container that owns the Spine instance's lifecycle (onActivate, onDeactivate, resize). No animation logic; delegates to the player.
• SymbolAnimationPlayer — given a symbol id and an animation name ('idle', 'landing', 'win', 'bigwin'), plays the right tracks on the Spine instance. The symbol-to-tracks mapping is data — one file of configuration, not logic.

The config

// src/config/spineAnimations.ts
export const animations: SymbolAnimations = {
  idle:    { default: ['idle'], wild: ['wild_idle'] },
  landing: { default: ['landing'], wild: ['wild_landing'] },
  win:     { default: ['win_small'], wild: ['wild_win', 'wild_glow'] },
  bigwin:  { default: ['bigwin'] },
  size:    { default: ['size_idle'] },
};

Each animation maps symbolId → tracks[]. Tracks play in parallel — so you can have a gameplay animation, a size pulse, and a glow overlay running on three tracks at once.

Enabling the stub

The shipped SpineReelSymbol.ts is stubbed. Uncomment the import and the Spine.from(...) call in the constructor, and implement the SymbolAnimationPlayer body using spine.state.setAnimation(...). The bonbon-hw SymbolAnimationPlayer is a good concrete reference.

Per-symbol positioning

Sprite symbols anchor at (0, 0). Spine skeletons center at origin. That means resize(w, h) must set spine.position = (w/2, h/2) and compute a scale that fits the skeleton's bounding box into the cell. Easy to miss — resize runs on every symbol swap, so a one-time constructor position won't cut it.

When to use Spine vs AnimatedSprite

• Spine: character-style rigs, complex blended states, skeletal-physics secondary motion.
• AnimatedSprite (Pixi): frame-by-frame loops. A blinking wild, a twinkling scatter. Smaller, simpler, no peer dep.
• GSAP tweens on a Sprite: shake, scale pulse, fade. The default for win animations.