pixi-reels
Start here

Getting started

pixi-reels is a reel engine. You drop it into a PixiJS v8 app.

You need#

  • Node 20+, and pnpm or npm or yarn
  • A PixiJS v8 app. The engine runs off app.ticker
  • Spine symbols? Also install @esotericsoftware/spine-pixi-v8

Install#

pnpm add pixi-reels pixi.js gsap
# only if you want Spine symbols
pnpm add @esotericsoftware/spine-pixi-v8

Boot Pixi, build a ReelSet#

import { Application } from 'pixi.js';
import { ReelSetBuilder, SpriteSymbol } from 'pixi-reels';
import { cherryTex, sevenTex, barTex } from './textures';

const app = new Application();
await app.init({ width: 900, height: 540, background: '#0a0d14' });
document.body.appendChild(app.canvas);

const reelSet = new ReelSetBuilder()
  .reels(5)
  .visibleCells(3)
  .symbolSize(140, 140)
  .symbols((r) => {
    r.register('cherry', SpriteSymbol, { textures: { cherry: cherryTex } });
    r.register('seven',  SpriteSymbol, { textures: { seven: sevenTex } });
    r.register('bar',    SpriteSymbol, { textures: { bar: barTex } });
  })
  .weights({ cherry: 40, seven: 10, bar: 20 })
  .ticker(app.ticker)
  .build();

app.stage.addChild(reelSet);

const result = await reelSet.spin();
console.log(result.symbols);

Did it work#

Reels spin. Reels stop. Three rows of random symbols.

Nothing happened? One of these:

You seeDo this
Blank canvasSet reelSet.x and reelSet.y. It sits at (0,0).
ticker() must be calledYou forgot .ticker(app.ticker).
Symbols invisibleThe texture never loaded, or symbolSize() does not match your art. resize() runs on every swap.

Where next#