pixi-reels
All recipes

Spin static, not Spine

Wrap SpineReelSymbol in StaticSpinSymbol so skeletons only exist when the reels are at rest. While spinning, every cell is a cached texture and no Spine state ticks at all — the biggest per-frame cost of a Spine slot, gone for the duration of the spin.

Loading recipe…

Why

A 5×3 Spine slot animates ~20+ skeletons every frame — bones, deforms, and mesh uploads — even while the reels are a smear the player can’t read. Wrapping the Spine symbol makes that cost disappear exactly when it buys nothing:

  • At rest: real SpineReelSymbol cells. Idle loops, autoPlayLanding, win animations, playOut disintegrations — untouched.
  • Spinning: every cell is a cached snapshot sprite. The wrapper deactivates the skeleton (clears tracks, hides it), and cells recycling mid-spin never instantiate a skeleton in the first place.
  • Landing: skeletons come back on the landed ids and the landing animation plays over the bounce, as always.
const cache = new SpinTextureCache({ renderer: app.renderer });
const createInner = () => new SpineReelSymbol({ spineMap, autoPlayLanding: true });

registry.register(id, StaticSpinSymbol, { createInner, cache, blurRampMs: 160 });

What the snapshot looks like

captureStatic renders the skeleton’s current pose — for a freshly activated symbol that’s the first idle frame. If you want a different pose on the reel strip (or fully hand-drawn spin art), provide it yourself; the cache treats provided textures as authoritative:

cache.setStatic('wild', wildSpinTexture);    // used instead of a capture
cache.setBlurred('wild', wildBlurTexture);   // used instead of a bake

Relation to autoPlayBlur

SpineReelSymbol’s autoPlayBlur option swaps to a blur animation — the skeleton keeps ticking, which is right when your rig has authored blur art. StaticSpinSymbol replaces the skeleton with a texture — nothing ticks. Pick one per game; they solve the same moment two different ways.