Class: RenderLayer

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

Container.origin

pivot

Get Signature

> get pivot(): ObservablePoint

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

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

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

Example

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

Since

4.0.0

Returns

Set Signature

> set pivot(value): void

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

Parameters

value

number | PointData

Returns

void

Inherited from

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

Set Signature

> set position(value): void

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

Parameters

value

Returns

void

Inherited from

Container.position

renderable

Get Signature

> get renderable(): boolean

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

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

Example

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

Default

true

See

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

Returns

boolean

Set Signature

> set renderable(value): void

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

Parameters

value

boolean

Returns

void

Inherited from

Container.renderable

rotation

Get Signature

> get rotation(): number

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

The rotation of the object in radians.

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

Example

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

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

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

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

Returns

number

Set Signature

> set rotation(value): void

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

Parameters

value

number

Returns

void

Inherited from

Container.rotation

scale

Get Signature

> get scale(): ObservablePoint

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

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

The default scale is (1, 1).

Example

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

Since

4.0.0

Returns

Set Signature

> set scale(value): void

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

Parameters

value

string | number | PointData

Returns

void

Inherited from

Container.scale

skew

Get Signature

> get skew(): ObservablePoint

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

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

Example

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

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

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

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

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

Since

4.0.0

Default

{x: 0, y: 0}

Returns

Set Signature

> set skew(value): void

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

Parameters

value

Returns

void

Inherited from

Container.skew

tint

Get Signature

> get tint(): number

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

The tint applied to the sprite.

This can be any valid ColorSource.

Example

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

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

Default

0xFFFFFF

See

Container#alpha For transparency
Container#visible For visibility control

Returns

number

Set Signature

> set tint(value): void

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

Parameters

value

ColorSource

Returns

void

Inherited from

Container.tint

visible

Get Signature

> get visible(): boolean

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

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

Example

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

Default

true

See

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

Returns

boolean

Set Signature

> set visible(value): void

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

Parameters

value

boolean

Returns

void

Inherited from

Container.visible

width

Get Signature

> get width(): number

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

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

Returns

number

Set Signature

> set width(value): void

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

Parameters

value

number

Returns

void

Inherited from

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

Container.worldTransform

Inherited from

x

Get Signature

> get x(): number

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

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

An alias to position.x

Example

// Basic position
container.x = 100;

Returns

number

Set Signature

> set x(value): void

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

Parameters

value

number

Returns

void

Inherited from

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

Container.y

Methods

_getGlobalBoundsRecursive()

