LogoPixi’VN
pixi-jsClasses

Class: NineSliceSprite

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:160

The NineSliceSprite allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically

Example

import { NineSliceSprite, Texture } from 'pixi.js';

const plane9 = new NineSliceSprite({
  texture: Texture.from('BoxWithRoundedCorners.png'),
  leftWidth: 15,
  topHeight: 15,
  rightWidth: 15,
  bottomHeight: 15,
  width: 200,
  height: 100,
});

Standard

Extends

Extended by

Implements

Constructors

Constructor

> new NineSliceSprite(options): NineSliceSprite

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:234

Parameters

options

Texture<TextureSource<any>> | NineSliceSpriteOptions

Returns

NineSliceSprite

Inherited from

ViewContainer.constructor

Properties

__devtoolIgnore?

> optional __devtoolIgnore?: boolean

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

Inherited from

ViewContainer.__devtoolIgnore


__devtoolIgnoreChildren?

> optional __devtoolIgnoreChildren?: string

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

Inherited from

ViewContainer.__devtoolIgnoreChildren


__devtoolLocked?

> optional __devtoolLocked?: boolean

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

Inherited from

ViewContainer.__devtoolLocked


_anchor

> _anchor: ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:225

Internal


_bounds

> protected _bounds: Bounds

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

Inherited from

ViewContainer._bounds


_boundsDirty

> protected _boundsDirty: boolean

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

Inherited from

ViewContainer._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

ViewContainer._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

ViewContainer._cy


_gcData?

> optional _gcData?: GCData

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

Internal

Inherited from

ViewContainer._gcData


_gcLastUsed

> _gcLastUsed: number

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

Internal

Inherited from

ViewContainer._gcLastUsed


_gpuData

> _gpuData: Record<number, GPU_DATA>

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

Internal

Inherited from

ViewContainer._gpuData


_lastUsed

> _lastUsed: number

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

Internal

Inherited from

ViewContainer._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

ViewContainer._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

ViewContainer._position


_roundPixels

> _roundPixels: 0 | 1

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

Internal

Implementation of

View._roundPixels

Inherited from

ViewContainer._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

ViewContainer._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

ViewContainer._skew


_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

ViewContainer._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

ViewContainer._sy


_texture

> _texture: Texture

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:223

Internal


_zIndex

> _zIndex: number

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

Internal

Inherited from

ViewContainer._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

AccessibleOptions.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

AccessibleOptions.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

AccessibleOptions.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

AccessibleOptions.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

AccessibleOptions.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

AccessibleOptions.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

AccessibleOptions.accessibleType


allowChildren

> allowChildren: boolean

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

Internal

Inherited from

ViewContainer.allowChildren


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

ViewContainer.autoGarbageCollect


batched

> batched: boolean

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:227

Internal

Implementation of

View.batched

Inherited from

ViewContainer.batched


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

ViewContainer.boundsArea


~~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

ViewContainer.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

Inherited from

ViewContainer.cacheAsTexture


canBundle

> readonly canBundle: true = true

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

Internal

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

CullingMixinConstructor.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

CullingMixinConstructor.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

CullingMixinConstructor.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

Inherited from

ViewContainer.cursor


depthOfChildModified

> depthOfChildModified: () => void

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

Internal

Returns

void

Inherited from

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.filterArea


globalDisplayStatus

> globalDisplayStatus: number

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

Internal

Inherited from

ViewContainer.globalDisplayStatus


groupAlpha

> groupAlpha: number

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

Internal

Inherited from

ViewContainer.groupAlpha


groupBlendMode

> groupBlendMode: BLEND_MODES

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

Internal

Inherited from

ViewContainer.groupBlendMode


groupColor

> groupColor: number

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

Internal

Inherited from

ViewContainer.groupColor


groupColorAlpha

> groupColorAlpha: number

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

Internal

Inherited from

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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

VideoSpriteMemory.label


layerParentId

> layerParentId: string

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

Internal

Inherited from

ViewContainer.layerParentId


localAlpha

> localAlpha: number

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

Internal

Inherited from

ViewContainer.localAlpha


localBlendMode

> localBlendMode: BLEND_MODES

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

Internal

Inherited from

ViewContainer.localBlendMode


localColor

> localColor: number

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

Internal

Inherited from

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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

ViewContainer.onclick


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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

The renderer instance

