pixi-wheels
Start here

Getting started

pixi-wheels is a bonus wheel engine. You drop it into a PixiJS v8 app.

You need#

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

Install#

pnpm add pixi-wheels pixi.js
# only if you want Spine skins or pointers
pnpm add @esotericsoftware/spine-pixi-v8

Boot Pixi, build a wheel#

import { Application } from 'pixi.js';
import { WheelBuilder, SpinPresets } from 'pixi-wheels';

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

const wheel = new WheelBuilder()
  .radius(240, 36)
  .sections([
    { id: 'x2',  label: 'x2',  value: 2,  weight: 3 },
    { id: 'x5',  label: 'x5',  value: 5,  weight: 2 },
    { id: 'x10', label: 'x10', value: 10, weight: 1 },
    { id: 'x2b', label: 'x2',  value: 2,  weight: 3 },
  ])
  .speed('normal', SpinPresets.NORMAL)
  .ticker(app.ticker)
  .build();

wheel.position.set(400, 300);
app.stage.addChild(wheel);

const spin = wheel.spin();
const response = await fetch('/api/wheel').then((r) => r.json()); // your server
wheel.setResult({ value: response.multiplier });
const result = await spin;
console.log(result.section.id, result.offset);

Did it work#

The wheel winds up, cruises until the result is in, decelerates without a jerk and stops with the pointer on a section carrying the value you passed.

Nothing happened? One of these:

You seeDo this
A blank canvasThe wheel sits at (0, 0) with its centre there. Set wheel.position.
ticker(app.ticker) must be calledYou forgot .ticker(app.ticker).
It spins and never stopsNothing called setResult(). The wheel waits for its server. Pass resultTimeoutMs to spin() if you want a guard.
Unknown ease "..."A typo in a profile’s stopEase. The message lists every name.

Where next#