Container

Creates a PIXI.Container

A Container is the base component for all components that render to the screen. It can be used on its own, but components such as Sprite or Graphics will be composed of Containers (and will provide context for getContainer)

When child components are rendered inside, their coordinates become local to the parent Container.

Usage

<script>
  import { onMount } from 'svelte'
  import { Container, Text, onTick } from 'svelte-pixi'

  let instance
  let x = 200
  let y = 150
  let direction = -1

  // move container back and forth
  onTick((delta) =>{
    if (x <= 0) {
      direction = 1
    } else if (x >= 340) {
      direction = -1
    }

    x += 2 * direction * delta
  })

</script>

<Container bind:instance {x} {y}>
  <Text text="Hello" style={{ fill: 'white' }} />
  <Text text="World" y={60} style={{ fill: 'white' }} />
</Container>

Component API

Props

Name	Type	Default	Description
accessible	`boolean`	`false`	Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren	`boolean`	`true`	Setting to false will prevent any children inside this container to be accessible.
accessibleHint	`string`		Sets the aria-label attribute of the shadow div
accessiblePointerEvents	`string`	`'auto'`	Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	`string`		Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'
accessibleType	`string`	`'button'`	Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type.
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.
buttonMode	`boolean`		If enabled, the mouse cursor use the pointer behavior when hovered over the displayObject if it is interactive Setting this changes the 'cursor' property to 'pointer'.
cacheAsBitmap	`boolean`		Set this to true if you want this display object to be cached as a bitmap. This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. To remove simply set this property to false IMPORTANT GOTCHA - Make sure that all your textures are preloaded BEFORE setting this property to true as it will take a snapshot of what is currently there. If the textures have not loaded then they will not appear.
cacheAsBitmapMultisample	`PIXI.MSAA_QUALITY`		The number of samples to use for cacheAsBitmap. If set to null, the renderer's sample count is used. If cacheAsBitmap is set to true, this will re-render with the new number of samples.
cacheAsBitmapResolution	`number`		The resolution to use for cacheAsBitmap. By default this will use the renderer's resolution but can be overriden for performance. Lower values will reduce memory usage at the expense of render quality. A falsey value of null or 0 will default to the renderer's resolution. If cacheAsBitmap is set to true, this will re-render with the new resolution.
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.
cullArea	`PIXI.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.
cursor	`string`		This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.
filterArea	`PIXI.Rectangle`		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.
filters	`PIXI.Filter[]null`		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'.
height	`number`		The height of the Container, setting this will actually modify the scale to achieve the value set.
hitArea	`PIXI.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 displayObject's bounds.
instance	`PIXI.Container`		The PIXI.Container instance. Can be set or bound to.
interactive	`boolean`	`false`	Enable interaction events for the DisplayObject. Touch, pointer and mouse events will not be emitted unless interactive is set to true.
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
isMask	`boolean`		Does any other displayObject use this object as a mask?
isSprite	`boolean`		Used to fast check if a sprite is.. a sprite!
mask	`PIXI.ContainerPIXI.MaskDatanull`		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 PIXI.Graphics or a PIXI.Sprite object. This allows for much faster masking in canvas as it utilities shape clipping. 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. At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.
name	`string`		The instance name of the object.
pivot	`PointLike`		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	`PointLike`		The coordinate of the object relative to the local coordinates of the parent.
renderable	`boolean`		Can this object be rendered, if false the object will not be drawn but the updateTransform methods will still be called. Only affects recursive calls from parent. You can ask for bounds manually
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	`PointLike`		The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
skew	`PointLiek`		The skew factor for the object in radians.
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.
transform	`PIXI.Transform`		World transform and local transform of this object. This will become read-only later, please do not assign anything there unless you know what are you doing.
visible	`boolean`		The visibility of the object. If false the object will not be drawn, and the updateTransform function will not be called. Only affects recursive calls from parent. You can ask for bounds or call updateTransform manually.
width	`number`		The width of the Container, setting this will actually modify the scale to achieve the value set.
x	`number`		The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x
y	`number`		The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y
zIndex	`number`		The zIndex of the displayObject. If a container has the sortableChildren property set to true, 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.

Slots

Name	Props	Fallback
default

Events

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

Previous BitmapText

Next Graphics