Class: Container

Container

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.

Transforms

The transform of a display object describes the projection from its local coordinate space to its parent's local coordinate space. The following properties are derived from the transform:

Property	Description
pivot	Invariant under rotation, scaling, and skewing. The projection of into the parent's space of the pivot is equal to position, regardless of the other three transformations. In other words, It is the center of rotation, scaling, and skewing.
position	Translation. This is the position of the pivot in the parent's local space. The default value of the pivot is the origin (0,0). If the top-left corner of your display object is (0,0) in its local space, then the position will be its top-left corner in the parent's local space.
scale	Scaling. This will stretch (or compress) the display object's projection. The scale factors are along the local coordinate axes. In other words, the display object is scaled before rotated or skewed. The center of scaling is the pivot.
rotation	Rotation. This will rotate the display object's projection by this angle (in radians).
skew	Skewing. This can be used to deform a rectangular display object into a parallelogram. In PixiJS, skew has a slightly different behaviour than the conventional meaning. It can be thought of the net rotation applied to the coordinate axes (separately). For example, if "skew.x" is ⍺ and "skew.y" is β, then the line x = 0 will be rotated by ⍺ (y = -xcot⍺) and the line y = 0 will be rotated by β (y = xtanβ). A line y = x*tanϴ (i.e. a line at angle ϴ to the x-axis in local-space) will be rotated by an angle between ⍺ and β. It can be observed that if skew is applied equally to both axes, then it will be equivalent to applying a rotation. Indeed, if "skew.x" = -ϴ and "skew.y" = ϴ, it will produce an equivalent of "rotation" = ϴ. Another quite interesting observation is that "skew.x", "skew.y", rotation are commutative operations. Indeed, because rotation is essentially a careful combination of the two.
angle	Rotation. This is an alias for rotation, but in degrees.
x	Translation. This is an alias for position.x!
y	Translation. This is an alias for position.y!
width	Implemented in Container. Scaling. The width property calculates scale.x by dividing the "requested" width by the local bounding box width. It is indirectly an abstraction over scale.x, and there is no concept of user-defined width.
height	Implemented in Container. Scaling. The height property calculates scale.y by dividing the "requested" height by the local bounding box height. It is indirectly an abstraction over scale.y, and there is no concept of user-defined height.

Alpha

This alpha sets a display object's relative opacity w.r.t its parent. For example, if the alpha of a display object is 0.5 and its parent's alpha is 0.5, then it will be rendered with 25% opacity (assuming alpha is not applied on any ancestor further up the chain).

Renderable vs Visible

The renderable and visible properties can be used to prevent a display object from being rendered to the screen. However, there is a subtle difference between the two. When using renderable, the transforms of the display object (and its children subtree) will continue to be calculated. When using visible, the transforms will not be calculated.

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

const container = new Container();
const 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();

RenderGroup

In PixiJS v8, containers can be set to operate in 'render group mode', transforming them into entities akin to a stage in traditional rendering paradigms. A render group is a root renderable entity, similar to a container, but it's rendered in a separate pass with its own unique set of rendering instructions. This approach enhances rendering efficiency and organization, particularly in complex scenes.

You can enable render group mode on any container using container.enableRenderGroup() or by initializing a new container with the render group property set to true (new Container({isRenderGroup: true})). The method you choose depends on your specific use case and setup requirements.

An important aspect of PixiJS’s rendering process is the automatic treatment of rendered scenes as render groups. This conversion streamlines the rendering process, but understanding when and how this happens is crucial to fully leverage its benefits.

One of the key advantages of using render groups is the performance efficiency in moving them. Since transformations are applied at the GPU level, moving a render group, even one with complex and numerous children, doesn't require recalculating the rendering instructions or performing transformations on each child. This makes operations like panning a large game world incredibly efficient.

However, it's crucial to note that render groups do not batch together. This means that turning every container into a render group could actually slow things down, as each render group is processed separately. It's best to use render groups judiciously, at a broader level, rather than on a per-child basis. This approach ensures you get the performance benefits without overburdening the rendering process.

