pixi.js

PixiJS - Using multiple masks on a sprite

I'm new to PixiJS and I can't figure this out. I understand you can set a mask on an object like so:

mainSprite.mask = maskSprite

But what if you need to set more than one mask on the mainSprite? I tried using a PIXI.Container but it's not working... Any idea?

Solution

  • Not sure if this is the best way but you can add multiple sprites to a container, then create a texture from the container and use that as the mask

    let container = new PIXI.Container();

for(let i = 0; i < 5; i++){
    let sprite = new PIXI.Sprite(TEXTURE);
    sprite.position.set(POSITION)
    container.addChild(sprite)
}

let mask = new PIXI.Sprite(RENDERER.generateTexture(container));

    just replace the relevant variables and this should work