See

Renderer For renderer capabilities

Inherited from

OnRenderMixinConstructor.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.parentRenderLayer


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

ViewContainer.relativeGroupTransform


renderPipeId

> readonly renderPipeId: string

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:221

Internal

Implementation of

View.renderPipeId

Inherited from

ViewContainer.renderPipeId


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

VideoSpriteMemory.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

Inherited from

ViewContainer.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

VideoSpriteMemory.sortDirty


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

AccessibleOptions.tabIndex


uid

> readonly uid: number

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

Internal

unique id for this container

Implementation of

View.uid

Inherited from

ViewContainer.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

ViewContainer.updateCacheTexture


updateTick

> updateTick: number

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

Internal

Inherited from

ViewContainer.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

Default

0

Inherited from

VideoSpriteMemory.zIndex


defaultOptions

> static defaultOptions: NineSliceSpriteOptions

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:219

The default options used to override initial values of any options passed in the constructor. These values are used as fallbacks when specific options are not provided.

Example

// Override default options globally
NineSliceSprite.defaultOptions.texture = Texture.from('defaultButton.png');
// Create sprite with default texture
const sprite = new NineSliceSprite({...});
// sprite will use 'defaultButton.png' as its texture

// Reset to empty texture
NineSliceSprite.defaultOptions.texture = Texture.EMPTY;

See


prefixed

> static prefixed: string | boolean

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

Inherited from

ViewContainer.prefixed

Accessors

alpha

Get Signature

> get alpha(): number

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

The opacity of the object relative to its parent's opacity. Value ranges from 0 (fully transparent) to 1 (fully opaque).

Example
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
Default
1
See
Returns

number

Set Signature

> set alpha(value): void

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

Parameters
value

number

Returns

void

Inherited from

ViewContainer.alpha


anchor

Get Signature

