Class: Spine

Defined in: src/components/Spine.ts:57

Spine component for Pixi.js, used to display Spine components.

Example

import { Assets, canvas } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";

await Assets.load([
    {
        alias: "spineSkeleton",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pro.skel",
    },
    {
        alias: "spineAtlas",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pma.atlas",
    },
]);

const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton" });
spine.x = canvas.width / 2;
spine.y = canvas.height;

canvas.add("spine", spine);

Extends

• Spine

Implements

• CanvasBaseItem<SpineMemory>
• AnchorExtension
• ListenerExtension
• AdditionalPositionsExtension

Constructors

Constructor

> new Spine(options): Spine

Defined in: src/components/Spine.ts:69

Parameters

options

SpineOptions

Options used to configure the Spine skeleton (skeleton/atlas aliases, scale, dark tint, auto update, initial skin, initial animation) plus the standard CanvasBaseItem container options (anchor, align, percentagePosition, etc.).

Returns

Spine

Overrides

CoreSpine.constructor

Properties

__devtoolIgnore?

> optional __devtoolIgnore?: boolean

Defined in: node_modules/@pixi/devtools/global.d.ts:35

Inherited from

CoreSpine.__devtoolIgnore

__devtoolIgnoreChildren?

> optional __devtoolIgnoreChildren?: string

Defined in: node_modules/@pixi/devtools/global.d.ts:36

Inherited from

CoreSpine.__devtoolIgnoreChildren

__devtoolLocked?

> optional __devtoolLocked?: boolean

Defined in: node_modules/@pixi/devtools/global.d.ts:37

Inherited from

CoreSpine.__devtoolLocked

_bounds

> protected _bounds: Bounds

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

Inherited from

CoreSpine._bounds

_boundsDirty

> protected _boundsDirty: boolean

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

Inherited from

CoreSpine._boundsDirty

_cx

> _cx: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:751

Internal

The X-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale.

Inherited from

CoreSpine._cx

_cy

> _cy: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:763

Internal

The X-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale.

Inherited from

CoreSpine._cy

_didSpineUpdate

> _didSpineUpdate: boolean

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:174

Inherited from

CoreSpine._didSpineUpdate

_gcData?

> optional _gcData?: GCData

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

Internal

Inherited from

CoreSpine._gcData

_gcLastUsed

> _gcLastUsed: number

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

Internal

Inherited from

CoreSpine._gcLastUsed

_gpuData

> _gpuData: Record<number, GPU_DATA>

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

Internal

Inherited from

CoreSpine._gpuData

_lastUsed

> _lastUsed: number

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

Internal

Inherited from

CoreSpine._lastUsed

_pivot

> _pivot: ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:734

Internal

The pivot point of the container that it rotates around.

Inherited from

CoreSpine._pivot

_position

> _position: ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:724

Internal

The coordinate of the object relative to the local coordinates of the parent.

Inherited from

CoreSpine._position

_roundPixels

> _roundPixels: 0 | 1

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

Internal

Inherited from

CoreSpine._roundPixels

_scale

> _scale: ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:729

Internal

The scale factor of the object.

Inherited from

CoreSpine._scale

_skew

> _skew: ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:745

Internal

The skew amount, on the x and y axis.

Inherited from

CoreSpine._skew

_slotsObject

> readonly _slotsObject: Record<string, SpineSlotObject | null>

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:184

Inherited from

CoreSpine._slotsObject

_sx

> _sx: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:757

Internal

The Y-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale.

Inherited from

CoreSpine._sx

_sy

> _sy: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:769

Internal

The Y-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale.

Inherited from

CoreSpine._sy

_zIndex

> _zIndex: number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

Internal

Inherited from

CoreSpine._zIndex

accessible?

> optional accessible?: boolean

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set

Default

false

Example

const container = new Container();
container.accessible = true;

Inherited from

CoreSpine.accessible

accessibleChildren?

> optional accessibleChildren?: boolean

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

Default

true

Example

const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false

Inherited from

CoreSpine.accessibleChildren

accessibleHint?

> optional accessibleHint?: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

Default

null

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';

Inherited from

CoreSpine.accessibleHint

