pixi-reels
All recipes

Orientation & direction

Orientation & direction. step-by-step slot recipe built with pixi-reels.

Horizontal banner#

A one-reel sideways strip - the “paying symbols this round” banner. Just .orientation('horizontal') on the normal builder; same spin lifecycle, events, and speed profiles as a vertical set.

Loading recipe…

A horizontal banner above a 5x3 ways set. The banner is a sixth reel: a wild in the cell above a reel makes that reel count, extending the way. Two ReelSets in one container; the engine spins and lands both, the game scripts the ways math and spotlights the cells.

Gotcha: pixi-reels never computes wins - the recipe owns the ways evaluation and spotlight; the library only spins and lands.

Loading recipe…

Roll-up (reverse direction)#

Every reel spins upward: one .direction('reverse') call. The same engine, events and landing bounce just run the other way.

Loading recipe…

Mixed direction per reel#

.directionPerReel([...]) gives each reel its own travel direction for a woven, alternating look. Every reel still lands the exact server frame.

Loading recipe…

Both knobs at once#

Orientation is set-level and fixed at build(); direction is per reel. They compose, so a horizontal set can still alternate: here the strips run sideways and rows 0 and 2 scroll right while rows 1 and 3 scroll left.

Gotcha: a big symbol spanning more than one reel (size.reels > 1) cannot mix with mixed per-reel directions. The block coordinator assumes every reel a block covers feeds from the same edge, so build() throws rather than shipping a symbol that tears in half mid-spin. A uniform directionPerReel array is fine.

Loading recipe…

Read the axis instead of remembering it#

Every reel exposes reel.axis: orientation, direction, polarity, mainProp, crossProp, and feedEdge. Projecting one step of travel back to screen space with axis.toScreen(0, axis.polarity) draws the arrows below with no orientation branch anywhere - the same three lines point down on a vertical forward reel and left on a horizontal reverse one.

Gotcha: feedEdge is derived from polarity and is never set twice. Read it ('start' forward, 'end' reverse) when you need to know which side new symbols arrive from; do not track it yourself alongside direction.

Loading recipe…