RenderGroups maintain their own set of rendering instructions, ensuring that changes or updates within a render group don't affect the rendering instructions of its parent or other render groups. This isolation ensures more stable and predictable rendering behavior.

Additionally, renderGroups can be nested, allowing for powerful options in organizing different aspects of your scene. This feature is particularly beneficial for separating complex game graphics from UI elements, enabling intricate and efficient scene management in complex applications.

This means that Containers have 3 levels of matrix to be mindful of:

localTransform, this is the transform of the container based on its own properties
groupTransform, this it the transform of the container relative to the renderGroup it belongs too
worldTransform, this is the transform of the container relative to the Scene being rendered

Members

accessible boolean

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set

Default Value:

false

accessibleChildren boolean

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

Default Value:

true

accessibleHint string

Sets the aria-label attribute of the shadow div

Default Value:

undefined

accessiblePointerEvents PointerEvents

Specify the pointer-events the accessible div will use Defaults to auto.

Default Value:

'auto'

accessibleTitle string

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'

Default Value:

undefined

accessibleType string

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.

Default Value:

'button'

alpha number

The opacity of the object.

angle number

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

blendMode BLEND_MODES

The blend mode to be applied to the sprite. Apply a value of 'normal' to reset the blend mode.

Default Value:

'normal'

boundsArea Rectangle

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

children C[] readonly

The array of children of this container.

cullable boolean

Should this object be rendered if the bounds of this object are out of frame?

Culling has no effect on whether updateTransform is called.

Default Value:

false

cullableChildren boolean

Determines if the children to the container can be culled Setting this to false allows PixiJS to bypass a recursive culling function Which can help to optimize very complex scenes

Default Value:

true

cullArea Rectangle

If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.

destroyed boolean

If the object has been destroyed via destroy(). If true, it should not be used.

Default Value:

false

effects Array<Effect>

TODO

Needs docs.

groupTransform Matrix readonly

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

height number

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

hitArea IHitArea

Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the container's bounds.

Default Value:

undefined

Example

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

 const sprite = new Sprite(texture);
 sprite.interactive = true;
 sprite.hitArea = new Rectangle(0, 0, 100, 100);

interactiveChildren boolean

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

Default Value:

true

isRenderable boolean

Whether or not the object should be rendered.

isRenderGroup boolean

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

label string

The instance label of the object.

Default Value:

undefined

localTransform Matrix readonly

Current transform of the object based on local factors: position, scale, other stuff.

name string Deprecated : since 8.0.0

The instance name of the object.

See:

label

onclick

Property-based event handler for the click event.

Default Value:

null

Example

this.onclick = (event) => {
 //some function here that happens on click
}

onglobalmousemove

Property-based event handler for the globalmousemove event.

Default Value:

null

Example

this.onglobalmousemove = (event) => {
 //some function here that happens on globalmousemove
}

onglobalpointermove

Property-based event handler for the globalpointermove event.

Default Value:

null

Example

this.onglobalpointermove = (event) => {
 //some function here that happens on globalpointermove
}

onglobaltouchmove

Property-based event handler for the globaltouchmove event.

Default Value:

null

Example

this.onglobaltouchmove = (event) => {
 //some function here that happens on globaltouchmove
}

onmousedown

Property-based event handler for the mousedown event.

Default Value:

null

Example

this.onmousedown = (event) => {
 //some function here that happens on mousedown
}

onmouseenter

Property-based event handler for the mouseenter event.

Default Value:

null

Example

this.onmouseenter = (event) => {
 //some function here that happens on mouseenter
}

onmouseleave

Property-based event handler for the mouseleave event.

Default Value:

null

Example

this.onmouseleave = (event) => {
 //some function here that happens on mouseleave
}

onmousemove

Property-based event handler for the mousemove event.

Default Value:

null

Example

this.onmousemove = (event) => {
 //some function here that happens on mousemove
}

onmouseout

Property-based event handler for the mouseout event.

Default Value:

null

Example

