Class: AnimatedSprite

Set Signature

> set anchor(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:257

Parameters

value

number | PointData

Returns

void

Inherited from

Sprite.anchor

angle

Get Signature

> get angle(): number

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

The angle of the object in degrees.

> [!NOTE] 'rotation' and 'angle' have the same effect on a display object; > rotation is in radians, angle is in degrees.

Example

// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;

Returns

number

Set Signature

> set angle(value): void

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

Parameters

value

number

Returns

void

Inherited from

Sprite.angle

autoUpdate

Get Signature

> get autoUpdate(): boolean

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:703

Controls whether the animation automatically updates using the shared ticker. When enabled, the animation will update on each frame. When disabled, you must manually call update() to advance the animation.

Example

// Create sprite with auto-update disabled
const sprite = new AnimatedSprite({
    textures: [],
    autoUpdate: false
});

// Manual update with app ticker
app.ticker.add((ticker) => {
    sprite.update(ticker);
});

// Enable auto-update later
sprite.autoUpdate = true;

Default

true

See

AnimatedSprite#update For manual animation updates
Ticker For the timing system

Returns

boolean

Set Signature

> set autoUpdate(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:704

Parameters

value

boolean

Returns

void

blendMode

Get Signature

> get blendMode(): BLEND_MODES

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

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending. > [!NOTE] More blend modes are available after importing the pixi.js/advanced-blend-modes sub-export.

Example

// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending

Default

'normal'

See

Container#alpha For transparency
Container#tint For color adjustments

Returns

BLEND_MODES

Set Signature

> set blendMode(value): void

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

Parameters

value

BLEND_MODES

Returns

void

Inherited from

Sprite.blendMode

bounds

Get Signature

> get bounds(): Bounds

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

The local bounds of the view in its own coordinate space. Bounds are automatically updated when the view's content changes.

Example

// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);

See

Bounds For bounds operations

Returns

The rectangular bounds of the view

this is the AABB rectangle bounds of the view in local untransformed space.

Inherited from

ViewContainer.bounds

currentFrame

Get Signature

> get currentFrame(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:657

Gets or sets the current frame index of the animation. When setting, the value will be clamped between 0 and totalFrames - 1.

Example

// Create an animated sprite
const sprite = new AnimatedSprite({
    textures: [
        Texture.from('walk1.png'),
        Texture.from('walk2.png'),
        Texture.from('walk3.png')
    ]
});

// Get current frame
console.log(sprite.currentFrame); // 0

// Set specific frame
sprite.currentFrame = 1; // Show second frame

// Use with frame callbacks
sprite.onFrameChange = (frame) => {
    console.log(`Now showing frame: ${frame}`);
};
sprite.currentFrame = 2;

Throws

If attempting to set a frame index out of bounds

See

AnimatedSprite#totalFrames For the total number of frames
AnimatedSprite#gotoAndPlay For playing from a specific frame
AnimatedSprite#gotoAndStop For stopping at a specific frame

Returns

number

Set Signature

> set currentFrame(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:658

Parameters

value

number

Returns

void

filters

Get Signature

> get filters(): readonly Filter[]

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

Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.

> [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

Example

new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});

See

Filter For filter base class

Returns

readonly Filter[]

Set Signature

> set filters(value): void

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

Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.

> [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

Example

// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;

See

Filter For filter base class

Parameters

value

Filter | Filter[] | null | undefined

Returns

void

Inherited from

Sprite.filters

height

Get Signature

> get height(): number

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:300

The height of the sprite, setting this will actually modify the scale to achieve the value set.

Example

// Set height directly
sprite.height = 150;
console.log(sprite.scale.y); // Scale adjusted to match height

// Set height while preserving aspect ratio
const ratio = sprite.width / sprite.height;
sprite.height = 200;
sprite.width = 200 * ratio;

// For better performance when setting both width and height
sprite.setSize(300, 400); // Avoids recalculating bounds twice

// Reset to original texture size
sprite.height = sprite.texture.orig.height;

Returns

number

Set Signature

> set height(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:301

The height of the Container, > [!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio. > [!NOTE] If you want to set both width and height at the same time, use Container#setSize as it is more optimized by not recalculating the local bounds twice.

Example

// Basic height setting
container.height = 200;
// Optimized height setting
container.setSize(100, 200);

Parameters

value

number

Returns

void

Inherited from

Sprite.height

isRenderable

Get Signature

> get isRenderable(): boolean

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

Whether or not the object should be rendered.

Advanced

Returns

boolean

Inherited from

Sprite.isRenderable

isRenderGroup

Get Signature

> get isRenderGroup(): boolean

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

Returns true if this container is a render group. This means that it will be rendered as a separate pass, with its own set of instructions

Advanced

Returns

boolean

Set Signature

> set isRenderGroup(value): void

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

Parameters

value

boolean

Returns

void

Inherited from

Sprite.isRenderGroup

origin

Get Signature

> get origin(): ObservablePoint

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

Experimental

The origin point around which the container rotates and scales without affecting its position. Unlike pivot, changing the origin will not move the container's position.

Example

// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);

Returns

Set Signature

> set origin(value): void

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

Parameters

value

number | PointData

Returns

void

Inherited from

Sprite.origin

pivot

Get Signature

> get pivot(): ObservablePoint

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

The center of rotation, scaling, and skewing for this display object in its local space. The position is the projection of pivot in the parent's local space.

By default, the pivot is the origin (0, 0).

Example

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

Since

4.0.0

Returns

Set Signature

> set pivot(value): void

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

Parameters

value

number | PointData

Returns

void

Inherited from

Sprite.pivot

playing

Get Signature

> get playing(): boolean

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:678

Indicates if the AnimatedSprite is currently playing. This is a read-only property that reflects the current playback state.

Example

// Check if animation is playing
console.log('Playing:', sprite.playing); // true

// Use with play control
if (!sprite.playing) {
    sprite.play();
}

See

AnimatedSprite#play For starting playback
AnimatedSprite#stop For stopping playback
AnimatedSprite#loop For controlling looping behavior

Returns

boolean

True if the animation is currently playing

position

Get Signature

> get position(): ObservablePoint

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

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

Example

// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };

Since

4.0.0

Returns

Set Signature

> set position(value): void

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

Parameters

value

ViewContainer.roundPixels

Returns

void

Inherited from

Sprite.position

renderable

Get Signature

> get renderable(): boolean

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

Controls whether this object can be rendered. If false the object will not be drawn, but the transform will still be updated. This is different from visible, which skips transform updates.

Example

// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering

Default

true

See

Container#visible For skipping transform updates
Container#alpha For transparency

Returns

boolean

Set Signature

> set renderable(value): void

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

Parameters

value

boolean

Returns

void

Inherited from

Sprite.renderable

rotation

Get Signature

> get rotation(): number

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

The rotation of the object in radians.

> [!NOTE] 'rotation' and 'angle' have the same effect on a display object; > rotation is in radians, angle is in degrees.

Example

// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

Returns

number

Set Signature

> set rotation(value): void

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

Parameters

value

number

Returns

void

Inherited from

Sprite.rotation

roundPixels

Get Signature

> get roundPixels(): boolean

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

Whether or not to round the x/y position of the sprite.

Example

// Enable pixel rounding for crisp rendering
view.roundPixels = true;

Default

false

Returns

boolean

Set Signature

> set roundPixels(value): void

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

Whether or not to round the x/y position of the object.

Parameters

value

boolean

Returns

void

Inherited from

scale

Get Signature

> get scale(): ObservablePoint

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

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

Example

// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100

Since

4.0.0

Returns

Set Signature

> set scale(value): void

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

Parameters

value

string | number | PointData

Returns

void

Inherited from

Sprite.scale

skew

Get Signature

> get skew(): ObservablePoint

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

The skew factor for the object in radians. Skewing is a transformation that distorts the object by rotating it differently at each point, creating a non-uniform shape.

Example

// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object

Since

4.0.0

Default

{x: 0, y: 0}

Returns

Set Signature

> set skew(value): void

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

Parameters

value

Returns

void

Inherited from

Sprite.skew

texture

Get Signature

> get texture(): Texture

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:189

The texture that is displayed by the sprite. When changed, automatically updates the sprite dimensions and manages texture event listeners.

Example

// Create sprite with texture
const sprite = new Sprite({
    texture: Texture.from('sprite.png')
});

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;

See

Texture For texture creation and management
Assets For asset loading

Returns

Texture

Set Signature

> set texture(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:165

Parameters

value

Texture

Returns

void

Inherited from

AnimatedSprite.texture

textures

Get Signature

> get textures(): AnimatedSpriteFrames

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:624

The array of textures or frame objects used for the animation sequence. Can be set to either an array of Textures or an array of FrameObjects with custom timing.

Example

// Update textures at runtime
sprite.textures = [
    Texture.from('run1.png'),
    Texture.from('run2.png')
];

// Use custom frame timing
sprite.textures = [
    { texture: Texture.from('explosion1.png'), time: 100 },
    { texture: Texture.from('explosion2.png'), time: 200 },
    { texture: Texture.from('explosion3.png'), time: 300 }
];

// Use with spritesheet
const sheet = await Assets.load('animations.json');
sprite.textures = sheet.animations['walk'];

See

FrameObject For frame timing options
Spritesheet For loading from spritesheets

Returns

AnimatedSpriteFrames

Set Signature

> set textures(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:625

Parameters

value

AnimatedSpriteFrames

Returns

void

tint

Get Signature

> get tint(): number

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

The tint applied to the sprite.

This can be any valid ColorSource.

Example

// Basic color tinting
container.tint = 0xff0000; // Red tint
container.tint = 'red';    // Same as above
container.tint = '#00ff00'; // Green
container.tint = 'rgb(0,0,255)'; // Blue

// Remove tint
container.tint = 0xffffff; // White = no tint
container.tint = null;     // Also removes tint

Default

0xFFFFFF

See

Container#alpha For transparency
Container#visible For visibility control

Returns

number

Set Signature

> set tint(value): void

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

Parameters

value

ColorSource

Returns

void

Inherited from

Sprite.tint

totalFrames

Get Signature

> get totalFrames(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:597

The total number of frames in the AnimatedSprite. This is the same as number of textures assigned to the AnimatedSprite.

Example

// Create an animated sprite
const sprite = new AnimatedSprite({
    textures: [
        Texture.from('frame1.png'),
        Texture.from('frame2.png'),
        Texture.from('frame3.png')
    ]
});

// Get total frames
console.log(sprite.totalFrames); // Outputs: 3

// Use with frame navigation
sprite.gotoAndStop(sprite.totalFrames - 1); // Go to last frame

See

AnimatedSprite#currentFrame For the current frame index
AnimatedSprite#textures For the array of textures

Returns

number

The total number of frames

visible

Get Signature

> get visible(): boolean

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

The visibility of the object. If false the object will not be drawn, and the transform will not be updated.

Example

// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite

Default

true

See

Container#renderable For render-only control
Container#alpha For transparency

Returns

boolean

Set Signature

> set visible(value): void

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

Parameters

value

boolean

Returns

void

Inherited from

Sprite.visible

visualBounds

Get Signature

> get visualBounds(): BoundsData

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:205

The bounds of the sprite, taking into account the texture's trim area.

Example

const texture = new Texture({
    source: new TextureSource({ width: 300, height: 300 }),
    frame: new Rectangle(196, 66, 58, 56),
    trim: new Rectangle(4, 4, 58, 56),
    orig: new Rectangle(0, 0, 64, 64),
    rotate: 2,
});
const sprite = new Sprite(texture);
const visualBounds = sprite.visualBounds;
// console.log(visualBounds); // { minX: -4, maxX: 62, minY: -4, maxY: 60 }

##### Returns

[`BoundsData`](/jsdoc/pixi-vn/pixi-js/interfaces/BoundsData)

#### Inherited from

[`Sprite`](/jsdoc/pixi-vn/pixi-js/classes/Sprite).[`visualBounds`](/jsdoc/pixi-vn/pixi-js/classes/Sprite#visualbounds)

***

### width

#### Get Signature

> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:278

The width of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example

```ts
// Set width directly
sprite.width = 200;
console.log(sprite.scale.x); // Scale adjusted to match width

// Set width while preserving aspect ratio
const ratio = sprite.height / sprite.width;
sprite.width = 300;
sprite.height = 300 * ratio;

// For better performance when setting both width and height
sprite.setSize(300, 400); // Avoids recalculating bounds twice

// Reset to original texture size
sprite.width = sprite.texture.orig.width;

Returns

number

Set Signature

set width(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:279

The width of the Container, setting this will actually modify the scale to achieve the value set.

[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio. [!NOTE] If you want to set both width and height at the same time, use Container#setSize as it is more optimized by not recalculating the local bounds twice.

Example

// Basic width setting
container.width = 100;
// Optimized width setting
container.setSize(100, 100);

Parameters

value

number

Returns

void

Inherited from

Sprite.width

worldTransform

Get Signature

get worldTransform(): Matrix

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

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

Example

// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);

See

Container#localTransform For local space transform

Returns

Sprite.worldTransform

Inherited from

x

Get Signature

get x(): number

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

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

Example

// Basic position
container.x = 100;

Returns

number

Set Signature

set x(value): void

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

Parameters

value

number

Returns

void

Inherited from

Sprite.x

y

Get Signature

get y(): number

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

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

Example

// Basic position
container.y = 200;

Returns

number

Set Signature

set y(value): void

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

Parameters

value

number

Returns

void

Inherited from

Sprite.y

Methods

_getGlobalBoundsRecursive()

_getGlobalBoundsRecursive(factorRenderLayers, bounds, currentLayer): void

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

Internal

Recursively calculates the global bounds for the container and its children. This method is used internally by getFastGlobalBounds to traverse the scene graph.

Parameters

factorRenderLayers

boolean

A flag indicating whether to consider render layers in the calculation.

bounds

The bounds object to update with the calculated values.

currentLayer

Sprite._getGlobalBoundsRecursive

The current render layer being processed.

Returns

void

Inherited from

_onTouch()?

optional _onTouch(now): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

Parameters

now

number

Returns

void

Inherited from

Sprite._onTouch

addChild()

addChild<U>(...children): U[0]

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

Adds one or more children to the container. The children will be rendered as part of this container's display list.

Type Parameters

U

U extends ContainerChild[]

Parameters

children

...U

The Container(s) to add to the container

Returns

U[0]

The first child that was added

Example

// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';

See

Container#removeChild For removing children
Container#addChildAt For adding at specific index

Inherited from

Sprite.addChild

addChildAt()

addChildAt<U>(child, index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown. If the child is already in this container, it will be moved to the specified index.

When moving a child within the same container, childAdded and added events are not emitted because the parent-child relationship hasn't changed. Events only fire when a child is added from a different parent (or from no parent).

Type Parameters

U

U extends ContainerChild

Parameters

child

U

The child to add

index

number

The index where the child will be placed

Returns

U

The child that was added

Example

// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#addChild For adding to the end
Container#setChildIndex For moving existing children

Inherited from

Sprite.addChildAt

addEventListener()

Call Signature

addEventListener<K>(type, listener, options?): void

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

Unlike on or addListener which are methods from EventEmitter, addEventListener seeks to be compatible with the DOM's addEventListener with support for options.

Type Parameters

K

K extends keyof FederatedEventMap | keyof GlobalFederatedEventMap

Parameters

type

K

The type of event to listen to.

listener

(e) => any

The listener callback or object.

options?

AddListenerOptions

Listener options, used for capture phase.

Returns

void

Example

// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});

Inherited from

Sprite.addEventListener

Call Signature

addEventListener(type, listener, options?): void

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

Parameters

type

string

listener

EventListenerOrEventListenerObject

options?

AddListenerOptions

Returns

void

Inherited from

Sprite.addEventListener

addListener()

addListener<T>(event, fn, context?): this

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

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

Sprite.addListener

collectRenderables()

collectRenderables(instructionSet, renderer, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

Internal

Collects all renderables from the container and its children, adding them to the instruction set. This method decides whether to use a simple or advanced collection method based on the container's properties.

Parameters

instructionSet

InstructionSet

The set of instructions to which the renderables will be added.

renderer

Renderer

The renderer responsible for rendering the scene.

currentLayer

Sprite.collectRenderables

The current render layer being processed.

Returns

void

Inherited from

collectRenderablesSimple()

collectRenderablesSimple(instructionSet, renderer, currentLayer): void

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

Internal

Collects renderables for the view container.

Parameters

instructionSet

InstructionSet

The instruction set to collect renderables for.

renderer

Renderer

The renderer to collect renderables for.

currentLayer

Sprite.collectRenderablesSimple

The current render layer.

Returns

void

Inherited from

collectRenderablesWithEffects()

collectRenderablesWithEffects(instructionSet, renderer, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

Internal

Collects renderables using an advanced method, suitable for containers with complex processing needs. This method handles additional effects and transformations that may be applied to the renderables.

Parameters

instructionSet

InstructionSet

The set of instructions to which the renderables will be added.

renderer

Renderer

The renderer responsible for rendering the scene.

currentLayer

Sprite.collectRenderablesWithEffects

The current render layer being processed.

Returns

void

Inherited from

containsPoint()

containsPoint(point): boolean

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

Checks if the object contains the given point in local coordinates. Uses the view's bounds for hit testing.

Parameters

point

Sprite.disableRenderGroup

The point to check in local coordinates

Returns

boolean

True if the point is within the view's bounds

Example

// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);

See

ViewContainer#bounds For the bounds used in hit testing
Container#toLocal For converting global coordinates to local

Inherited from

Sprite.containsPoint

destroy()

destroy(options?): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:529

Stops the AnimatedSprite and destroys it. This method stops the animation playback, removes it from the ticker, and cleans up any resources associated with the sprite.

Parameters

options?

DestroyOptions

Options for destroying the sprite, such as whether to remove from parent

Returns

void

Example

// Destroy the sprite when done
sprite.destroy();
// Or with options
sprite.destroy({ children: true, texture: true, textureSource: true });

Inherited from

Sprite.destroy

disableRenderGroup()

disableRenderGroup(): void

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

This will disable the render group for this container.

Returns

void

Advanced

Inherited from

dispatchEvent()

dispatchEvent(e): boolean

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

Dispatch the event on this Container using the event's EventBoundary.

The target of the event is set to this and the defaultPrevented flag is cleared before dispatch.

Parameters

e

FederatedEvent

The event to dispatch.

Returns

boolean

Whether the preventDefault() method was not invoked.

Example

// Reuse a click event!
button.dispatchEvent(clickEvent);

Inherited from

Sprite.dispatchEvent

emit()

emit<T>(event, ...args): boolean

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

Calls each of the listeners registered for a given event.

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

args

...ArgumentMap<ContainerEvents<ContainerChild> & AnyEvent>[Extract<T, keyof ContainerEvents<ContainerChild> | keyof AnyEvent>]

Returns

boolean

Inherited from

Sprite.emit

enableRenderGroup()

enableRenderGroup(): void

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

Calling this enables a render group for this container. This means it will be rendered as a separate set of instructions. The transform of the container will also be handled on the GPU rather than the CPU.

Returns

void

Advanced

Inherited from

Sprite.enableRenderGroup

eventNames()

eventNames(): (keyof ContainerEvents<ContainerChild> | keyof AnyEvent)[]

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

Return an array listing the events for which the emitter has registered listeners.

Returns

(keyof ContainerEvents<ContainerChild> | keyof AnyEvent)[]

Inherited from

Sprite.eventNames

getBounds()

getBounds(skipUpdate?, bounds?): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle. Takes into account transforms and child bounds.

Parameters

skipUpdate?

boolean

Setting to true will stop the transforms of the scene graph from being updated. This means the calculation returned MAY be out of date BUT will give you a nice performance boost.

bounds?

Optional bounds to store the result of the bounds calculation

Returns

Sprite.getChildByLabel

The minimum axis-aligned rectangle in world space that fits around this object

Example

// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);

Remarks

Includes transform calculations
Updates scene graph by default
Can reuse bounds objects
Common in hit testing

See

Container#getLocalBounds For untransformed bounds
Bounds For bounds properties

Inherited from

Sprite.getBounds

getChildAt()

getChildAt<U>(index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

Type Parameters

U

U extends ContainerChild

Parameters

index

number

The index to get the child from

Returns

U

The child at the given index

Example

// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#children For direct array access
Container#getChildByLabel For name-based lookup

Inherited from

Sprite.getChildAt

getChildByLabel()

getChildByLabel(label, deep?): Container<ContainerChild> | null

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

Returns the first child in the container with the specified label. Recursive searches are done in a pre-order traversal.

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

Returns

Container<ContainerChild> | null

The first child with the specified label, or null if none found

Example

// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);

See

Container#getChildrenByLabel For finding all matches
Container#label For setting labels

Inherited from

getChildByName()

getChildByName(label, deep?): Container<ContainerChild> | null

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

Parameters

label

string | RegExp

Instance name.

deep?

boolean

Whether to search recursively

Returns

Container<ContainerChild> | null

The child with the specified name.

Deprecated

since 8.0.0

See

Container#getChildByLabel

Inherited from

Sprite.getChildByName

getChildIndex()

getChildIndex(child): number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

Parameters

child

ContainerChild

The Container instance to identify

Returns

number

The index position of the child container

Example

// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}

Throws

If child is not in this container

See

Container#setChildIndex For changing index
Container#children For direct array access

Inherited from

Sprite.getChildIndex

getChildrenByLabel()

getChildrenByLabel(label, deep?, out?): Container<ContainerChild>[]

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

Returns all children in the container with the specified label. Recursive searches are done in a pre-order traversal.

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

out?

Container<ContainerChild>[]

Optional array to store matching children in

Returns

Container<ContainerChild>[]

An array of children with the specified label

Example

// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);

See

Container#getChildByLabel For finding first match
Container#label For setting labels

Inherited from

Sprite.getChildrenByLabel

getFastGlobalBounds()

getFastGlobalBounds(factorRenderLayers?, bounds?): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children. This method is optimized for speed by using axis-aligned bounding boxes (AABBs), and uses the last render results from when it updated the transforms. This function does not update them. which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use container.getGlobalBounds

Parameters

factorRenderLayers?

boolean

A flag indicating whether to consider render layers in the calculation.

bounds?

The output bounds object to store the result. If not provided, a new one is created.

Returns

Sprite.getFastGlobalBounds

The computed bounds.

Advanced

Inherited from

getGlobalAlpha()

getGlobalAlpha(skipUpdate?): number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

Parameters

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire alpha chain through parents for accuracy
If true: Uses cached worldAlpha from the last render pass for better performance

Returns

number

The resulting alpha value (between 0 and 1)

Example

// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);

Inherited from

Sprite.getGlobalAlpha

getGlobalPosition()

getGlobalPosition(point?, skipUpdate?): Point

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

Parameters

point?

Point

The optional point to write the global value to

skipUpdate?

boolean

Should we skip the update transform

Returns

Point

The updated point

Example

// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);

See

Container#toGlobal For converting specific points
Container#toLocal For converting to local space

Inherited from

Sprite.getGlobalPosition

getGlobalTint()

getGlobalTint(skipUpdate?): number

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

Returns the global (compound) tint color of the container within the scene.

Parameters

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire tint chain through parents for accuracy
If true: Uses cached worldColor from the last render pass for better performance

Returns

number

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

Example

// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);

Inherited from

Sprite.getGlobalTint

getGlobalTransform()

getGlobalTransform(matrix?, skipUpdate?): Matrix

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

Parameters

matrix?

Optional matrix to store the result. If not provided, a new Matrix will be created.

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire transform chain for accuracy
If true: Uses cached worldTransform from the last render pass for better performance

Returns

Sprite.getGlobalTransform

The resulting transformation matrix (either the input matrix or a new one)

Example

// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);

Inherited from

getLocalBounds()

getLocalBounds(): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object. Uses cached values when possible for better performance.

Returns

Sprite.getLocalBounds

The bounding area

Example

// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true

See

Container#getBounds For world space bounds
Bounds For bounds properties

Inherited from

getSize()

getSize(out?): Size

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:322

Retrieves the size of the Sprite as a [Size]Size object based on the texture dimensions and scale. This is faster than getting width and height separately as it only calculates the bounds once.

Parameters

out?

Size

Optional object to store the size in, to avoid allocating a new object

Returns

Size

The size of the Sprite

Example

// Basic size retrieval
const sprite = new Sprite(Texture.from('sprite.png'));
const size = sprite.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
sprite.getSize(reuseSize);

See

Sprite#width For getting just the width
Sprite#height For getting just the height
Sprite#setSize For setting both width and height

Inherited from

Sprite.getSize

gotoAndPlay()

gotoAndPlay(frameNumber): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:487

Goes to a specific frame and begins playing the AnimatedSprite from that point. Combines frame navigation and playback start in one operation.

Parameters

frameNumber

number

Frame index to start playing from (0-based)

Returns

void

Example

// Start from specific frame
sprite.gotoAndPlay(1); // Starts playing from second frame

Throws

If frameNumber is out of bounds

See

AnimatedSprite#gotoAndStop For going to a frame without playing
AnimatedSprite#play For playing from current frame
AnimatedSprite#currentFrame For getting/setting current frame

gotoAndStop()

gotoAndStop(frameNumber): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:472

Stops the AnimatedSprite and sets it to a specific frame.

Parameters

frameNumber

number

Frame index to stop at (0-based)

Returns

void

Example

// Create an animated sprite
const sprite = new AnimatedSprite({
    textures: [
        Texture.from('walk1.png'),
        Texture.from('walk2.png'),
        Texture.from('walk3.png'),
    ]
});

// Go to specific frames
sprite.gotoAndStop(0);  // First frame
sprite.gotoAndStop(2);  // Third frame

// Jump to last frame
sprite.gotoAndStop(sprite.totalFrames - 1);

Throws

If frameNumber is out of bounds

See

AnimatedSprite#gotoAndPlay For going to a frame and playing
AnimatedSprite#currentFrame For getting/setting current frame
AnimatedSprite#totalFrames For total number of frames

listenerCount()

listenerCount(event): number

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

Return the number of listeners listening to a given event.

Parameters

event

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Returns

number

Inherited from

Sprite.listenerCount

listeners()

listeners<T>(event): (...args) => void[]

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

Return the listeners registered for a given event.

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

Returns

(...args) => void[]

Inherited from

Sprite.listeners

off()

off<T>(event, fn?, context?, once?): this

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

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

Sprite.off

on()

on<T>(event, fn, context?): this

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

Add a listener for a given event.

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

Sprite.on

once()

once<T>(event, fn, context?): this

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

Add a one-time listener for a given event.

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

Sprite.once

play()

play(): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:445

Starts or resumes the animation playback. If the animation was previously stopped, it will continue from where it left off.

Returns

void

Example

// Basic playback
const sprite = new AnimatedSprite({
    textures: [
        Texture.from('walk1.png'),
        Texture.from('walk2.png'),
    ],
    autoPlay: false
});
sprite.play();

// Play after stopping
sprite.stop();
sprite.currentFrame = 0; // Reset to start
sprite.play(); // Play from beginning

// Play with auto-update disabled
sprite.autoUpdate = false;
sprite.play();
app.ticker.add(() =&gt; {
    sprite.update(app.ticker); // Manual updates
});

See

AnimatedSprite#stop For stopping playback
AnimatedSprite#gotoAndPlay For playing from a specific frame
AnimatedSprite#playing For checking play state

removeAllListeners()

removeAllListeners(event?): this

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

Remove all listeners, or those of the specified event.

Parameters

event?

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Returns

this

Inherited from

Sprite.removeAllListeners

removeChild()

removeChild<U>(...children): U[0]

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

Removes one or more children from the container. When removing multiple children, events will be triggered for each child in sequence.

Type Parameters

U

U extends ContainerChild[]

Parameters

children

...U

The Container(s) to remove

Returns

U[0]

The first child that was removed

Example

// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;

See

Container#addChild For adding children
Container#removeChildren For removing multiple children

Inherited from

Sprite.removeChild

removeChildAt()

removeChildAt<U>(index): U

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

Removes a child from the specified index position.

Type Parameters

U

U extends ContainerChild

Parameters

index

number

The index to remove the child from

Returns

U

The child that was removed

Example

// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#removeChild For removing specific children
Container#removeChildren For removing multiple children

Inherited from

Sprite.removeChildAt

removeChildren()

removeChildren(beginIndex?, endIndex?): ContainerChild[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

Parameters

beginIndex?

number

The beginning position

endIndex?

number

The ending position. Default is container size

Returns

ContainerChild[]

List of removed children

Example

// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);

Throws

If begin/end indexes are invalid

See

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

Inherited from

Sprite.removeChildren

removeEventListener()

Call Signature

removeEventListener<K>(type, listener, options?): void

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

Unlike off or removeListener which are methods from EventEmitter, removeEventListener seeks to be compatible with the DOM's removeEventListener with support for options.

Type Parameters

K

K extends keyof FederatedEventMap | keyof GlobalFederatedEventMap

Parameters

type

K

The type of event the listener is bound to.

listener

(e) => any

The listener callback or object.

options?

RemoveListenerOptions

The original listener options. This is required to deregister a capture phase listener.

Returns

void

Inherited from

Sprite.removeEventListener

Call Signature

removeEventListener(type, listener, options?): void

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

Parameters

type

string

listener

EventListenerOrEventListenerObject

options?

RemoveListenerOptions

Returns

void

Inherited from

Sprite.removeEventListener

removeFromParent()

removeFromParent(): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

Returns

void

Example

// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}

See

Container#addChild For adding to a new parent
Container#removeChild For parent removing children

Inherited from

Sprite.removeFromParent

removeListener()

removeListener<T>(event, fn?, context?, once?): this

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

Remove the listeners of a given event.

Type Parameters

T

T extends keyof ContainerEvents<ContainerChild> | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

Sprite.removeListener

reparentChild()

reparentChild<U>(...child): U[0]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform. This ensures that the visual position and rotation of the children remain the same even when changing parents.

Type Parameters

U

U extends ContainerChild[]

Parameters

child

...U

The child or children to reparent

Returns

U[0]

The first child that was reparented

Example

// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);

See

Container#reparentChildAt For index-specific reparenting
Container#addChild For simple parenting

Inherited from

Sprite.reparentChild

reparentChildAt()

reparentChildAt<U>(child, index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform. This ensures that the visual position and rotation of the child remain the same even when changing parents.

Type Parameters

U

U extends ContainerChild

Parameters

child

U

The child to reparent

index

number

The index to reparent the child to

Returns

U

The reparented child

Example

// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);

Throws

If index is out of bounds

See

Container#reparentChild For appending reparented children
Container#addChildAt For simple indexed parenting

Inherited from

Sprite.reparentChildAt

replaceChild()

replaceChild<U, T>(oldChild, newChild): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

Type Parameters

U

U extends ContainerChild

T

T extends ContainerChild

Parameters

oldChild

U

The child to replace.

newChild

T

The new child to add.

Returns

void

Inherited from

Sprite.replaceChild

setChildIndex()

setChildIndex(child, index): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

Parameters

child

ContainerChild

The child Container instance to reposition

index

number

The resulting index number for the child

Returns

void

Example

// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}

Throws

If index is out of bounds

Throws

If child is not in container

See

Container#getChildIndex For getting current index
Container#swapChildren For swapping positions

Inherited from

Sprite.setChildIndex

setFromMatrix()

setFromMatrix(matrix): void

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

Updates the local transform properties by decomposing the given matrix. Extracts position, scale, rotation, and skew from a transformation matrix.

Parameters

matrix

The matrix to use for updating the transform

Returns

void

Example

// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);

See

Container#updateTransform For property-based updates
Matrix#decompose For matrix decomposition details

Inherited from

Sprite.setFromMatrix

setMask()

setMask(options): void

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

Used to set mask and control mask options on a display object. Allows for more detailed control over masking behavior compared to the mask property.

Parameters

options

Partial<MaskOptionsAndMask>

Configuration options for the mask

Returns

void

Example

import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });

See

Container#mask For simple masking
MaskOptionsAndMask For full options API
MaskOptions#channel For channel selection

Inherited from

Sprite.setMask

setSize()

setSize(value, height?): void

Defined in: node_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:353

Sets the size of the Sprite to the specified width and height. This is faster than setting width and height separately as it only recalculates bounds once.

Parameters

value

number | Optional<Size, "height">

This can be either a number or a Size object

height?

number

The height to set. Defaults to the value of width if not provided

Returns

void

Example

// Basic size setting
const sprite = new Sprite(Texture.from('sprite.png'));
sprite.setSize(100, 200); // Width: 100, Height: 200

// Set uniform size
sprite.setSize(100); // Sets both width and height to 100

// Set size with object
sprite.setSize({
    width: 200,
    height: 300
});

// Reset to texture size
sprite.setSize(
    sprite.texture.orig.width,
    sprite.texture.orig.height
);

See

Sprite#width For setting width only
Sprite#height For setting height only
Sprite#texture For the source dimensions

Inherited from

Sprite.setSize

stop()

stop(): void

Defined in: node_modules/pixi.js/lib/scene/sprite-animated/AnimatedSprite.d.ts:413

Stops the animation playback and freezes the current frame. Does not reset the current frame or animation progress.

Returns

void

Example

// Create an animated sprite
const sprite = new AnimatedSprite({
    textures: [
        Texture.from('walk1.png'),
        Texture.from('walk2.png'),
        Texture.from('walk3.png')
    ],
    autoPlay: true
});

// Stop at current frame
sprite.stop();

// Stop at specific frame
sprite.gotoAndStop(1); // Stops at second frame

// Stop and reset
sprite.stop();
sprite.currentFrame = 0;

// Stop with completion check
if (sprite.playing) {
    sprite.stop();
    sprite.onComplete?.();
}

See

AnimatedSprite#play For starting playback
AnimatedSprite#gotoAndStop For stopping at a specific frame
AnimatedSprite#playing For checking play state

swapChildren()

swapChildren<U>(child, child2): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

Type Parameters

U

U extends ContainerChild

Parameters

child

U

First container to swap

child2

U

Second container to swap

Returns

void

Example

// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}

Remarks

Updates render groups
No effect if same child
Triggers container changes
Common in z-ordering

Throws

If either child is not in container

See

Container#setChildIndex For direct index placement
Container#getChildIndex For getting current positions

Inherited from

Sprite.swapChildren

toGlobal()

toGlobal<P>(position, point?, skipUpdate?): P

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container. Takes into account the container hierarchy and transforms.

Type Parameters

P

P extends PointData = Point

Parameters

position

The local point to convert

point?

P

Optional point to store the result

skipUpdate?

boolean

Whether to skip transform updates

Returns

P

The global position

Example

// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);

See

Container#toLocal For reverse conversion
Container#getGlobalPosition For container position

Inherited from

Sprite.toGlobal

toLocal()

toLocal<P>(position, from?, point?, skipUpdate?): P

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point. Converts coordinates from any coordinate space to this container's local coordinate space.

Type Parameters

P

P extends PointData = Point

Parameters

position