pixi-reels
All recipes

Hold & Win: an overlay that survives swaps and rides flights

A ×100 badge lives in coin.data and is attached as a child of the symbol's view, so it survives an in-place symbol swap (re-attached from data) and travels with the coin on a collect flight (rebuilt onto the flying clone).

Loading recipe…

Press Run. The middle coin carries a ×100 badge; the first press swaps the coin’s art and the badge survives, the second press flies it into the meter and the badge rides along.

The overlay belongs to the data, drawn onto the symbol

The value lives in coin.data, and the badge is attached as a child of the symbol’s view so it moves with the coin on screen:

function attachBadge(cell, data) {
  if (!data.badge) return;
  const badge = badgeText(data.badge);        // a BitmapText
  badge.position.set(CELL / 2, CELL / 2);      // view-local, centered on the coin
  board.symbolAt(cell).view.addChild(badge);   // child of the symbol's view
}

Surviving a swap. setSymbolAt builds a brand-new symbol instance with a fresh, empty view — so the badge would vanish. Because the value is in coin.data, you just re-attach it:

board.setSymbolAt(cell, 'coin_alt', data);  // new art
attachBadge(cell, data);                      // badge back, from the same data

Riding a flight. Collect flights animate a throwaway clone, not the live symbol, so the badge is rebuilt onto the clone from coin.data — coin and badge travel together:

const clone = new PIXI.Container();
clone.addChild(coinSprite, badgeText(data.badge));
bezierFly(clone, from, meter, { arriveScale: 0.4 });

The rule of thumb: the overlay’s source of truth is coin.data, the view is just where it’s currently drawn. Keep the value in data and you can redraw it anywhere — on a swap, on a flight, on a different screen widget.