PR pixi-reels

Abstract Class: ReelSymbol

pixi-reels


pixi-reels / index / ReelSymbol

Abstract Class: ReelSymbol

Defined in: symbols/ReelSymbol.ts:35

One visible cell on a reel. the thing that actually draws.

ReelSymbol is the abstract base class. Subclass it to pick a rendering technology (SpriteSymbol, AnimatedSpriteSymbol, SpineSymbol, or a custom class of your own). The reel set pools instances aggressively: one instance is reused many times as it scrolls off one identity and on to another, so implementations must never assume “I was just created”.

Required lifecycle hooks:

  • onActivate(symbolId). the pool just handed me a new identity. Swap texture, restart animations, bring myself out of any “ended” pose.
  • onDeactivate(). I am about to be pooled. Pause animations, clear listeners, leave myself in a clean state for the next activation.
  • playWin(). the spotlight is celebrating me. Return a promise that resolves when the one-shot animation is done.
  • stopAnimation(). spotlight is over, return to idle.
  • resize(w, h). the reel’s cell size changed (on every symbol swap). Store the dimensions and reposition internal children. Forgetting this is the single most common “why do my symbols scatter” bug.
create → activate(symbolId) → [playWin / stopAnimation]
                            → deactivate
                            → activate(newId) → ...

There’s no hidden GC. Hold resources? Override onDestroy().

Extended by

Implements

Constructors

Constructor

new ReelSymbol(): ReelSymbol;

Defined in: symbols/ReelSymbol.ts:42

Returns

ReelSymbol

Properties

PropertyModifierTypeDescriptionDefined in
viewreadonlyContainerThe PixiJS container that holds this symbol’s visual.symbols/ReelSymbol.ts:37

Accessors

isDestroyed

Get Signature

get isDestroyed(): boolean;

Defined in: symbols/ReelSymbol.ts:50

Returns

boolean

Implementation of

Disposable.isDestroyed


symbolId

Get Signature

get symbolId(): string;

Defined in: symbols/ReelSymbol.ts:46

Returns

string

Methods

activate()

activate(symbolId: string): void;

Defined in: symbols/ReelSymbol.ts:59

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


deactivate()

deactivate(): void;

Defined in: symbols/ReelSymbol.ts:75

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


destroy()

destroy(): void;

Defined in: symbols/ReelSymbol.ts:92

Returns

void

Implementation of

Disposable.destroy


onActivate()

abstract protected onActivate(symbolId: string): void;

Defined in: symbols/ReelSymbol.ts:102

Subclass hook: set up visuals for the given symbolId.

Parameters

ParameterType
symbolIdstring

Returns

void


onDeactivate()

abstract protected onDeactivate(): void;

Defined in: symbols/ReelSymbol.ts:105

Subclass hook: clean up visuals.

Returns

void


onDestroy()

protected onDestroy(): void;

Defined in: symbols/ReelSymbol.ts:108

Subclass hook: additional cleanup on destroy.

Returns

void


onReelLanded()

onReelLanded(): void;

Defined in: symbols/ReelSymbol.ts:241

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.

Returns

void


onReelSpinEnd()

onReelSpinEnd(): void;

Defined in: symbols/ReelSymbol.ts:234

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

Returns

void


onReelSpinStart()

onReelSpinStart(): void;

Defined in: symbols/ReelSymbol.ts:228

Lifecycle hook: the owning reel has started spinning. Default: no-op. Override (e.g. SpineReelSymbol.autoPlayBlur) to swap to a blur animation automatically.

Returns

void


playDestroy()

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

Defined in: symbols/ReelSymbol.ts:153

Play the cascade-destruction animation for this symbol. Called by consumers (typically via reelSet.destroySymbols(...)) to disintegrate a winning cell before the next cascade refill drops fresh symbols in.

Default implementation: brief scale-up “charge” then implode (scale 0

  • spin + fade), squishing around the symbol’s bounding-box CENTER regardless of the view’s anchor. Total ~320 ms. The view is left at alpha: 0 (destroyed); position / pivot are restored so pool reuse via _replaceSymbol’s same-id fast path doesn’t inherit a stale pivot offset.

Override in subclasses for art-appropriate destruction. e.g. a Spine symbol can play its disintegration track here, or a sprite symbol can swap to a shatter atlas. The promise must resolve when the symbol is no longer visible.

Default animation: a snappy “poof”. tiny anticipation pop (~60 ms) then a fast implode to scale: 0 + alpha: 0 (~140 ms), centered on the symbol’s bounds. ~200 ms total. No rotation. designed to read cleanly under win-cluster pacing without competing with the win presenter.

opts.delay. seconds to wait before the animation starts. Use to stagger a cluster of winners (e.g. i * 0.015). opts.signal. abort signal. If aborted (now or mid-animation), the tween is killed and the view is snapped to its destroyed pose (alpha: 0, transform restored). The promise resolves normally. abort means “skip to the end,” not “fail”. Subclasses that override this method MUST honor the signal or document why they can’t (e.g. a Spine disintegration track is uninterruptible).

Parameters

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

Returns

Promise<void>


playWin()

abstract playWin(): Promise<void>;

Defined in: symbols/ReelSymbol.ts:113

Play the win/highlight animation for this symbol. Resolves when complete.

Returns

Promise<void>


reset()

reset(): void;

Defined in: symbols/ReelSymbol.ts:88

Pool reset. aliases deactivate.

Returns

void


resize()

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

Defined in: symbols/ReelSymbol.ts:119

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

Parameters

ParameterType
widthnumber
heightnumber

Returns

void


stopAnimation()

abstract stopAnimation(): void;

Defined in: symbols/ReelSymbol.ts:116

Immediately stop any running animation and return to idle.

Returns

void