Defined in: src/canvas/interfaces/canvas-options.ts:17

Extends

Omit<CanvasTextOptions, "on">.AdditionalPositionsExtensionProps

Properties

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

false

Example

const container = new Container();
container.accessible = true;

Inherited from

AccessibleOptions.accessible

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

true

Example

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

AccessibleOptions.accessibleChildren

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

null

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';

Inherited from

AccessibleOptions.accessibleHint

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

'auto'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.

Inherited from

AccessibleOptions.accessiblePointerEvents

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

null

Example

const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';

Inherited from

AccessibleOptions.accessibleText

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

null

Example

const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';

Inherited from

AccessibleOptions.accessibleTitle

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

'button'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.

Inherited from

AccessibleOptions.accessibleType

align?

> optional align?: number | Partial<PointData>

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:13

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 field does not affect the alignment.

Inherited from

AdditionalPositionsExtensionProps.align

alpha?

> optional alpha?: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity. Value ranges from 0 (fully transparent) to 1 (fully opaque).

Example

new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque

Default

See

Container#visible For toggling visibility
Container#renderable For render control

Inherited from

ContainerOptions.alpha

anchor?

> optional anchor?: number | PointData

Defined in: node_modules/pixi.js/lib/scene/text/AbstractText.d.ts:136

The anchor point of the text that controls the origin point for positioning and rotation. Can be a number (same value for x/y) or a PointData object.

(0,0) is top-left
(0.5,0.5) is center
(1,1) is bottom-right

// Set anchor to center
const text = new Text({
    text: 'Hello Pixi!',
    anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
});
// Set anchor to top-left
const text2 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 0, y: 0 } // Top-left corner
});
// Set anchor to bottom-right
const text3 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 1, y: 1 } // Bottom-right corner
});

Default

{ x: 0, y: 0 }

Inherited from

TextOptions.anchor

angle?

> optional angle?: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:247

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

new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees

Inherited from

ContainerOptions.angle

autoGarbageCollect?

> optional autoGarbageCollect?: boolean

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

Inherited from

ViewContainerOptions.autoGarbageCollect

autoGenerateMipmaps?

> optional autoGenerateMipmaps?: boolean

Defined in: node_modules/pixi.js/lib/scene/text/Text.d.ts:68

Whether to generate mipmaps for the text texture. Improves rendering quality when the text is scaled down.

Default

undefined - Falls back to TextureSource.defaultOptions.autoGenerateMipmaps

Inherited from

CanvasTextOptions.autoGenerateMipmaps

blendMode?

> optional blendMode?: BLEND_MODES

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:206

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

// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend

Default

'normal'

See

Container#alpha For transparency
Container#tint For color adjustments

Inherited from

ContainerOptions.blendMode

boundsArea?

> optional boundsArea?: Rectangle

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:403

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

const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});

Inherited from

ContainerOptions.boundsArea

cacheAsTexture?

> optional cacheAsTexture?: (val) => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

Parameters

val

boolean | CacheAsTextureOptions

Returns

void

Inherited from

VideoSpriteMemory.cacheAsTexture

children?

> readonly optional children?: ContainerChild[]

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:265

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

new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});

See

Container#addChild For adding children
Container#removeChild For removing children

Inherited from

Omit.children

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

const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;

Remarks

Does not affect transform updates
Applies to this object only
Children follow their own cullable setting

Default

false

Inherited from

CullingMixinConstructor.cullable

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

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

Improves performance for static scenes
Useful when children are always within container bounds
Parent culling still applies

Default

true

Inherited from

CullingMixinConstructor.cullableChildren

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

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

Improves performance by avoiding bounds calculations
Useful for containers with many children
Set to null to use object bounds

Default

null

Inherited from

CullingMixinConstructor.cullArea

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

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

undefined

See

EventSystem.cursorStyles For setting global cursor styles
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor MDN Cursor Documentation

Inherited from

FederatedOptions.cursor

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

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

7.2.0

Inherited from

FederatedOptions.eventMode

filters?

> optional filters?: Filter | readonly Filter[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

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

new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});

See

Filter For filter base class

Inherited from

VideoSpriteMemory.filters

height?

> optional height?: number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

Example

new Container({ height: 100});

Default

Inherited from

VideoSpriteMemory.height

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

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

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

FederatedOptions.hitArea

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

Container.eventMode

Example

// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'

Inherited from

FederatedOptions.interactive

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

true

Example

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

FederatedOptions.interactiveChildren

isRenderGroup?

> optional isRenderGroup?: boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:188

See

Container#isRenderGroup

Inherited from

ContainerOptions.isRenderGroup

label?

> optional label?: string

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

Default

null

Inherited from

VideoSpriteMemory.label

mask?

> optional mask?: Mask

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

Example

// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory#mask)

***

### onclick?

> `optional` **onclick?**: [`FederatedEventHandler`](/jsdoc/pixi-vn/pixi-js/type-aliases/FederatedEventHandler)\<[`FederatedPointerEvent`](/jsdoc/pixi-vn/pixi-js/classes/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

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.onclick

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};

Default

null

Remarks

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