this.onmouseout = (event) => {
 //some function here that happens on mouseout
}

onmouseover

Property-based event handler for the mouseover event.

Default Value:

null

Example

this.onmouseover = (event) => {
 //some function here that happens on mouseover
}

onmouseup

Property-based event handler for the mouseup event.

Default Value:

null

Example

this.onmouseup = (event) => {
 //some function here that happens on mouseup
}

onmouseupoutside

Property-based event handler for the mouseupoutside event.

Default Value:

null

Example

this.onmouseupoutside = (event) => {
 //some function here that happens on mouseupoutside
}

onpointercancel

Property-based event handler for the pointercancel event.

Default Value:

null

Example

this.onpointercancel = (event) => {
 //some function here that happens on pointercancel
}

onpointerdown

Property-based event handler for the pointerdown event.

Default Value:

null

Example

this.onpointerdown = (event) => {
 //some function here that happens on pointerdown
}

onpointerenter

Property-based event handler for the pointerenter event.

Default Value:

null

Example

this.onpointerenter = (event) => {
 //some function here that happens on pointerenter
}

onpointerleave

Property-based event handler for the pointerleave event.

Default Value:

null

Example

this.onpointerleave = (event) => {
 //some function here that happens on pointerleave
}

onpointermove

Property-based event handler for the pointermove event.

Default Value:

null

Example

this.onpointermove = (event) => {
 //some function here that happens on pointermove
}

onpointerout

Property-based event handler for the pointerout event.

Default Value:

null

Example

this.onpointerout = (event) => {
 //some function here that happens on pointerout
}

onpointerover

Property-based event handler for the pointerover event.

Default Value:

null

Example

this.onpointerover = (event) => {
 //some function here that happens on pointerover
}

onpointertap

Property-based event handler for the pointertap event.

Default Value:

null

Example

this.onpointertap = (event) => {
 //some function here that happens on pointertap
}

onpointerup

Property-based event handler for the pointerup event.

Default Value:

null

Example

this.onpointerup = (event) => {
 //some function here that happens on pointerup
}

onpointerupoutside

Property-based event handler for the pointerupoutside event.

Default Value:

null

Example

this.onpointerupoutside = (event) => {
 //some function here that happens on pointerupoutside
}

onrightclick

Property-based event handler for the rightclick event.

Default Value:

null

Example

this.onrightclick = (event) => {
 //some function here that happens on rightclick
}

onrightdown

Property-based event handler for the rightdown event.

Default Value:

null

Example

this.onrightdown = (event) => {
 //some function here that happens on rightdown
}

onrightup

Property-based event handler for the rightup event.

Default Value:

null

Example

this.onrightup = (event) => {
 //some function here that happens on rightup
}

onrightupoutside

Property-based event handler for the rightupoutside event.

Default Value:

null

Example

this.onrightupoutside = (event) => {
 //some function here that happens on rightupoutside
}

ontap

Property-based event handler for the tap event.

Default Value:

null

Example

this.ontap = (event) => {
 //some function here that happens on tap
}

ontouchcancel

Property-based event handler for the touchcancel event.

Default Value:

null

Example

this.ontouchcancel = (event) => {
 //some function here that happens on touchcancel
}

ontouchend

Property-based event handler for the touchend event.

Default Value:

null

Example

this.ontouchend = (event) => {
 //some function here that happens on touchend
}

ontouchendoutside

Property-based event handler for the touchendoutside event.

Default Value:

null

Example

this.ontouchendoutside = (event) => {
 //some function here that happens on touchendoutside
}

ontouchmove

Property-based event handler for the touchmove event.

Default Value:

null

Example

this.ontouchmove = (event) => {
 //some function here that happens on touchmove
}

ontouchstart

Property-based event handler for the touchstart event.

Default Value:

null

Example

this.ontouchstart = (event) => {
 //some function here that happens on touchstart
}

onwheel

Property-based event handler for the wheel event.

Default Value:

null

Example

this.onwheel = (event) => {
 //some function here that happens on wheel
}

parent Container

The display object container that contains this display object.