accessiblePointerEvents?

> optional accessiblePointerEvents?: PointerEvents

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use Defaults to auto.

Default

'auto'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.

Inherited from

CoreSpine.accessiblePointerEvents

accessibleText?

> optional accessibleText?: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

Default

null

Example

const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';

Inherited from

CoreSpine.accessibleText

accessibleTitle?

> optional accessibleTitle?: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'

Default

null

Example

const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';

Inherited from

CoreSpine.accessibleTitle

accessibleType?

> optional accessibleType?: keyof HTMLElementTagNameMap

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.

Default

'button'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.

Inherited from

CoreSpine.accessibleType

afterUpdateWorldTransforms

> afterUpdateWorldTransforms: (object) => void

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:176

Parameters

object

Spine

Returns

void

Inherited from

CoreSpine.afterUpdateWorldTransforms

allowChildren

> allowChildren: boolean

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

Internal

Inherited from

CoreSpine.allowChildren

atlasAlias

> readonly atlasAlias: string

Defined in: src/components/Spine.ts:118

The asset alias of the atlas this component was created with.

autoGarbageCollect

> autoGarbageCollect: boolean

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

Inherited from

CoreSpine.autoGarbageCollect

beforeUpdateWorldTransforms

> beforeUpdateWorldTransforms: (object) => void

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:175

Parameters

object

Spine

Returns

void

Inherited from

CoreSpine.beforeUpdateWorldTransforms

boundsArea

> boundsArea: Rectangle

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer from recursively measuring the bounds of each children and instead use this single boundArea.

> [!IMPORTANT] This is great for optimisation! If for example you have a > 1000 spinning particles and you know they all sit within a specific bounds, > then setting it will mean the renderer will not need to measure the > 1000 children to find the bounds. Instead it will just use the bounds you set.

Example

const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);

Inherited from

CoreSpine.boundsArea

buildId

> buildId: number

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:172

Inherited from

CoreSpine.buildId

cacheAsBitmap

> cacheAsBitmap: boolean

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below. Use cacheAsTexture instead.

Deprecated

since 8.0.0

Inherited from

CoreSpine.cacheAsBitmap

cacheAsTexture

> cacheAsTexture: (val) => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture, which can improve performance for complex static containers.

Parameters

val

boolean | CacheAsTextureOptions

If true, enables caching with default options. If false, disables caching. Can also pass options object to configure caching behavior.

Returns

void

Example

// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change

See

• Container#updateCacheTexture For updating cached content
• Container#isCachedAsTexture For checking cache state

Inherited from

CoreSpine.cacheAsTexture

canBundle

> readonly canBundle: true = true

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

Internal

Inherited from

CoreSpine.canBundle

children

> readonly children: ContainerChild[]

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

Example

// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];

See

• Container#addChild For adding children
• Container#removeChild For removing children

Inherited from

CoreSpine.children

cullable?

> optional cullable?: boolean

Defined in: node_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view. When true, the object will not be rendered if its bounds are outside the visible area.

Example

const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;

Remarks

• Does not affect transform updates
• Applies to this object only
• Children follow their own cullable setting

Default

false

Inherited from

CoreSpine.cullable

cullableChildren?

> optional cullableChildren?: boolean

Defined in: node_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled. When false, skips recursive culling checks for better performance.

Example

const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);

Remarks

• Improves performance for static scenes
• Useful when children are always within container bounds
• Parent culling still applies

Default

true

Inherited from

CoreSpine.cullableChildren

cullArea?

> optional cullArea?: Rectangle

Defined in: node_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds. Defined in local space coordinates relative to the object. > [!NOTE] > Setting this to a custom Rectangle allows you to define a specific area for culling, > which can improve performance by avoiding expensive bounds calculations.

Example

const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;

Remarks

• Improves performance by avoiding bounds calculations
• Useful for containers with many children
• Set to null to use object bounds

Default

null

Inherited from

CoreSpine.cullArea

cursor?

> optional cursor?: Cursor | string & object

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL.

Example

// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset

Default

undefined

See

• EventSystem.cursorStyles For setting global cursor styles
• https://developer.mozilla.org/en-US/docs/Web/CSS/cursor MDN Cursor Documentation

