pixi-reels
All recipes

Big symbols & non-uniform grids

Big symbols & non-uniform grids. step-by-step slot recipe built with pixi-reels.

Everything for N-by-M block symbols and non-uniform reel geometry, one live demo at a time.

MxN big symbols. every shape#

Square 2x2, tall 1x3, giant 3x3, wide 2x4, one focused demo per shape.

Loading recipe…

Loading recipe…

Loading recipe…

Loading recipe…

Big symbol falls into view through a cascade#

A tall wild lands with its anchor in bufferStart and only its tail showing, wins the cells below, and falls into full view as they clear; the 2x2 canvas runs the same beat across two reels.

Gotcha: the anchor’s fall distance must equal the number of winner cells cleared below it, or the block snaps instead of falling.

Loading recipe…

Loading recipe…

Land a big symbol partially in buffer#

A tall 1xH block lands with its anchor in bufferStart, so only the bottom tail shows at cell 0; nudge down to drag the rest into view.

Loading recipe…

Nudge a big symbol in, then hold it across a respin#

Nudge the tail-visible wild fully into view, then respin the other reels with holdReels so the revealed block stays put.

Loading recipe…

Big symbol on a horizontal set#

A 2x3 block on .orientation('horizontal'), outlined on land with getBlockBounds. size: { reels, cells } is index space and does not rotate: reels always spans the reel-marching axis, cells always spans the strip.

Gotcha: the screen mapping inverts. { reels: 2, cells: 3 } is 2 wide and 3 tall on a vertical set, 2 tall and 3 wide here, and getBlockBounds (screen space) inverts with it.

Loading recipe…

Tail-visible block on a roll-up reel#

The partial-land tease on a .direction('reverse') reel: the block is anchored at the last visible cell with its body hanging into bufferEnd, then a 'forward' nudge (upward, on this reel) drags it into full view.

Gotcha: buffers are geometric, not travel-relative. bufferStart is above and bufferEnd below in both directions, so a reel that feeds from the bottom teases out of bufferEnd.

Loading recipe…

getBlockBounds. outline a big symbol#

One rectangle that hugs an entire block whichever cell you pass; a 1x1 returns the same rect as getCellBounds.

Loading recipe…

Big symbols with Spine#

Same 2x2 anchor mechanic, every cell a Spine skeleton; the bigWild reuses the wild rig scaled to the larger block.

Loading recipe…

MultiWays#

Per-spin cell variation: each reel lands on a different cell count and the total ways is the product of the per-reel cells.

Gotcha: call setShape(cellsPerReel) BEFORE setResult() on every spin.

Loading recipe…

MultiWays cascade#

Per-spin shape on a strip-spin landing, then cascade tumbling that pops ways winners and drops new symbols in from above.

Gotcha: setShape before setResult, and open with spin({ mode: 'standard' }) so AdjustPhase reshapes between SPIN and STOP.

Loading recipe…

Per-reel shape (pyramid)#

A non-uniform reel set (3-5-5-5-3), static shape declared at build via visibleCellsPerReel.

Loading recipe…

Pyramid shape with Spine#

The same 3-5-5-5-3 pyramid with every cell a Spine skeleton, crisp at every per-reel cell size.

Loading recipe…

Sticky wild on MultiWays#

A pin survives every reshape via its remembered originCell (the default migration: 'origin'): it clamps when the shape shrinks and restores when it grows back. 'frozen' is the opposite — each clamp rewrites the origin, so it never climbs back.

Loading recipe…