PIXI.Container

class Container extends PIXI.DisplayObject

Container is a general-purpose display object that holds children. It also adds built-in support for advanced rendering features like masking and filtering.

It is the base class of all display objects that act as a container for other objects, including Graphics and Sprite.

import { BlurFilter } from '@pixi/filter-blur';
import { Container } from '@pixi/display';
import { Graphics } from '@pixi/graphics';
import { Sprite } from '@pixi/sprite';

let container = new Container();
let sprite = Sprite.from("https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png");

sprite.width = 512;
sprite.height = 512;

// Adds a sprite as a child to this container. As a result, the sprite will be rendered whenever the container
// is rendered.
container.addChild(sprite);

// Blurs whatever is rendered by the container
container.filters = [new BlurFilter()];

// Only the contents within a circle at the center should be rendered onto the screen.
container.mask = new Graphics()
 .beginFill(0xffffff)
 .drawCircle(sprite.width / 2, sprite.height / 2, Math.min(sprite.width, sprite.height) / 2)
 .endFill();

Summary

Properties from Container

T[]	children
number	height The height of the Container, setting this will actually modify the scale to achieve the value set.
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.
number	width The width of the Container, setting this will actually modify the scale to achieve the value set.

Methods from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
void	destroy(options: IDestroyOptions \| boolean)
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) Retrieves the local bounds of the displayObject as a rectangle object.
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	render(renderer: PIXI.Renderer) Renders the object using the WebGL renderer.
void	renderCanvas(renderer: PIXI.CanvasRenderer)
void	renderCanvas(_renderer: PIXI.CanvasRenderer)
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _calculateBounds()
void	protected _render(_renderer: PIXI.Renderer)
void	protected _renderCanvas(_renderer: PIXI.CanvasRenderer)
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Events from Container

	childAdded
	click
	mousedown
	mousemove
	mouseout
	mouseover
	mouseup
	mouseupoutside
	pointercancel
	pointerdown
	pointermove
	pointerout
	pointerover
	pointertap
	pointerup
	pointerupoutside
	rightclick
	rightdown
	rightup
	rightupoutside
	tap
	touchcancel
	touchend
	touchendoutside
	touchmove
	touchstart

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
boolean	cacheAsBitmap
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
boolean	isSprite Used to fast check if a sprite is.. a sprite!
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from DisplayObject

	added
	childRemoved
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tapcapture Capture phase equivalent of `tap`.
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Properties

children Container.ts:58

children: T[]

The array of children of this container.

height Container.ts:791

height: number

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

interactiveChildren FederatedEventTarget.ts:91

interactiveChildren: boolean = true

Determines if the children to the displayObject can be clicked/touched Setting this to false allows PixiJS to bypass a recursive hitTest function

sortableChildren Container.ts:64

sortableChildren: boolean

If set to true, the container will sort its children by zIndex value when updateTransform() is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array, so should be treated as a basic solution that is not performant compared to other solutions, such as @link https://github.com/pixijs/pixi-display

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.

See: PIXI.settings.SORTABLE_CHILDREN

sortDirty Container.ts:78

sortDirty: boolean

Should children be sorted by zIndex at the next updateTransform call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

width Container.ts:769

width: number

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

Public Methods

addChild Container.ts:124

addChild(children: PIXI.DisplayObject) → {PIXI.DisplayObject}

Adds one or more children to the container.

Multiple items can be added like so: myContainer.addChild(thingOne, thingTwo, thingThree)

Parameters:
Name	Type	Description
children	PIXI.DisplayObject	The DisplayObject(s) to add to the container

Returns:
Type	Description
PIXI.DisplayObject	The first child that was added.

addChildAt Container.ts:173

addChildAt(child: PIXI.DisplayObject, index: number) → {PIXI.DisplayObject}

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

Parameters:
Name	Type	Description
child	PIXI.DisplayObject	The child to add
index	number	The index to place the child in

Returns:
Type	Description
PIXI.DisplayObject	The child that was added.

calculateBounds Container.ts:444

calculateBounds() → {void}

Recalculates the bounds of the container.

This implementation will automatically fit the children's bounds into the calculation. Each child's bounds is limited to its mask's bounds or filterArea, if any is applied.

Returns:
Type	Description
void

containerUpdateTransform Container.ts:814

containerUpdateTransform() → {}

Container default updateTransform, does update children of container. Will crash if there's no parent element.

destroy Container.ts:738

destroy(options: IDestroyOptions | boolean) → {void}

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

Parameters:
Name	Type	Attributes	Default	Description
options	IDestroyOptions \| boolean	<optional>		Options parameter. A boolean will act as if all options have been set to that value
options.children	boolean	<optional>	false	if set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls.
options.texture	boolean	<optional>	false	Only used for child Sprites if options.children is set to true Should it destroy the texture of the child sprite
options.baseTexture	boolean	<optional>	false	Only used for child Sprites if options.children is set to true Should it destroy the base texture of the child sprite

Returns:
Type	Description
void

getChildAt Container.ts:267

getChildAt(index: number) → {T}

Returns the child at the specified index

Parameters:
Name	Type	Description
index	number	The index to get the child at

Returns:
Type	Description
T	The child at the given index, if any.

getChildByName index.ts:10

getChildByName(name: string, deep: boolean) → {PIXI.DisplayObject}

Returns the display object in the container.

Recursive searches are done in a preorder traversal.

Parameters:
Name	Type	Attributes	Default	Description
name	string			Instance name.
deep	boolean	<optional>	false	Whether to search recursively

Returns:
Type	Description
PIXI.DisplayObject	The child with the specified name.

