pixi-reels
Building blocks

Per-reel geometry

Most slots are uniform: every reel, the same number of cells. You do not need this page for those.

Three other shapes exist:

ShapeChanges whenGuide
Static pyramid (3-5-5-5-3)Never. Fixed at build.below
MultiWaysEvery spinMultiWays
Big symbols (N x M blocks)Never. One symbol covers many cells.Big symbols

What cannot combine#

Two pairs throw at build():

  • MultiWays + pyramid. visibleCellsPerReel() declares a fixed shape. multiways() declares a server-driven one. Both claim to own the cell count. Pick one.
  • MultiWays + big symbols. A 2x2 block cannot fit a reel that just reshaped to 2 cells. Truncate it? Skip it? Shrink it? That is a game-design call, so the engine refuses to guess.

Big symbols and pyramids DO work together. So do MultiWays and cascades (ADR 015).

Static pyramid#

new ReelSetBuilder()
  .reels(5)
  .visibleCellsPerReel([3, 5, 5, 5, 3])
  .reelAnchor('center')                   // 'start' | 'center' | 'end'
  .symbolSize(120, 120)
  .build();

Short reels get a mainOffset so they sit where reelAnchor says. The default mask clips each reel to its own box, so a short reel never leaks its buffer cells.

getCellBounds(reel, cell) folds the offset in for you.

-> Recipe: Per-reel shape

Masks#

The clip mask comes from a MaskStrategy. Two ship:

StrategyClipsCosts you
RectMaskStrategy (default)One rect per reelA symbol spanning two reels gets cut at the gap between them
SharedRectMaskStrategyOne rect over everythingOn a pyramid, buffer cells past short reels show. The “pyramid peek”

The engine picks SharedRectMaskStrategy for you when big or unmasked symbols are registered AND the cross-axis gap is non-zero — the case where per-reel rects would visibly slice a block. Override with .maskStrategy().

import { SharedRectMaskStrategy } from 'pixi-reels';
builder.maskStrategy(new SharedRectMaskStrategy());

Want a rounded frame or a hex grid? Implement MaskStrategy yourself. It takes one MaskContext and returns a Graphics filled with any shape Pixi can draw. Set version = MASK_STRATEGY_VERSION on it.

To see what is actually clipped:

debugOverlay(reelSet, { layers: ['mask', 'cells', 'buffers'] });

See also#