0

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?

gman
  • 100,619
  • 31
  • 269
  • 393
TheCat
  • 640
  • 1
  • 9
  • 23

1 Answers1

4

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

Zyie
  • 134
  • 2
  • 12
  • That's it, thanks! However the syntax should be: var mask = new PIXI.Sprite(renderer.generateTexture(container)); – TheCat Nov 04 '18 at 17:08
  • Actually, this leads me to another question. Is it possible to make the masks move independently using this method? – TheCat Nov 04 '18 at 17:23
  • ah yes ive swapped that round now. You could update the positions of the individual sprites, generate the texture, and set the mask each frame . Doing that would be expensive so maybe avoid updating the mask all the time. Depending on your situation updating the mask every couple of frames may be good enough. – Zyie Nov 04 '18 at 17:35
  • Alright thanks :) It's weird that such a thing can be that complicated with Pixijs, when it could be so easily done with a mere vanilla 2D canvas context, though. – TheCat Nov 04 '18 at 18:04
  • @TheCat Pixi.js is mainly using webgl - and webgl is unfortunately more complicated than "vanilla canvas" - but gives more performance. – domis86 Nov 18 '21 at 08:06