getChildIndex Container.ts:230

getChildIndex(child: T) → {number}

Returns the index position of a child DisplayObject instance

Parameters:
Name	Type	Description
child	T	The DisplayObject instance to identify

Returns:
Type	Description
number	The index position of the child display object to identify

getLocalBounds Container.ts:496

getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) → {PIXI.Rectangle}

Retrieves the local bounds of the displayObject as a rectangle object.

Calling getLocalBounds may invalidate the _bounds of the whole subtree below. If using it inside a render() call, it is advised to call getBounds() immediately after to recalculate the world bounds of the subtree.

Parameters:
Name	Type	Attributes	Default	Description
rect	PIXI.Rectangle	<optional>		Optional rectangle to store the result of the bounds calculation.
skipChildrenUpdate	boolean		false	Setting to `true` will stop re-calculation of children transforms, it was default behaviour of pixi 4.0-5.2 and caused many problems to users.

Returns:
Type	Description
PIXI.Rectangle	The rectangular bounding area.

removeChild Container.ts:282

removeChild(children: PIXI.DisplayObject) → {PIXI.DisplayObject}

Removes one or more children from the container.

Parameters:
Name	Type	Description
children	PIXI.DisplayObject	The DisplayObject(s) to remove

Returns:
Type	Description
PIXI.DisplayObject	The first child that was removed.

removeChildAt Container.ts:322

removeChildAt(index: number) → {T}

Removes a child from the specified index position.

Parameters:
Name	Type	Description
index	number	The index to get the child from

Returns:
Type	Description
T	The child that was removed.

removeChildren Container.ts:347

removeChildren(beginIndex: number, endIndex) → {T[]}

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

Parameters:
Name	Type	Default	Description
beginIndex	number	0	The beginning position.
endIndex			The ending position. Default value is size of the container.

Returns:
Type	Description
T[]	List of removed children

render Container.ts:600

render(renderer: PIXI.Renderer) → {void}

Renders the object using the WebGL renderer.

The _render method is be overriden for rendering the contents of the container itself. This render method will invoke it, and also invoke the render methods of all children afterward.

If renderable or visible is false or if worldAlpha is not positive or if cullable is true and the bounds of this object are out of frame, this implementation will entirely skip rendering. See PIXI.DisplayObject for choosing between renderable or visible. Generally, setting alpha to zero is not recommended for purely skipping rendering.

When your scene becomes large (especially when it is larger than can be viewed in a single screen), it is advised to employ culling to automatically skip rendering objects outside of the current screen. See cullable and cullArea. Other culling methods might be better suited for a large number static objects; see @pixi-essentials/cull and pixi-cull.

The renderAdvanced method is internally used when when masking or filtering is applied on a container. This does, however, break batching and can affect performance when masking and filtering is applied extensively throughout the scene graph.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

renderCanvas DisplayObject.ts:4

renderCanvas(_renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
_renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

setChildIndex Container.ts:247

setChildIndex(child: T, index: number) → {void}

Changes the position of an existing child in the display object container

Parameters:
Name	Type	Description
child	T	The child DisplayObject instance for which you want to change the index number
index	number	The resulting index number for the child display object

Returns:
Type	Description
void

sortChildren Container.ts:393

sortChildren() → {void}

Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.

Returns:
Type	Description
void

swapChildren Container.ts:210

swapChildren(child: T, child2: T) → {void}

Swaps the position of 2 Display Objects within this container.

Parameters:
Name	Type	Description
child	T	First display object to swap
child2	T	Second display object to swap

Returns:
Type	Description
void

updateTransform Container.ts:418

updateTransform() → {void}

Updates the transform on all children of this container for rendering.

Returns:
Type	Description
void

Protected Methods

_calculateBounds Container.ts:526

protected _calculateBounds() → {void}

Recalculates the content bounds of this object. This should be overriden to calculate the bounds of this specific object (not including children).

Returns:
Type	Description
void

_render Container.ts:729

protected _render(_renderer: PIXI.Renderer) → {void}

To be overridden by the subclasses.

Parameters:
Name	Type	Description
_renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

_renderCanvas Container.ts:5

protected _renderCanvas(_renderer: PIXI.CanvasRenderer) → {void}

To be overridden by the subclass

Parameters:
Name	Type	Description
_renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

_renderWithCulling Container.ts:536

protected _renderWithCulling(renderer: PIXI.Renderer) → {void}

Renders this object and its children with culling.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

onChildrenChange Container.ts:115

protected onChildrenChange(_length: number) → {void}

Overridable method that can be used by Container subclasses whenever the children array is modified.

Parameters:
Name	Type	Attributes	Description
_length	number	<optional>

Returns:
Type	Description
void

renderAdvanced Container.ts:652

protected renderAdvanced(renderer: PIXI.Renderer) → {void}

Render the object using the WebGL renderer and advanced features.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

Events

childAdded Container.ts:98

Fired when a DisplayObject is added to this Container.

Parameters:
Name	Type	Description
child	PIXI.DisplayObject	The child added to the Container.
container	PIXI.Container	The container that added the child.
index	number	The children's index of the added child.

click EventBoundary.ts:1397

Fired when a pointer device button (usually a mouse left-button) is pressed and released on the display object. DisplayObject's interactive property must be set to true to fire event.

A click event fires after the pointerdown and pointerup events, in that order. If the mouse is moved over another DisplayObject after the pointerdown event, the click event is fired on the most specific common ancestor of the two target DisplayObjects.

The detail property of the event is the number of clicks that occurred within a 200ms window of each other upto the current click. For example, it will be 2 for a double click.