Inherited from

CoreSpine.cursor

darkTintCore

> readonly darkTintCore: boolean | undefined

Defined in: src/components/Spine.ts:124

Whether the dark tint renderer is used for this skeleton. If true, uses the dark tint renderer; if false, uses the default pixi renderer; if undefined, the dark tint renderer is used only when at least one slot has tint black.

depthOfChildModified

> depthOfChildModified: () => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

Internal

Returns

void

Inherited from

CoreSpine.depthOfChildModified

destroyed

> destroyed: boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used. After an object is destroyed, all of its functionality is disabled and references are removed.

Example

// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true

Default

false

See

Container#destroy For destroying objects

Inherited from

CoreSpine.destroyed

effects?

> optional effects?: Effect[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

Advanced

Inherited from

CoreSpine.effects

eventMode?

> optional eventMode?: EventMode

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

Example

const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';

Available modes:

• 'none': Ignores all interaction events, even on its children. Best for pure visuals.
• 'passive': (default) Does not emit events and ignores hit testing on itself and non-interactive children. Interactive children will still emit events.
• 'auto': Does not emit events but is hit tested if parent is interactive. Same as interactive = false in v7.
• 'static': Emit events and is hit tested. Same as interactive = true in v7. Best for buttons/UI.
• 'dynamic': Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

• Use 'none' for pure visual elements
• Use 'passive' for containers with some interactive children
• Use 'static' for standard UI elements
• Use 'dynamic' only when needed for moving/animated elements

Since

7.2.0

Inherited from

CoreSpine.eventMode

filterArea?

> optional filterArea?: Rectangle

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region for filter effects instead of calculating the display object bounds each frame.

> [!NOTE] > Setting this to a custom Rectangle allows you to define a specific area for filter effects, > which can improve performance by avoiding expensive bounds calculations.

Example

// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);

See

• Container#filters For applying filters
• Rectangle For area definition

Inherited from

CoreSpine.filterArea

globalDisplayStatus

> globalDisplayStatus: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:798

Internal

Inherited from

CoreSpine.globalDisplayStatus

groupAlpha

> groupAlpha: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:780

Internal

Inherited from

CoreSpine.groupAlpha

groupBlendMode

> groupBlendMode: BLEND_MODES

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:788

Internal

Inherited from

CoreSpine.groupBlendMode

groupColor

> groupColor: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:782

Internal

Inherited from

CoreSpine.groupColor

groupColorAlpha

> groupColorAlpha: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:784

Internal

Inherited from

CoreSpine.groupColorAlpha

groupTransform

> readonly groupTransform: Matrix

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too. If this container is render group then this will be an identity matrix. other wise it will be the same as the relativeGroupTransform. Use this value when actually rendering things to the screen

Advanced

Inherited from

CoreSpine.groupTransform

hitArea?

> optional hitArea?: IHitArea | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used for hit testing instead of the container's standard bounds.

Example

import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};

Remarks

• Takes precedence over the container's bounds for hit testing
• Can improve performance by simplifying collision checks
• Useful for irregular shapes or precise click areas

Inherited from

CoreSpine.hitArea

interactive?

> optional interactive?: boolean

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for eventMode set to 'static' or 'passive'. Setting this to true will enable interaction events like pointerdown, click, etc. Setting it to false will disable all interaction events on this object.

See

Container.eventMode

Example

// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'

Inherited from

CoreSpine.interactive

interactiveChildren?

> optional interactiveChildren?: boolean

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children, improving performance for containers with many non-interactive children.

Default

true

Example

// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;

Inherited from

CoreSpine.interactiveChildren

isCachedAsTexture

> readonly isCachedAsTexture: boolean

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

Example

// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}

See

• Container#cacheAsTexture For enabling caching
• Container#updateCacheTexture For updating cache

Inherited from

CoreSpine.isCachedAsTexture

isInteractive

> isInteractive: () => boolean

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

Returns

boolean

Whether the container is interactive or not

Since

7.2.0

Example

import { Sprite } from 'pixi.js';

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false

Inherited from

CoreSpine.isInteractive

label

