AdvancedOptional Advancedeffectstodo Needs docs
OptionalfilterThe 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.
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.
// 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
);
Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
In PixiJS a regular mask must be a Graphics or a Sprite object.
This allows for much faster masking in canvas as it utilities shape clipping.
Furthermore, 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.
For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;
// Remove mask
sprite.mask = null;
Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.
This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.
// Add a single filter
sprite.filters = new BlurFilter(2);
// Apply multiple filters
container.filters = [
new BlurFilter(2),
new ColorMatrixFilter(),
];
// Remove filters
sprite.filters = null;
Filter For filter base class
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.
Configuration options for the mask
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
});
// Clear existing mask
sprite.setMask({ mask: null });
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.