pixi-reels

SpineReelSymbol

pixi-reels


pixi-reels / spine / SpineReelSymbol

Class: SpineReelSymbol

Defined in: spine/SpineReelSymbol.ts:96

ReelSymbol implementation using Spine 2D skeletons.

Caches one Spine instance per symbolId for instant swapping, plays idle on activate, and exposes the canonical set of one-shot animations (landing, win, out, reactions). Modeled on the Bonanza / Hold & Win slot-game conventions. drop in any skeleton that follows the same vocabulary.

Import from the pixi-reels/spine subpath so non-Spine consumers can tree-shake this module and @esotericsoftware/spine-pixi-v8 out of their production bundle:

import { SpineReelSymbol } from 'pixi-reels/spine';

Extends#

Constructors#

Constructor#

new SpineReelSymbol(options: SpineReelSymbolOptions): SpineReelSymbol;

Defined in: spine/SpineReelSymbol.ts:109

Parameters#

ParameterType
optionsSpineReelSymbolOptions

Returns#

SpineReelSymbol

Overrides#

ReelSymbol.constructor

Properties#

PropertyModifierTypeDescriptionInherited fromDefined in
viewreadonlyContainerThe PixiJS container that holds this symbol’s visual.ReelSymbol.viewsymbols/ReelSymbol.ts:38

Accessors#

cellInset#

Get Signature#

get cellInset(): ReelCellInset | null;

Defined in: symbols/ReelSymbol.ts:501

The part of its cell this symbol’s art actually covers, or null (the default) for “all of it”.

Slot art is usually smaller than its cell - a trimmed atlas frame is a shape floating in a much bigger transparent box - and the reel needs to know that to project the rectangle the art is really in. Overriding this is what stops a small symbol being inflated to the cell’s edges and given the cell’s keystone instead of its own, milder one.

Read once per projection, so it may change with the symbol’s identity.

Returns

ReelCellInset | null

Inherited from#

ReelSymbol.cellInset


gsap#

Get Signature#

get protected gsap(): typeof gsap;

Defined in: symbols/ReelSymbol.ts:59

The gsap instance this symbol should animate on. Use it instead of importing gsap in a subclass: under a symlinked-workspace module resolution your import and the engine’s can be different instances, and only this one is on the timeline the reel set actually drives.

Bound to the owning set by SymbolFactory; falls back to the instance resolved at lib-load time for a symbol built outside a set.

Returns

typeof gsap

Inherited from#

ReelSymbol.gsap


isDestroyed#

Get Signature#

get isDestroyed(): boolean;

Defined in: symbols/ReelSymbol.ts:125

Returns

boolean

Inherited from#

ReelSymbol.isDestroyed


landing#

Get Signature#

get landing(): Promise<void> | null;

Defined in: symbols/ReelSymbol.ts:106

The landing beat this symbol started on its latest onReelLanded(), or null if it started none. Stays set (resolved) until the reel moves again or the symbol is pooled, so a presenter that lands cells one at a time - HoldAndWinBoard on a lock, a win spotlight - can sequence after the landing (await symbol.landing) instead of stomping it, and can tell a symbol that already landed from one that still needs playLanding().

Subclasses report a landing through trackLanding.

Returns

Promise<void> | null

Inherited from#

ReelSymbol.landing


mainAxis#

Get Signature#

get protected mainAxis(): "x" | "y";

Defined in: symbols/ReelSymbol.ts:80

The screen axis the owning set’s strips travel along: 'y' for a vertical set, 'x' for a horizontal one.

Symbols are otherwise orientation-agnostic - resize(width, height) is screen-space and always will be. This exists for the few effects that genuinely follow travel, motion blur being the one in the box.

Returns

"x" | "y"

Inherited from#

ReelSymbol.mainAxis


spine#

Get Signature#

get spine(): Spine | null;

Defined in: spine/SpineReelSymbol.ts:346

Access the underlying Spine. for advanced needs (reactions, events).

Returns

Spine | null


symbolId#

Get Signature#

get symbolId(): string;

Defined in: symbols/ReelSymbol.ts:89

Returns

string

Inherited from#

ReelSymbol.symbolId

Methods#

activate()#

activate(symbolId: string): void;

Defined in: symbols/ReelSymbol.ts:134

Activate the symbol with a new identity. Called when the symbol enters the visible reel or is recycled from the pool. Resets container transform / filter state for parity with deactivate().

Parameters#

ParameterType
symbolIdstring

Returns#

void

Inherited from#

ReelSymbol.activate