Default Value:

undefined

pivot ObservablePoint

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

Since:

4.0.0

position ObservablePoint

The coordinate of the object relative to the local coordinates of the parent.

Since:

4.0.0

relativeGroupTransform Matrix readonly

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

renderable

Can this object be rendered, if false the object will not be drawn but the transform will still be updated.

rotation number

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

scale ObservablePoint

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

The default scale is (1, 1).

Since:

4.0.0

skew ObservablePoint

The skew factor for the object in radians.

Since:

4.0.0

sortableChildren boolean

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, so should be treated as a basic solution that is not performant compared to other solutions, such as PixiJS Layers

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.

Default Value:

false

sortDirty boolean

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

false

tabIndex number

Default Value:

TODO

Needs docs.

tint number

The tint applied to the sprite. This is a hex value.

A value of 0xFFFFFF will remove any tint effect.

Default Value:

0xFFFFFF

visible

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

width number

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

worldTransform readonly

Current transform of the object based on world (parent) factors.

x number

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

y number

The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y

Methods

mixin (source) void static

ts:350

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

Name	Type	Description
`source`	Dict<any>	The source of properties and methods to mix in.

addChild (…children) Container

ts:597

Adds one or more children to the container.

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

Name	Type	Description
`children`	Container	The Container(s) to add to the container

Returns:

Type	Description
Container	The first child that was added.

addChildAt (child, index) Container

ts:141

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown. If the child is already in this container, it will be moved to the specified index.

Name	Type	Description
`child`	Container	The child to add.
`index`	number	The absolute index where the child will be positioned at the end of the operation.

Returns:

Type	Description
Container	The child that was added.

addEventListener (type, listener, options)

ts:681

Unlike on or addListener which are methods from EventEmitter, addEventListener seeks to be compatible with the DOM's addEventListener with support for options.

Name	Type	Attributes	Description
`type`	string		The type of event to listen to.
`listener`	EventListenerOrEventListenerObject		The listener callback or object.
`options`	AddListenerOptions	<optional>	Listener options, used for capture phase.

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

destroy (options) void

ts:1319

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

Name	Type	Attributes	Default	Description
`options`	DestroyOptions		false	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 children with textures e.g. Sprites. If options.children is set to true it should destroy the texture of the child sprite
`options.textureSource`	boolean	<optional>	false	Only used for children with textures e.g. Sprites. If options.children is set to true it should destroy the texture source of the child sprite
`options.context`	boolean	<optional>	false	Only used for children with graphicsContexts e.g. Graphics. If options.children is set to true it should destroy the context of the child graphics

disableRenderGroup () void

ts:794

This will disable the render group for this container.

dispatchEvent (e) boolean

ts:772

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.

Name	Type	Description
`e`	Event	The event to dispatch.

Returns:

Type	Description
boolean	Whether the preventDefault() method was not invoked.

Example

// Reuse a click event!
button.dispatchEvent(clickEvent);

enableRenderGroup () void

ts:770

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.

eventMode (value)

ts:601

Enable interaction events for the Container. Touch, pointer and mouse. There are 5 types of interaction settings:

'none': Ignores all interaction events, even on its children.
'passive': (default) Does not emit events and ignores all 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 interaction = true in v7
'dynamic': Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving

Name	Type	Description
`value`

Since:

7.2.0

Example

 import { Sprite } from 'pixi.js';

 const sprite = new Sprite(texture);
 sprite.eventMode = 'static';
 sprite.on('tap', (event) => {
     // Handle event
 });

filterArea () Rectangle

ts:185

The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.

Also works as an interaction mask.

Returns:

Type	Description
Rectangle

filters () readonly

ts:138

Sets the filters for the displayObject. IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.

Returns:

Type	Description
readonly

getBounds (skipUpdate, bounds) Bounds

ts:111

Calculates and returns the (world) bounds of the display object as a Rectangle.

