# Class: Container (/jsdoc/pixi-vn/index/classes/Container) Defined in: [src/canvas/components/Container.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L42) This class is a extension of the [PIXI.Container class](https://pixijs.com/8.x/examples/basic/container), it has the same properties and methods, but it has the ability to be saved and loaded by the Pixi’VN library. Example [#example] ```typescript const container = new Container(); canvas.add(container); const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); for (let i = 0; i < 25; i++) { const bunny = new Sprite(texture); bunny.x = (i % 5) * 40; bunny.y = Math.floor(i / 5) * 40; container.addChild(bunny); } ``` Extends [#extends] * `Container`\<`C`> Extended by [#extended-by] * [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) Type Parameters [#type-parameters] C [#c] `C` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) = [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Memory [#memory] `Memory` *extends* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory) = [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory) Implements [#implements] * [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`Memory`> * [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension) * [`AnchorExtension`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension) * [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension) Constructors [#constructors] Constructor [#constructor] \> **new Container**\<`C`, `Memory`>(`options?`): `Container`\<`C`, `Memory`> Defined in: [src/canvas/components/Container.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L53) Parameters [#parameters] options? [#options] [`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)\<`C`> Returns [#returns] `Container`\<`C`, `Memory`> Overrides [#overrides] `PixiContainer.constructor` Properties [#properties] \__devtoolIgnore? [#__devtoolignore] \> `optional` **\_\_devtoolIgnore?**: `boolean` Defined in: node\_modules/@pixi/devtools/global.d.ts:35 Inherited from [#inherited-from] `PixiContainer.__devtoolIgnore` *** \__devtoolIgnoreChildren? [#__devtoolignorechildren] \> `optional` **\_\_devtoolIgnoreChildren?**: `string` Defined in: node\_modules/@pixi/devtools/global.d.ts:36 Inherited from [#inherited-from-1] `PixiContainer.__devtoolIgnoreChildren` *** \__devtoolLocked? [#__devtoollocked] \> `optional` **\_\_devtoolLocked?**: `boolean` Defined in: node\_modules/@pixi/devtools/global.d.ts:37 Inherited from [#inherited-from-2] `PixiContainer.__devtoolLocked` *** \_cx [#_cx] \> **\_cx**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751 **`Internal`** The X-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale. Inherited from [#inherited-from-3] `PixiContainer._cx` *** \_cy [#_cy] \> **\_cy**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763 **`Internal`** The X-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale. Inherited from [#inherited-from-4] `PixiContainer._cy` *** \_pivot [#_pivot] \> **\_pivot**: `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734 **`Internal`** The pivot point of the container that it rotates around. Inherited from [#inherited-from-5] `PixiContainer._pivot` *** \_position [#_position] \> **\_position**: `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724 **`Internal`** The coordinate of the object relative to the local coordinates of the parent. Inherited from [#inherited-from-6] `PixiContainer._position` *** \_scale [#_scale] \> **\_scale**: `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729 **`Internal`** The scale factor of the object. Inherited from [#inherited-from-7] `PixiContainer._scale` *** \_skew [#_skew] \> **\_skew**: `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745 **`Internal`** The skew amount, on the x and y axis. Inherited from [#inherited-from-8] `PixiContainer._skew` *** \_sx [#_sx] \> **\_sx**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757 **`Internal`** The Y-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale. Inherited from [#inherited-from-9] `PixiContainer._sx` *** \_sy [#_sy] \> **\_sy**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769 **`Internal`** The Y-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale. Inherited from [#inherited-from-10] `PixiContainer._sy` *** \_zIndex [#_zindex] \> **\_zIndex**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60 **`Internal`** Inherited from [#inherited-from-11] `PixiContainer._zIndex` *** accessible? [#accessible] \> `optional` **accessible?**: `boolean` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31 Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set Default [#default] ```ts false ``` Example [#example-1] ```js const container = new Container(); container.accessible = true; ``` Inherited from [#inherited-from-12] `PixiContainer.accessible` *** accessibleChildren? [#accessiblechildren] \> `optional` **accessibleChildren?**: `boolean` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126 Setting to false will prevent any children inside this container to be accessible. Defaults to true. Default [#default-1] ```ts true ``` Example [#example-2] ```js const container = new Container(); container.accessible = true; container.accessibleChildren = false; // This will prevent any children from being accessible const sprite = new Sprite(texture); sprite.accessible = true; // This will not work since accessibleChildren is false ``` Inherited from [#inherited-from-13] `PixiContainer.accessibleChildren` *** accessibleHint? [#accessiblehint] \> `optional` **accessibleHint?**: `string` | `null` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56 Sets the aria-label attribute of the shadow div Default [#default-2] ```ts null ``` Advanced [#advanced] Example [#example-3] ```js const container = new Container(); container.accessible = true; container.accessibleHint = 'This is a container'; ``` Inherited from [#inherited-from-14] `PixiContainer.accessibleHint` *** accessiblePointerEvents? [#accessiblepointerevents] \> `optional` **accessiblePointerEvents?**: `PointerEvents` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100 Specify the pointer-events the accessible div will use Defaults to auto. Default [#default-3] ```ts 'auto' ``` Advanced [#advanced-1] Example [#example-4] ```js const container = new Container(); container.accessible = true; container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc. ``` Inherited from [#inherited-from-15] `PixiContainer.accessiblePointerEvents` *** accessibleText? [#accessibletext] \> `optional` **accessibleText?**: `string` | `null` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111 Sets the text content of the shadow Default [#default-4] ```ts null ``` Example [#example-5] ```js const container = new Container(); container.accessible = true; container.accessibleText = 'This is a container'; ``` Inherited from [#inherited-from-16] `PixiContainer.accessibleText` *** accessibleTitle? [#accessibletitle] \> `optional` **accessibleTitle?**: `string` | `null` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44 Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]' Default [#default-5] ```ts null ``` Example [#example-6] ```js const container = new Container(); container.accessible = true; container.accessibleTitle = 'My Container'; ``` Inherited from [#inherited-from-17] `PixiContainer.accessibleTitle` *** accessibleType? [#accessibletype] \> `optional` **accessibleType?**: keyof HTMLElementTagNameMap Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86 Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button. Default [#default-6] ```ts 'button' ``` Advanced [#advanced-2] Example [#example-7] ```js const container = new Container(); container.accessible = true; container.accessibleType = 'button'; // or 'link', 'checkbox', etc. ``` Inherited from [#inherited-from-18] `PixiContainer.accessibleType` *** allowChildren [#allowchildren] \> **allowChildren**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:10 **`Internal`** Inherited from [#inherited-from-19] `PixiContainer.allowChildren` *** boundsArea [#boundsarea] \> **boundsArea**: `Rectangle` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815 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. Example [#example-8] ```ts const container = new Container(); container.boundsArea = new Rectangle(0, 0, 500, 500); ``` Inherited from [#inherited-from-20] `PixiContainer.boundsArea` *** ~~cacheAsBitmap~~ [#cacheasbitmap] \> **cacheAsBitmap**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61 Legacy property for backwards compatibility with PixiJS v7 and below. Use `cacheAsTexture` instead. Deprecated [#deprecated] since 8.0.0 Inherited from [#inherited-from-21] `PixiContainer.cacheAsBitmap` *** cacheAsTexture [#cacheastexture] \> **cacheAsTexture**: (`val`) => `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45 Caches this container as a texture. This allows the container to be rendered as a single texture, which can improve performance for complex static containers. Parameters [#parameters-1] val [#val] `boolean` | `CacheAsTextureOptions` If true, enables caching with default options. If false, disables caching. Can also pass options object to configure caching behavior. Returns [#returns-1] `void` Example [#example-9] ```ts // Basic caching container.cacheAsTexture(true); // With custom options container.cacheAsTexture({ resolution: 2, antialias: true, }); // Disable caching container.cacheAsTexture(false); // Cache a complex UI const ui = new Container(); // Add multiple children... ui.cacheAsTexture(true); ui.updateCacheTexture(); // Update if contents change ``` See [#see] * [Container#updateCacheTexture](#updatecachetexture) For updating cached content * [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state Inherited from [#inherited-from-22] `PixiContainer.cacheAsTexture` *** children [#children] \> `readonly` **children**: `C`\[] Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639 The array of children of this container. Each child must be a Container or extend from it. The array is read-only, but its contents can be modified using Container methods. Example [#example-10] ```ts // Access children const firstChild = container.children[0]; const lastChild = container.children[container.children.length - 1]; ``` See [#see-1] * [Container#addChild](#addchild) For adding children * [Container#removeChild](#removechild) For removing children Inherited from [#inherited-from-23] `PixiContainer.children` *** cullable? [#cullable] \> `optional` **cullable?**: `boolean` Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69 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. Example [#example-11] ```ts const sprite = new Sprite(texture); // Enable culling sprite.cullable = true; // Force object to always render sprite.cullable = false; ``` Remarks [#remarks] * Does not affect transform updates * Applies to this object only * Children follow their own cullable setting Default [#default-7] ```ts false ``` Inherited from [#inherited-from-24] `PixiContainer.cullable` *** cullableChildren? [#cullablechildren] \> `optional` **cullableChildren?**: `boolean` Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92 Controls whether children of this container can be culled. When false, skips recursive culling checks for better performance. Example [#example-12] ```ts const container = new Container(); // Enable container culling container.cullable = true; // Disable child culling for performance container.cullableChildren = false; // Children will always render if container is visible container.addChild(sprite1, sprite2, sprite3); ``` Remarks [#remarks-1] * Improves performance for static scenes * Useful when children are always within container bounds * Parent culling still applies Default [#default-8] ```ts true ``` Inherited from [#inherited-from-25] `PixiContainer.cullableChildren` *** cullArea? [#cullarea] \> `optional` **cullArea?**: `Rectangle` Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49 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. Example [#example-13] ```ts const container = new Container(); // Define custom culling boundary container.cullArea = new Rectangle(0, 0, 800, 600); // Reset to use object bounds container.cullArea = null; ``` Remarks [#remarks-2] * Improves performance by avoiding bounds calculations * Useful for containers with many children * Set to null to use object bounds Default [#default-9] ```ts null ``` Inherited from [#inherited-from-26] `PixiContainer.cullArea` *** cursor? [#cursor] \> `optional` **cursor?**: `Cursor` | `string` & `object` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187 The cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL. Example [#example-14] ```ts // Common cursor types sprite.cursor = 'pointer'; // Hand cursor for clickable elements sprite.cursor = 'grab'; // Grab cursor for draggable elements sprite.cursor = 'crosshair'; // Precise cursor for selection sprite.cursor = 'not-allowed'; // Indicate disabled state // Direction cursors sprite.cursor = 'n-resize'; // North resize sprite.cursor = 'ew-resize'; // East-west resize sprite.cursor = 'nesw-resize'; // Northeast-southwest resize // Custom cursor with fallback sprite.cursor = 'url("custom.png"), auto'; sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset ``` Default [#default-10] ```ts undefined ``` See [#see-2] * EventSystem.cursorStyles For setting global cursor styles * [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation Inherited from [#inherited-from-27] `PixiContainer.cursor` *** depthOfChildModified [#depthofchildmodified] \> **depthOfChildModified**: () => `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74 **`Internal`** Returns [#returns-2] `void` Inherited from [#inherited-from-28] `PixiContainer.depthOfChildModified` *** destroyed [#destroyed] \> **destroyed**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719 Whether this object has been destroyed. If true, the object should no longer be used. After an object is destroyed, all of its functionality is disabled and references are removed. Example [#example-15] ```ts // Cleanup with destroy sprite.destroy(); console.log(sprite.destroyed); // true ``` Default [#default-11] ```ts false ``` See [#see-3] [Container#destroy](#destroy) For destroying objects Inherited from [#inherited-from-29] `PixiContainer.destroyed` *** effects? [#effects] \> `optional` **effects?**: `Effect`\[] Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183 todo Needs docs Advanced [#advanced-3] Inherited from [#inherited-from-30] `PixiContainer.effects` *** eventMode? [#eventmode] \> `optional` **eventMode?**: `EventMode` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225 Enable interaction events for the Container. Touch, pointer and mouse events are supported. Example [#example-16] ```ts const sprite = new Sprite(texture); // Enable standard interaction (like buttons) sprite.eventMode = 'static'; sprite.on('pointerdown', () => console.log('clicked!')); // Enable for moving objects sprite.eventMode = 'dynamic'; sprite.on('pointermove', () => updatePosition()); // Disable all interaction sprite.eventMode = 'none'; // Only allow child interactions sprite.eventMode = 'passive'; ``` Available modes: * `'none'`: Ignores all interaction events, even on its children. Best for pure visuals. * `'passive'`: **(default)** Does not emit events and ignores hit testing on itself and non-interactive children. Interactive children will still emit events. * `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7. * `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI. * `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects. Performance tips: * Use `'none'` for pure visual elements * Use `'passive'` for containers with some interactive children * Use `'static'` for standard UI elements * Use `'dynamic'` only when needed for moving/animated elements Since [#since] 7.2.0 Inherited from [#inherited-from-31] `PixiContainer.eventMode` *** filterArea? [#filterarea] \> `optional` **filterArea?**: `Rectangle` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178 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. Example [#example-17] ```ts // Set specific filter area container.filterArea = new Rectangle(0, 0, 100, 100); // Optimize filter region const screen = app.screen; container.filterArea = new Rectangle( screen.x, screen.y, screen.width, screen.height ); ``` See [#see-4] * [Container#filters](#filters) For applying filters * [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition Inherited from [#inherited-from-32] `PixiContainer.filterArea` *** globalDisplayStatus [#globaldisplaystatus] \> **globalDisplayStatus**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798 **`Internal`** Inherited from [#inherited-from-33] `PixiContainer.globalDisplayStatus` *** groupAlpha [#groupalpha] \> **groupAlpha**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780 **`Internal`** Inherited from [#inherited-from-34] `PixiContainer.groupAlpha` *** groupBlendMode [#groupblendmode] \> **groupBlendMode**: `BLEND_MODES` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788 **`Internal`** Inherited from [#inherited-from-35] `PixiContainer.groupBlendMode` *** groupColor [#groupcolor] \> **groupColor**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782 **`Internal`** Inherited from [#inherited-from-36] `PixiContainer.groupColor` *** groupColorAlpha [#groupcoloralpha] \> **groupColorAlpha**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784 **`Internal`** Inherited from [#inherited-from-37] `PixiContainer.groupColorAlpha` *** groupTransform [#grouptransform] \> `readonly` **groupTransform**: `Matrix` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705 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 Advanced [#advanced-4] Inherited from [#inherited-from-38] `PixiContainer.groupTransform` *** hitArea? [#hitarea] \> `optional` **hitArea?**: `IHitArea` | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297 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. Example [#example-18] ```ts import { Rectangle, Circle, Sprite } from 'pixi.js'; // Rectangular hit area const button = new Sprite(texture); button.eventMode = 'static'; button.hitArea = new Rectangle(0, 0, 100, 50); // Circular hit area const icon = new Sprite(texture); icon.eventMode = 'static'; icon.hitArea = new Circle(32, 32, 32); // Custom hit area with polygon const custom = new Sprite(texture); custom.eventMode = 'static'; custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]); // Custom hit testing logic sprite.hitArea = { contains(x: number, y: number) { // Custom collision detection return x >= 0 && x <= width && y >= 0 && y <= height; } }; ``` Remarks [#remarks-3] * Takes precedence over the container's bounds for hit testing * Can improve performance by simplifying collision checks * Useful for irregular shapes or precise click areas Inherited from [#inherited-from-39] `PixiContainer.hitArea` *** interactive? [#interactive] \> `optional` **interactive?**: `boolean` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238 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. See [#see-5] [Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode) Example [#example-19] ```ts // Enable interaction events sprite.interactive = true; // Sets eventMode = 'static' sprite.interactive = false; // Sets eventMode = 'passive' ``` Inherited from [#inherited-from-40] `PixiContainer.interactive` *** interactiveChildren? [#interactivechildren] \> `optional` **interactiveChildren?**: `boolean` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261 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. Default [#default-12] ```ts true ``` Example [#example-20] ```ts // Container with many visual-only children const container = new Container(); container.interactiveChildren = false; // Skip hit testing children // Menu with interactive buttons const menu = new Container(); menu.interactiveChildren = true; // Test all children menu.addChild(button1, button2, button3); // Performance optimization background.interactiveChildren = false; foreground.interactiveChildren = true; ``` Inherited from [#inherited-from-41] `PixiContainer.interactiveChildren` *** isCachedAsTexture [#iscachedastexture] \> `readonly` **isCachedAsTexture**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75 Whether this container is currently cached as a texture. Example [#example-21] ```ts // Check cache state if (container.isCachedAsTexture) { console.log('Container is cached'); } ``` See [#see-6] * [Container#cacheAsTexture](#cacheastexture) For enabling caching * [Container#updateCacheTexture](#updatecachetexture) For updating cache Inherited from [#inherited-from-42] `PixiContainer.isCachedAsTexture` *** isInteractive [#isinteractive] \> **isInteractive**: () => `boolean` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040 Determines if the container is interactive or not Returns [#returns-3] `boolean` Whether the container is interactive or not Since [#since-1] 7.2.0 Example [#example-22] ```ts 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 ``` Inherited from [#inherited-from-43] `PixiContainer.isInteractive` *** label [#label] \> **label**: `string` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8 The instance label of the object. Default [#default-13] ```ts null ``` Inherited from [#inherited-from-44] [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label) *** layerParentId [#layerparentid] \> **layerParentId**: `string` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829 **`Internal`** Inherited from [#inherited-from-45] `PixiContainer.layerParentId` *** localAlpha [#localalpha] \> **localAlpha**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778 **`Internal`** Inherited from [#inherited-from-46] `PixiContainer.localAlpha` *** localBlendMode [#localblendmode] \> **localBlendMode**: `BLEND_MODES` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786 **`Internal`** Inherited from [#inherited-from-47] `PixiContainer.localBlendMode` *** localColor [#localcolor] \> **localColor**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776 **`Internal`** Inherited from [#inherited-from-48] `PixiContainer.localColor` *** localDisplayStatus [#localdisplaystatus] \> **localDisplayStatus**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796 **`Internal`** This property holds three bits: culled, visible, renderable the third bit represents culling (0 = culled, 1 = not culled) 0b100 the second bit represents visibility (0 = not visible, 1 = visible) 0b010 the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001 Inherited from [#inherited-from-49] `PixiContainer.localDisplayStatus` *** localTransform [#localtransform] \> `readonly` **localTransform**: `Matrix` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688 Current transform of the object based on local factors: position, scale, other stuff. This matrix represents the local transformation without any parent influence. Example [#example-23] ```ts // Basic transform access const localMatrix = sprite.localTransform; console.log(localMatrix.toString()); ``` See [#see-7] * [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform * [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform Inherited from [#inherited-from-50] `PixiContainer.localTransform` *** mask [#mask] \> **mask**: `Mask` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254 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. \> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object. \> This allows for much faster masking in canvas as it uses shape clipping. \> 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. Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'` to read the alpha channel instead. See MaskOptions#channel for details. Example [#example-24] ```ts // Apply mask to sprite const sprite = new Sprite(texture); sprite.mask = graphics; // Remove mask sprite.mask = null; ``` See [#see-8] * Graphics For creating mask shapes * [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks * [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection Inherited from [#inherited-from-51] `PixiContainer.mask` *** ~~name~~ [#name] \> **name**: `string` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24 The instance name of the object. Deprecated [#deprecated-1] since 8.0.0 See [#see-9] Container#label Default [#default-14] ```ts null ``` Inherited from [#inherited-from-52] `PixiContainer.name` *** onclick? [#onclick] \> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317 Property-based event handler for the `click` event. Fired when a pointer device (mouse, touch, etc.) completes a click action. Example [#example-25] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('click', (event) => { console.log('Sprite clicked at:', event.global.x, event.global.y); }); // Using property-based handler sprite.onclick = (event) => { console.log('Clicked at:', event.global.x, event.global.y); }; ``` Default [#default-15] ```ts null ``` Inherited from [#inherited-from-53] `PixiContainer.onclick` *** onEventsHandlers [#oneventshandlers] \> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}` Defined in: [src/canvas/components/Container.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L93) ListenerExtension Implementation of [#implementation-of] [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`onEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#oneventshandlers) *** onglobalmousemove? [#onglobalmousemove] \> `optional` **onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430 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. Example [#example-26] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('globalmousemove', (event) => { // Move sprite to mouse position sprite.position.copyFrom(event.global); }); // Using property-based handler sprite.onglobalmousemove = (event) => { // Move sprite to mouse position sprite.position.copyFrom(event.global); }; ``` Default [#default-16] ```ts null ``` Remarks [#remarks-4] * Fires even when the mouse is outside the object's bounds * Useful for drag operations or global mouse tracking * Must have `eventMode` set appropriately to receive events * Part of the global move events family along with `globalpointermove` and `globaltouchmove` Inherited from [#inherited-from-54] `PixiContainer.onglobalmousemove` *** onglobalpointermove? [#onglobalpointermove] \> `optional` **onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637 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. Example [#example-27] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('globalpointermove', (event) => { sprite.position.set(event.global.x, event.global.y); }); // Using property-based handler sprite.onglobalpointermove = (event) => { sprite.position.set(event.global.x, event.global.y); }; ``` Default [#default-17] ```ts null ``` Remarks [#remarks-5] * Fires even when the mouse is outside the object's bounds * Useful for drag operations or global mouse tracking * Must have `eventMode` set appropriately to receive events * Part of the global move events family along with `globalpointermove` and `globaltouchmove` Inherited from [#inherited-from-55] `PixiContainer.onglobalpointermove` *** onglobaltouchmove? [#onglobaltouchmove] \> `optional` **onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947 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. Example [#example-28] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('globaltouchmove', (event) => { sprite.position.set(event.global.x, event.global.y); }); // Using property-based handler sprite.onglobaltouchmove = (event) => { sprite.position.set(event.global.x, event.global.y); }; ``` Default [#default-18] ```ts null ``` Remarks [#remarks-6] * Fires even when the touch is outside the object's bounds * Useful for drag operations or global touch tracking * Must have `eventMode` set appropriately to receive events * Part of the global move events family along with `globalpointermove` and `globalmousemove` Inherited from [#inherited-from-56] `PixiContainer.onglobaltouchmove` *** onmousedown? [#onmousedown] \> `optional` **onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339 Property-based event handler for the `mousedown` event. Fired when a mouse button is pressed while the pointer is over the object. Example [#example-29] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mousedown', (event) => { sprite.alpha = 0.5; // Visual feedback console.log('Mouse button:', event.button); }); // Using property-based handler sprite.onmousedown = (event) => { sprite.alpha = 0.5; // Visual feedback console.log('Mouse button:', event.button); }; ``` Default [#default-19] ```ts null ``` Inherited from [#inherited-from-57] `PixiContainer.onmousedown` *** onmouseenter? [#onmouseenter] \> `optional` **onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359 Property-based event handler for the `mouseenter` event. Fired when the mouse pointer enters the bounds of the object. Does not bubble. Example [#example-30] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseenter', (event) => { sprite.scale.set(1.1); }); // Using property-based handler sprite.onmouseenter = (event) => { sprite.scale.set(1.1); }; ``` Default [#default-20] ```ts null ``` Inherited from [#inherited-from-58] `PixiContainer.onmouseenter` *** onmouseleave? [#onmouseleave] \> `optional` **onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379 Property-based event handler for the `mouseleave` event. Fired when the pointer leaves the bounds of the display object. Does not bubble. Example [#example-31] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseleave', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onmouseleave = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-21] ```ts null ``` Inherited from [#inherited-from-59] `PixiContainer.onmouseleave` *** onmousemove? [#onmousemove] \> `optional` **onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401 Property-based event handler for the `mousemove` event. Fired when the pointer moves while over the display object. Example [#example-32] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mousemove', (event) => { // Get coordinates relative to the sprite console.log('Local:', event.getLocalPosition(sprite)); }); // Using property-based handler sprite.onmousemove = (event) => { // Get coordinates relative to the sprite console.log('Local:', event.getLocalPosition(sprite)); }; ``` Default [#default-22] ```ts null ``` Inherited from [#inherited-from-60] `PixiContainer.onmousemove` *** onmouseout? [#onmouseout] \> `optional` **onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450 Property-based event handler for the `mouseout` event. Fired when the pointer moves out of the bounds of the display object. Example [#example-33] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseout', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onmouseout = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-23] ```ts null ``` Inherited from [#inherited-from-61] `PixiContainer.onmouseout` *** onmouseover? [#onmouseover] \> `optional` **onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470 Property-based event handler for the `mouseover` event. Fired when the pointer moves onto the bounds of the display object. Example [#example-34] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseover', (event) => { sprite.scale.set(1.1); }); // Using property-based handler sprite.onmouseover = (event) => { sprite.scale.set(1.1); }; ``` Default [#default-24] ```ts null ``` Inherited from [#inherited-from-62] `PixiContainer.onmouseover` *** onmouseup? [#onmouseup] \> `optional` **onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490 Property-based event handler for the `mouseup` event. Fired when a mouse button is released over the display object. Example [#example-35] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseup', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onmouseup = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-25] ```ts null ``` Inherited from [#inherited-from-63] `PixiContainer.onmouseup` *** onmouseupoutside? [#onmouseupoutside] \> `optional` **onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511 Property-based event handler for the `mouseupoutside` event. Fired when a mouse button is released outside the display object that initially registered a mousedown. Example [#example-36] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('mouseupoutside', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onmouseupoutside = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-26] ```ts null ``` Inherited from [#inherited-from-64] `PixiContainer.onmouseupoutside` *** onpointercancel? [#onpointercancel] \> `optional` **onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531 Property-based event handler for the `pointercancel` event. Fired when a pointer device interaction is canceled or lost. Example [#example-37] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointercancel', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onpointercancel = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-27] ```ts null ``` Inherited from [#inherited-from-65] `PixiContainer.onpointercancel` *** onpointerdown? [#onpointerdown] \> `optional` **onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551 Property-based event handler for the `pointerdown` event. Fired when a pointer device button (mouse, touch, pen, etc.) is pressed. Example [#example-38] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerdown', (event) => { sprite.position.set(event.global.x, event.global.y); }); // Using property-based handler sprite.onpointerdown = (event) => { sprite.position.set(event.global.x, event.global.y); }; ``` Default [#default-28] ```ts null ``` Inherited from [#inherited-from-66] `PixiContainer.onpointerdown` *** onpointerenter? [#onpointerenter] \> `optional` **onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571 Property-based event handler for the `pointerenter` event. Fired when a pointer device enters the bounds of the display object. Does not bubble. Example [#example-39] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerenter', (event) => { sprite.scale.set(1.2); }); // Using property-based handler sprite.onpointerenter = (event) => { sprite.scale.set(1.2); }; ``` Default [#default-29] ```ts null ``` Inherited from [#inherited-from-67] `PixiContainer.onpointerenter` *** onpointerleave? [#onpointerleave] \> `optional` **onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590 Property-based event handler for the `pointerleave` event. Fired when a pointer device leaves the bounds of the display object. Does not bubble. Example [#example-40] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerleave', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onpointerleave = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-30] ```ts null ``` Inherited from [#inherited-from-68] `PixiContainer.onpointerleave` *** onpointermove? [#onpointermove] \> `optional` **onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610 Property-based event handler for the `pointermove` event. Fired when a pointer device moves while over the display object. Example [#example-41] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointermove', (event) => { sprite.position.set(event.global.x, event.global.y); }); // Using property-based handler sprite.onpointermove = (event) => { sprite.position.set(event.global.x, event.global.y); }; ``` Default [#default-31] ```ts null ``` Inherited from [#inherited-from-69] `PixiContainer.onpointermove` *** onpointerout? [#onpointerout] \> `optional` **onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657 Property-based event handler for the `pointerout` event. Fired when the pointer moves out of the bounds of the display object. Example [#example-42] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerout', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onpointerout = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-32] ```ts null ``` Inherited from [#inherited-from-70] `PixiContainer.onpointerout` *** onpointerover? [#onpointerover] \> `optional` **onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677 Property-based event handler for the `pointerover` event. Fired when the pointer moves over the bounds of the display object. Example [#example-43] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerover', (event) => { sprite.scale.set(1.2); }); // Using property-based handler sprite.onpointerover = (event) => { sprite.scale.set(1.2); }; ``` Default [#default-33] ```ts null ``` Inherited from [#inherited-from-71] `PixiContainer.onpointerover` *** onpointertap? [#onpointertap] \> `optional` **onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697 Property-based event handler for the `pointertap` event. Fired when a pointer device completes a tap action (e.g., touch or mouse click). Example [#example-44] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointertap', (event) => { console.log('Sprite tapped at:', event.global.x, event.global.y); }); // Using property-based handler sprite.onpointertap = (event) => { console.log('Sprite tapped at:', event.global.x, event.global.y); }; ``` Default [#default-34] ```ts null ``` Inherited from [#inherited-from-72] `PixiContainer.onpointertap` *** onpointerup? [#onpointerup] \> `optional` **onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717 Property-based event handler for the `pointerup` event. Fired when a pointer device button (mouse, touch, pen, etc.) is released. Example [#example-45] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerup', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onpointerup = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-35] ```ts null ``` Inherited from [#inherited-from-73] `PixiContainer.onpointerup` *** onpointerupoutside? [#onpointerupoutside] \> `optional` **onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738 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. Example [#example-46] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('pointerupoutside', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onpointerupoutside = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-36] ```ts null ``` Inherited from [#inherited-from-74] `PixiContainer.onpointerupoutside` *** onRender [#onrender] \> **onRender**: ((`renderer`) => `void`) | `null` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25 This callback is used when the container is rendered. It runs every frame during the render process, making it ideal for per-frame updates and animations. \> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different \> and "updateTransform" is no longer called every frame Example [#example-47] ```ts // Basic rotation animation const container = new Container(); container.onRender = () => { container.rotation += 0.01; }; // Cleanup when done container.onRender = null; // Removes callback ``` Param [#param] The renderer instance See [#see-10] Renderer For renderer capabilities Inherited from [#inherited-from-75] [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender) *** onrightclick? [#onrightclick] \> `optional` **onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758 Property-based event handler for the `rightclick` event. Fired when a right-click (context menu) action is performed on the object. Example [#example-48] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('rightclick', (event) => { console.log('Right-clicked at:', event.global.x, event.global.y); }); // Using property-based handler sprite.onrightclick = (event) => { console.log('Right-clicked at:', event.global.x, event.global.y); }; ``` Default [#default-37] ```ts null ``` Inherited from [#inherited-from-76] `PixiContainer.onrightclick` *** onrightdown? [#onrightdown] \> `optional` **onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778 Property-based event handler for the `rightdown` event. Fired when a right mouse button is pressed down over the display object. Example [#example-49] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('rightdown', (event) => { sprite.scale.set(0.9); }); // Using property-based handler sprite.onrightdown = (event) => { sprite.scale.set(0.9); }; ``` Default [#default-38] ```ts null ``` Inherited from [#inherited-from-77] `PixiContainer.onrightdown` *** onrightup? [#onrightup] \> `optional` **onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798 Property-based event handler for the `rightup` event. Fired when a right mouse button is released over the display object. Example [#example-50] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('rightup', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onrightup = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-39] ```ts null ``` Inherited from [#inherited-from-78] `PixiContainer.onrightup` *** onrightupoutside? [#onrightupoutside] \> `optional` **onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819 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. Example [#example-51] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('rightupoutside', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.onrightupoutside = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-40] ```ts null ``` Inherited from [#inherited-from-79] `PixiContainer.onrightupoutside` *** ontap? [#ontap] \> `optional` **ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839 Property-based event handler for the `tap` event. Fired when a tap action (touch) is completed on the object. Example [#example-52] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('tap', (event) => { console.log('Sprite tapped at:', event.global.x, event.global.y); }); // Using property-based handler sprite.ontap = (event) => { console.log('Sprite tapped at:', event.global.x, event.global.y); }; ``` Default [#default-41] ```ts null ``` Inherited from [#inherited-from-80] `PixiContainer.ontap` *** ontouchcancel? [#ontouchcancel] \> `optional` **ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859 Property-based event handler for the `touchcancel` event. Fired when a touch interaction is canceled, such as when the touch is interrupted. Example [#example-53] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('touchcancel', (event) => { console.log('Touch canceled at:', event.global.x, event.global.y); }); // Using property-based handler sprite.ontouchcancel = (event) => { console.log('Touch canceled at:', event.global.x, event.global.y); }; ``` Default [#default-42] ```ts null ``` Inherited from [#inherited-from-81] `PixiContainer.ontouchcancel` *** ontouchend? [#ontouchend] \> `optional` **ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879 Property-based event handler for the `touchend` event. Fired when a touch interaction ends, such as when the finger is lifted from the screen. Example [#example-54] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('touchend', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.ontouchend = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-43] ```ts null ``` Inherited from [#inherited-from-82] `PixiContainer.ontouchend` *** ontouchendoutside? [#ontouchendoutside] \> `optional` **ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900 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. Example [#example-55] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('touchendoutside', (event) => { sprite.scale.set(1.0); }); // Using property-based handler sprite.ontouchendoutside = (event) => { sprite.scale.set(1.0); }; ``` Default [#default-44] ```ts null ``` Inherited from [#inherited-from-83] `PixiContainer.ontouchendoutside` *** ontouchmove? [#ontouchmove] \> `optional` **ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920 Property-based event handler for the `touchmove` event. Fired when a touch interaction moves while over the display object. Example [#example-56] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('touchmove', (event) => { sprite.position.set(event.global.x, event.global.y); }); // Using property-based handler sprite.ontouchmove = (event) => { sprite.position.set(event.global.x, event.global.y); }; ``` Default [#default-45] ```ts null ``` Inherited from [#inherited-from-84] `PixiContainer.ontouchmove` *** ontouchstart? [#ontouchstart] \> `optional` **ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967 Property-based event handler for the `touchstart` event. Fired when a touch interaction starts, such as when a finger touches the screen. Example [#example-57] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('touchstart', (event) => { sprite.scale.set(0.9); }); // Using property-based handler sprite.ontouchstart = (event) => { sprite.scale.set(0.9); }; ``` Default [#default-46] ```ts null ``` Inherited from [#inherited-from-85] `PixiContainer.ontouchstart` *** onwheel? [#onwheel] \> `optional` **onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989 Property-based event handler for the `wheel` event. Fired when the mouse wheel is scrolled while over the display object. Example [#example-58] ```ts const sprite = new Sprite(texture); sprite.eventMode = 'static'; // Using emitter handler sprite.on('wheel', (event) => { sprite.scale.x += event.deltaY * 0.01; // Zoom in/out sprite.scale.y += event.deltaY * 0.01; // Zoom in/out }); // Using property-based handler sprite.onwheel = (event) => { sprite.scale.x += event.deltaY * 0.01; // Zoom in/out sprite.scale.y += event.deltaY * 0.01; // Zoom in/out }; ``` Default [#default-47] ```ts null ``` Inherited from [#inherited-from-86] `PixiContainer.onwheel` *** parent [#parent] \> `readonly` **parent**: `Container`\<`ContainerChild`> | `null` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659 The display object container that contains this display object. This represents the parent-child relationship in the display tree. Example [#example-59] ```ts // Basic parent access const parent = sprite.parent; // Walk up the tree let current = sprite; while (current.parent) { console.log('Level up:', current.parent.constructor.name); current = current.parent; } ``` See [#see-11] * [Container#addChild](#addchild) For adding to a parent * [Container#removeChild](#removechild) For removing from parent Inherited from [#inherited-from-87] `PixiContainer.parent` *** parentRenderLayer [#parentrenderlayer] \> `readonly` **parentRenderLayer**: `RenderLayer` | `null` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672 The RenderLayer this container belongs to, if any. If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene. Advanced [#advanced-5] Inherited from [#inherited-from-88] `PixiContainer.parentRenderLayer` *** pixivnId [#pixivnid] \> `readonly` **pixivnId**: `string` = `CANVAS_CONTAINER_ID` Defined in: [src/canvas/components/Container.ts:68](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L68) Get the id of the canvas element. This variable is used in the system to get the canvas element by id Implementation of [#implementation-of-1] [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`pixivnId`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#pixivnid) *** relativeGroupTransform [#relativegrouptransform] \> `readonly` **relativeGroupTransform**: `Matrix` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696 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 Advanced [#advanced-6] Inherited from [#inherited-from-89] `PixiContainer.relativeGroupTransform` *** renderPipeId [#renderpipeid] \> `readonly` **renderPipeId**: `string` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:800 **`Internal`** Inherited from [#inherited-from-90] `PixiContainer.renderPipeId` *** sortableChildren [#sortablechildren] \> **sortableChildren**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48 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. Example [#example-60] ```ts container.sortableChildren = true; ``` Default [#default-48] ```ts false ``` Inherited from [#inherited-from-91] [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren) *** sortChildren [#sortchildren] \> **sortChildren**: () => `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72 Sorts children by zIndex value. Only sorts if container is marked as dirty. Returns [#returns-4] `void` Example [#example-61] ```ts // Basic sorting particles.zIndex = 2; // Will mark as dirty container.sortChildren(); ``` See [#see-12] * [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting * [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order Inherited from [#inherited-from-92] `PixiContainer.sortChildren` *** sortDirty [#sortdirty] \> **sortDirty**: `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32 **`Internal`** 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 [#default-49] ```ts false @internal ``` Inherited from [#inherited-from-93] [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty) *** tabIndex? [#tabindex] \> `optional` **tabIndex?**: `number` Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72 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. Default [#default-50] ```ts 0 ``` Example [#example-62] ```js const container = new Container(); container.accessible = true; container.tabIndex = 0; const sprite = new Sprite(texture); sprite.accessible = true; sprite.tabIndex = 1; ``` Inherited from [#inherited-from-94] `PixiContainer.tabIndex` *** uid [#uid] \> `readonly` **uid**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610 **`Internal`** unique id for this container Inherited from [#inherited-from-95] `PixiContainer.uid` *** updateCacheTexture [#updatecachetexture] \> **updateCacheTexture**: () => `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55 Updates the cached texture of this container. This will flag the container's cached texture to be redrawn on the next render. Returns [#returns-5] `void` Example [#example-63] ```ts // Basic update after changes container.updateCacheTexture(); ``` Inherited from [#inherited-from-96] `PixiContainer.updateCacheTexture` *** updateTick [#updatetick] \> **updateTick**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674 **`Internal`** Inherited from [#inherited-from-97] `PixiContainer.updateTick` *** zIndex [#zindex] \> **zIndex**: `number` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24 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. Example [#example-64] ```ts // Add in any order container.addChild(character, background, foreground); // Adjust rendering order background.zIndex = 0; character.zIndex = 1; foreground.zIndex = 2; ``` See [#see-13] * [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting * [Container#sortChildren](#sortchildren) For manual sorting Default [#default-51] ```ts 0 ``` Inherited from [#inherited-from-98] [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex) *** prefixed [#prefixed] \> `static` **prefixed**: `string` | `boolean` Defined in: node\_modules/eventemitter3/index.d.ts:9 Inherited from [#inherited-from-99] `PixiContainer.prefixed` Accessors [#accessors] align [#align] Get Signature [#get-signature] \> **get** **align**(): `number` | `Partial`\<`PointData`> Defined in: [src/canvas/components/Container.ts:160](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L160) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Returns [#returns-6] `number` | `Partial`\<`PointData`> Set Signature [#set-signature] \> **set** **align**(`value`): `void` Defined in: [src/canvas/components/Container.ts:148](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L148) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Parameters [#parameters-2] value [#value] `number` | `Partial`\<`PointData`> Returns [#returns-7] `void` is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Implementation of [#implementation-of-2] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#align) *** alpha [#alpha] Get Signature [#get-signature-1] \> **get** **alpha**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246 The opacity of the object relative to its parent's opacity. Value ranges from 0 (fully transparent) to 1 (fully opaque). Example [#example-65] ```ts // Basic transparency sprite.alpha = 0.5; // 50% opacity // Inherited opacity container.alpha = 0.5; const child = new Sprite(texture); child.alpha = 0.5; container.addChild(child); // child's effective opacity is 0.25 (0.5 * 0.5) ``` Default [#default-52] ```ts 1 ``` See [#see-14] * [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility * [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control Returns [#returns-8] `number` Set Signature [#set-signature-1] \> **set** **alpha**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226 Parameters [#parameters-3] value [#value-1] `number` Returns [#returns-9] `void` Inherited from [#inherited-from-100] `PixiContainer.alpha` *** anchor [#anchor] Get Signature [#get-signature-2] \> **get** **anchor**(): `PointData` Defined in: [src/canvas/components/Container.ts:119](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L119) The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture) and passed to the constructor. The default is `(0,0)`, this means the imageContainer's origin is the top left. Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered. Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner. If you pass only single parameter, it will set both x and y to the same value as shown in the example below. Example [#example-66] ```ts import { ImageContainer } from '@drincs/pixi-vn'; const imageContainer = new ImageContainer(); imageContainer.anchor = 0.5; ``` Returns [#returns-10] `PointData` Set Signature [#set-signature-2] \> **set** **anchor**(`value`): `void` Defined in: [src/canvas/components/Container.ts:124](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L124) The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture) and passed to the constructor. The default is `(0,0)`, this means the imageContainer's origin is the top left. Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered. Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner. If you pass only single parameter, it will set both x and y to the same value as shown in the example below. Example [#example-67] ```ts import { ImageContainer } from '@drincs/pixi-vn'; const imageContainer = new ImageContainer(); imageContainer.anchor = 0.5; ``` Parameters [#parameters-4] value [#value-2] `number` | `PointData` Returns [#returns-11] `void` The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture) and passed to the constructor. The default is `(0,0)`, this means the imageContainer's origin is the top left. Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered. Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner. If you pass only single parameter, it will set both x and y to the same value as shown in the example below. Example [#example-68] ```ts import { ImageContainer } from '@drincs/pixi-vn'; const imageContainer = new ImageContainer(); imageContainer.anchor = 0.5; ``` Implementation of [#implementation-of-3] [`AnchorExtension`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension).[`anchor`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension#anchor) *** angle [#angle] Get Signature [#get-signature-3] \> **get** **angle**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008 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. Example [#example-69] ```ts // Basic angle rotation sprite.angle = 45; // 45 degrees // Rotate around center sprite.pivot.set(sprite.width / 2, sprite.height / 2); sprite.angle = 180; // Half rotation // Rotate around center with origin sprite.origin.set(sprite.width / 2, sprite.height / 2); sprite.angle = 180; // Half rotation // Reset rotation sprite.angle = 0; ``` Returns [#returns-12] `number` Set Signature [#set-signature-3] \> **set** **angle**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009 Parameters [#parameters-5] value [#value-3] `number` Returns [#returns-13] `void` Inherited from [#inherited-from-101] `PixiContainer.angle` *** blendMode [#blendmode] Get Signature [#get-signature-4] \> **get** **blendMode**(): `BLEND_MODES` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289 The blend mode to be applied to the sprite. Controls how pixels are blended when rendering. Setting to 'normal' will reset to default blending. \> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export. Example [#example-70] ```ts // Basic blend modes sprite.blendMode = 'add'; // Additive blending sprite.blendMode = 'multiply'; // Multiply colors sprite.blendMode = 'screen'; // Screen blend // Reset blend mode sprite.blendMode = 'normal'; // Normal blending ``` Default [#default-53] ```ts 'normal' ``` See [#see-15] * [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency * [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments Returns [#returns-14] `BLEND_MODES` Set Signature [#set-signature-4] \> **set** **blendMode**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269 Parameters [#parameters-6] value [#value-4] `BLEND_MODES` Returns [#returns-15] `void` Inherited from [#inherited-from-102] `PixiContainer.blendMode` *** filters [#filters] Get Signature [#get-signature-5] \> **get** **filters**(): readonly `Filter`\[] Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277 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. Example [#example-71] ```ts new Container({ filters: [new BlurFilter(2), new ColorMatrixFilter()], }); ``` See [#see-16] Filter For filter base class Returns [#returns-16] readonly `Filter`\[] Set Signature [#set-signature-5] \> **set** **filters**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276 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. Example [#example-72] ```ts // Add a single filter sprite.filters = new BlurFilter(2); // Apply multiple filters container.filters = [ new BlurFilter(2), new ColorMatrixFilter(), ]; // Remove filters sprite.filters = null; ``` See [#see-17] Filter For filter base class Parameters [#parameters-7] value [#value-5] `Filter` | `Filter`\[] | `null` | `undefined` Returns [#returns-17] `void` Inherited from [#inherited-from-103] `PixiContainer.filters` *** height [#height] Get Signature [#get-signature-6] \> **get** **height**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117 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 [Container#setSize](#setsize) as it is more optimized by not recalculating the local bounds twice. Example [#example-73] ```ts // Basic height setting container.height = 200; // Optimized height setting container.setSize(100, 200); ``` Returns [#returns-18] `number` Set Signature [#set-signature-6] \> **set** **height**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118 Parameters [#parameters-8] value [#value-6] `number` Returns [#returns-19] `void` Inherited from [#inherited-from-104] `PixiContainer.height` *** isRenderable [#isrenderable] Get Signature [#get-signature-7] \> **get** **isRenderable**(): `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329 Whether or not the object should be rendered. Advanced [#advanced-7] Returns [#returns-20] `boolean` Inherited from [#inherited-from-105] `PixiContainer.isRenderable` *** isRenderGroup [#isrendergroup] Get Signature [#get-signature-8] \> **get** **isRenderGroup**(): `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894 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 Advanced [#advanced-8] Returns [#returns-21] `boolean` Set Signature [#set-signature-7] \> **set** **isRenderGroup**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888 Parameters [#parameters-9] value [#value-7] `boolean` Returns [#returns-22] `void` Inherited from [#inherited-from-106] `PixiContainer.isRenderGroup` *** memory [#memory-1] Get Signature [#get-signature-9] \> **get** **memory**(): `Memory` Defined in: [src/canvas/components/Container.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L69) This method return the memory of the canvas element. Throws [#throws] when the method is not overridden in the subclass. Returns [#returns-23] `Memory` Implementation of [#implementation-of-4] [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory) *** origin [#origin] Get Signature [#get-signature-10] \> **get** **origin**(): `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087 **`Experimental`** The origin point around which the container rotates and scales without affecting its position. Unlike pivot, changing the origin will not move the container's position. Example [#example-74] ```ts // Rotate around center point container.origin.set(container.width / 2, container.height / 2); container.rotation = Math.PI; // Rotates around center // Reset origin container.origin.set(0, 0); ``` Returns [#returns-24] `ObservablePoint` Set Signature [#set-signature-8] \> **set** **origin**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088 Parameters [#parameters-10] value [#value-8] `number` | `PointData` Returns [#returns-25] `void` Inherited from [#inherited-from-107] `PixiContainer.origin` *** percentagePosition [#percentageposition] Get Signature [#get-signature-11] \> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`> Defined in: [src/canvas/components/Container.ts:231](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L231) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Returns [#returns-26] `number` | `Partial`\<`PointData`> Set Signature [#set-signature-9] \> **set** **percentagePosition**(`value`): `void` Defined in: [src/canvas/components/Container.ts:219](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L219) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Parameters [#parameters-11] value [#value-9] `number` | `Partial`\<`PointData`> Returns [#returns-27] `void` is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Implementation of [#implementation-of-5] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentageposition) *** percentageX [#percentagex] Get Signature [#get-signature-12] \> **get** **percentageX**(): `number` Defined in: [src/canvas/components/Container.ts:245](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L245) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Returns [#returns-28] `number` Set Signature [#set-signature-10] \> **set** **percentageX**(`_value`): `void` Defined in: [src/canvas/components/Container.ts:237](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L237) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Parameters [#parameters-12] \_value [#_value] `number` Returns [#returns-29] `void` is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Implementation of [#implementation-of-6] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagex) *** percentageY [#percentagey] Get Signature [#get-signature-13] \> **get** **percentageY**(): `number` Defined in: [src/canvas/components/Container.ts:256](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L256) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Returns [#returns-30] `number` Set Signature [#set-signature-11] \> **set** **percentageY**(`_value`): `void` Defined in: [src/canvas/components/Container.ts:248](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L248) is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Parameters [#parameters-13] \_value [#_value-1] `number` Returns [#returns-31] `void` is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and: * if you set percentagePosition to 0.5, the element will be in the center of the canvas. * If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas. * If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition. Implementation of [#implementation-of-7] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagey) *** pivot [#pivot] Get Signature [#get-signature-14] \> **get** **pivot**(): `ObservablePoint` Defined in: [src/canvas/components/Container.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L137) 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). Example [#example-75] ```ts // Rotate around center container.pivot.set(container.width / 2, container.height / 2); container.rotation = Math.PI; // Rotates around center ``` Since [#since-2] 4.0.0 Returns [#returns-32] `ObservablePoint` Set Signature [#set-signature-12] \> **set** **pivot**(`value`): `void` Defined in: [src/canvas/components/Container.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L140) 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). Example [#example-76] ```ts // Rotate around center container.pivot.set(container.width / 2, container.height / 2); container.rotation = Math.PI; // Rotates around center ``` Since [#since-3] 4.0.0 Parameters [#parameters-14] value [#value-10] `ObservablePoint` Returns [#returns-33] `void` Overrides [#overrides-1] `PixiContainer.pivot` *** position [#position] Get Signature [#get-signature-15] \> **get** **position**(): `ObservablePoint` Defined in: [src/canvas/components/Container.ts:323](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L323) The coordinate of the object relative to the local coordinates of the parent. Example [#example-77] ```ts // Basic position setting container.position.set(100, 200); container.position.set(100); // Sets both x and y to 100 // Using point data container.position = { x: 50, y: 75 }; ``` Since [#since-4] 4.0.0 Returns [#returns-34] `ObservablePoint` Set Signature [#set-signature-13] \> **set** **position**(`value`): `void` Defined in: [src/canvas/components/Container.ts:326](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L326) The coordinate of the object relative to the local coordinates of the parent. Example [#example-78] ```ts // Basic position setting container.position.set(100, 200); container.position.set(100); // Sets both x and y to 100 // Using point data container.position = { x: 50, y: 75 }; ``` Since [#since-5] 4.0.0 Parameters [#parameters-15] value [#value-11] `ObservablePoint` Returns [#returns-35] `void` Overrides [#overrides-2] `PixiContainer.position` *** positionInfo [#positioninfo] Get Signature [#get-signature-16] \> **get** **positionInfo**(): `object` Defined in: [src/canvas/components/Container.ts:267](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L267) Returns [#returns-36] `object` type [#type] \> **type**: `"pixel"` | `"percentage"` | `"align"` x [#x] \> **x**: `number` y [#y] \> **y**: `number` Set Signature [#set-signature-14] \> **set** **positionInfo**(`value`): `void` Defined in: [src/canvas/components/Container.ts:277](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L277) Parameters [#parameters-16] value [#value-12] type? [#type-1] `"pixel"` | `"percentage"` | `"align"` x [#x-1] `number` y [#y-1] `number` Returns [#returns-37] `void` Implementation of [#implementation-of-8] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionInfo`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positioninfo) *** positionType [#positiontype] Get Signature [#get-signature-17] \> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"` Defined in: [src/canvas/components/Container.ts:259](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L259) Returns [#returns-38] `"pixel"` | `"percentage"` | `"align"` Implementation of [#implementation-of-9] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionType`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positiontype) *** renderable [#renderable] Get Signature [#get-signature-18] \> **get** **renderable**(): `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323 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. Example [#example-79] ```ts // Basic render control sprite.renderable = false; // Skip rendering sprite.renderable = true; // Enable rendering ``` Default [#default-54] ```ts true ``` See [#see-18] * [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates * [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency Returns [#returns-39] `boolean` Set Signature [#set-signature-15] \> **set** **renderable**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324 Parameters [#parameters-17] value [#value-13] `boolean` Returns [#returns-40] `void` Inherited from [#inherited-from-108] `PixiContainer.renderable` *** rotation [#rotation] Get Signature [#get-signature-19] \> **get** **rotation**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984 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. Example [#example-80] ```ts // Basic rotation container.rotation = Math.PI / 4; // 45 degrees // Convert from degrees const degrees = 45; container.rotation = degrees * Math.PI / 180; // Rotate around center container.pivot.set(container.width / 2, container.height / 2); container.rotation = Math.PI; // 180 degrees // Rotate around center with origin container.origin.set(container.width / 2, container.height / 2); container.rotation = Math.PI; // 180 degrees ``` Returns [#returns-41] `number` Set Signature [#set-signature-16] \> **set** **rotation**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985 Parameters [#parameters-18] value [#value-14] `number` Returns [#returns-42] `void` Inherited from [#inherited-from-109] `PixiContainer.rotation` *** scale [#scale] Get Signature [#get-signature-20] \> **get** **scale**(): `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071 The scale factors of this object along the local coordinate axes. The default scale is (1, 1). Example [#example-81] ```ts // Basic scaling container.scale.set(2, 2); // Scales to double size container.scale.set(2); // Scales uniformly to double size container.scale = 2; // Scales uniformly to double size // Scale to a specific width and height container.setSize(200, 100); // Sets width to 200 and height to 100 ``` Since [#since-6] 4.0.0 Returns [#returns-43] `ObservablePoint` Set Signature [#set-signature-17] \> **set** **scale**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072 Parameters [#parameters-19] value [#value-15] `string` | `number` | `PointData` Returns [#returns-44] `void` Inherited from [#inherited-from-110] `PixiContainer.scale` *** skew [#skew] Get Signature [#get-signature-21] \> **get** **skew**(): `ObservablePoint` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054 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. Example [#example-82] ```ts // Basic skewing container.skew.set(0.5, 0); // Skew horizontally container.skew.set(0, 0.5); // Skew vertically // Skew with point data container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew // Reset skew container.skew.set(0, 0); // Animate skew app.ticker.add(() => { // Create wave effect container.skew.x = Math.sin(Date.now() / 1000) * 0.3; }); // Combine with rotation container.rotation = Math.PI / 4; // 45 degrees container.skew.set(0.2, 0.2); // Skew the rotated object ``` Since [#since-7] 4.0.0 Default [#default-55] ```ts {x: 0, y: 0} ``` Returns [#returns-45] `ObservablePoint` Set Signature [#set-signature-18] \> **set** **skew**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055 Parameters [#parameters-20] value [#value-16] `PointData` Returns [#returns-46] `void` Inherited from [#inherited-from-111] `PixiContainer.skew` *** tint [#tint] Get Signature [#get-signature-22] \> **get** **tint**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268 The tint applied to the sprite. This can be any valid ColorSource. Example [#example-83] ```ts // Basic color tinting container.tint = 0xff0000; // Red tint container.tint = 'red'; // Same as above container.tint = '#00ff00'; // Green container.tint = 'rgb(0,0,255)'; // Blue // Remove tint container.tint = 0xffffff; // White = no tint container.tint = null; // Also removes tint ``` Default [#default-56] ```ts 0xFFFFFF ``` See [#see-19] * [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency * [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control Returns [#returns-47] `number` Set Signature [#set-signature-19] \> **set** **tint**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247 Parameters [#parameters-21] value [#value-17] `ColorSource` Returns [#returns-48] `void` Inherited from [#inherited-from-112] `PixiContainer.tint` *** visible [#visible] Get Signature [#get-signature-23] \> **get** **visible**(): `boolean` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303 The visibility of the object. If false the object will not be drawn, and the transform will not be updated. Example [#example-84] ```ts // Basic visibility toggle sprite.visible = false; // Hide sprite sprite.visible = true; // Show sprite ``` Default [#default-57] ```ts true ``` See [#see-20] * [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control * [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency Returns [#returns-49] `boolean` Set Signature [#set-signature-20] \> **set** **visible**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304 Parameters [#parameters-22] value [#value-18] `boolean` Returns [#returns-50] `void` Inherited from [#inherited-from-113] `PixiContainer.visible` *** width [#width] Get Signature [#get-signature-24] \> **get** **width**(): `number` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102 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 [Container#setSize](#setsize) as it is more optimized by not recalculating the local bounds twice. Example [#example-85] ```ts // Basic width setting container.width = 100; // Optimized width setting container.setSize(100, 100); ``` Returns [#returns-51] `number` Set Signature [#set-signature-21] \> **set** **width**(`value`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103 Parameters [#parameters-23] value [#value-19] `number` Returns [#returns-52] `void` Inherited from [#inherited-from-114] `PixiContainer.width` *** worldTransform [#worldtransform] Get Signature [#get-signature-25] \> **get** **worldTransform**(): `Matrix` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922 Current transform of the object based on world (parent) factors. This matrix represents the absolute transformation in the scene graph. Example [#example-86] ```ts // Get world position const worldPos = container.worldTransform; console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`); ``` See [#see-21] [Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform Returns [#returns-53] `Matrix` Inherited from [#inherited-from-115] `PixiContainer.worldTransform` *** x [#x-2] Get Signature [#get-signature-26] \> **get** **x**(): `number` Defined in: [src/canvas/components/Container.ts:331](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L331) The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x Example [#example-87] ```ts // Basic position container.x = 100; ``` Returns [#returns-54] `number` Set Signature [#set-signature-22] \> **set** **x**(`value`): `void` Defined in: [src/canvas/components/Container.ts:334](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L334) The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x Example [#example-88] ```ts // Basic position container.x = 100; ``` Parameters [#parameters-24] value [#value-20] `number` Returns [#returns-55] `void` Overrides [#overrides-3] `PixiContainer.x` *** xAlign [#xalign] Get Signature [#get-signature-27] \> **get** **xAlign**(): `number` Defined in: [src/canvas/components/Container.ts:188](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L188) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Returns [#returns-56] `number` Set Signature [#set-signature-23] \> **set** **xAlign**(`value`): `void` Defined in: [src/canvas/components/Container.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L180) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Parameters [#parameters-25] value [#value-21] `number` Returns [#returns-57] `void` is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Implementation of [#implementation-of-10] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#xalign) *** y [#y-2] Get Signature [#get-signature-28] \> **get** **y**(): `number` Defined in: [src/canvas/components/Container.ts:339](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L339) The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y Example [#example-89] ```ts // Basic position container.y = 200; ``` Returns [#returns-58] `number` Set Signature [#set-signature-24] \> **set** **y**(`value`): `void` Defined in: [src/canvas/components/Container.ts:342](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L342) The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y Example [#example-90] ```ts // Basic position container.y = 200; ``` Parameters [#parameters-26] value [#value-22] `number` Returns [#returns-59] `void` Overrides [#overrides-4] `PixiContainer.y` *** yAlign [#yalign] Get Signature [#get-signature-29] \> **get** **yAlign**(): `number` Defined in: [src/canvas/components/Container.ts:207](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L207) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Returns [#returns-60] `number` Set Signature [#set-signature-25] \> **set** **yAlign**(`value`): `void` Defined in: [src/canvas/components/Container.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L199) is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Parameters [#parameters-27] value [#value-23] `number` Returns [#returns-61] `void` is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas. For example: * if you set align to 0.5, the element will be in the center of the canvas. * if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas. * if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas. **Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment. Implementation of [#implementation-of-11] [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#yalign) Methods [#methods] \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive] \> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32 **`Internal`** Recursively calculates the global bounds for the container and its children. This method is used internally by getFastGlobalBounds to traverse the scene graph. Parameters [#parameters-28] factorRenderLayers [#factorrenderlayers] `boolean` A flag indicating whether to consider render layers in the calculation. bounds [#bounds] `Bounds` The bounds object to update with the calculated values. currentLayer [#currentlayer] `RenderLayer` The current render layer being processed. Returns [#returns-62] `void` Inherited from [#inherited-from-116] `PixiContainer._getGlobalBoundsRecursive` *** addChild() [#addchild] \> **addChild**\<`U`>(...`children`): `U`\[`0`] Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864 Adds one or more children to the container. The children will be rendered as part of this container's display list. Type Parameters [#type-parameters-1] U [#u] `U` *extends* `C`\[] Parameters [#parameters-29] children [#children-1] ...`U` The Container(s) to add to the container Returns [#returns-63] `U`\[`0`] The first child that was added Example [#example-91] ```ts // Add a single child container.addChild(sprite); // Add multiple children container.addChild(background, player, foreground); // Add with type checking const sprite = container.addChild(new Sprite(texture)); sprite.tint = 'red'; ``` See [#see-22] * [Container#removeChild](#removechild) For removing children * [Container#addChildAt](#addchildat) For adding at specific index Inherited from [#inherited-from-117] `PixiContainer.addChild` *** addChildAt() [#addchildat] \> **addChildAt**\<`U`>(`child`, `index`): `U` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161 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. When moving a child within the **same** container, `childAdded` and `added` events are **not** emitted because the parent-child relationship hasn't changed. Events only fire when a child is added from a different parent (or from no parent). Type Parameters [#type-parameters-2] U [#u-1] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-30] child [#child] `U` The child to add index [#index] `number` The index where the child will be placed Returns [#returns-64] `U` The child that was added Example [#example-92] ```ts // Add at specific index container.addChildAt(sprite, 0); // Add to front // Move existing child (no events emitted) const index = container.children.length - 1; container.addChildAt(existingChild, index); // Move to back // With error handling try { container.addChildAt(sprite, 1000); } catch (e) { console.warn('Index out of bounds'); } ``` Throws [#throws-1] If index is out of bounds See [#see-23] * [Container#addChild](#addchild) For adding to the end * [Container#setChildIndex](#setchildindex) For moving existing children Inherited from [#inherited-from-118] `PixiContainer.addChildAt` *** addEventListener() [#addeventlistener] Call Signature [#call-signature] \> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072 Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener` seeks to be compatible with the DOM's `addEventListener` with support for options. Type Parameters [#type-parameters-3] K [#k] `K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap Parameters [#parameters-31] type [#type-2] `K` The type of event to listen to. listener [#listener] (`e`) => `any` The listener callback or object. options? [#options-1] `AddListenerOptions` Listener options, used for capture phase. Returns [#returns-65] `void` Example [#example-93] ```ts // 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, }); ``` Inherited from [#inherited-from-119] `PixiContainer.addEventListener` Call Signature [#call-signature-1] \> **addEventListener**(`type`, `listener`, `options?`): `void` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073 Parameters [#parameters-32] type [#type-3] `string` listener [#listener-1] `EventListenerOrEventListenerObject` options? [#options-2] `AddListenerOptions` Returns [#returns-66] `void` Inherited from [#inherited-from-120] `PixiContainer.addEventListener` *** addListener() [#addlistener] \> **addListener**\<`T`>(`event`, `fn`, `context?`): `this` Defined in: node\_modules/eventemitter3/index.d.ts:45 Type Parameters [#type-parameters-4] T [#t] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-33] event [#event] `T` fn [#fn] (...`args`) => `void` context? [#context] `any` Returns [#returns-67] `this` Inherited from [#inherited-from-121] `PixiContainer.addListener` *** collectRenderables() [#collectrenderables] \> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21 **`Internal`** Collects all renderables from the container and its children, adding them to the instruction set. This method decides whether to use a simple or advanced collection method based on the container's properties. Parameters [#parameters-34] instructionSet [#instructionset] `InstructionSet` The set of instructions to which the renderables will be added. renderer [#renderer] `Renderer` The renderer responsible for rendering the scene. currentLayer [#currentlayer-1] `RenderLayer` The current render layer being processed. Returns [#returns-68] `void` Inherited from [#inherited-from-122] `PixiContainer.collectRenderables` *** collectRenderablesSimple() [#collectrenderablessimple] \> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:30 **`Internal`** Collects renderables using a simple method, suitable for containers marked as simple. This method iterates over the container's children and adds their renderables to the instruction set. Parameters [#parameters-35] instructionSet [#instructionset-1] `InstructionSet` The set of instructions to which the renderables will be added. renderer [#renderer-1] `Renderer` The renderer responsible for rendering the scene. currentLayer [#currentlayer-2] `RenderLayer` The current render layer being processed. Returns [#returns-69] `void` Inherited from [#inherited-from-123] `PixiContainer.collectRenderablesSimple` *** collectRenderablesWithEffects() [#collectrenderableswitheffects] \> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39 **`Internal`** Collects renderables using an advanced method, suitable for containers with complex processing needs. This method handles additional effects and transformations that may be applied to the renderables. Parameters [#parameters-36] instructionSet [#instructionset-2] `InstructionSet` The set of instructions to which the renderables will be added. renderer [#renderer-2] `Renderer` The renderer responsible for rendering the scene. currentLayer [#currentlayer-3] `RenderLayer` The current render layer being processed. Returns [#returns-70] `void` Inherited from [#inherited-from-124] `PixiContainer.collectRenderablesWithEffects` *** destroy() [#destroy] \> **destroy**(`options?`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1343 Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling `destroy`. Parameters [#parameters-37] options? [#options-3] `DestroyOptions` Options parameter. A boolean will act as if all options have been set to that value Returns [#returns-71] `void` Example [#example-94] ```ts container.destroy(); container.destroy(true); container.destroy({ children: true }); container.destroy({ children: true, texture: true, textureSource: true }); ``` Inherited from [#inherited-from-125] `PixiContainer.destroy` *** disableRenderGroup() [#disablerendergroup] \> **disableRenderGroup**(): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906 This will disable the render group for this container. Returns [#returns-72] `void` Advanced [#advanced-9] Inherited from [#inherited-from-126] `PixiContainer.disableRenderGroup` *** dispatchEvent() [#dispatchevent] \> **dispatchEvent**(`e`): `boolean` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094 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. Parameters [#parameters-38] e [#e] [`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent) The event to dispatch. Returns [#returns-73] `boolean` Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked. Example [#example-95] ```ts // Reuse a click event! button.dispatchEvent(clickEvent); ``` Inherited from [#inherited-from-127] `PixiContainer.dispatchEvent` *** emit() [#emit] \> **emit**\<`T`>(`event`, ...`args`): `boolean` Defined in: node\_modules/eventemitter3/index.d.ts:32 Calls each of the listeners registered for a given event. Type Parameters [#type-parameters-5] T [#t-1] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-39] event [#event-1] `T` args [#args] ...`ArgumentMap`\<`ContainerEvents`\<`C`> & `AnyEvent`>\[`Extract`\<`T`, keyof AnyEvent | keyof ContainerEvents\>] Returns [#returns-74] `boolean` Inherited from [#inherited-from-128] `PixiContainer.emit` *** enableRenderGroup() [#enablerendergroup] \> **enableRenderGroup**(): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901 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. Returns [#returns-75] `void` Advanced [#advanced-10] Inherited from [#inherited-from-129] `PixiContainer.enableRenderGroup` *** eventNames() [#eventnames] \> **eventNames**(): (keyof AnyEvent | keyof ContainerEvents\)\[] Defined in: node\_modules/eventemitter3/index.d.ts:15 Return an array listing the events for which the emitter has registered listeners. Returns [#returns-76] (keyof AnyEvent | keyof ContainerEvents\)\[] Inherited from [#inherited-from-130] `PixiContainer.eventNames` *** getBounds() [#getbounds] \> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88 Calculates and returns the (world) bounds of the display object as a Rectangle. Takes into account transforms and child bounds. Parameters [#parameters-40] skipUpdate? [#skipupdate] `boolean` 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-1] `Bounds` Optional bounds to store the result of the bounds calculation Returns [#returns-77] `Bounds` The minimum axis-aligned rectangle in world space that fits around this object Example [#example-96] ```ts // Basic bounds calculation const bounds = sprite.getBounds(); console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`); // Reuse bounds object for performance const recycleBounds = new Bounds(); sprite.getBounds(false, recycleBounds); // Skip update for performance const fastBounds = sprite.getBounds(true); ``` Remarks [#remarks-7] * Includes transform calculations * Updates scene graph by default * Can reuse bounds objects * Common in hit testing See [#see-24] * [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds * Bounds For bounds properties Inherited from [#inherited-from-131] `PixiContainer.getBounds` *** getChildAt() [#getchildat] \> **getChildAt**\<`U`>(`index`): `U` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85 Returns the child at the specified index. Type Parameters [#type-parameters-6] U [#u-2] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-41] index [#index-1] `number` The index to get the child from Returns [#returns-78] `U` The child at the given index Example [#example-97] ```ts // Get first child const first = container.getChildAt(0); // Type-safe access const sprite = container.getChildAt(1); // With error handling try { const child = container.getChildAt(10); } catch (e) { console.warn('Index out of bounds'); } ``` Throws [#throws-2] If index is out of bounds See [#see-25] * [Container#children](#children) For direct array access * [Container#getChildByLabel](#getchildbylabel) For name-based lookup Inherited from [#inherited-from-132] `PixiContainer.getChildAt` *** getChildByLabel() [#getchildbylabel] \> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53 Returns the first child in the container with the specified label. Recursive searches are done in a pre-order traversal. Parameters [#parameters-42] label [#label-1] `string` | `RegExp` Instance label to search for deep? [#deep] `boolean` Whether to search recursively through children Returns [#returns-79] `Container`\<`ContainerChild`> | `null` The first child with the specified label, or null if none found Example [#example-98] ```ts // Basic label search const child = container.getChildByLabel('player'); // Search with regular expression const enemy = container.getChildByLabel(/enemy-\d+/); // Deep search through children const deepChild = container.getChildByLabel('powerup', true); ``` See [#see-26] * [Container#getChildrenByLabel](#getchildrenbylabel) For finding all matches * [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels Inherited from [#inherited-from-133] `PixiContainer.getChildByLabel` *** ~~getChildByName()~~ [#getchildbyname] \> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32 Parameters [#parameters-43] label [#label-2] `string` | `RegExp` Instance name. deep? [#deep-1] `boolean` Whether to search recursively Returns [#returns-80] `Container`\<`ContainerChild`> | `null` The child with the specified name. Deprecated [#deprecated-2] since 8.0.0 See [#see-27] Container#getChildByLabel Inherited from [#inherited-from-134] `PixiContainer.getChildByName` *** getChildIndex() [#getchildindex] \> **getChildIndex**(`child`): `number` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130 Returns the index position of a child Container instance. Parameters [#parameters-44] child [#child-1] `C` The Container instance to identify Returns [#returns-81] `number` The index position of the child container Example [#example-99] ```ts // Basic index lookup const index = container.getChildIndex(sprite); console.log(`Sprite is at index ${index}`); // With error handling try { const index = container.getChildIndex(sprite); } catch (e) { console.warn('Child not found in container'); } ``` Throws [#throws-3] If child is not in this container See [#see-28] * [Container#setChildIndex](#setchildindex) For changing index * [Container#children](#children) For direct array access Inherited from [#inherited-from-135] `PixiContainer.getChildIndex` *** getChildrenByLabel() [#getchildrenbylabel] \> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[] Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74 Returns all children in the container with the specified label. Recursive searches are done in a pre-order traversal. Parameters [#parameters-45] label [#label-3] `string` | `RegExp` Instance label to search for deep? [#deep-2] `boolean` Whether to search recursively through children out? [#out] `Container`\<`ContainerChild`>\[] Optional array to store matching children in Returns [#returns-82] `Container`\<`ContainerChild`>\[] An array of children with the specified label Example [#example-100] ```ts // Basic label search const enemies = container.getChildrenByLabel('enemy'); // Search with regular expression const powerups = container.getChildrenByLabel(/powerup-\d+/); // Deep search with collection const buttons = []; container.getChildrenByLabel('button', true, buttons); ``` See [#see-29] * [Container#getChildByLabel](#getchildbylabel) For finding first match * [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels Inherited from [#inherited-from-136] `PixiContainer.getChildrenByLabel` *** getFastGlobalBounds() [#getfastglobalbounds] \> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23 Computes an approximate global bounding box for the container and its children. This method is optimized for speed by using axis-aligned bounding boxes (AABBs), and uses the last render results from when it updated the transforms. This function does not update them. which may result in slightly larger bounds but never smaller than the actual bounds. for accurate (but less performant) results use `container.getGlobalBounds` Parameters [#parameters-46] factorRenderLayers? [#factorrenderlayers-1] `boolean` A flag indicating whether to consider render layers in the calculation. bounds? [#bounds-2] `Bounds` The output bounds object to store the result. If not provided, a new one is created. Returns [#returns-83] `Bounds` The computed bounds. Advanced [#advanced-11] Inherited from [#inherited-from-137] `PixiContainer.getFastGlobalBounds` *** getGlobalAlpha() [#getglobalalpha] \> **getGlobalAlpha**(`skipUpdate?`): `number` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35 Returns the global (compound) alpha of the container within the scene. Parameters [#parameters-47] skipUpdate? [#skipupdate-1] `boolean` Performance optimization flag: * If false (default): Recalculates the entire alpha chain through parents for accuracy * If true: Uses cached worldAlpha from the last render pass for better performance Returns [#returns-84] `number` The resulting alpha value (between 0 and 1) Example [#example-101] ```ts // Accurate but slower - recalculates entire alpha chain const preciseAlpha = container.getGlobalAlpha(); // Faster but may be outdated - uses cached alpha const cachedAlpha = container.getGlobalAlpha(true); ``` Inherited from [#inherited-from-138] `PixiContainer.getGlobalAlpha` *** getGlobalPosition() [#getglobalposition] \> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36 Returns the global position of the container, taking into account the container hierarchy. Parameters [#parameters-48] point? [#point] `Point` The optional point to write the global value to skipUpdate? [#skipupdate-2] `boolean` Should we skip the update transform Returns [#returns-85] `Point` The updated point Example [#example-102] ```ts // Basic position check const globalPos = sprite.getGlobalPosition(); console.log(`Global: (${globalPos.x}, ${globalPos.y})`); // Reuse point object const point = new Point(); sprite.getGlobalPosition(point); // Skip transform update for performance const fastPos = container.getGlobalPosition(undefined, true); ``` See [#see-30] * [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points * [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space Inherited from [#inherited-from-139] `PixiContainer.getGlobalPosition` *** getGlobalTint() [#getglobaltint] \> **getGlobalTint**(`skipUpdate?`): `number` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72 Returns the global (compound) tint color of the container within the scene. Parameters [#parameters-49] skipUpdate? [#skipupdate-3] `boolean` Performance optimization flag: * If false (default): Recalculates the entire tint chain through parents for accuracy * If true: Uses cached worldColor from the last render pass for better performance Returns [#returns-86] `number` The resulting tint color as a 24-bit RGB number (0xRRGGBB) Example [#example-103] ```ts // Accurate but slower - recalculates entire tint chain const preciseTint = container.getGlobalTint(); // Faster but may be outdated - uses cached tint const cachedTint = container.getGlobalTint(true); ``` Inherited from [#inherited-from-140] `PixiContainer.getGlobalTint` *** getGlobalTransform() [#getglobaltransform] \> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56 Returns the global transform matrix of the container within the scene. Parameters [#parameters-50] matrix? [#matrix] `Matrix` Optional matrix to store the result. If not provided, a new Matrix will be created. skipUpdate? [#skipupdate-4] `boolean` Performance optimization flag: * If false (default): Recalculates the entire transform chain for accuracy * If true: Uses cached worldTransform from the last render pass for better performance Returns [#returns-87] `Matrix` The resulting transformation matrix (either the input matrix or a new one) Example [#example-104] ```ts // Accurate but slower - recalculates entire transform chain const preciseTransform = container.getGlobalTransform(); // Faster but may be outdated - uses cached transform const cachedTransform = container.getGlobalTransform(undefined, true); // Reuse existing matrix const existingMatrix = new Matrix(); container.getGlobalTransform(existingMatrix); ``` Inherited from [#inherited-from-141] `PixiContainer.getGlobalTransform` *** getLocalBounds() [#getlocalbounds] \> **getLocalBounds**(): `Bounds` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58 Retrieves the local bounds of the container as a Bounds object. Uses cached values when possible for better performance. Returns [#returns-88] `Bounds` The bounding area Example [#example-105] ```ts // Basic bounds check const bounds = container.getLocalBounds(); console.log(`Width: ${bounds.width}, Height: ${bounds.height}`); // subsequent calls will reuse the cached bounds const cachedBounds = container.getLocalBounds(); console.log(bounds === cachedBounds); // true ``` See [#see-31] * [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds * Bounds For bounds properties Inherited from [#inherited-from-142] `PixiContainer.getLocalBounds` *** getSize() [#getsize] \> **getSize**(`out?`): `Size` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136 Retrieves the size of the container as a \[Size]Size object. This is faster than get the width and height separately. Parameters [#parameters-51] out? [#out-1] `Size` Optional object to store the size in. Returns [#returns-89] `Size` The size of the container. Example [#example-106] ```ts // Basic size retrieval const size = container.getSize(); console.log(`Size: ${size.width}x${size.height}`); // Reuse existing size object const reuseSize = { width: 0, height: 0 }; container.getSize(reuseSize); ``` Inherited from [#inherited-from-143] `PixiContainer.getSize` *** importChildren() [#importchildren] \> `protected` **importChildren**(`value`): `Promise`\<`void`> Defined in: [src/canvas/components/Container.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L83) Parameters [#parameters-52] value [#value-24] `Memory` Returns [#returns-90] `Promise`\<`void`> *** listenerCount() [#listenercount] \> **listenerCount**(`event`): `number` Defined in: node\_modules/eventemitter3/index.d.ts:27 Return the number of listeners listening to a given event. Parameters [#parameters-53] event [#event-2] keyof AnyEvent | keyof ContainerEvents\ Returns [#returns-91] `number` Inherited from [#inherited-from-144] `PixiContainer.listenerCount` *** listeners() [#listeners] \> **listeners**\<`T`>(`event`): (...`args`) => `void`\[] Defined in: node\_modules/eventemitter3/index.d.ts:20 Return the listeners registered for a given event. Type Parameters [#type-parameters-7] T [#t-2] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-54] event [#event-3] `T` Returns [#returns-92] (...`args`) => `void`\[] Inherited from [#inherited-from-145] `PixiContainer.listeners` *** off() [#off] \> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this` Defined in: node\_modules/eventemitter3/index.d.ts:69 Type Parameters [#type-parameters-8] T [#t-3] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-55] event [#event-4] `T` fn? [#fn-1] (...`args`) => `void` context? [#context-1] `any` once? [#once] `boolean` Returns [#returns-93] `this` Inherited from [#inherited-from-146] `PixiContainer.off` *** on() [#on] \> **on**\<`T`>(`event`, `fn`, `context?`): `this` Defined in: [src/canvas/components/Container.ts:94](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L94) Add a listener for a given event. Type Parameters [#type-parameters-9] T [#t-4] `T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\ Parameters [#parameters-56] event [#event-5] `T` fn [#fn-2] (...`args`) => `void` context? [#context-2] `any` Returns [#returns-94] `this` Implementation of [#implementation-of-12] [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`on`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#on) Overrides [#overrides-5] `PixiContainer.on` *** once() [#once-1] \> **once**\<`T`>(`event`, `fn`, `context?`): `this` Defined in: node\_modules/eventemitter3/index.d.ts:54 Add a one-time listener for a given event. Type Parameters [#type-parameters-10] T [#t-5] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-57] event [#event-6] `T` fn [#fn-3] (...`args`) => `void` context? [#context-3] `any` Returns [#returns-95] `this` Inherited from [#inherited-from-147] `PixiContainer.once` *** reloadAnchor() [#reloadanchor] \> `protected` **reloadAnchor**(): `void` Defined in: [src/canvas/components/Container.ts:132](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L132) Returns [#returns-96] `void` *** reloadPosition() [#reloadposition] \> `protected` **reloadPosition**(): `void` Defined in: [src/canvas/components/Container.ts:286](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L286) Returns [#returns-97] `void` *** removeAllListeners() [#removealllisteners] \> **removeAllListeners**(`event?`): `this` Defined in: node\_modules/eventemitter3/index.d.ts:79 Remove all listeners, or those of the specified event. Parameters [#parameters-58] event? [#event-7] keyof AnyEvent | keyof ContainerEvents\ Returns [#returns-98] `this` Inherited from [#inherited-from-148] `PixiContainer.removeAllListeners` *** removeChild() [#removechild] \> **removeChild**\<`U`>(...`children`): `U`\[`0`] Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885 Removes one or more children from the container. When removing multiple children, events will be triggered for each child in sequence. Type Parameters [#type-parameters-11] U [#u-3] `U` *extends* `C`\[] Parameters [#parameters-59] children [#children-2] ...`U` The Container(s) to remove Returns [#returns-99] `U`\[`0`] The first child that was removed Example [#example-107] ```ts // Remove a single child const removed = container.removeChild(sprite); // Remove multiple children const bg = container.removeChild(background, player, userInterface); // Remove with type checking const sprite = container.removeChild(childSprite); sprite.texture = newTexture; ``` See [#see-32] * [Container#addChild](#addchild) For adding children * [Container#removeChildren](#removechildren) For removing multiple children Inherited from [#inherited-from-149] `PixiContainer.removeChild` *** removeChildAt() [#removechildat] \> **removeChildAt**\<`U`>(`index`): `U` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61 Removes a child from the specified index position. Type Parameters [#type-parameters-12] U [#u-4] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-60] index [#index-2] `number` The index to remove the child from Returns [#returns-100] `U` The child that was removed Example [#example-108] ```ts // Remove first child const removed = container.removeChildAt(0); // type safe access const sprite = container.removeChildAt(1); // With error handling try { const child = container.removeChildAt(10); } catch (e) { console.warn('Index out of bounds'); } ``` Throws [#throws-4] If index is out of bounds See [#see-33] * [Container#removeChild](#removechild) For removing specific children * [Container#removeChildren](#removechildren) For removing multiple children Inherited from [#inherited-from-150] `PixiContainer.removeChildAt` *** removeChildren() [#removechildren] \> **removeChildren**(`beginIndex?`, `endIndex?`): `C`\[] Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37 Removes all children from this container that are within the begin and end indexes. Parameters [#parameters-61] beginIndex? [#beginindex] `number` The beginning position endIndex? [#endindex] `number` The ending position. Default is container size Returns [#returns-101] `C`\[] List of removed children Example [#example-109] ```ts // Remove all children container.removeChildren(); // Remove first 3 children const removed = container.removeChildren(0, 3); console.log('Removed:', removed.length); // 3 // Remove children from index 2 onwards container.removeChildren(2); // Remove specific range const middle = container.removeChildren(1, 4); ``` Throws [#throws-5] If begin/end indexes are invalid See [#see-34] * [Container#addChild](#addchild) For adding children * [Container#removeChild](#removechild) For removing specific children Inherited from [#inherited-from-151] `PixiContainer.removeChildren` *** removeEventListener() [#removeeventlistener] Call Signature [#call-signature-2] \> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082 Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener` seeks to be compatible with the DOM's `removeEventListener` with support for options. Type Parameters [#type-parameters-13] K [#k-1] `K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap Parameters [#parameters-62] type [#type-4] `K` The type of event the listener is bound to. listener [#listener-2] (`e`) => `any` The listener callback or object. options? [#options-4] `RemoveListenerOptions` The original listener options. This is required to deregister a capture phase listener. Returns [#returns-102] `void` Inherited from [#inherited-from-152] `PixiContainer.removeEventListener` Call Signature [#call-signature-3] \> **removeEventListener**(`type`, `listener`, `options?`): `void` Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083 Parameters [#parameters-63] type [#type-5] `string` listener [#listener-3] `EventListenerOrEventListenerObject` options? [#options-5] `RemoveListenerOptions` Returns [#returns-103] `void` Inherited from [#inherited-from-153] `PixiContainer.removeEventListener` *** removeFromParent() [#removefromparent] \> **removeFromParent**(): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203 Remove the Container from its parent Container. If the Container has no parent, do nothing. Returns [#returns-104] `void` Example [#example-110] ```ts // Basic removal sprite.removeFromParent(); // With validation if (sprite.parent) { sprite.removeFromParent(); } ``` See [#see-35] * [Container#addChild](#addchild) For adding to a new parent * [Container#removeChild](#removechild) For parent removing children Inherited from [#inherited-from-154] `PixiContainer.removeFromParent` *** removeListener() [#removelistener] \> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this` Defined in: node\_modules/eventemitter3/index.d.ts:63 Remove the listeners of a given event. Type Parameters [#type-parameters-14] T [#t-6] `T` *extends* keyof AnyEvent | keyof ContainerEvents\ Parameters [#parameters-64] event [#event-8] `T` fn? [#fn-4] (...`args`) => `void` context? [#context-4] `any` once? [#once-2] `boolean` Returns [#returns-105] `this` Inherited from [#inherited-from-155] `PixiContainer.removeListener` *** reparentChild() [#reparentchild] \> **reparentChild**\<`U`>(...`child`): `U`\[`0`] Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224 Reparent a child or multiple children to this container while preserving their world transform. This ensures that the visual position and rotation of the children remain the same even when changing parents. Type Parameters [#type-parameters-15] U [#u-5] `U` *extends* `C`\[] Parameters [#parameters-65] child [#child-2] ...`U` The child or children to reparent Returns [#returns-106] `U`\[`0`] The first child that was reparented Example [#example-111] ```ts // Basic reparenting const sprite = new Sprite(texture); oldContainer.addChild(sprite); // Move to new parent, keeping visual position newContainer.reparentChild(sprite); // Reparent multiple children const batch = [sprite1, sprite2, sprite3]; newContainer.reparentChild(...batch); ``` See [#see-36] * [Container#reparentChildAt](#reparentchildat) For index-specific reparenting * [Container#addChild](#addchild) For simple parenting Inherited from [#inherited-from-156] `PixiContainer.reparentChild` *** reparentChildAt() [#reparentchildat] \> **reparentChildAt**\<`U`>(`child`, `index`): `U` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243 Reparent the child to this container at the specified index while preserving its world transform. This ensures that the visual position and rotation of the child remain the same even when changing parents. Type Parameters [#type-parameters-16] U [#u-6] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-66] child [#child-3] `U` The child to reparent index [#index-3] `number` The index to reparent the child to Returns [#returns-107] `U` The reparented child Example [#example-112] ```ts // Basic index-specific reparenting const sprite = new Sprite(texture); oldContainer.addChild(sprite); // Move to new parent at index 0 (front) newContainer.reparentChildAt(sprite, 0); ``` Throws [#throws-6] If index is out of bounds See [#see-37] * [Container#reparentChild](#reparentchild) For appending reparented children * [Container#addChildAt](#addchildat) For simple indexed parenting Inherited from [#inherited-from-157] `PixiContainer.reparentChildAt` *** replaceChild() [#replacechild] \> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249 Replace a child in the container with a new child. Copying the local transform from the old child to the new one. Type Parameters [#type-parameters-17] U [#u-7] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) T [#t-7] `T` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-67] oldChild [#oldchild] `U` The child to replace. newChild [#newchild] `T` The new child to add. Returns [#returns-108] `void` Inherited from [#inherited-from-158] `PixiContainer.replaceChild` *** setChildIndex() [#setchildindex] \> **setChildIndex**(`child`, `index`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108 Changes the position of an existing child in the container. Parameters [#parameters-68] child [#child-4] `C` The child Container instance to reposition index [#index-4] `number` The resulting index number for the child Returns [#returns-109] `void` Example [#example-113] ```ts // Basic index change container.setChildIndex(sprite, 0); // Move to front container.setChildIndex(sprite, container.children.length - 1); // Move to back // With error handling try { container.setChildIndex(sprite, 5); } catch (e) { console.warn('Invalid index or child not found'); } ``` Throws [#throws-7] If index is out of bounds Throws [#throws-8] If child is not in container See [#see-38] * [Container#getChildIndex](#getchildindex) For getting current index * [Container#swapChildren](#swapchildren) For swapping positions Inherited from [#inherited-from-159] `PixiContainer.setChildIndex` *** setFromMatrix() [#setfrommatrix] \> **setFromMatrix**(`matrix`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223 Updates the local transform properties by decomposing the given matrix. Extracts position, scale, rotation, and skew from a transformation matrix. Parameters [#parameters-69] matrix [#matrix-1] `Matrix` The matrix to use for updating the transform Returns [#returns-110] `void` Example [#example-114] ```ts // Basic matrix transform const matrix = new Matrix() .translate(100, 100) .rotate(Math.PI / 4) .scale(2, 2); container.setFromMatrix(matrix); // Copy transform from another container const source = new Container(); source.position.set(100, 100); source.rotation = Math.PI / 2; target.setFromMatrix(source.localTransform); // Reset transform container.setFromMatrix(Matrix.IDENTITY); ``` See [#see-39] * [Container#updateTransform](#updatetransform) For property-based updates * Matrix#decompose For matrix decomposition details Inherited from [#inherited-from-160] `PixiContainer.setFromMatrix` *** setMask() [#setmask] \> **setMask**(`options`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229 Used to set mask and control mask options on a display object. Allows for more detailed control over masking behavior compared to the mask property. Parameters [#parameters-70] options [#options-6] `Partial`\<`MaskOptionsAndMask`> Configuration options for the mask Returns [#returns-111] `void` Example [#example-115] ```ts import { Graphics, Sprite } from 'pixi.js'; // Create a circular mask const graphics = new Graphics() .beginFill(0xFF3300) .drawCircle(100, 100, 50) .endFill(); // Apply mask with options sprite.setMask({ mask: graphics, inverse: true, // Create a hole effect }); // Use the alpha channel for masking (useful for sprites with transparency) sprite.setMask({ mask: maskSprite, channel: 'alpha', }); // Clear existing mask sprite.setMask({ mask: null }); ``` See [#see-40] * [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking * MaskOptionsAndMask For full options API * MaskOptions#channel For channel selection Inherited from [#inherited-from-161] `PixiContainer.setMask` *** setMemory() [#setmemory] \> **setMemory**(`value`): `Promise`\<`void`> Defined in: [src/canvas/components/Container.ts:77](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/canvas/components/Container.ts#L77) This method set the memory of the canvas element. Parameters [#parameters-71] value [#value-25] `Memory` Returns [#returns-112] `Promise`\<`void`> Throws [#throws-9] when the method is not overridden in the subclass. Implementation of [#implementation-of-13] [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory) *** setSize() [#setsize] \> **setSize**(`value`, `height?`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151 Sets the size of the container to the specified width and height. This is more efficient than setting width and height separately as it only recalculates bounds once. Parameters [#parameters-72] value [#value-26] `number` | `Optional`\<`Size`, `"height"`> This can be either a number or a \[Size]Size object. height? [#height-1] `number` The height to set. Defaults to the value of `width` if not provided. Returns [#returns-113] `void` Example [#example-116] ```ts // Basic size setting container.setSize(100, 200); // Set uniform size container.setSize(100); // Sets both width and height to 100 ``` Inherited from [#inherited-from-162] `PixiContainer.setSize` *** swapChildren() [#swapchildren] \> **swapChildren**\<`U`>(`child`, `child2`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187 Swaps the position of 2 Containers within this container. Type Parameters [#type-parameters-18] U [#u-8] `U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) Parameters [#parameters-73] child [#child-5] `U` First container to swap child2 [#child2] `U` Second container to swap Returns [#returns-114] `void` Example [#example-117] ```ts // Basic swap container.swapChildren(sprite1, sprite2); // With error handling try { container.swapChildren(sprite1, sprite2); } catch (e) { console.warn('One or both children not found in container'); } ``` Remarks [#remarks-8] * Updates render groups * No effect if same child * Triggers container changes * Common in z-ordering Throws [#throws-10] If either child is not in container See [#see-41] * [Container#setChildIndex](#setchildindex) For direct index placement * [Container#getChildIndex](#getchildindex) For getting current positions Inherited from [#inherited-from-163] `PixiContainer.swapChildren` *** toGlobal() [#toglobal] \> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64 Calculates the global position of a point relative to this container. Takes into account the container hierarchy and transforms. Type Parameters [#type-parameters-19] P [#p] `P` *extends* `PointData` = `Point` Parameters [#parameters-74] position [#position-1] `PointData` The local point to convert point? [#point-1] `P` Optional point to store the result skipUpdate? [#skipupdate-5] `boolean` Whether to skip transform updates Returns [#returns-115] `P` The global position Example [#example-118] ```ts // Basic point conversion const localPoint = { x: 10, y: 20 }; const globalPoint = container.toGlobal(localPoint); // With point reuse const reusePoint = new Point(); container.toGlobal(localPoint, reusePoint); // Performance optimization const fastPoint = container.toGlobal( { x: 50, y: 50 }, undefined, true // Skip transform update ); ``` See [#see-42] * [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion * [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position Inherited from [#inherited-from-164] `PixiContainer.toGlobal` *** toLocal() [#tolocal] \> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P` Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100 Calculates the local position of the container relative to another point. Converts coordinates from any coordinate space to this container's local coordinate space. Type Parameters [#type-parameters-20] P [#p-1] `P` *extends* `PointData` = `Point` Parameters [#parameters-75] position [#position-2] `PointData` The world origin to calculate from from? [#from] `Container`\<`ContainerChild`> The Container to calculate the global position from point? [#point-2] `P` A Point object in which to store the value skipUpdate? [#skipupdate-6] `boolean` Should we skip the update transform Returns [#returns-116] `P` A point object representing the position in local space Example [#example-119] ```ts // Basic coordinate conversion const worldPoint = { x: 100, y: 100 }; const localPos = container.toLocal(worldPoint); // Convert from another container const fromSprite = new Sprite(texture); fromSprite.position.set(50, 50); const pointInSprite = { x: 10, y: 10 }; const localPoint = container.toLocal(pointInSprite, fromSprite); // With point reuse for performance const reusePoint = new Point(); container.toLocal(worldPoint, undefined, reusePoint); // Skip transform update for static objects const fastLocal = container.toLocal( worldPoint, undefined, undefined, true ); ``` See [#see-43] * [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion * [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position Inherited from [#inherited-from-165] `PixiContainer.toLocal` *** updateLocalTransform() [#updatelocaltransform] \> **updateLocalTransform**(): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225 Updates the local transform. Returns [#returns-117] `void` Inherited from [#inherited-from-166] `PixiContainer.updateLocalTransform` *** updateTransform() [#updatetransform] \> **updateTransform**(`opts`): `this` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195 Updates the transform properties of the container. Allows partial updates of transform properties for optimized manipulation. Parameters [#parameters-76] opts [#opts] `Partial`\<`UpdateTransformOptions`> Transform options to update Returns [#returns-118] `this` This container, for chaining Example [#example-120] ```ts // Basic transform update container.updateTransform({ x: 100, y: 200, rotation: Math.PI / 4 }); // Scale and rotate around center sprite.updateTransform({ pivotX: sprite.width / 2, pivotY: sprite.height / 2, scaleX: 2, scaleY: 2, rotation: Math.PI }); // Update position only button.updateTransform({ x: button.x + 10, // Move right y: button.y // Keep same y }); ``` See [#see-44] * [Container#setFromMatrix](#setfrommatrix) For matrix-based transforms * [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access Inherited from [#inherited-from-167] `PixiContainer.updateTransform` *** ~~mixin()~~ [#mixin] \> `static` **mixin**(`source`): `void` Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605 Mixes all enumerable properties and methods from a source object to Container. Parameters [#parameters-77] source [#source] `Dict`\<`any`> The source of properties and methods to mix in. Returns [#returns-119] `void` Deprecated [#deprecated-3] since 8.8.0 Inherited from [#inherited-from-168] `PixiContainer.mixin`