Hold & Win

Every Hold & Win building block on one page: the respin mechanic, value coins, collectors, jackpots, meters, and the beginner lessons that lead up to them, each a live demo.

Hold & Win respin#

Coins lock on land; the free cells respin until the grid fills. The board owns the mechanic, the value is yours.

Hold & Win: enter from the base game and back#

A normal 5x3 spin that, on 3 BONUS, drops into the Hold & Win board in the same chain and swaps back on feature:end.

Hold & Win: collector + flight choreography#

A collector orb lands and pulls a value clone out of every coin along bezier arcs, summing tick by tick.

Hold & Win: collector with particle streams#

The same collect, each coin’s value flying into the orb trailed by a stream of neon particles.

Hold & Win: payer / doubler coin#

A payer orb lands and pumps its value into every other coin; one line changes it into a doubler.

Gotcha: the payer orb is server-placed only (weight 0), so it never lands off a random strip.

Hold & Win: multiplier-strike coin#

A multiplier coin lands, the strike FX fires, a ×N badge pops, and every coin’s value is multiplied.

Hold & Win: mystery value coin#

Coins land blank; on lock a strip of candidate amounts spins inside the coin face and decelerates onto the real value.

Hold & Win: upgrade a coin in place#

A held coin climbs the value ladder (5 → 10 → 25 → 50 → 100) with a flip-and-pop: no respin, no cell movement.

Hold & Win: swap a symbol in place (coin → MINI → MAJOR)#

board.setSymbolAt(cell, id, data) re-places one cell with a different symbol and rewrites its ledger entry, leaving the neighbours where they were.

Hold & Win: count-up coin#

Each coin’s amount ticks up from 0.00 to its value as it settles, in a reading-order wave.

Hold & Win: sprite coins (no Spine)#

The whole board from TexturePacker sprites: numbers blur as they spin, a 30-frame flip on land, no skeleton runtime.

Hold & Win: Spine coins + collect#

The board with production Spine coins: MINI/MAJOR tiers that reveal on lock, side plaques, and a collect flight into a counter.

Gotcha: jackpot (MINI / MAJOR) coins are server-placed only (weight 0).

Hold & Win: fly to a feature meter#

On collect, each coin’s value flies up into a meter above the reels, ticking the total and filling a bar toward a target.

Hold & Win: row-complete jackpot#

When a coin completes a full row, the row flashes coin by coin, the MINI plaque fires, and the row total flies up into it.

Hold & Win: bonus cells#

A few cells are marked bonus cells from the start; a coin that lands on one flashes it active and doubles its value.

Hold & Win: drive each cell on its own#

board.reelAt(cell) hands you the raw 1x1 ReelSet: start it, slam-stop it, read the symbol inside it, independently of every other cell.

Hold & Win: last-cell anticipation#

One builder knob (anticipateWhen) slows the last still-spinning cell to a tension profile for the “one more for the full board” moment.

Hold & Win: skip the whole feature#

board.skip() slams every in-flight cell to its landed position and fires feature:skip; feature:end stays the single “feature over” signal.

Hold & Win: quicken the wave#

board.skip({ mode: 'quicken' }) lands every in-flight cell through its stop instead of placing it: the board’s stagger lives in each cell’s spin floor, so the whole wave lands together, and each cell still spins its symbol in and bounces. speed: 'turbo' lands the wave on the turbo profile; HoldAndWinBuilder.skipMode('quicken') makes it the default. feature:skip reports the count and the mode; the landing flow is unchanged.

Hold & Win: an overlay that survives swaps and rides flights#

A ×100 badge lives in coin.data and rides as a child of the symbol’s view, so it survives an in-place swap and travels on a collect flight.

Hold & Win: live event trace#

A board runs a full feature while every board.events beat prints to a live log: the lifecycle, made visible.

Hold & Win: cells that spin sideways#

The whole lock-and-respin round on .axis('horizontal'). Every cell is its own 1x1 ReelSet, so the axis only picks which edge a coin scrolls in from. the board still lays out cols x rows and the lock still claims one cell.

Gotcha: don’t build this on a plain ReelSet with .orientation('horizontal'). there a reel IS a whole row, so the row travels as one ribbon straight across the cell gaps and past the cells that are supposed to be locked.

Hold & Win: free cells roll upward#

The same round on .axis('vertical', 'reverse'), plus the hold that pairs with it: respin() spins board.freeCells and only those, and respin:start reports exactly which cells are in flight.

Gotcha: the ReelSet-level equivalent, spin({ holdReels }), holds a whole reel. a board has no holdReels because Hold & Win holds single cells.

Rectangular cells: width, height and a gap per axis#

Hold & Win art is usually wider than tall. cellSize takes a width and a height plus a columnGap and a rowGap, so the board lays out to the art’s own rectangle, with the game’s grid showing through the gaps. Every clover here is a Spine 4.2 skeleton on the game’s art, with idle, landing, win and blur tracks the engine drives through SpineReelSymbol.

Landing only, celebrate once#

lockAnimation(‘landing’) plays a settle on every lock and nothing else; board.playWin() is the one explicit celebration, fired when the game decides.

Clover base game into the feature#

A fruit base game where gold clovers spin past showing bet-scaled money and the collect / multi / mystery / super clovers carry none; three or more clovers on the stop hand their cells to the Hold & Win board.

Clover bonus board, 5x3#

The feature on its own: gold clovers lock with their amounts, blanks are the game’s dark clover tile, and the 1 2 3 lamps below are the respin counter.

Draw order between cells#

Every cell is its own reel set, so the clovers the engine lifts above the cells at rest share one layer, drawn in attach order: column by column, which lets the next column’s clover cover a lower clover’s glow. cellZIndex sorts that layer by whatever the board says - here lower rows in front and the capsule on top of everything, re-asked on every place and landing.