Name	Type	Attributes	Description
`skipUpdate`	boolean	<optional>	Setting to `true` will stop the transforms of the scene graph from being updated. This means the calculation returned MAY be out of date BUT will give you a nice performance boost.
`bounds`	Bounds	<optional>	Optional bounds to store the result of the bounds calculation.

Returns:

Type	Description
Bounds	The minimum axis-aligned rectangle in world space that fits around this object.

getChildAt (index) U

ts:90

Returns the child at the specified index

Name	Type	Description
`index`	number	The index to get the child at

Returns:

Type	Description
U	The child at the given index, if any.

getChildByLabel (label, deep) Container

ts:66

Returns the first child in the container with the specified label.

Recursive searches are done in a pre-order traversal.

Name	Type	Attributes	Default	Description
`label`	string \| RegExp			Instance label.
`deep`	boolean	<optional>	false	Whether to search recursively

Returns:

Type	Description
Container	The child with the specified label.

getChildByName (name, deep) Container Deprecated`` : since 8.0.0

ts:53

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

See:

getChildByLabel

Returns:

Type	Description
Container	The child with the specified name.

getChildIndex (child) number

ts:123

Returns the index position of a child Container instance

Name	Type	Description
`child`	ContainerChild	The Container instance to identify

Returns:

Type	Description
number	The index position of the child container to identify

getChildrenByLabel (label, deep, out) Array<Container>

ts:103

Returns all children in the container with the specified label.

Name	Type	Attributes	Default	Description
`label`	string \| RegExp			Instance label.
`deep`	boolean	<optional>	false	Whether to search recursively
`out`	Array<Container>	<optional>	[]	The array to store matching children in.

Returns:

Type	Description
Array<Container>	An array of children with the specified label.

getGlobalPosition (point, skipUpdate) Point

ts:16

Returns the global position of the container.

Name	Type	Default	Description
`point`	Point		The optional point to write the global value to.
`skipUpdate`	boolean	false	Should we skip the update transform.

Returns:

Type	Description
Point	The updated point.

getLocalBounds () Bounds

ts:73

Retrieves the local bounds of the container as a Bounds object.

Returns:

Type	Description
Bounds	The bounding area.

getSize (out) Size

ts:1024

Retrieves the size of the container as a Size object. This is faster than get the width and height separately.

Name	Type	Attributes	Description
`out`	Size	<optional>	Optional object to store the size in.

Returns:

Type	Description
Size	The size of the container.

interactive (value)

ts:585

Enable interaction events for the Container. Touch, pointer and mouse

Name	Type	Description
`value`	boolean

isInteractive () boolean

ts:631

Determines if the container is interactive or not

Since:

7.2.0

Returns:

Type	Description
boolean	Whether the container is interactive or not

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

mask () unknown

ts:90

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. In PixiJS a regular mask must be a Graphics or a {@link Sprite} object. This allows for much faster masking in canvas as it utilities shape clipping. Furthermore, 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. To remove a mask, set this property to null.

For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.

Returns:

Type	Description
unknown

Example

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

 const graphics = new Graphics();
 graphics.beginFill(0xFF3300);
 graphics.drawRect(50, 250, 100, 100);
 graphics.endFill();

 const sprite = new Sprite(texture);
 sprite.mask = graphics;

onRender () () => void

ts:15

This callback is used when the container is rendered. This is where you should add your custom logic that is needed to be run every frame.

In v7 many users used updateTransform for this, however the way v8 renders objects is different and "updateTransform" is no longer called every frame

Returns:

Type	Description
() => void

Example

const container = new Container();
container.onRender = () => {
   container.rotation += 0.01;
};

removeChild (…children) Container

ts:677

Removes one or more children from the container.

Name	Type	Description
`children`	Container	The Container(s) to remove

Returns:

Type	Description
Container	The first child that was removed.

removeChildAt (index) U

ts:77

Removes a child from the specified index position.

Name	Type	Description
`index`	number	The index to get the child from

Returns:

Type	Description
U	The child that was removed.

removeChildren (beginIndex, endIndex) ContainerChild[]

ts:28

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

