PerspectiveMesh

Renders a PIXI.PerspectiveMesh.

PIXI.PerspectiveMesh description from PixiJS

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]{@link Container#localTransform} 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]{@link Container#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]{@link Container#position}	Translation. This is the position of the [pivot]{@link Container#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]{@link Container#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]{@link Container#pivot}.
[rotation]{@link Container#rotation}	Rotation. This will rotate the display object's projection by this angle (in radians).
[skew]{@link Container#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]{@link Container#angle}	Rotation. This is an alias for [rotation]{@link Container#rotation}, but in degrees.
[x]{@link Container#x}	Translation. This is an alias for position.x!
[y]{@link Container#y}	Translation. This is an alias for position.y!
[width]{@link Container#width}	Implemented in [Container]{@link 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]{@link Container#height}	Implemented in [Container]{@link 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

<script>
  // ported from https://pixijs.com/8.x/examples/mesh-and-shaders/perspective-mesh
  import { PerspectiveMesh, Container, getApp } from 'svelte-pixi'
  import { onMount } from 'svelte'
  import * as PIXI from 'pixi.js'

  const { app } = getApp()
  const texture = PIXI.Texture.from('/assets/eggHead.png')

  let meshX = 380
  let meshY = 220

  const initialCorners = [
    { x: 0, y: 0 },
    { x: texture.width, y: 0 },
    { x: texture.width, y: texture.height },
    { x: 0, y: texture.height }
  ]
  let corners = $state(initialCorners.map((p) => ({ ...p })))

  function handlePointerMove(e) {
    const mouseX = e.global.x
    const mouseY = e.global.y
    const angleY = -(mouseX - meshX) / 10;
    const angleX = -(mouseY - meshY) / 10;
    rotate3D(angleX, angleY, 300)
  }

  function rotate3D(angleX, angleY, perspective) {
    const radX = (angleX * Math.PI) / 180;
    const radY = (angleY * Math.PI) / 180;
    const cosX = Math.cos(radX);
    const sinX = Math.sin(radX);
    const cosY = Math.cos(radY);
    const sinY = Math.sin(radY);

    for (let i = 0; i < initialCorners.length; i++)
    {
      const src = initialCorners[i];
      const out = corners[i];
      const x = src.x - texture.width / 2;
      const y = src.y - texture.height / 2;
      let z = 0; // Assume initial z is 0 for this 2D plane

      // Rotate around Y axis
      const xY = cosY * x - sinY * z;

      z = sinY * x + cosY * z;

      // Rotate around X axis
      const yX = cosX * y - sinX * z;

      z = sinX * y + cosX * z;

      // Apply perspective projection
      const scale = perspective / (perspective - z);

      out.x = xY * scale + texture.width / 2;
      out.y = yX * scale + texture.height / 2;
    }

    corners = corners
  }
</script>

<PerspectiveMesh
  x={meshX}
  y={meshY}
  {texture}
  pivot={{ x: texture.width / 2, y: texture.height / 2}}
  x0={corners[0].x}
  y0={corners[0].y}
  x1={corners[1].x}
  y1={corners[1].y}
  x2={corners[2].x}
  y2={corners[2].y}
  x3={corners[3].x}
  y3={corners[3].y}
/>
<Container
  hitArea={app.screen}
  eventMode="static"
  onpointermove={handlePointerMove}
/>

<script>
  // ported from https://pixijs.com/8.x/examples/mesh-and-shaders/perspective-mesh
  import { PerspectiveMesh, Container, getApp } from 'svelte-pixi/svelte-4'
  import { onMount } from 'svelte'
  import * as PIXI from 'pixi.js'

  const { app } = getApp()
  const texture = PIXI.Texture.from('/assets/eggHead.png')

  let meshX = 380
  let meshY = 220

  const initialCorners = [
    { x: 0, y: 0 },
    { x: texture.width, y: 0 },
    { x: texture.width, y: texture.height },
    { x: 0, y: texture.height }
  ]
  let corners = initialCorners.map((p) => ({ ...p }))

  function handlePointerMove(e) {
    const mouseX = e.detail.global.x
    const mouseY = e.detail.global.y
    const angleY = -(mouseX - meshX) / 10;
    const angleX = -(mouseY - meshY) / 10;
    rotate3D(angleX, angleY, 300)
  }

  function rotate3D(angleX, angleY, perspective) {
    const radX = (angleX * Math.PI) / 180;
    const radY = (angleY * Math.PI) / 180;
    const cosX = Math.cos(radX);
    const sinX = Math.sin(radX);
    const cosY = Math.cos(radY);
    const sinY = Math.sin(radY);

    for (let i = 0; i < initialCorners.length; i++)
    {
      const src = initialCorners[i];
      const out = corners[i];
      const x = src.x - texture.width / 2;
      const y = src.y - texture.height / 2;
      let z = 0; // Assume initial z is 0 for this 2D plane

      // Rotate around Y axis
      const xY = cosY * x - sinY * z;

      z = sinY * x + cosY * z;

      // Rotate around X axis
      const yX = cosX * y - sinX * z;

      z = sinX * y + cosX * z;

      // Apply perspective projection
      const scale = perspective / (perspective - z);

      out.x = xY * scale + texture.width / 2;
      out.y = yX * scale + texture.height / 2;
    }

    corners = corners
  }
</script>

<PerspectiveMesh
  x={meshX}
  y={meshY}
  {texture}
  pivot={{ x: texture.width / 2, y: texture.height / 2}}
  x0={corners[0].x}
  y0={corners[0].y}
  x1={corners[1].x}
  y1={corners[1].y}
  x2={corners[2].x}
  y2={corners[2].y}
  x3={corners[3].x}
  y3={corners[3].y}
/>
<Container
  hitArea={app.screen}
  eventMode="static"
  on:pointermove={handlePointerMove}
/>

API

Svelte 5
Svelte 4 (deprecated)

Props

* denotes required

Name	Description
texture*	`PIXI.Texture<PIXI.TextureSource<any>>`
accessible	`boolean` Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren	`boolean` Setting to false will prevent any children inside this container to be accessible. Defaults to true.
accessibleHint	`nullstring` Sets the aria-label attribute of the shadow div
accessiblePointerEvents	`"visible""inherit""none""auto""visiblePainted""visibleFill""visibleStroke""painted""fill""stroke""all"` Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	`nullstring` Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
accessibleType	`"object""label""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""blockquote""body""br""button""canvas""caption""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""form""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""legend""li""link""main""map""mark""menu""meta""meter""nav""noscript""ol""optgroup""option""output""p""picture""pre""progress""q""rp""rt""ruby""s""samp""script""search""section""select""slot""small""source""span""strong""style""sub""summary""sup""table""tbody""td""template""textarea""tfoot""th""thead""time""title""tr""track""u""ul""var""video""wbr"` Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
alpha	`number`
angle	`number` 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.
boundsArea	`PIXI.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. [!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.
cacheAsBitmap	`boolean` Legacy property for backwards compatibility with PixiJS v7 and below. Use `cacheAsTexture` instead.
cacheAsTexture	`PIXI.CacheAsTextureOptionsboolean`
cullable	`boolean` 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.
cullableChildren	`boolean` Controls whether children of this container can be culled. When false, skips recursive culling checks for better performance.
cullArea	`PIXI.Rectangle` 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.
cursor	`"none""progress""auto""default""context-menu""help""pointer""wait""cell""crosshair""text""vertical-text""alias""copy""move""no-drop""not-allowed""e-resize""n-resize""ne-resize""nw-resize""s-resize""se-resize""sw-resize""w-resize""ns-resize""ew-resize""nesw-resize""col-resize""nwse-resize""row-resize""all-scroll""zoom-in""zoom-out""grab""grabbing"string & {}` The cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL.
effects	`PIXI.Effect[]` todo Needs docs
eventMode	`"none""auto""passive""static""dynamic"` Enable interaction events for the Container. Touch, pointer and mouse events are supported.
filterArea	`PIXI.Rectangle` 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.
filters	`readonly PIXI.Filter[]` 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.
height	`number` 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 {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
hitArea	`nullPIXI.IHitArea` 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.
instance	`T`
interactive	`boolean` 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.
interactiveChildren	`boolean` 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.
isRenderGroup	`boolean`
label	`string` The instance label of the object.
mask	`numberPIXI.Container<PIXI.ContainerChild>Partial<PIXI.MaskOptionsAndMask>`
name	`string` The instance name of the object.
onadded	`() => void` Called when the instance is added to its parent or stage
onclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `click` event. Fired when a pointer device (mouse, touch, etc.) completes a click action.
oncreate	`(instance: T) => void` Called on creation of the component. You can use this to do any setup on the instance directly
onglobalmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
onglobalpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
onglobaltouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
onmousedown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mousedown` event. Fired when a mouse button is pressed while the pointer is over the object.
onmouseenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseenter` event. Fired when the mouse pointer enters the bounds of the object. Does not bubble.
onmouseleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseleave` event. Fired when the pointer leaves the bounds of the display object. Does not bubble.
onmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mousemove` event. Fired when the pointer moves while over the display object.
onmouseout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseout` event. Fired when the pointer moves out of the bounds of the display object.
onmouseover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseover` event. Fired when the pointer moves onto the bounds of the display object.
onmouseup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseup` event. Fired when a mouse button is released over the display object.
onmouseupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseupoutside` event. Fired when a mouse button is released outside the display object that initially registered a mousedown.
onpointercancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointercancel` event. Fired when a pointer device interaction is canceled or lost.
onpointerdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerdown` event. Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.
onpointerenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerenter` event. Fired when a pointer device enters the bounds of the display object. Does not bubble.
onpointerleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerleave` event. Fired when a pointer device leaves the bounds of the display object. Does not bubble.
onpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointermove` event. Fired when a pointer device moves while over the display object.
onpointerout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerout` event. Fired when the pointer moves out of the bounds of the display object.
onpointerover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerover` event. Fired when the pointer moves over the bounds of the display object.
onpointertap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointertap` event. Fired when a pointer device completes a tap action (e.g., touch or mouse click).
onpointerup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerup` event. Fired when a pointer device button (mouse, touch, pen, etc.) is released.
onpointerupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
onremoved	`() => void` Called when the instance removed from its parent or stage
onrightclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightclick` event. Fired when a right-click (context menu) action is performed on the object.
onrightdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightdown` event. Fired when a right mouse button is pressed down over the display object.
onrightup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightup` event. Fired when a right mouse button is released over the display object.
onrightupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
ontap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `tap` event. Fired when a tap action (touch) is completed on the object.
ontouchcancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchcancel` event. Fired when a touch interaction is canceled, such as when the touch is interrupted.
ontouchend	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchend` event. Fired when a touch interaction ends, such as when the finger is lifted from the screen.
ontouchendoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` 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.
ontouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchmove` event. Fired when a touch interaction moves while over the display object.
ontouchstart	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchstart` event. Fired when a touch interaction starts, such as when a finger touches the screen.
pivot	`number[number, number]{ x: number; y: number }PIXI.Point` 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).
position	`number[number, number]{ x: number; y: number }PIXI.Point` The coordinate of the object relative to the local coordinates of the parent.
renderable	`boolean` 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.
rotation	`number` 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.
scale	`number[number, number]{ x: number; y: number }PIXI.Point` The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
shader	`nullSHADER` Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.
skew	`number[number, number]{ x: number; y: number }PIXI.Point` 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.
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 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.
state	`PIXI.State`
tabIndex	`number` 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.
verticesX	`number` Number of vertices along the X axis. More vertices allow for more detailed deformations.
verticesY	`number` Number of vertices along the Y axis. More vertices allow for more detailed deformations.
visible	`boolean` 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. [!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 {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
x	`number` The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x
x0	`number` The x-coordinate of the top-left corner
x1	`number` The x-coordinate of the top-right corner
x2	`number` The x-coordinate of the bottom-right corner
x3	`number` The x-coordinate of the bottom-left corner
y	`number` The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y
y0	`number` The y-coordinate of the top-left corner
y1	`number` The y-coordinate of the top-right corner
y2	`number` The y-coordinate of the bottom-right corner
y3	`number` The y-coordinate of the bottom-left corner
zIndex	`number` 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.

Snippets

Name	Type
children	`Snippet<[instance: T]>`

Props

Name	Description
instance	`PIXI.PerspectiveMesh` The PIXI.PerspectiveMesh instance. Can be set or bound to.
shader	`PIXI.Shader` Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.
state	`PIXI.State` Represents the WebGL state the Mesh required to render, excludes shader and geometry. E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
texture	`PIXI.Texture`
verticesX `10`	`number`
verticesY `10`	`number`
x0	`number`
x1	`number`
x2	`number`
x3	`number`
y0	`number`
y1	`number`
y2	`number`
y3	`number`

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	`{}`

Events

Name	Type	Detail
added	`forwarded`
click	`forwarded`
create	`forwarded`
globalmousemove	`forwarded`
globalpointermove	`forwarded`
globaltouchmove	`forwarded`
mousedown	`forwarded`
mousemove	`forwarded`
mouseout	`forwarded`
mouseover	`forwarded`
mouseup	`forwarded`
mouseupoutside	`forwarded`
pointercancel	`forwarded`
pointerdown	`forwarded`
pointermove	`forwarded`
pointerout	`forwarded`
pointerover	`forwarded`
pointertap	`forwarded`
pointerup	`forwarded`
pointerupoutside	`forwarded`
removed	`forwarded`
removedFrom	`forwarded`
rightclick	`forwarded`
rightdown	`forwarded`
rightup	`forwarded`
rightupoutside	`forwarded`
tap	`forwarded`
touchcancel	`forwarded`
touchend	`forwarded`
touchendoutside	`forwarded`
touchmove	`forwarded`
touchstart	`forwarded`