pixi-reels
Step-by-step

Your first reelset

So you want to make the reels in your slot and it’s probably your first time seeing this lib/.

In this guide you’ll build a minimal slot from nothing.

What slot? Ah! Something simple! 5x3 fruity slot.

0. Set up

We assume you have some pixi app already setup.

Use npm i pixi-reels to install the lib (or use your desired package manager.

1. Create the builder

import { ReelSetBuilder } from 'pixi-reels';
const builder = new ReelSetBuilder();

So builder is kinda “core”? Yeah, you could say that.

It is the first thing you construct and then configure.

2. Configure the grid

builder
  .reels(5)
  .visibleRows(3)
  .symbolSize(140, 140)
  .symbolGap(4, 4)           // optional
  .bufferSymbols(1);         // optional. default 1

Nothing visible yet, no errors. Configuration is deferred until .build().

So it’s just a config.

3. Register symbols

Every symbol needs an id and a class. Use SpriteSymbol for static textures, AnimatedSpriteSymbol for sprite-sheet animation, SpineSymbol for Spine.

We highly suggest that you create your own Container that hosts the visuals you need. Extend ReelSymbol and do as you like.

import { SpriteSymbol } from 'pixi-reels';

builder.symbols((r) => {
  r.register('cherry', SpriteSymbol, { textures: { cherry: cherryTex } });
  r.register('seven',  SpriteSymbol, { textures: { seven: sevenTex } });
  r.register('wild',   SpriteSymbol, { textures: { wild: wildTex } });
});

Calling .build() without registering any symbols throwssymbols() must register at least one symbol.

4. Weights + ticker, then build

Here app is your pixi app.

builder
  .weights({ cherry: 40, seven: 8, wild: 5 })
  .ticker(app.ticker);

const reelSet = builder.build();
app.stage.addChild(reelSet);

Verify that you see a 5-column, 3-row grid of randomly assigned symbols, static (not spinning).

In most slots you want the players to see some initial semi-random frame when they first open your game and for each subsequent one you’d wanna show player “what the last round was”.

builder.initialFrame([
    { visible: ['cherry', 'seven', 'cherry'] },
    { visible: ['wild', 'cherry', 'seven'] },
    { visible: ['seven', 'seven', 'cherry'] },
    { visible: ['cherry', 'wild', 'cherry'] },
    { visible: ['seven', 'cherry', 'cherry'] },
  ])

For that you will just use initialFrame - yeah, it’s that simple. You can even set the peeking symbols if you need.

5. Spin it

const result = await reelSet.spin();

And it’s spinning. You would never do it from a simple button click callback, best way is to put it into your fsm state that opens a new round and sends a request to RGS.

  1. Stop it

To make the reels stop and show an outcome callsetResult() before the promise resolves:

const promise = reelSet.spin();
reelSet.setResult([
  { visible: ['wild','seven','wild'] },
  { visible: ['seven','wild','seven'] },
  { visible: ['wild','seven','wild'] },
  { visible: ['seven','wild','seven'] },
  { visible: ['wild','seven','wild'] },
])

You will see the reels stop and show you the result you’ve set.

Take note that awaiting reelSet.spin() before setting result is a common pitfall since it resolves when you set the result 😃

What next