applyCellQuad()#

applyCellQuad(quad: ReelCellQuad | null): void;

Defined in: symbols/ReelSymbol.ts:505

Parameters#

ParameterType
quadReelCellQuad | null

Returns#

void

Inherited from#

ReelSymbol.applyCellQuad


bindGsap()#

bindGsap(instance: typeof gsap): void;

Defined in: symbols/ReelSymbol.ts:68

@internal. Called by SymbolFactory when the symbol is created, so a pooled symbol animates on its own set’s gsap rather than whichever set happened to build last.

Parameters#

ParameterType
instancetypeof gsap

Returns#

void

Inherited from#

ReelSymbol.bindGsap


bindMainAxis()#

bindMainAxis(prop: "x" | "y"): void;

Defined in: symbols/ReelSymbol.ts:85

@internal. Bound by SymbolFactory from the set’s orientation.

Parameters#

ParameterType
prop"x" | "y"

Returns#

void

Inherited from#

ReelSymbol.bindMainAxis


deactivate()#

deactivate(): void;

Defined in: symbols/ReelSymbol.ts:154

Deactivate the symbol before returning it to the pool. Stops animations, hides the view, and resets container transform / filter state so subclass decorations don’t leak across recycles.

Returns#

void

Inherited from#

ReelSymbol.deactivate


destroy()#

destroy(): void;

Defined in: symbols/ReelSymbol.ts:176

Returns#

void

Inherited from#

ReelSymbol.destroy


onActivate()#

protected onActivate(symbolId: string): void;

Defined in: spine/SpineReelSymbol.ts:153

Subclass hook: set up visuals for the given symbolId.

Parameters#

ParameterType
symbolIdstring

Returns#

void

Overrides#

ReelSymbol.onActivate


onDeactivate()#

protected onDeactivate(): void;

Defined in: spine/SpineReelSymbol.ts:200

Subclass hook: clean up visuals.

Returns#

void

Overrides#

ReelSymbol.onDeactivate


onDestroy()#

protected onDestroy(): void;

Defined in: spine/SpineReelSymbol.ts:437

Subclass hook: additional cleanup on destroy.

Returns#

void

Overrides#

ReelSymbol.onDestroy


onReelAnticipationStart()#

onReelAnticipationStart(): void;

Defined in: symbols/ReelSymbol.ts:575

Lifecycle hook: the owning reel entered its anticipation (tease) phase. it is still spinning, but slowed enough that the strip is readable. Spin presentations that obscure symbols (blur textures, smear animations) should relax so the player can follow the tease. Also fired on symbols installed while the reel is anticipating. Implementations MUST be idempotent. Default: no-op.

Returns#

void

Inherited from#

ReelSymbol.onReelAnticipationStart


onReelLanded()#

onReelLanded(ctx?: ReelLandingContext): void;

Defined in: spine/SpineReelSymbol.ts:133

Lifecycle hook: the owning reel has landed on its final symbols. Default: no-op. Override (e.g. SpineReelSymbol.autoPlayLanding) to fire a landing animation concurrently with the bounce.

ctx says which reel and cell this symbol landed in, so an override can play a different beat - or none - on a particular reel. The engine always supplies it; it is optional only so an override written as onReelLanded() keeps compiling. Fired before the reel’s landing event and the set’s spin:reelLanding, by contract.

Parameters#

ParameterType
ctx?ReelLandingContext

Returns#

void

Overrides#

ReelSymbol.onReelLanded


onReelSpinEnd()#

onReelSpinEnd(): void;

Defined in: spine/SpineReelSymbol.ts:129

Lifecycle hook: the owning reel is about to stop (just before bounce). Default: no-op.

Returns#

void

Overrides#

ReelSymbol.onReelSpinEnd


onReelSpinStart()#

onReelSpinStart(): void;

Defined in: spine/SpineReelSymbol.ts:125

Lifecycle hook: the owning reel is spinning. Default: no-op. Override (e.g. SpineReelSymbol.autoPlayBlur, StaticSpinSymbol) to swap to a spin presentation automatically.

Fired on every strip symbol (visible AND buffer cells) when the reel enters the spin phase, and again with joinedMidSpin: true on each symbol freshly installed while the reel is already spinning (pool recycling wipes symbol state, so a wrapped-in symbol can’t know the reel is moving without this). Implementations MUST be idempotent. the same instance can be notified more than once per spin.

Returns#

void

Overrides#

ReelSymbol.onReelSpinStart


playBlur()#

playBlur(): void;