> _getGlobalBoundsRecursive(factorRenderLayers, bounds, _currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:397

Internal

Recursively calculates the global bounds of this RenderLayer and its children.

Parameters

factorRenderLayers

boolean

bounds

Container._getGlobalBoundsRecursive

_currentLayer

RenderLayer

Returns

void

Overrides

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

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

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

Container.addListener

attach()

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

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:283

Adds one or more Containers to this render layer. The Containers will be rendered as part of this layer while maintaining their original parent in the scene graph.

If the Container already belongs to a layer, it will be removed from the old layer before being added to this one.

Type Parameters

U

U extends Container<ContainerChild>[]

Parameters

children

...U

The Container(s) to add to this layer. Can be any Container or array of Containers.

Returns

U[0]

The first child that was added, for method chaining

Example

const layer = new RenderLayer();
const container = new Container();
const sprite1 = new Sprite(texture1);
const sprite2 = new Sprite(texture2);

// Add sprites to scene graph for transforms
container.addChild(sprite1, sprite2);

// Add sprites to layer for render order control
layer.attach(sprite1, sprite2);

// Add single sprite with type checking
const typedSprite = layer.attach<Sprite>(new Sprite(texture3));
typedSprite.tint = 'red';

// Automatically removes from previous layer if needed
const otherLayer = new RenderLayer();
otherLayer.attach(sprite1); // Removes from previous layer

See

RenderLayer#detach For removing objects from the layer
RenderLayer#detachAll For removing all objects from the layer
Container#addChild For adding to scene graph hierarchy

collectRenderables()

> collectRenderables(instructionSet, renderer, _currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:355

Internal

Collects renderables for this layer and its children. This method is called by the renderer to gather all objects that should be rendered in this layer.

Parameters

instructionSet

InstructionSet

The set of instructions to collect renderables into.

renderer

Renderer

The renderer that is collecting renderables.

_currentLayer

RenderLayer

The current render layer being processed.

Returns

void

Overrides

Container.collectRenderables

collectRenderablesSimple()

> collectRenderablesSimple(instructionSet, renderer, currentLayer): void

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

Internal

Collects renderables using a simple method, suitable for containers marked as simple. This method iterates over the container's children and adds their renderables to the instruction set.

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

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

Container.collectRenderablesWithEffects

destroy()

> destroy(options?): void

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

Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

Parameters

options?

DestroyOptions

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

Returns

void

Example

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

Inherited from

Container.destroy

detach()

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

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:317

Removes one or more Containers from this render layer. The Containers will maintain their original parent in the scene graph but will no longer be rendered as part of this layer.

Type Parameters

U

U extends Container<ContainerChild>[]

Parameters

children

...U

The Container(s) to remove from this layer

Returns

U[0]

The first child that was removed, for method chaining

Example

const layer = new RenderLayer();
const container = new Container();
const sprite1 = new Sprite(texture1);
const sprite2 = new Sprite(texture2);

// Add sprites to scene graph and layer
container.addChild(sprite1, sprite2);
layer.attach(sprite1, sprite2);

// Remove single sprite from layer
layer.detach(sprite1);
// sprite1 is still child of container but not rendered in layer

// Remove multiple sprites at once
const otherLayer = new RenderLayer();
otherLayer.attach(sprite3, sprite4);
otherLayer.detach(sprite3, sprite4);

// Type-safe detachment
const typedSprite = layer.detach<Sprite>(spriteInLayer);
typedSprite.texture = newTexture; // TypeScript knows this is a Sprite

See

RenderLayer#attach For adding objects to the layer
RenderLayer#detachAll For removing all objects from the layer
Container#removeChild For removing from scene graph hierarchy

detachAll()

> detachAll(): void

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:346

Removes all objects from this render layer. Objects will maintain their original parent in the scene graph but will no longer be rendered as part of this layer.

Returns

void

The RenderLayer instance for method chaining

Example

const layer = new RenderLayer();
const container = new Container();

// Add multiple sprites to scene graph and layer
const sprites = [
    new Sprite(texture1),
    new Sprite(texture2),
    new Sprite(texture3)
];

container.addChild(...sprites);  // Add to scene graph
layer.attach(...sprites);       // Add to render layer

// Later, remove all sprites from layer at once
layer.detachAll();
console.log(layer.renderLayerChildren.length); // 0
console.log(container.children.length);        // 3 (still in scene graph)

See

RenderLayer#attach For adding objects to the layer
RenderLayer#detach For removing individual objects
Container#removeChildren For removing from scene graph

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

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

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

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

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

Container.eventNames

getBounds()

> getBounds(skipUpdate?, bounds?): Bounds

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

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

Parameters

skipUpdate?

boolean

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

bounds?

Optional bounds to store the result of the bounds calculation

Returns

Container.getChildByLabel

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

Example

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

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

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

Remarks

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

See

Container#getLocalBounds For untransformed bounds
Bounds For bounds properties

Inherited from

Container.getBounds

getChildByLabel()

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

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

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

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

Returns

Container<ContainerChild> | null

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

Example

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

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

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

See

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

Inherited from

getChildByName()

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

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

Parameters

label

string | RegExp

Instance name.

deep?

boolean

Whether to search recursively

Returns

Container<ContainerChild> | null

The child with the specified name.

Deprecated

since 8.0.0

See

Container#getChildByLabel

Inherited from

Container.getChildByName

getChildrenByLabel()

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

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

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

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

out?

Container<ContainerChild>[]

Optional array to store matching children in

Returns

Container<ContainerChild>[]

An array of children with the specified label

Example

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

See

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

Inherited from

Container.getChildrenByLabel

getFastGlobalBounds()

> getFastGlobalBounds(factorRenderLayers?, bounds?): Bounds

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:402

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

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

Parameters

factorRenderLayers?

boolean

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

bounds?

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

Returns

Container.getFastGlobalBounds

The computed bounds.

Advanced

Overrides

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

Container.getGlobalAlpha

getGlobalPosition()

> getGlobalPosition(point?, skipUpdate?): Point

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

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

Parameters

point?

Point

The optional point to write the global value to

skipUpdate?

boolean

Should we skip the update transform

Returns

Point

The updated point

Example

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

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

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

See

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

Inherited from

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

Container.getGlobalTint

getGlobalTransform()

> getGlobalTransform(matrix?, skipUpdate?): Matrix

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

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

Parameters

matrix?

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

skipUpdate?

boolean

Performance optimization flag:

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

Returns

Container.getGlobalTransform

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

Example

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

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

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

Inherited from

getLocalBounds()

> getLocalBounds(): Bounds

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

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

Returns

Container.getLocalBounds

The bounding area

Example

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

See

Container#getBounds For world space bounds
Bounds For bounds properties

Inherited from

getSize()

> getSize(out?): Size

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

Retrieves the size of the container as a [Size]Size object.

This is faster than get the width and height separately.

Parameters

out?

Size

Optional object to store the size in.

Returns

Size

The size of the container.

Example

// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

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

Inherited from

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

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

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

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

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

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

Container.removeAllListeners

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

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

Container.removeEventListener

removeFromParent()

> removeFromParent(): void

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

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

Returns

void

Example

// Basic removal
sprite.removeFromParent();

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

See

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

Inherited from

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

Container.removeListener

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

Container.replaceChild

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

Container.setFromMatrix

The matrix to use for updating the transform

Returns

void

Example

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

container.setFromMatrix(matrix);

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

target.setFromMatrix(source.localTransform);

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

See

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

Inherited from

setMask()

> setMask(options): void

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

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

Parameters

options

Partial<MaskOptionsAndMask>

Configuration options for the mask

Returns

void

Example

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

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

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

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

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

See

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

Inherited from

Container.setMask

setSize()

> setSize(value, height?): void

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

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

Parameters

value

number | Optional<Size, "height">

This can be either a number or a [Size]Size object.

height?

number

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

Returns

void

Example

// Basic size setting
container.setSize(100, 200);

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

Inherited from

Container.setSize

sortRenderLayerChildren()

> sortRenderLayerChildren(): void

Defined in: node_modules/pixi.js/lib/scene/layers/RenderLayer.d.ts:389

Sort the layer's children using the defined sort function. This method allows manual sorting of layer children and is automatically called during rendering if sortableChildren is true.

Returns

void

The RenderLayer instance for method chaining

Example

const layer = new RenderLayer();

// Add multiple sprites at different depths
const sprite1 = new Sprite(texture);
const sprite2 = new Sprite(texture);
const sprite3 = new Sprite(texture);

sprite1.zIndex = 3;
sprite2.zIndex = 1;
sprite3.zIndex = 2;

layer.attach(sprite1, sprite2, sprite3);

// Manual sorting with default zIndex sort
layer.sortRenderLayerChildren();
// Order is now: sprite2 (1), sprite3 (2), sprite1 (3)

// Custom sort by y position
layer.sortFunction = (a, b) => a.y - b.y;
layer.sortRenderLayerChildren();

// Automatic sorting
layer.sortableChildren = true; // Will sort each render

See

RenderLayer#sortableChildren For enabling automatic sorting
RenderLayer#sortFunction For customizing the sort logic

toGlobal()

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

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

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

Type Parameters

P

P extends PointData = Point

Parameters

position

The local point to convert

point?

P

Optional point to store the result

skipUpdate?

boolean

Whether to skip transform updates

Returns

P

The global position

Example

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

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

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

See

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

Inherited from

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