FederatedOptions.onglobalmousemove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Remarks

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

FederatedOptions.onglobalpointermove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Remarks

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

FederatedOptions.onglobaltouchmove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};

Default

null

Inherited from

FederatedOptions.onmousedown

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};

Default

null

Inherited from

FederatedOptions.onmouseenter

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onmouseleave

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};

Default

null

Inherited from

FederatedOptions.onmousemove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onmouseout

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};

Default

null

Inherited from

FederatedOptions.onmouseover

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onmouseup

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onmouseupoutside

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onpointercancel

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.onpointerdown

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};

Default

null

Inherited from

FederatedOptions.onpointerenter

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onpointerleave

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.onpointermove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onpointerout

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};

Default

null

Inherited from

FederatedOptions.onpointerover

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.onpointertap

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onpointerup

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onpointerupoutside

onRender?

optional 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

// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback

Param

The renderer instance

See

Renderer For renderer capabilities

Inherited from

OnRenderMixinConstructor.onRender

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.onrightclick

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};

Default

null

Inherited from

FederatedOptions.onrightdown

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onrightup

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.onrightupoutside

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.ontap

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.ontouchcancel

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.ontouchend

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};

Default

null

Inherited from

FederatedOptions.ontouchendoutside

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};

Default

null

Inherited from

FederatedOptions.ontouchmove

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};

Default

null

Inherited from

FederatedOptions.ontouchstart

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    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) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};

Default

null

Inherited from

FederatedOptions.onwheel

origin?

optional origin?: number | PointData

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales. Unlike pivot, changing origin will not move the container's position.

Example

new Container({ origin: new Point(100, 100) }); // Rotate around point (100,100)
new Container({ origin: 50 }); // Rotate around point (50, 50)
new Container({ origin: { x: 150, y: 150 } }); // Rotate around point (150, 150)

Inherited from

ContainerOptions.origin

parent?

readonly optional parent?: Container<ContainerChild>

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object. This represents the parent-child relationship in the display tree.

See

Container#addChild For adding to a parent
Container#removeChild For removing from parent

Inherited from

ContainerOptions.parent

percentagePosition?

optional percentagePosition?: number | Partial<PointData>

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:43

is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the PixiContainer.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 field does affect the percentagePosition.

Inherited from

AdditionalPositionsExtensionProps.percentagePosition

percentageX?

optional percentageX?: number

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:53

is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the PixiContainer.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 field does affect the percentagePosition.

Inherited from

AdditionalPositionsExtensionProps.percentageX

percentageY?

optional percentageY?: number

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:63

is a way to set the position of the element in the canvas calculated in percentage. For example, if you set the PixiContainer.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 field does affect the percentagePosition.

Inherited from

AdditionalPositionsExtensionProps.percentageY

pivot?

optional pivot?: number | PointData

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:323

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

new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)

Inherited from

ContainerOptions.pivot

position?

optional position?: PointData

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:343

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

Example

new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)

Inherited from

ContainerOptions.position

renderable?

optional renderable?: boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:286

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

new Container({ renderable: false }); // Will not be drawn, but transforms will update

Default

true

See

Container#visible For skipping transform updates
Container#alpha For transparency

Inherited from

ContainerOptions.renderable

resolution?

optional resolution?: number

Defined in: node_modules/pixi.js/lib/scene/text/AbstractText.d.ts:175

The resolution/device pixel ratio for rendering. Higher values result in sharper text at the cost of performance. Set to null for auto-resolution based on device.

Example

const text = new Text({
    text: 'Hello Pixi!',
    resolution: 2 // High DPI for sharper text
});
const autoResText = new Text({
    text: 'Auto Resolution',
    resolution: null // Use device's pixel ratio
});

Default

null

Inherited from

TextOptions.resolution

rotation?

optional rotation?: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:298

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

new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees

Inherited from

ContainerOptions.rotation

roundPixels?

optional roundPixels?: boolean

Defined in: node_modules/pixi.js/lib/scene/text/AbstractText.d.ts:225

Whether to round the x/y position to whole pixels. Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.

Example

const text = new Text({
    text: 'Rounded Text',
    roundPixels: true // Rounds position to whole pixels
});
@default false

#### Inherited from

