OptionalaccessibleFlag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
OptionalaccessibleSetting to false will prevent any children inside this container to be accessible. Defaults to true.
Optional AdvancedaccessibleSets the aria-label attribute of the shadow div
Optional AdvancedaccessibleSpecify the pointer-events the accessible div will use Defaults to auto.
OptionalaccessibleSets the text content of the shadow
OptionalaccessibleSets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
Optional AdvancedaccessibleSpecify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
OptionalalphaThe opacity of the object relative to its parent's opacity. Value ranges from 0 (fully transparent) to 1 (fully opaque).
OptionalangleThe angle of the object in degrees.
'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
OptionalblendThe blend mode to be applied to the sprite. Controls how pixels are blended when rendering.
Setting to 'normal' will reset to default blending.
More blend modes are available after importing the pixi.js/advanced-blend-modes sub-export.
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' }); // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
OptionalboundsAn 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.
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.
OptionalcacheOptional ReadonlychildrenThe 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.
new Container({
children: [
new Container(), // First child
new Container(), // Second child
],
});
OptionalcullableControls 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.
OptionalcullableControls whether children of this container can be culled. When false, skips recursive culling checks for better performance.
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);
OptionalcullCustom shape used for culling calculations instead of object bounds. Defined in local space coordinates relative to the object.
Setting this to a custom Rectangle allows you to define a specific area for culling, which can improve performance by avoiding expensive bounds calculations.
const container = new Container();
// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);
// Reset to use object bounds
container.cullArea = null;
OptionalcursorThe cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL.
// 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
OptionaleventEnable interaction events for the Container. Touch, pointer and mouse events are supported.
const sprite = new Sprite(texture);
// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));
// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());
// Disable all interaction
sprite.eventMode = 'none';
// Only allow child interactions
sprite.eventMode = 'passive';
Available modes:
'none': Ignores all interaction events, even on its children. Best for pure visuals.'passive': (default) Does not emit events and ignores hit testing on itself and non-interactive
children. Interactive children will still emit events.'auto': Does not emit events but is hit tested if parent is interactive. Same as interactive = false in v7.'static': Emit events and is hit tested. Same as interactive = true in v7. Best for buttons/UI.'dynamic': Like static but also receives synthetic events when pointer is idle. Best for moving objects.Performance tips:
'none' for pure visual elements'passive' for containers with some interactive children'static' for standard UI elements'dynamic' only when needed for moving/animated elementsOptionalfiltersSets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.
This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.
Filter For filter base class
OptionalheightThe height of the display object, in pixels.
OptionalhitDefines 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.
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;
}
};
OptionalinteractiveWhether 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.
OptionalinteractiveControls 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.
// 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;
OptionalisOptionallabelThe instance label of the object.
OptionalmaskThe mask to apply, which can be a Container or null.
If null, it clears the existing mask.
OptionalonclickProperty-based event handler for the click event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.
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);
};
OptionalonglobalmousemoveProperty-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.
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);
};
OptionalonglobalpointermoveProperty-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.
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);
};
OptionalonglobaltouchmoveProperty-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.
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);
};
OptionalonmousedownProperty-based event handler for the mousedown event.
Fired when a mouse button is pressed while the pointer is over the object.
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);
};
OptionalonmouseenterProperty-based event handler for the mouseenter event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.
OptionalonmouseleaveProperty-based event handler for the mouseleave event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.
OptionalonmousemoveProperty-based event handler for the mousemove event.
Fired when the pointer moves while over the display object.
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));
};
OptionalonmouseoutProperty-based event handler for the mouseout event.
Fired when the pointer moves out of the bounds of the display object.
OptionalonmouseoverProperty-based event handler for the mouseover event.
Fired when the pointer moves onto the bounds of the display object.
OptionalonmouseupProperty-based event handler for the mouseup event.
Fired when a mouse button is released over the display object.
OptionalonmouseupoutsideProperty-based event handler for the mouseupoutside event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.
OptionalonpointercancelProperty-based event handler for the pointercancel event.
Fired when a pointer device interaction is canceled or lost.
OptionalonpointerdownProperty-based event handler for the pointerdown event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.
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);
};
OptionalonpointerenterProperty-based event handler for the pointerenter event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.
OptionalonpointerleaveProperty-based event handler for the pointerleave event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.
OptionalonpointermoveProperty-based event handler for the pointermove event.
Fired when a pointer device moves while over the display object.
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);
};
OptionalonpointeroutProperty-based event handler for the pointerout event.
Fired when the pointer moves out of the bounds of the display object.
OptionalonpointeroverProperty-based event handler for the pointerover event.
Fired when the pointer moves over the bounds of the display object.
OptionalonpointertapProperty-based event handler for the pointertap event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).
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);
};
OptionalonpointerupProperty-based event handler for the pointerup event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.
OptionalonpointerupoutsideProperty-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.
OptionalonThis 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.
In v7 many users used updateTransform for this, however the way v8 renders objects is different
and "updateTransform" is no longer called every frame
// Basic rotation animation
const container = new Container();
container.onRender = () => {
container.rotation += 0.01;
};
// Cleanup when done
container.onRender = null; // Removes callback
Renderer For renderer capabilities
OptionalonrightclickProperty-based event handler for the rightclick event.
Fired when a right-click (context menu) action is performed on the object.
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);
};
OptionalonrightdownProperty-based event handler for the rightdown event.
Fired when a right mouse button is pressed down over the display object.
OptionalonrightupProperty-based event handler for the rightup event.
Fired when a right mouse button is released over the display object.
OptionalonrightupoutsideProperty-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.
OptionalontapProperty-based event handler for the tap event.
Fired when a tap action (touch) is completed on the object.
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);
};
OptionalontouchcancelProperty-based event handler for the touchcancel event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.
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);
};
OptionalontouchendProperty-based event handler for the touchend event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.
OptionalontouchendoutsideProperty-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.
OptionalontouchmoveProperty-based event handler for the touchmove event.
Fired when a touch interaction moves while over the display object.
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);
};
OptionalontouchstartProperty-based event handler for the touchstart event.
Fired when a touch interaction starts, such as when a finger touches the screen.
OptionalonwheelProperty-based event handler for the wheel event.
Fired when the mouse wheel is scrolled while over the display object.
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
};
Optional ReadonlyparentThe display object container that contains this display object. This represents the parent-child relationship in the display tree.
OptionalpivotThe 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).
OptionalpositionThe coordinate of the object relative to the local coordinates of the parent.
OptionalrenderableControls 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.
OptionalrotationThe rotation of the object in radians.
'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
OptionalscaleThe scale factors of this object along the local coordinate axes.
The default scale is (1, 1).
OptionalsetOptionalskewThe 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.
OptionalsortableIf 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.
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.
OptionaltabSets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.
OptionaltintThe tint applied to the sprite.
This can be any valid ColorSource.
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
OptionalvisibleThe visibility of the object. If false the object will not be drawn, and the transform will not be updated.
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
OptionalwidthThe width of the display object, in pixels.
OptionalxThe position of the container on the x axis relative to the local coordinates of the parent.
An alias to position.x
OptionalyThe position of the container on the y axis relative to the local coordinates of the parent.
An alias to position.y
OptionalzThe 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.
// Add in any order
container.addChild(character, background, foreground);
// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
Constructor options used for
Containerinstances.See
Container