Defined in: spine/SpineReelSymbol.ts:318

Swap the primary track to the blur animation for the SPIN phase. Reverts to idle automatically on stopAnimation() or next activate.

If a one-shot promise (playWin / playLanding / playOut) is in flight on the same track, settle it first so the caller’s await doesn’t dangle when its track is hijacked.

Returns#

void


playDestroy()#

playDestroy(opts?: {
  delay?: number;
  signal?: AbortSignal;
}): Promise<void>;

Defined in: spine/SpineReelSymbol.ts:254

Cascade-destruction override. If the skeleton has the configured out (disintegration) animation, play it. Otherwise fall back to the base class’s GSAP scale-and-fade so a partial skeleton still cascades cleanly. opts.delay is honored (seconds, mirrors the GSAP version) so callers can stagger a winning cluster. opts.signal aborts the (pre-delay or in-flight) animation early. the spine state is snapped to the next track entry and the resolve fires immediately; the view is left at alpha: 0 for parity with the GSAP fallback so the destroyed pose is consistent across symbol kinds.

Parameters#

ParameterType
opts?{ delay?: number; signal?: AbortSignal; }
opts.delay?number
opts.signal?AbortSignal

Returns#

Promise<void>

Overrides#

ReelSymbol.playDestroy


playIn()#

playIn(opts?: {
  delay?: number;
  signal?: AbortSignal;
}): Promise<void>;

Defined in: symbols/ReelSymbol.ts:362

Animate this symbol IN, from nothing to its resting pose.

Owns its own start pose. A symbol that has just been re-activated is fully visible (activate() resets alpha and scale), so an entrance that assumed it started hidden would pop before it animated. This sets the hidden pose first, then plays.

Override for art-appropriate entrances - a Spine symbol plays its own in track here. Honour opts.signal: abort snaps to the RESTING pose (alpha 1, scale 1), because arriving is what the caller asked for.

Default: a ~200 ms fade and scale-up with a small overshoot.

Parameters#

ParameterType
opts?{ delay?: number; signal?: AbortSignal; }
opts.delay?number
opts.signal?AbortSignal

Returns#

Promise<void>

Inherited from#

ReelSymbol.playIn


playLanding()#

playLanding(): Promise<void>;

Defined in: spine/SpineReelSymbol.ts:231

Play the landing animation (one-shot). Call this when the reel settles. typically inside a spin:reelLanded listener.

Returns#

Promise<void>

Overrides#

ReelSymbol.playLanding


playOnTrack()#

playOnTrack(
   track: number, 
   animName: string, 
   loop?: boolean
): TrackEntry | null;

Defined in: spine/SpineReelSymbol.ts:330

Play an arbitrary animation on a given track. Non-blocking.

Parameters#

ParameterTypeDefault value
tracknumberundefined
animNamestringundefined
loopbooleanfalse

Returns#

TrackEntry | null


playOut()#

playOut(): Promise<void>;

Defined in: spine/SpineReelSymbol.ts:239

Play the exit / disintegrate animation. Returns a promise that resolves when it completes. Use in cascades instead of the default alpha fade.

Returns#

Promise<void>

Overrides#

ReelSymbol.playOut


playWin()#

playWin(): Promise<void>;

Defined in: spine/SpineReelSymbol.ts:223

Play the win animation on track 0. Returns when it completes.

Returns#

Promise<void>

Overrides#

ReelSymbol.playWin


reset()#

reset(): void;

Defined in: symbols/ReelSymbol.ts:172

Pool reset. aliases deactivate.

Returns#

void

Inherited from#

ReelSymbol.reset


resize()#

resize(width: number, height: number): void;

Defined in: spine/SpineReelSymbol.ts:426

Resize the symbol’s visual to fit the given dimensions.

Parameters#

ParameterType
widthnumber
heightnumber

Returns#

void

Overrides#

ReelSymbol.resize


stopAnimation()#

stopAnimation(): void;

Defined in: spine/SpineReelSymbol.ts:336

Immediately stop any running animation and return to idle.

Returns#

void

Overrides#

ReelSymbol.stopAnimation


trackLanding()#

protected trackLanding(run: Promise<void>): Promise<void>;

Defined in: symbols/ReelSymbol.ts:115

Subclass helper: record run as this symbol’s landing beat (see landing) and return it. SpineReelSymbol wraps its landing one-shot in it; a sprite symbol wraps its settle tween.

Parameters#

ParameterType
runPromise<void>

Returns#

Promise<void>

Inherited from#

ReelSymbol.trackLanding