SpineReelSymbol
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#
| Parameter | Type |
|---|---|
options | SpineReelSymbolOptions |
Returns#
SpineReelSymbol
Overrides#
Properties#
| Property | Modifier | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|---|
view | readonly | Container | The PixiJS container that holds this symbol’s visual. | ReelSymbol.view | symbols/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#
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#
isDestroyed#
Get Signature#
get isDestroyed(): boolean;
Defined in: symbols/ReelSymbol.ts:125
Returns
boolean
Inherited from#
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#
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#
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#
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#
| Parameter | Type |
|---|---|
symbolId | string |
Returns#
void
Inherited from#
applyCellQuad()#
applyCellQuad(quad: ReelCellQuad | null): void;
Defined in: symbols/ReelSymbol.ts:505
Parameters#
| Parameter | Type |
|---|---|
quad | ReelCellQuad | null |
Returns#
void
Inherited from#
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#
| Parameter | Type |
|---|---|
instance | typeof gsap |
Returns#
void
Inherited from#
bindMainAxis()#
bindMainAxis(prop: "x" | "y"): void;
Defined in: symbols/ReelSymbol.ts:85
@internal. Bound by SymbolFactory from the set’s orientation.
Parameters#
| Parameter | Type |
|---|---|
prop | "x" | "y" |
Returns#
void
Inherited from#
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#
destroy()#
destroy(): void;
Defined in: symbols/ReelSymbol.ts:176
Returns#
void
Inherited from#
onActivate()#
protected onActivate(symbolId: string): void;
Defined in: spine/SpineReelSymbol.ts:153
Subclass hook: set up visuals for the given symbolId.
Parameters#
| Parameter | Type |
|---|---|
symbolId | string |
Returns#
void
Overrides#
onDeactivate()#
protected onDeactivate(): void;
Defined in: spine/SpineReelSymbol.ts:200
Subclass hook: clean up visuals.
Returns#
void
Overrides#
onDestroy()#
protected onDestroy(): void;
Defined in: spine/SpineReelSymbol.ts:437
Subclass hook: additional cleanup on destroy.
Returns#
void
Overrides#
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#
| Parameter | Type |
|---|---|
ctx? | ReelLandingContext |
Returns#
void
Overrides#
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#
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#
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#
| Parameter | Type |
|---|---|
opts? | { delay?: number; signal?: AbortSignal; } |
opts.delay? | number |
opts.signal? | AbortSignal |
Returns#
Promise<void>
Overrides#
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#
| Parameter | Type |
|---|---|
opts? | { delay?: number; signal?: AbortSignal; } |
opts.delay? | number |
opts.signal? | AbortSignal |
Returns#
Promise<void>
Inherited from#
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#
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#
| Parameter | Type | Default value |
|---|---|---|
track | number | undefined |
animName | string | undefined |
loop | boolean | false |
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#
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#
reset()#
reset(): void;
Defined in: symbols/ReelSymbol.ts:172
Pool reset. aliases deactivate.
Returns#
void
Inherited from#
resize()#
resize(width: number, height: number): void;
Defined in: spine/SpineReelSymbol.ts:426
Resize the symbol’s visual to fit the given dimensions.
Parameters#
| Parameter | Type |
|---|---|
width | number |
height | number |
Returns#
void
Overrides#
stopAnimation()#
stopAnimation(): void;
Defined in: spine/SpineReelSymbol.ts:336
Immediately stop any running animation and return to idle.
Returns#
void
Overrides#
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#
| Parameter | Type |
|---|---|
run | Promise<void> |
Returns#
Promise<void>