> label: string

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

Default

null

Inherited from

CoreSpine.label

layerParentId

> layerParentId: string

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:829

Internal

Inherited from

CoreSpine.layerParentId

localAlpha

> localAlpha: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:778

Internal

Inherited from

CoreSpine.localAlpha

localBlendMode

> localBlendMode: BLEND_MODES

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:786

Internal

Inherited from

CoreSpine.localBlendMode

localColor

> localColor: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:776

Internal

Inherited from

CoreSpine.localColor

localDisplayStatus

> localDisplayStatus: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:796

Internal

This property holds three bits: culled, visible, renderable the third bit represents culling (0 = culled, 1 = not culled) 0b100 the second bit represents visibility (0 = not visible, 1 = visible) 0b010 the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

Inherited from

CoreSpine.localDisplayStatus

localTransform

> readonly localTransform: Matrix

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff. This matrix represents the local transformation without any parent influence.

Example

// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());

See

• Container#worldTransform For global transform
• Container#groupTransform For render group transform

Inherited from

CoreSpine.localTransform

mask

> mask: Mask

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.

> [!IMPORTANT] In PixiJS a regular mask must be a Graphics or a Sprite object. > This allows for much faster masking in canvas as it uses shape clipping. > A mask of an object must be in the subtree of its parent. > Otherwise, getLocalBounds may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use Container#setMask with channel: 'alpha' to read the alpha channel instead. See MaskOptions#channel for details.

Example

// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;

See

• Graphics For creating mask shapes
• Sprite For texture-based masks
• Container#setMask For advanced mask options including channel selection

Inherited from

CoreSpine.mask

name

> name: string

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

Deprecated

since 8.0.0

See

Container#label

Default

null

Inherited from

CoreSpine.name

onclick?

> optional onclick?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the click event. Fired when a pointer device (mouse, touch, etc.) completes a click action.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.onclick

onEventsHandlers

> readonly onEventsHandlers: OnEventsHandlers = {}

Defined in: src/components/Spine.ts:459

The registered event handlers for this component, used by setMemory/memory to persist and restore listeners added via on.

Implementation of

ListenerExtension.onEventsHandlers

onglobalmousemove?

> optional onglobalmousemove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the globalmousemove event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};

Default

null

Remarks

• Fires even when the mouse is outside the object's bounds
• Useful for drag operations or global mouse tracking
• Must have eventMode set appropriately to receive events
• Part of the global move events family along with globalpointermove and globaltouchmove

Inherited from

CoreSpine.onglobalmousemove

onglobalpointermove?

> optional onglobalpointermove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the globalpointermove event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Remarks

• Fires even when the mouse is outside the object's bounds
• Useful for drag operations or global mouse tracking
• Must have eventMode set appropriately to receive events
• Part of the global move events family along with globalpointermove and globaltouchmove

Inherited from

CoreSpine.onglobalpointermove

onglobaltouchmove?

> optional onglobaltouchmove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the globaltouchmove event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Remarks

• Fires even when the touch is outside the object's bounds
• Useful for drag operations or global touch tracking
• Must have eventMode set appropriately to receive events
• Part of the global move events family along with globalpointermove and globalmousemove

Inherited from

CoreSpine.onglobaltouchmove

onmousedown?

> optional onmousedown?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the mousedown event. Fired when a mouse button is pressed while the pointer is over the object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};

Default

null

Inherited from

CoreSpine.onmousedown

onmouseenter?

> optional onmouseenter?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the mouseenter event. Fired when the mouse pointer enters the bounds of the object. Does not bubble.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};

Default

null

Inherited from

CoreSpine.onmouseenter

onmouseleave?

> optional onmouseleave?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the mouseleave event. Fired when the pointer leaves the bounds of the display object. Does not bubble.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onmouseleave

onmousemove?

> optional onmousemove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the mousemove event. Fired when the pointer moves while over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};

Default

null

Inherited from

CoreSpine.onmousemove

onmouseout?

> optional onmouseout?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the mouseout event. Fired when the pointer moves out of the bounds of the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onmouseout

onmouseover?

> optional onmouseover?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the mouseover event. Fired when the pointer moves onto the bounds of the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};