> get anchor(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:268

The anchor sets the origin point of the sprite. The default value is taken from the Texture and passed to the constructor.

  • The default is (0,0), this means the sprite's origin is the top left.
  • Setting the anchor to (0.5,0.5) means the sprite's origin is centered.
  • Setting the anchor to (1,1) would mean the sprite's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

Example
// Center the anchor point
sprite.anchor = 0.5; // Sets both x and y to 0.5
sprite.position.set(400, 300); // Sprite will be centered at this position

// Set specific x/y anchor points
sprite.anchor = {
    x: 1, // Right edge
    y: 0  // Top edge
};

// Using individual coordinates
sprite.anchor.set(0.5, 1); // Center-bottom

// For rotation around center
sprite.anchor.set(0.5);
sprite.rotation = Math.PI / 4; // 45 degrees around center

// For scaling from center
sprite.anchor.set(0.5);
sprite.scale.set(2); // Scales from center point
Returns

ObservablePoint

Set Signature

> set anchor(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:269

Parameters
value

number | PointData

Returns

void


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

ViewContainer.angle


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
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

ViewContainer.blendMode


bottomHeight

Get Signature

> get bottomHeight(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:407

Height of the bottom horizontal bar (D). Controls the size of the bottom edge that remains unscaled

Example
const sprite = new NineSliceSprite({ ..., bottomHeight: 20 });
sprite.bottomHeight = 20; // Set bottom border height
Default
10
Returns

number

Set Signature

> set bottomHeight(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:408

Parameters
value

number

Returns

void


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

Bounds

The rectangular bounds of the view

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

Implementation of

View.bounds

Inherited from

ViewContainer.bounds


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

ViewContainer.filters


height

Get Signature

> get height(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:314

The height of the NineSliceSprite, setting this will actually modify the vertices and UV's of this plane. The height affects how the middle sections are scaled.

Example
// Create a nine-slice sprite with fixed height
const panel = new NineSliceSprite({
    texture: Texture.from('panel.png'),
    height: 150  // Sets initial height
});

// Adjust height dynamically
panel.height = 200;  // Stretches middle sections

// Create responsive UI element
const dialog = new NineSliceSprite({
    texture: Texture.from('dialog.png'),
    topHeight: 30,
    bottomHeight: 30,
    height: parent.height * 0.5  // 50% of parent height
});
See
Returns

number

Set Signature

> set height(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:315

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

ViewContainer.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

ViewContainer.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

ViewContainer.isRenderGroup


leftWidth

Get Signature

> get leftWidth(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:371

Width of the left vertical bar (A). Controls the size of the left edge that remains unscaled

Example
const sprite = new NineSliceSprite({ ..., leftWidth: 20 });
sprite.leftWidth = 20; // Set left border width
Default
10
Returns

number

Set Signature

> set leftWidth(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:372

Parameters
value

number

Returns

void


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

ObservablePoint

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

ViewContainer.origin


originalHeight

Get Signature

> get originalHeight(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:462

The original height of the texture before any nine-slice scaling. This is the height of the source texture used to create the nine-slice sprite.

Example
// Get original dimensions
console.log(`Original size: ${sprite.originalWidth}x${sprite.originalHeight}`);

// Use for relative scaling
sprite.height = sprite.originalHeight * 2; // Double the original height

// Reset to original size
sprite.setSize(sprite.originalWidth, sprite.originalHeight);
See
Returns

number

The original height of the texture


originalWidth

Get Signature

> get originalWidth(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:442

The original width of the texture before any nine-slice scaling. This is the width of the source texture used to create the nine-slice sprite.

Example
// Get original dimensions
console.log(`Original size: ${sprite.originalWidth}x${sprite.originalHeight}`);

// Use for relative scaling
sprite.width = sprite.originalWidth * 2; // Double the original width

// Reset to original size
sprite.setSize(sprite.originalWidth, sprite.originalHeight);
See
Returns

number

The original width of the texture


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

ObservablePoint

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

ViewContainer.pivot


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

ObservablePoint

Set Signature

> set position(value): void

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

Parameters
value

PointData

Returns

void

Inherited from

ViewContainer.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
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

ViewContainer.renderable


rightWidth

Get Signature

> get rightWidth(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:395

Width of the right vertical bar (B). Controls the size of the right edge that remains unscaled

Example
const sprite = new NineSliceSprite({ ..., rightWidth: 20 });
sprite.rightWidth = 20; // Set right border width
Default
10
Returns

number

Set Signature

> set rightWidth(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:396

Parameters
value

number

Returns

void


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

ViewContainer.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

Implementation of

View.roundPixels

Inherited from

ViewContainer.roundPixels


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

ObservablePoint

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

ViewContainer.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

ObservablePoint

Set Signature

> set skew(value): void

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

Parameters
value

PointData

Returns

void

Inherited from

ViewContainer.skew


texture

Get Signature

> get texture(): Texture

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:421

The texture to use on the NineSliceSprite.

// Create a sprite with a texture
const sprite = new NineSliceSprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
Default
Texture.EMPTY
Returns

Texture

Set Signature

> set texture(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:422

Parameters
value

Texture

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
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

ViewContainer.tint


topHeight

Get Signature

> get topHeight(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:383

Height of the top horizontal bar (C). Controls the size of the top edge that remains unscaled

Example
const sprite = new NineSliceSprite({ ..., topHeight: 20 });
sprite.topHeight = 20; // Set top border height
Default
10
Returns

number

Set Signature

> set topHeight(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:384

Parameters
value

number

Returns

void


trim

Get Signature

> get trim(): Rectangle

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:471

Internal

The trim rectangle of the underlying texture, or null if the texture is not trimmed. This is forwarded to the NineSliceGeometry so that UV coordinates are clamped to the visible pixel region, preventing transparent atlas padding from bleeding into the rendered sprite corners.

Returns

Rectangle


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
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

ViewContainer.visible


width

Get Signature

> get width(): number

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:287

The width of the NineSliceSprite, setting this will actually modify the vertices and UV's of this plane. The width affects how the middle sections are scaled.

Example
// Create a nine-slice sprite with fixed width
const panel = new NineSliceSprite({
    texture: Texture.from('panel.png'),
    width: 200  // Sets initial width
});

// Adjust width dynamically
panel.width = 300;  // Stretches middle sections
See
Returns

number

Set Signature

> set width(value): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:288

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

ViewContainer.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

Matrix

Inherited from

ViewContainer.worldTransform


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

ViewContainer.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

ViewContainer.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

Bounds

The bounds object to update with the calculated values.

currentLayer

RenderLayer

The current render layer being processed.

Returns

void

Inherited from

ViewContainer._getGlobalBoundsRecursive


_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

ViewContainer._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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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

ViewContainer.addEventListener


addListener()

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

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

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.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

RenderLayer

The current render layer being processed.

Returns

void

Inherited from

ViewContainer.collectRenderables


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

RenderLayer

The current render layer.

Returns

void

Inherited from

ViewContainer.collectRenderablesSimple


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

RenderLayer

The current render layer being processed.

Returns

void

Inherited from

ViewContainer.collectRenderablesWithEffects


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

PointData

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

Inherited from

ViewContainer.containsPoint


destroy()

> destroy(options?): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:481

Destroys this sprite renderable and optionally its texture.

Parameters

options?

DestroyOptions

Options parameter. A boolean will act as if all options have been set to that value

Returns

void

Example

nineSliceSprite.destroy();
nineSliceSprite.destroy(true);
nineSliceSprite.destroy({ texture: true, textureSource: true });

Inherited from

ViewContainer.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

ViewContainer.disableRenderGroup


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

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

args

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

Returns

boolean

Inherited from

ViewContainer.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

ViewContainer.enableRenderGroup


eventNames()

> eventNames(): (keyof ContainerEvents | 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 | keyof AnyEvent)[]

Inherited from

ViewContainer.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?

Bounds

Optional bounds to store the result of the bounds calculation

Returns

Bounds

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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.getChildByLabel


~~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

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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?

Bounds

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

Returns

Bounds

The computed bounds.

Advanced

Inherited from

ViewContainer.getFastGlobalBounds


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

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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?

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

Matrix

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

ViewContainer.getGlobalTransform


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

Bounds

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

Inherited from

ViewContainer.getLocalBounds


getSize()

> getSize(out?): Size

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:360

Retrieves the size of the NineSliceSprite as a [Size]Size object. This method is more efficient than getting width and height separately.

Parameters

out?

Size

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

Returns

Size

The size of the NineSliceSprite

Example

// Get basic size
const size = panel.getSize();
console.log(`Size: ${size.width}x${size.height}`);

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

See

Inherited from

ViewContainer.getSize


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 | keyof AnyEvent

Returns

number

Inherited from

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

Returns

(...args) => void[]

Inherited from

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.once


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 | keyof AnyEvent

Returns

this

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.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 | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.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

ViewContainer.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

Inherited from

ViewContainer.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

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

Inherited from

ViewContainer.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

Inherited from

ViewContainer.setMask


setSize()

> setSize(value, height?): void

Defined in: node_modules/pixi.js/lib/scene/sprite-nine-slice/NineSliceSprite.d.ts:340

Sets the size of the NineSliceSprite to the specified width and height. This method directly modifies the vertices and UV coordinates of the sprite.

Using this is more efficient than setting width and height separately as it only triggers one update.

Parameters

value

number | Optional<Size, "height">

This can be either a number or a Size object with width/height properties

height?

number

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

Returns

void

Example

// Set to specific dimensions
panel.setSize(300, 200); // Width: 300, Height: 200

// Set uniform size
panel.setSize(200); // Makes a square 200x200

// Set size using object
panel.setSize({
    width: 400,
    height: 300
});

See

Inherited from

ViewContainer.setSize


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

Inherited from

ViewContainer.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

PointData

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

Inherited from

ViewContainer.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

PointData

The world origin to calculate from

from?

Container<ContainerChild>

The Container to calculate the global position from

point?

P

A Point object in which to store the value

skipUpdate?

boolean

Should we skip the update transform

Returns

P

A point object representing the position in local space

Example

// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);

See

Inherited from

ViewContainer.toLocal


unload()

> unload(): void

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

Unloads the GPU data from the view.

Returns

void

Inherited from

ViewContainer.unload


updateLocalTransform()

> updateLocalTransform(): void

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

Updates the local transform.

Returns

void

Inherited from

ViewContainer.updateLocalTransform


updateTransform()

> updateTransform(opts): this

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

Updates the transform properties of the container. Allows partial updates of transform properties for optimized manipulation.

Parameters

opts

Partial<UpdateTransformOptions>

Transform options to update

Returns

this

This container, for chaining

Example

// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});

See

Inherited from

ViewContainer.updateTransform


~~mixin()~~

> static mixin(source): void

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

Mixes all enumerable properties and methods from a source object to Container.

Parameters

source

Dict<any>

The source of properties and methods to mix in.

Returns

void

Deprecated

since 8.8.0

Inherited from

ViewContainer.mixin