Interface: EffectsMixin

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

The EffectsMixin interface provides methods and properties for managing effects such as masks and filters on a display object. It allows for adding, removing, and configuring effects, as well as setting a mask for the display object.

Advanced

Extends

• Required<EffectsMixinConstructor>

Properties

effects?

> optional effects?: Effect[]

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

todo Needs docs

Advanced

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

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

• Container#filters For applying filters
• Rectangle For area definition

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 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 with channel: 'alpha' to read the alpha channel instead. See MaskOptions#channel for details.

Example

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

// Remove mask
sprite.mask = null;

See

• Graphics For creating mask shapes
• Sprite For texture-based masks
• Container#setMask For advanced mask options including channel selection

Overrides

VideoSpriteMemory.mask

Accessors

filters

Get Signature

> 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

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

See

Filter For filter base class

Returns

readonly Filter[]

Set Signature

> 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

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

Filter For filter base class

Parameters

value

Filter | Filter[] | null | undefined

Returns

void

Overrides

VideoSpriteMemory.filters

Methods

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

options

Partial<MaskOptionsAndMask>

Configuration options for the mask

Returns

void

Example

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

• Container#mask For simple masking
• MaskOptionsAndMask For full options API
• MaskOptions#channel For channel selection

Overrides

VideoSpriteMemory.setMask