Default

null

Inherited from

CoreSpine.onmouseover

onmouseup?

> optional onmouseup?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the mouseup event. Fired when a mouse button is released over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onmouseup

onmouseupoutside?

> optional onmouseupoutside?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the mouseupoutside event. Fired when a mouse button is released outside the display object that initially registered a mousedown.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onmouseupoutside

onpointercancel?

> optional onpointercancel?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the pointercancel event. Fired when a pointer device interaction is canceled or lost.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onpointercancel

onpointerdown?

> optional onpointerdown?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the pointerdown event. Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.onpointerdown

onpointerenter?

> optional onpointerenter?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the pointerenter event. Fired when a pointer device enters the bounds of the display object. Does not bubble.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};

Default

null

Inherited from

CoreSpine.onpointerenter

onpointerleave?

> optional onpointerleave?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the pointerleave event. Fired when a pointer device leaves the bounds of the display object. Does not bubble.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onpointerleave

onpointermove?

> optional onpointermove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the pointermove event. Fired when a pointer device moves while over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.onpointermove

onpointerout?

> optional onpointerout?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the pointerout event. Fired when the pointer moves out of the bounds of the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onpointerout

onpointerover?

> optional onpointerover?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the pointerover event. Fired when the pointer moves over the bounds of the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};

Default

null

Inherited from

CoreSpine.onpointerover

onpointertap?

> optional onpointertap?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the pointertap event. Fired when a pointer device completes a tap action (e.g., touch or mouse click).

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.onpointertap

onpointerup?

> optional onpointerup?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the pointerup event. Fired when a pointer device button (mouse, touch, pen, etc.) is released.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onpointerup

onpointerupoutside?

> optional onpointerupoutside?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the pointerupoutside event. Fired when a pointer device button is released outside the bounds of the display object that initially registered a pointerdown.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onpointerupoutside

onRender

> onRender: ((renderer) => void) | null

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process, making it ideal for per-frame updates and animations.

> [!NOTE] In v7 many users used updateTransform for this, however the way v8 renders objects is different > and "updateTransform" is no longer called every frame

Example

// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback

Param

renderer

The renderer instance

See

Renderer For renderer capabilities

Inherited from

CoreSpine.onRender

onrightclick?

> optional onrightclick?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the rightclick event. Fired when a right-click (context menu) action is performed on the object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.onrightclick

onrightdown?

> optional onrightdown?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the rightdown event. Fired when a right mouse button is pressed down over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) => {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) => {
    sprite.scale.set(0.9);
};

Default

null

Inherited from

CoreSpine.onrightdown

onrightup?

> optional onrightup?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the rightup event. Fired when a right mouse button is released over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onrightup

onrightupoutside?

> optional onrightupoutside?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the rightupoutside event. Fired when a right mouse button is released outside the bounds of the display object that initially registered a rightdown.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.onrightupoutside

ontap?

> optional ontap?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the tap event. Fired when a tap action (touch) is completed on the object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.ontap

ontouchcancel?

> optional ontouchcancel?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the touchcancel event. Fired when a touch interaction is canceled, such as when the touch is interrupted.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.ontouchcancel

ontouchend?

> optional ontouchend?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the touchend event. Fired when a touch interaction ends, such as when the finger is lifted from the screen.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.ontouchend

ontouchendoutside?

> optional ontouchendoutside?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the touchendoutside event. Fired when a touch interaction ends outside the bounds of the display object that initially registered a touchstart.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

CoreSpine.ontouchendoutside

ontouchmove?

> optional ontouchmove?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the touchmove event. Fired when a touch interaction moves while over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

CoreSpine.ontouchmove

ontouchstart?

> optional ontouchstart?: FederatedEventHandler<FederatedPointerEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the touchstart event. Fired when a touch interaction starts, such as when a finger touches the screen.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) => {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) => {
    sprite.scale.set(0.9);
};

Default

null

Inherited from

CoreSpine.ontouchstart

onwheel?

> optional onwheel?: FederatedEventHandler<FederatedWheelEvent> | null

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the wheel event. Fired when the mouse wheel is scrolled while over the display object.

Example

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};