[`TextOptions`](/jsdoc/pixi-vn/pixi-js/interfaces/TextOptions).[`roundPixels`](/jsdoc/pixi-vn/pixi-js/interfaces/TextOptions#roundpixels)

***

### scale?

&gt; `optional` **scale?**: `number` \| [`PointData`](/jsdoc/pixi-vn/pixi-js/interfaces/PointData)

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

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

The default scale is (1, 1).

#### Example

```ts
new Container({ scale: new Point(2, 2) }); // Scale by 2x
new Container({ scale: 0.5 }); // Scale by 0.5x
new Container({ scale: { x: 1.5, y: 1.5 } }); // Scale by 1.5x

Inherited from

ContainerOptions.scale

setMask?

> optional setMask?: (options) => void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

Parameters

options

Partial<MaskOptionsAndMask>

Returns

void

Inherited from

VideoSpriteMemory.setMask

skew?

> optional skew?: PointData

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:354

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

new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y

Default

{ x: 0, y: 0 }

Inherited from

ContainerOptions.skew

sortableChildren?

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

container.sortableChildren = true;

Default

false

Inherited from

VideoSpriteMemory.sortableChildren

sortDirty?

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

false
@internal

Inherited from

VideoSpriteMemory.sortDirty

style?

> optional style?: TextStyle | TextStyleOptions

Defined in: node_modules/pixi.js/lib/scene/text/AbstractText.d.ts:213

The style configuration for the text. Can be a TextStyle instance or a configuration object. Supports canvas text styles, HTML text styles, and bitmap text styles.

Example

const text = new Text({
    text: 'Styled Text',
    style: {
        fontSize: 24,
        fill: 0xff1010, // Red color
        fontFamily: 'Arial',
        align: 'center', // Center alignment
        stroke: { color: '#4a1850', width: 5 }, // Purple stroke
        dropShadow: {
            color: '#000000', // Black shadow
            blur: 4, // Shadow blur
            distance: 6 // Shadow distance
        }
    }
});
const htmlText = new HTMLText({
    text: 'HTML Styled Text',
    style: {
        fontSize: '20px',
        fill: 'blue',
        fontFamily: 'Verdana',
    }
});
const bitmapText = new BitmapText({
    text: 'Bitmap Styled Text',
    style: {
        fontName: 'Arial',
        fontSize: 32,
    }
})

#### Inherited from

`Omit.style`

***

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

```ts
0

Example

const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;

Inherited from

AccessibleOptions.tabIndex

text?

optional text?: TextString

Defined in: node_modules/pixi.js/lib/scene/text/AbstractText.d.ts:157

The text content to display. Use '\n' for line breaks. Accepts strings, numbers, or objects with toString() method.

Example

const text = new Text({
    text: 'Hello Pixi!',
});
const multilineText = new Text({
    text: 'Line 1\nLine 2\nLine 3',
});
const numberText = new Text({
    text: 12345, // Will be converted to '12345'
});
const objectText = new Text({
    text: { toString: () =&gt; 'Object Text' }, // Custom toString
});

Default

''

Inherited from

Omit.text

textureStyle?

optional textureStyle?: TextureStyleOptions | TextureStyle

Defined in: node_modules/pixi.js/lib/scene/text/Text.d.ts:62

Optional texture style to use for the text texture. This allows fine control over how the text is rendered to a texture before being displayed.

The texture style can affect:

Scale mode (nearest/linear)
Resolution
Format (rgb/rgba)
Alpha handling

Example

const text = new Text({
    text: 'Crisp Text',
    textureStyle: {
        scaleMode: 'nearest', // Pixel-perfect scaling
    }
});

Advanced

Inherited from

Omit.textureStyle

tint?

optional tint?: ColorSource

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

Example

new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint

Default

0xFFFFFF

See

Container#alpha For transparency
Container#visible For visibility control

Inherited from

Omit.tint

visible?

optional visible?: boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

Example

new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update

Default

true

See

Container#renderable For render-only control
Container#alpha For transparency

Inherited from

ContainerOptions.visible

width?

optional width?: number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

Example

new Container({ width: 100});

Default

Inherited from

VideoSpriteMemory.width

x?

optional x?: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:377

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

An alias to position.x

Example

new Container({ x: 100 }); // Set x position to 100

Inherited from

ContainerOptions.x

xAlign?

optional xAlign?: number

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:23

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 field does not affect the alignment.

Inherited from

AdditionalPositionsExtensionProps.xAlign

y?

optional y?: number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:387

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

An alias to position.y

Example

new Container({ y: 200 }); // Set y position to 200

Inherited from

ContainerOptions.y

yAlign?

optional yAlign?: number

Defined in: src/canvas/components/AdditionalPositionsExtension.ts:33

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 field does not affect the alignment.

Inherited from

AdditionalPositionsExtensionProps.yAlign

zIndex?

optional 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

// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;

See

Container#sortableChildren For enabling sorting
Container#sortChildren For manual sorting

Default

Inherited from

VideoSpriteMemory.zIndex

Interface: TextOptions

Extends

Properties

accessible?

Default

Example

Inherited from

accessibleChildren?

Default

Example

Inherited from

accessibleHint?

Default

Advanced

Example

Inherited from

accessiblePointerEvents?

Default

Advanced

Example

Inherited from

accessibleText?

Default

Example

Inherited from

accessibleTitle?

Default

Example

Inherited from

accessibleType?

Default

Advanced

Example

Inherited from

align?

Inherited from

alpha?

Example

Default

See

Inherited from

anchor?

Default

Inherited from

angle?

Example

Inherited from

autoGarbageCollect?

Inherited from

autoGenerateMipmaps?

Default

Inherited from

blendMode?

Example

Default

See

Inherited from

boundsArea?

Example

Inherited from

cacheAsTexture?

Parameters

val

Returns

Inherited from

children?

Example

See

Inherited from

cullable?

Example

Remarks

Default

Inherited from

cullableChildren?

Example

Remarks

Default

Inherited from

cullArea?