pixi-wheels
For authors

Debugging

PixiJS draws to a canvas; the debug tools describe the wheel in words and lines.

import { enableDebug, debugOverlay, debugArc, DebugRingSkin } from 'pixi-wheels';

enableDebug(wheel);                       // window.__PIXI_WHEELS_DEBUG
debugOverlay(wheel, { live: true, ticker: app.ticker, hud: 'bottom-left', screen: app.screen });
console.log(debugArc(wheel));
main  rot 123.4  state stopping  speed -210.3 deg/s
|  x2  |x5| x3  |x10|  x2  |x8|  x3 |x50|
             ^ pointer -> x3

In the console:

__PIXI_WHEELS_DEBUG.log()        // arc + state
__PIXI_WHEELS_DEBUG.snapshot()   // plain JSON: rings, sections, pointers, target, planned legs
__PIXI_WHEELS_DEBUG.trace(true)  // log every event (ticks included)
__PIXI_WHEELS_DEBUG.overlay()    // dividers, angles, pointer lines, landing marker, HUD
__PIXI_WHEELS_DEBUG.land('x50')  // setResult on the current spin

DebugRingSkin is the plain look for wiring a wheel before the art exists. Every recipe on this site has a Debug button that toggles the overlay.

The overlay’s pegs layer draws the pegs the tongues touch, fills the one being ridden, and marks each tongue’s contact zone on the rim; the HUD prints the first tongue’s deflection. Tune elasticity, friction, stiffness and damping while watching it.

Reading the overlay#

Everything the overlay writes is drawn at a constant screen size, on dark pills, whatever scale the wheel is shown at:

  • cyan lines on the dividers, and a pill just inside the rim with each section’s id and start angle (every other one past 24 sections), so a canvas fitted to the wheel never crops them;
  • a red marker at each pointer with the local angle under it;
  • the pegs, the one being ridden filled pink, and each tongue’s contact zone;
  • the landing angle in yellow with a target pill once the result is in;
  • the HUD panel: one per ring, in a corner of the canvas. hud takes 'top-left' (default), 'top-right', 'bottom-left', 'bottom-right', an exact { x, y }, or false. Corners on the right or bottom need screen: app.screen.

Pick the layers with layers: ['sections', 'target'] or handle.setLayers([...]); fontSize scales the text.

Poking at the demos on this site#

Every live demo on this site registers itself on window.__pixiWheels under its recipe name, so the console can reach it:

const { wheel, spin } = __pixiWheels['playson-spine-wheel'];
wheel.events.on('spin:landing', (e) => console.log(e.section.id, e.landingAngle));
spin();                          // the same action as the Spin button
debugArc(wheel);                 // via __PIXI_WHEELS_DEBUG, enabled on every demo

Each demo’s frame carries data-recipe="<name>", which is what the end-to-end sweep uses to spin, skip and re-spin every recipe and compare where the wheel says it landed with what sits under the pointer.