One cell in front, for a beat#

cellZIndex is the at-rest order and the board re-asks it on every place and every landing, so a clover that must not be overlapped while it upgrades cannot express that by returning a bigger number: the next landing overwrites it mid-animation. board.lift(cell) promotes the cell on a separate channel and hands back a release - the refresh keeps running underneath and cannot touch it, and the release restores the cell’s place without recomputing anything.

Lift one cell, dim the rest#

board.dim({ except }) is the partner of lift(): it draws above every cell’s clover and below anything lifted, so a lifted cell stays in front of the dim whether or not it is excepted. A dim covers cells, not symbol ids - this collect resolves the gold clovers it is about to sweep to cells and spares them, so the money stays bright while the blanks go dark. It fades in and back out over fade ms off the board’s own ticker, fast enough to belong to the beat rather than read as a transition; fade: 0 cuts.

Dim the cells, or dim only the art#

Two channels for pushing a board back. dim() lays a rectangle over each cell, so the clover goes dark and so does the tile it sits in. dimSymbols() multiplies each symbol’s own tint towards black instead: the art sinks and the board keeps its lights on. Same sweep runs twice below, so the only difference on screen is which one did it - amount is the strength on both, and both fade over fade.

The reason it is a board method rather than three lines of gsap.to: a dimmed cell that swaps its symbol has to keep its dim, and the symbol that left has to lose the tint before the pool hands it to another cell.

Dimming the art is not dimming the cell#

One slot blown up, with a fruit in it rather than a clover so the cell’s own background shows all the way around the symbol. The blue plate is cellChrome() - the board draws it, it is not a symbol - so dimSymbols() never touches it however hard it dims the fruit. amount steps 0.3, 0.6, 0.9 and the plate does not move; then the same 0.6 through dim() takes the whole cell down.

The last beat is the corollary: swap the cell to the empty id and there is no art left to dim, so dimSymbols() changes nothing at all - not the symbol that has gone, and not the plate, which was never its business.

Which is the thing to watch for on a real board. If your blank tile is a registered symbol (as it is in the recipes above, where the dark tile is the empty id) then it IS art, and dimSymbols() dims it with everything else. Draw whatever must stay lit in cellChrome(), or name its cell in except.

Clover bonus board, 5x5#

The same board with five rows, every cell live from the start.

Clover board that grows from 5x3 to 5x5#

Built 5x5 with the top and bottom rows dormant behind the purple sealed tile (inactive); holding enough clovers opens a row with board.activate(), and the next respin spins it too.

Blur strips on rectangular cells#

Every skeleton has a blur animation that swaps its body to the motion-blur frame, and SpineReelSymbol plays it while the reel moves. Two identical rows, one with the blur track and one that opts out.

Feature clovers: collect, multi, mystery#

Non-monetary clovers act on the held gold between waves: MULTI doubles every amount, MYSTERY becomes a gold clover with a revealed amount via setSymbolAt, COLLECT sums the board onto its face.

Collect: lightning takes the values, the collector dims#

Held clovers idle until the feature ends. When COLLECT locks, lightning strikes from it to each gold clover’s number and the collect face counts the values up into its own value; the golds keep theirs, and the spent collector dims to grey, still held.

The lock animation, per coin and after the landing#

lockAnimation may be a function of the coin that just locked: gold settles with its landing only, COLLECT celebrates. The celebration waits for the skeleton’s own landing beat (symbol.landing) instead of taking its track from it, so the landing shows first and the win follows - the HUD prints when each finished.

Mystery capsule: one of the jackpots#

The sealed capsule locks like a coin; between waves the jackpot titles flick across its face (setBadge) and settle on the served tier, the plaque lights, and the amount paints on.

The game’s grid: gaps filled by the background#

Real gaps between the cells (columnGap and rowGap) and no chrome, so the board is a grid the background shows through: a gradient panel and one rounded frame per cell traced on its exact bounds, plain PIXI.Graphics behind the board, with a rounded cell mask cutting the tiles’ corners to match.

One rounded window, one mask per cell#

Every cell is its own reel set with its own mask, and cellMask takes a function called once per cell with its column and row plus the board size, returning that cell’s strategy. Here every cell clips to a plain rect except the four corner cells, each rounded on its single outer corner through RoundedRectMaskStrategy({ radius, corners }); with no gap the fifteen masks read as one rounded frame, cut on the panel’s own radius. The info argument also carries corners, that same per-cell object precomputed.

One speed switch for every cell#

speeds(normal, turbo, superTurbo) registers each profile into every cell’s SpeedManager and board.setSpeed(name) switches them all at once, the board’s reelSet.setSpeed(); a wave in flight finishes on its own profile, so a turbo press mid-wave is setSpeed plus skip().

Respin counter lamps#

Three lamps driven by respins:changed alone: its reason says whether the number moved on seed, hit-reset or miss, so the lamps pop or dim without the game re-deriving anything.

Beginner: carry a value on a coin#

Build your own ReelSymbol from scratch that draws a coin with a number, and read the value back off the landed symbol.

Beginner: carry the value as data#

The same coin, but the number lives in data instead of the class; one generic coin carries any value the server sends, painted from coin:locked.

Beginner: number on a ready-made coin#

Don’t draw the coin; use art you already have (a sprite) and add the number on top as a second child.

Value-carrying coin (Hold & Win)#

Each coin carries a coefficient (×2 … ×50) in coin.data; the board locks hits and respins only the free cells natively, no pins.

Collector symbol#

On the Hold & Win board, the collector orb absorbs its neighbours: walk board.lockedCoins, fly their values in, and release() those cells.