PR pixi-reels
All recipes

Per-reel shape (pyramid)

Build a non-uniform reel set. 3-5-5-5-3 pyramid, diamond, half-pyramid. Static shape, set at build time, no per-spin reshaping.

Loading recipe…

Per-reel static shape. non-uniform row counts across reels, fixed at build time. The classic example is a 3-5-5-5-3 pyramid where the outer reels are shorter than the inner ones. The engine handles the geometry (per-reel offsetY, mask sizing, cell positioning) so you only declare the shape.

The whole mechanic

new ReelSetBuilder()
  .reels(5)
  .visibleRowsPerReel([3, 5, 5, 5, 3])  // mutually exclusive with visibleRows(n)
  .reelAnchor('center')                  // 'top' | 'center' | 'bottom'
  .symbolSize(80, 80)
  // ...
  .build();

That’s it. visibleRowsPerReel and visibleRows are mutually exclusive: pick whichever fits the slot.

What the engine does for you

  • offsetY per reel. tallest reel is at y=0. Shorter reels are positioned according to reelAnchor. Default 'center' puts a 3-row reel inside a 5-row bounding box with (5-3)/2 = 1 row of padding above and below.
  • getCellBounds(col, row). returns the pixel rectangle of any visible cell, accounting for the reel’s offsetY. Use it to draw paylines, hit areas, or any overlay aligned to a specific cell.
  • debugSnapshot.visibleRows is now number[] (one entry per reel), so AI agents and debug logs see the jagged shape.

Mask

RectMaskStrategy (the v1 default) draws one rectangle per reel into a single PixiJS mask Graphics. the union of those rects forms the clip shape. Each reel is clipped to its own (offsetY, reelHeight) box, so a 3-row reel never leaks buffer rows from above or below. The same Graphics can hold any union of rectangular shapes, so jagged layouts (pyramid, diamond, half-pyramid) all clip cleanly without a custom shader.

Non-rectangular masks (curved frames, hexagonal grids) are left to a future strategy implementation. the MaskStrategy interface is in place so the swap is one line.

Mutually exclusive with MultiWays

A static pyramid is set once at build. MultiWays changes the row count per spin. different mechanic, different builder method. See the MultiWays recipe.