Name	Type	Attributes	Default	Description
`beginIndex`	number		0	The beginning position.
`endIndex`	number	<optional>		The ending position. Default value is size of the container.

Returns:

Type	Description
ContainerChild[]	List of removed children

removeEventListener (type, listener, options)

ts:748

Unlike off or removeListener which are methods from EventEmitter, removeEventListener seeks to be compatible with the DOM's removeEventListener with support for options.

Name	Type	Attributes	Description
`type`	string		The type of event the listener is bound to.
`listener`	EventListenerOrEventListenerObject		The listener callback or object.
`options`	RemoveListenerOptions	<optional>	The original listener options. This is required to deregister a capture phase listener.

removeFromParent ()

ts:239

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

reparentChild (…child) U[0]

ts:248

Reparent the child to this container, keeping the same worldTransform.

Name	Type	Description
`child`	U	The child to reparent

Returns:

Type	Description
U[0]	The first child that was reparented.

reparentChildAt (child, index) U

ts:266

Reparent the child to this container at the specified index, keeping the same worldTransform.

Name	Type	Description
`child`	U	The child to reparent
`index`	number	The index to reparent the child to

Returns:

Type	Description
U

setChildIndex (child, index) void

ts:106

Changes the position of an existing child in the container container

Name	Type	Description
`child`	ContainerChild	The child Container instance for which you want to change the index number
`index`	number	The resulting index number for the child container

setFromMatrix (matrix) void

ts:1129

Updates the local transform using the given matrix.

Name	Type	Description
`matrix`	Matrix	The matrix to use for updating the transform.

setSize (value, height)

ts:1046

Sets the size of the container to the specified width and height. This is faster than setting the width and height separately.

Name	Type	Attributes	Description
`value`	number \| Optional<Size, "height">		This can be either a number or a Size object.
`height`	number	<optional>	The height to set. Defaults to the value of `width` if not provided.

toGlobal (position, point, skipUpdate) P

ts:38

Calculates the global position of the container.

Name	Type	Attributes	Default	Description
`position`	PointData			The world origin to calculate from.
`point`	P	<optional>		A Point object in which to store the value, optional (otherwise will create a new Point).
`skipUpdate`	boolean		false	Should we skip the update transform.

Returns:

Type	Description
P	A point object representing the position of this object.

toLocal (position, from, point, skipUpdate) P

ts:64

Calculates the local position of the container relative to another point.

Name	Type	Attributes	Description
`position`	PointData		The world origin to calculate from.
`from`	Container	<optional>	The Container to calculate the global position from.
`point`	P	<optional>	A Point object in which to store the value, optional (otherwise will create a new Point).
`skipUpdate`	boolean	<optional>	Should we skip the update transform

Returns:

Type	Description
P	A point object representing the position of this object

updateLocalTransform () void

ts:1138

Updates the local transform.

updateTransform (opts) this

ts:1093

Updates the transform properties of the container (accepts partial values).

Name	Type	Description
`opts`	object	The options for updating the transform.
`opts.x`	number	The x position of the container.
`opts.y`	number	The y position of the container.
`opts.scaleX`	number	The scale factor on the x-axis.
`opts.scaleY`	number	The scale factor on the y-axis.
`opts.rotation`	number	The rotation of the container, in radians.
`opts.skewX`	number	The skew factor on the x-axis.
`opts.skewY`	number	The skew factor on the y-axis.
`opts.pivotX`	number	The x coordinate of the pivot point.
`opts.pivotY`	number	The y coordinate of the pivot point.

Returns:

Type	Description
this

zIndex (value)

ts:42

The zIndex of the container.

Setting this value, will automatically set the parent to be sortable. Children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.

Name	Type	Description
`value`	number

See:

sortableChildren

sortChildren (a, b) number

ts:79

Sorts children by zIndex.

Name	Type	Description
`a`	Container
`b`	Container

Returns:

Type	Description
number

Events

click

ts:120

Fired when a pointer device button (usually a mouse left-button) is pressed and released on the container. Container's eventMode property must be set to static or 'dynamic' to fire event.

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

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.