pixi-reels
All recipes

Spine mystery reveal

A mystery symbol is two moments - a covered tile with its own land animation, and a reveal that uncovers the real symbol. Play the rig's reveal on an overlay spine and swap the cell underneath with activate() while it is still covered; the animation ends fully transparent, so the hand-off is seamless. Real Thunderkick game art.

Loading recipe…

The two-layer trick

A seamless mystery reveal is a hand-off between two layers:

  1. The cell — a normal reel symbol registered under the mystery id. It spins, lands, and plays its land one-shot like every other symbol.
  2. The overlay — a standalone Spine of the same mystery skeleton, mounted over the cell the moment the reveal starts.

As soon as the overlay is showing, the cell underneath can change identity invisibly — that’s just activate():

const bush = Spine.from({ skeleton: 'mystery', atlas: 'symbols' });
bush.position.set(cellCenterX, cellCenterY);
overlayLayer.addChild(bush);
bush.state.setAnimation(0, 'revealWin', false);

sym.activate(target); // covered by the bush — nobody sees the swap

activate(newId) is the same call the reel makes when a pooled symbol is reassigned, so the cell re-poses, plays idle, and is fully live as the target symbol by the time the leaves part.

Why it ends clean

The rig’s reveal animations (revealWin, revealNoPotentialWin, revealPotentialButNoWin) all fade every bush slot to transparent by their final frame — the overlay ends invisible, so destroying it on the complete listener needs no extra fade:

bush.state.addListener({ complete: () => bush.destroy() });

The animation also carries authored spine events — explode fires at the burst moment (0.83s into revealWin) and onComplete at the end — natural hooks for particles, screen shake, or the win evaluation.

One outcome per round

Mysteries classically resolve to a single shared symbol: pick the target once per spin and activate every mystery cell to it. The demo forces 2-4 bushes into each result so every spin shows the mechanic.

Assets provided by Thunderkick