Default

null

Inherited from

CoreSpine.onwheel

parent

> readonly parent: Container<ContainerChild> | null

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object. This represents the parent-child relationship in the display tree.

Example

// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}

See

• Container#addChild For adding to a parent
• Container#removeChild For removing from parent

Inherited from

CoreSpine.parent

parentRenderLayer

> readonly parentRenderLayer: RenderLayer | null

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any. If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

Advanced

Inherited from

CoreSpine.parentRenderLayer

pixivnId

> readonly pixivnId: string = CANVAS_SPINE_ID

Defined in: src/components/Spine.ts:114

Get the id of the canvas element. This variable is used in the system to get the canvas element by id

Implementation of

CanvasBaseItem.pixivnId

relativeGroupTransform

> readonly relativeGroupTransform: Matrix

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested). If this container is is self a render group matrix will be relative to its parent render group

Advanced

Inherited from

CoreSpine.relativeGroupTransform

renderPipeId

> readonly renderPipeId: "spine" = "spine"

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:173

Internal

Inherited from

CoreSpine.renderPipeId

skeleton

> skeleton: Skeleton

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:178

The skeleton for this Spine game object.

Inherited from

CoreSpine.skeleton

skeletonAlias

> readonly skeletonAlias: string

Defined in: src/components/Spine.ts:116

The asset alias of the skeleton this component was created with.

skeletonBounds?

> optional skeletonBounds?: SkeletonBounds

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:181

Inherited from

CoreSpine.skeletonBounds

sortableChildren

> sortableChildren: boolean

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by zIndex value when the next render is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array of children, so it will affect the rendering order.

> [!NOTE] Also be aware of that this may not work nicely with the addChildAt() function, > as the zIndex sorting may cause the child to automatically sorted to another position.

Example

container.sortableChildren = true;

Default

false

Inherited from

CoreSpine.sortableChildren

sortChildren

> sortChildren: () => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

Returns

void

Example

// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();

See

• Container#sortableChildren For enabling automatic sorting
• Container#zIndex For setting child order

Inherited from

CoreSpine.sortChildren

sortDirty

> sortDirty: boolean

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

Internal

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

Default

false
@internal

Inherited from

CoreSpine.sortDirty

spineAttachmentsDirty

> spineAttachmentsDirty: boolean

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:187

Inherited from

CoreSpine.spineAttachmentsDirty

spineTexturesDirty

> spineTexturesDirty: boolean

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:188

Inherited from

CoreSpine.spineTexturesDirty

state

> state: AnimationState

Defined in: node_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:180

The animation state for this Spine game object.

Inherited from

CoreSpine.state

tabIndex?

> optional tabIndex?: number

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.

Default

0

Example

const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;

Inherited from

CoreSpine.tabIndex

uid

> readonly uid: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:610

Internal

unique id for this container

Inherited from

CoreSpine.uid

updateCacheTexture

> updateCacheTexture: () => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture to be redrawn on the next render.

Returns

void

Example

// Basic update after changes
container.updateCacheTexture();

Inherited from

CoreSpine.updateCacheTexture

updateTick

> updateTick: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:674

Internal

Inherited from

CoreSpine.updateTick

zIndex

> zIndex: number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

Example

// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;

See

• Container#sortableChildren For enabling sorting
• Container#sortChildren For manual sorting

Default

0

Inherited from

CoreSpine.zIndex

prefixed

> static prefixed: string | boolean

Defined in: node_modules/eventemitter3/index.d.ts:9

Inherited from

CoreSpine.prefixed

Accessors

align

Get Signature

> get align(): number | Partial<PointData>

Defined in: src/components/Spine.ts:527

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example:

• if you set align to 0.5, the element will be in the center of the canvas.
• if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
• if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

Important: The PixiContainer.pivot field does not affect the alignment.

Returns

number | Partial<PointData>

Set Signature

> set align(value): void

Defined in: src/components/Spine.ts:515

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example:

• if you set align to 0.5, the element will be in the center of the canvas.
• if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
• if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

Important: The PixiContainer.pivot field does not affect the alignment.

Parameters

value

number | Partial<PointData>

Returns