Skip to main content

Actions

Spinorium provides a powerful timeline system to build game features and animations. Actions, tweens, and timelines let you describe asynchronous flows declaratively while staying in full control of how and when they execute.

Action

Action is an abstract class that provides the basic structure and functionality for all actions in the system. An action can perform a task immediately, wait for external signals, or drive more complex logic before marking itself as completed. Actions are reusable, can be started multiple times, and expose hooks for pausing, resuming, or listening to completion.

The Action class provides the following methods:

  • isRunning – Indicates whether the action is currently active.
  • start(listener?) – Starts the action and optionally adds a completion listener.
  • listen(listener) – Adds a completion listener without starting the action.
  • restart(listener?) – Stops the action (if needed) and immediately starts it again.
  • pause() – Pauses the action.
  • resume() – Resumes a paused action.
  • complete() – Forces the action to finish immediately and notify listeners.
  • stop() – Stops the action and notifies listeners.

Extend Action and override compose() to implement custom logic. Call complete() when the work is done, or leave the action running while awaiting callbacks. When overriding dispose(), always call super.dispose() to guarantee that listeners are flushed.

Custom Action Example

export class RevealWinAction extends Action {
public constructor(protected readonly _message:string) {
super();
}

protected override compose():void {
console.log(`Reveal: ${ this._message }`);
this.complete();
}

protected override dispose():void {
console.log('Reveal completed');
super.dispose();
}
}

Actions.utils.consoleLog('Prepare payout presentation')
.waitAction(new RevealWinAction('x5 multiplier'))
.utils.consoleLog('Continue with settlement')
.start();

Tween

Tween extends Action and animates numeric properties over time. Tweens emit smooth transitions driven by the engine update loop and support easing, counters, and multi-property animations. Use the Tweens factory to build tween sequences quickly, or access them through Actions.tweens to embed animations directly into a timeline.

Tween Usage Example

const symbol = new Sprite(Texture.from('symbol'));

Tweens.bounceScale(symbol, 0.3, 1.15)
.move(symbol, 0.4, { x: symbol.x, y: symbol.y + 90 }, { x: symbol.x, y: symbol.y }, 'quadOut')
.fadeIn(symbol, 0.2)
.start();

Timeline

A timeline is itself an Action that executes a queue of actions in order. The Actions factory builds timelines with fluent methods for delays, events, custom logic, and specialized builders for tweens, stage operations, reel control, and utilities. Timelines can start other actions, wait for them, and skip ahead when specific phases should be bypassed.

The Timeline class provides the following methods:

  • useContext(context, lockType) – Locks the timeline to a context before adding actions.
  • autoSkipPhase(phaseList?) – Registers phases that will be skipped automatically when a TimelineAutoSkipEvent fires.
  • createSkipPhase(phase?) – Marks a point that skipPhase can jump to later.

Timeline Builder Example

const symbol = new Sprite(Texture.from('symbol'));

const enum SpinEvent {
COMPLETE = 'spin/complete'
}

Actions.useContext(symbol, ContextLockType.WAIT)
.autoSkipPhase([ 'intro' ])
.waitDelay(0.2)
.createSkipPhase('intro')
.tweens.fadeIn(symbol, 0.15)
.createSkipPhase('main')
.tweens.move(symbol, 0.45, { x: symbol.x, y: symbol.y }, { x: symbol.x, y: symbol.y - 60 }, 'quadOut')
.waitEventByType(SpinEvent.COMPLETE)
.utils.consoleLog('Spin result ready')
.start();