Class: ParticleContainer<T>
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:126
The ParticleContainer class is a highly optimized container that can render 1000s or particles at great speed.
A ParticleContainer is specialized in that it can only contain and render particles. Particles are lightweight objects that use minimal memory, which helps boost performance.
It can render particles EXTREMELY fast!
The tradeoff of using a ParticleContainer is that most advanced functionality is unavailable. Particles are simple and cannot have children, filters, masks, etc. They possess only the basic properties: position, scale, rotation, and color.
All particles must share the same texture source (using something like a sprite sheet works well here).
When creating a ParticleContainer, a developer can specify which of these properties are static and which are dynamic.
- Static properties are only updated when you add or remove a child, or when the
updatefunction is called. - Dynamic properties are updated every frame.
It is up to the developer to specify which properties are static and which are dynamic. Generally, the more static properties you have (i.e., those that do not change per frame), the faster the rendering.
If the developer modifies the children order or any static properties of the particle, they must call the update method.
By default, only the position property is set to dynamic, which makes rendering very fast!
Developers can also provide a custom shader to the particle container, allowing them to render particles in a custom way.
To help with performance, the particle containers bounds are not calculated. It's up to the developer to set the boundsArea property.
It's extremely easy to use. Below is an example of rendering thousands of sprites at lightning speed.
--------- EXPERIMENTAL ---------
This is a new API, things may change and it may not work as expected. We want to hear your feedback as we go!
Example
import { ParticleContainer, Particle } from 'pixi.js';
const container = new ParticleContainer();
for (let i = 0; i < 100; ++i)
{
let particle = new Particle(texture);
container.addParticle(particle);
}
Standard
Extends
ParticleContainer.ViewContainer<ParticleBuffer>
Type Parameters
T
T extends IParticle = IParticle
The type of particles in the container. Must implement IParticle.
Implements
Constructors
Constructor
> new ParticleContainer<T>(options?): ParticleContainer<T>
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:280
Parameters
options?
The options for creating the sprite.
Returns
ParticleContainer<T>
Inherited from
Properties
__devtoolIgnore?
> optional __devtoolIgnore?: boolean
Defined in: node_modules/@pixi/devtools/global.d.ts:35
Inherited from
__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
_bounds
> protected _bounds: Bounds
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59
Inherited from
_boundsDirty
> protected _boundsDirty: boolean
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60
Inherited from
_childrenDirty
> _childrenDirty: boolean
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:219
Internal
Indicates if the children of this ParticleContainer have changed and need to be updated.
_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
_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
_gcData?
> optional _gcData?: GCData
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54
Internal
Inherited from
_gcLastUsed
> _gcLastUsed: number
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58
Internal
Inherited from
_gpuData
> _gpuData: Record<number, GPU_DATA>
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52
Internal
Inherited from
_lastUsed
> _lastUsed: number
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50
Internal
Inherited from
_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
_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
_properties
> _properties: Record<string, ParticleRendererProperty>
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:214
Internal
A record of properties and their corresponding ParticleRendererProperty.
_roundPixels
> _roundPixels: 0 | 1
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48
Internal
Inherited from
_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
_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
_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
_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
_zIndex
> _zIndex: number
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60
Internal
Inherited from
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
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
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/particle-container/shared/ParticleContainer.d.ts:209
Internal
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
~~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
cacheAsTexture
> cacheAsTexture: (val) => void
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45
Caches this container as a texture. This allows the container to be rendered as a single texture, which can improve performance for complex static containers.
Parameters
val
boolean | CacheAsTextureOptions
If true, enables caching with default options. If false, disables caching. Can also pass options object to configure caching behavior.
Returns
void
Example
// Basic caching
container.cacheAsTexture(true);
// With custom options
container.cacheAsTexture({
resolution: 2,
antialias: true,
});
// Disable caching
container.cacheAsTexture(false);
// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
See
- Container#updateCacheTexture For updating cached content
- Container#isCachedAsTexture For checking cache state
Inherited from
canBundle
> readonly canBundle: true = true
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44
Internal
Implementation of
Inherited from
children
> readonly children: ContainerChild[]
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:639
The array of children of this container. Each child must be a Container or extend from it.
The array is read-only, but its contents can be modified using Container methods.
Example
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
See
- Container#addChild For adding children
- Container#removeChild For removing children
Inherited from
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
- EventSystem.cursorStyles For setting global cursor styles
- https://developer.mozilla.org/en-US/docs/Web/CSS/cursor MDN Cursor Documentation
Inherited from
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
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
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 asinteractive = falsein v7.'static': Emit events and is hit tested. Same asinteractive = truein 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
filterArea?
> optional filterArea?: Rectangle
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178
The area the filter is applied to. This is used as an optimization to define a specific region for filter effects instead of calculating the display object bounds each frame.
> [!NOTE] > Setting this to a custom Rectangle allows you to define a specific area for filter effects, > which can improve performance by avoiding expensive bounds calculations.
Example
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);
// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
screen.x,
screen.y,
screen.width,
screen.height
);
See
- Container#filters For applying filters
- Rectangle For area definition
Inherited from
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
groupBlendMode
> groupBlendMode: BLEND_MODES
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:788
Internal
Inherited from
groupColor
> groupColor: number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:782
Internal
Inherited from
groupColorAlpha
> groupColorAlpha: number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:784
Internal
Inherited from
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
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
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
Example
// Enable interaction events
sprite.interactive = true; // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
Inherited from
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
- Container#cacheAsTexture For enabling caching
- Container#updateCacheTexture For updating cache
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
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
layerParentId
> layerParentId: string
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:829
Internal
Inherited from
localAlpha
> localAlpha: number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:778
Internal
Inherited from
localBlendMode
> localBlendMode: BLEND_MODES
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:786
Internal
Inherited from
localColor
> localColor: number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:776
Internal
Inherited from
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
- Container#worldTransform For global transform
- Container#groupTransform For render group transform
Inherited from
mask
> mask: Mask
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254
Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
> [!IMPORTANT] In PixiJS a regular mask must be a Graphics or a Sprite object.
> This allows for much faster masking in canvas as it uses shape clipping.
> A mask of an object must be in the subtree of its parent.
> Otherwise, getLocalBounds may calculate incorrect bounds, which makes the container's width and height wrong.
Sprite masks read the red channel by default. Use Container#setMask with channel: 'alpha'
to read the alpha channel instead. See MaskOptions#channel for details.
Example
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;
// Remove mask
sprite.mask = null;
See
- Graphics For creating mask shapes
- Sprite For texture-based masks
- Container#setMask For advanced mask options including channel selection
Inherited from
~~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
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
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
eventModeset appropriately to receive events - Part of the global move events family along with
globalpointermoveandglobaltouchmove
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
eventModeset appropriately to receive events - Part of the global move events family along with
globalpointermoveandglobaltouchmove
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
eventModeset appropriately to receive events - Part of the global move events family along with
globalpointermoveandglobalmousemove
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
parent
> readonly parent: Container<ContainerChild> | null
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:659
The display object container that contains this display object. This represents the parent-child relationship in the display tree.
Example
// Basic parent access
const parent = sprite.parent;
// Walk up the tree
let current = sprite;
while (current.parent) {
console.log('Level up:', current.parent.constructor.name);
current = current.parent;
}
See
- Container#addChild For adding to a parent
- Container#removeChild For removing from parent
Inherited from
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
particleChildren
> particleChildren: T[]
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:248
An array of particles that are children of this ParticleContainer. This array can be modified directly for performance, but the 'update' method must be called afterwards to ensure the container is rendered correctly.
Example
const container = new ParticleContainer();
// Add particles directly to the array
container.particleChildren.push(
new Particle(texture),
new Particle(texture)
);
container.update(); // Required after direct modification
// Modify existing particles
container.particleChildren.forEach(particle => {
particle.position.x += 10;
});
// Remove particles
container.particleChildren.length = 0; // Clear all
container.update();
See
- ParticleContainer#update For updating after modifications
- ParticleContainer#addParticle For a safer way to add particles
- ParticleContainer#removeParticle For a safer way to remove particles
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/particle-container/shared/ParticleContainer.d.ts:207
Internal
The unique identifier for the render pipe of this ParticleContainer.
Implementation of
Inherited from
shader
> shader: Shader
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:253
The shader used for rendering particles in this ParticleContainer.
Advanced
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
- Container#sortableChildren For enabling automatic sorting
- Container#zIndex For setting child order
Inherited from
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
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
texture
> texture: Texture
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:276
The texture used for rendering particles in this ParticleContainer. All particles must share the same base texture for optimal performance.
> [!NOTE] > If not set, the texture of the first particle added to this container will be used.
Example
const container = new ParticleContainer();
// Set texture for all particles
container.texture = Texture.from('particle.png');
// Create particles using container's texture
for (let i = 0; i < 100; i++) {
const particle = new Particle(container.texture);
container.addParticle(particle); // Will use the particles texture if not set
}
Default
null
See
- ParticleContainerOptions#texture For setting texture via constructor
- Particle For creating particles with textures
uid
> readonly uid: number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:610
Internal
unique id for this container
Inherited from
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
zIndex
> zIndex: number
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24
The zIndex of the container.
Controls the rendering order of children within their parent container.
A higher value will mean it will be moved towards the front of the rendering order.
Example
// Add in any order
container.addChild(character, background, foreground);
// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
See
- Container#sortableChildren For enabling sorting
- Container#sortChildren For manual sorting
Default
0
Inherited from
defaultOptions
> static defaultOptions: Pick<ParticleContainerOptions, "dynamicProperties" | "roundPixels">
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:202
Defines the default options for creating a ParticleContainer.
Example
// Change defaults globally
ParticleContainer.defaultOptions = {
dynamicProperties: {
position: true, // Update positions each frame
rotation: true, // Update rotations each frame
vertex: false, // Static vertices
uvs: false, // Static texture coordinates
color: false // Static colors
},
roundPixels: true // Enable pixel rounding for crisp rendering
};
prefixed
> static prefixed: string | boolean
Defined in: node_modules/eventemitter3/index.d.ts:9
Inherited from
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
- Container#visible For toggling visibility
- Container#renderable For render control
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
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
blendMode
Get Signature
> get blendMode(): BLEND_MODES
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1289
The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.
Setting to 'normal' will reset to default blending.
> [!NOTE] More blend modes are available after importing the pixi.js/advanced-blend-modes sub-export.
Example
// Basic blend modes
sprite.blendMode = 'add'; // Additive blending
sprite.blendMode = 'multiply'; // Multiply colors
sprite.blendMode = 'screen'; // Screen blend
// Reset blend mode
sprite.blendMode = 'normal'; // Normal blending
Default
'normal'
See
- Container#alpha For transparency
- Container#tint For color adjustments
Returns
Set Signature
> set blendMode(value): void
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1269
Parameters
value
Returns
void
Inherited from
bounds
Get Signature
> get bounds(): Bounds
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:373
Returns a static empty bounds object since ParticleContainer does not calculate bounds automatically
for performance reasons. Use the boundsArea property to manually set container bounds.
Example
const container = new ParticleContainer({
texture: Texture.from('particle.png')
});
// Default bounds are empty
console.log(container.bounds); // Bounds(0, 0, 0, 0)
// Set manual bounds for the particle area
container.boundsArea = {
minX: 0,
minY: 0,
maxX: 800,
maxY: 600
};
See
- Container#boundsArea For manually setting container bounds
- Bounds For bounds object structure
Returns
An empty bounds object (0,0,0,0)
this is the AABB rectangle bounds of the view in local untransformed space.
Inherited from
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
height
Get Signature
> get height(): number
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1117
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);
Returns
number
Set Signature
> set height(value): void
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1118
Parameters
value
number
Returns
void
Inherited from
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
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
origin
Get Signature
> get origin(): ObservablePoint
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1087
Experimental
The origin point around which the container rotates and scales without affecting its position. Unlike pivot, changing the origin will not move the container's position.
Example
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
// Reset origin
container.origin.set(0, 0);
Returns
Set Signature
> set origin(value): void
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1088
Parameters
value
number | PointData
Returns
void
Inherited from
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
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
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
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
roundPixels
Get Signature
> get roundPixels(): boolean
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86
Whether or not to round the x/y position of the sprite.
Example
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
Default
false
Returns
boolean
Set Signature
> set roundPixels(value): void
Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87
Whether or not to round the x/y position of the object.
Parameters
value
boolean
Returns
void
Inherited from
scale
Get Signature
> get scale(): ObservablePoint
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1071
The scale factors of this object along the local coordinate axes.
The default scale is (1, 1).
Example
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
Since
4.0.0
Returns
Set Signature
> set scale(value): void
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1072
Parameters
value
string | number | PointData
Returns
void
Inherited from
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
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
Returns
void
Inherited from
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
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
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
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
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
Methods
_getGlobalBoundsRecursive()
> _getGlobalBoundsRecursive(factorRenderLayers, bounds, currentLayer): void
Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32
Internal
Recursively calculates the global bounds for the container and its children. This method is used internally by getFastGlobalBounds to traverse the scene graph.
Parameters
factorRenderLayers
boolean
A flag indicating whether to consider render layers in the calculation.
bounds
The bounds object to update with the calculated values.
currentLayer
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
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?
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?
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
addParticle()
> addParticle(...children): T
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:306
Adds one or more particles to the container. The particles will be rendered using the container's shared texture and properties. When adding multiple particles, they must all share the same base texture.
Parameters
children
...T[]
The Particle(s) to add to the container
Returns
T
The first particle that was added, for method chaining
Example
const container = new ParticleContainer();
// Add a single particle
const particle = new Particle(Assets.get('particleTexture'));
container.addParticle(particle);
// Add multiple particles at once
const particles = [
new Particle(Assets.get('particleTexture')),
new Particle(Assets.get('particleTexture')),
new Particle(Assets.get('particleTexture'))
];
container.addParticle(...particles);
See
- ParticleContainer#texture For setting the shared texture
- ParticleContainer#update For updating after modifications
addParticleAt()
> addParticleAt<U>(child, index): U
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:406
Adds a particle to the container at a specified index. If the index is out of bounds an error will be thrown. If the particle is already in this container, it will be moved to the specified index.
Type Parameters
U
U extends IParticle = T
Parameters
child
U
The particle to add.
index
number
The absolute index where the particle will be positioned at the end of the operation.
Returns
U
The particle that was added.
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
The set of instructions to which the renderables will be added.
renderer
The renderer responsible for rendering the scene.
currentLayer
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
The instruction set to collect renderables for.
renderer
The renderer to collect renderables for.
currentLayer
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
The set of instructions to which the renderables will be added.
renderer
The renderer responsible for rendering the scene.
currentLayer
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
The point to check in local coordinates
Returns
boolean
True if the point is within the view's bounds
Example
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);
See
- ViewContainer#bounds For the bounds used in hit testing
- Container#toLocal For converting global coordinates to local
Inherited from
destroy()
> destroy(options?): void
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:385
Destroys this sprite renderable and optionally its texture.
Parameters
options?
Options parameter. A boolean will act as if all options have been set to that value
Returns
void
Example
particleContainer.destroy();
particleContainer.destroy(true);
particleContainer.destroy({ texture: true, textureSource: true, children: true });
Inherited from
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
The event to dispatch.
Returns
boolean
Whether the preventDefault() method was not invoked.
Example
// Reuse a click event!
button.dispatchEvent(clickEvent);
Inherited from
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?
Optional bounds to store the result of the bounds calculation
Returns
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
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
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?
Optional array to store matching children in
Returns
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
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?
The output bounds object to store the result. If not provided, a new one is created.
Returns
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
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?
The optional point to write the global value to
skipUpdate?
boolean
Should we skip the update transform
Returns
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
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
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
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
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?
Optional object to store the size in.
Returns
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
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
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?
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?
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
- Container#addChild For adding to a new parent
- Container#removeChild For parent removing children
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
removeParticle()
> removeParticle(...children): T
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:324
Removes one or more particles from the container. The particles must already be children of this container to be removed.
Parameters
children
...T[]
The Particle(s) to remove from the container
Returns
T
The first particle that was removed, for method chaining
Example
// Remove a single particle
container.removeParticle(particle1);
// Remove multiple particles at once
container.removeParticle(particle2, particle3);
See
- ParticleContainer#particleChildren For accessing all particles
- ParticleContainer#removeParticles For removing particles by index
- ParticleContainer#removeParticleAt For removing a particle at a specific index
removeParticleAt()
> removeParticleAt<U>(index): U
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:398
Removes a particle from the specified index position.
Type Parameters
U
U extends IParticle = T
Parameters
index
number
The index to get the particle from
Returns
U
The particle that was removed.
removeParticles()
> removeParticles(beginIndex?, endIndex?): T[]
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:392
Removes all particles from this container that are within the begin and end indexes.
Parameters
beginIndex?
number
The beginning position.
endIndex?
number
The ending position. Default value is size of the container.
Returns
T[]
- List of removed particles
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
setFromMatrix()
> setFromMatrix(matrix): void
Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1223
Updates the local transform properties by decomposing the given matrix. Extracts position, scale, rotation, and skew from a transformation matrix.
Parameters
matrix
The matrix to use for updating the transform
Returns
void
Example
// Basic matrix transform
const matrix = new Matrix()
.translate(100, 100)
.rotate(Math.PI / 4)
.scale(2, 2);
container.setFromMatrix(matrix);
// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;
target.setFromMatrix(source.localTransform);
// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
See
- Container#updateTransform For property-based updates
- Matrix#decompose For matrix decomposition details
Inherited from
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
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
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
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
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
Parameters
position
The world origin to calculate from
from?
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
- Container#toGlobal For reverse conversion
- Container#getGlobalPosition For container position
Inherited from
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
update()
> update(): void
Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/ParticleContainer.d.ts:346
Updates the particle container's internal state. Call this method after manually modifying the particleChildren array or when changing static properties of particles.
Returns
void
Example
// Batch modify particles
container.particleChildren.push(...particles);
container.update(); // Required after direct array modification
// Update static properties
container.particleChildren.forEach(particle => {
particle.position.set(
Math.random() * 800,
Math.random() * 600
);
});
container.update(); // Required after changing static positions
See
- ParticleProperties For configuring dynamic vs static properties
- ParticleContainer#particleChildren For direct array access
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
- Container#setFromMatrix For matrix-based transforms
- Container#position For direct position access
Inherited from
~~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