A cascade/tumble slot on the engine. The library supplies the visual tumble animation via CascadeMode and setResult() to land each new grid deterministically — the cascade logic (cluster detection, survivor shift, refill) is yours to write.
import { ReelSetBuilder, SpriteSymbol, CascadeMode } from 'pixi-reels';
const reelSet = new ReelSetBuilder()
.reels(6)
.visibleSymbols(5)
.symbolSize(110, 110)
.symbols((r) => {
for (const id of SYMBOLS) r.register(id, SpriteSymbol, { textures });
})
.spinningMode(new CascadeMode())
.ticker(app.ticker)
.build();
app.stage.addChild(reelSet);
let multiplier = 1;
document.getElementById('spin')!.addEventListener('click', async () => {
multiplier = 1;
let grid = (await reelSet.spin()).symbols;
while (true) {
const wins = detectClusterWins(grid); // your function
if (wins.length === 0) break;
await reelSet.spotlight.cycle(
wins.map((w) => ({ positions: w.positions })),
{ displayDuration: 700 },
);
multiplier++;
showMultiplier(multiplier);
const next = tumble(grid, wins); // remove + fall + refill
const promise = reelSet.spin();
reelSet.setResult(next);
grid = (await promise).symbols;
}
});
The cascade loop is your code
pixi-reels deliberately doesn’t own the tumble rules — every game has quirks (cluster size, adjacency, minimum matches, sticky survivors). What you get from the library:
- CascadeMode as the spinning behaviour — symbols fall from above into the visible window
- setResult() on every tumble so each stage’s grid is deterministic
- spotlight.cycle for the between-tumble win reveal
Your responsibilities:
detectClusterWins(grid)— cluster/adjacency rulestumble(grid, wins)— compute the next-stage grid (surviving symbols + fresh fill)showMultiplier(n)— the UI meter
Related recipes
- Remove symbol — fade-out animation between tumble stages
- Single-reel respin — another selective-respin pattern using the same
setResulthold trick - Hold & Win — a different respin pattern for comparison