Pixi.js: Multiple masks for a single Graphics object

[alexkirsz]

Hello,

I have a set of three Graphics objects, and I would like one of them to be masked by the two others. In other words, I would like to create a mask that is the composite of two Graphics objects. Something like:

graphics1.masks.add(graphics2);
graphics1.masks.add(graphics3);

While I've been able to somehow implement this behavior for WebGL by monkey-patching Container.prototype.renderAdvanced, I would certainly enjoy a more straightforward way to do it.

Is anything like this planned for PIXI.js?

[ivanpopelyshev]

I've been able to somehow implement this behavior for WebGL by monkey-patching Container.prototype.renderAdvanced

Good job!

I have so many variants for this method, so in my pixi fork i've added renderBehaviour field that points to it. If I put them all to pixi, code will grow. One of that variants has clipDepth thingy that enables/disables masks for several children, not for all of them, like in Spine or Flash. Another has caching for filters, like cacheAsBitmap but better.

Best solution: patch renderWebGL that way it calls renderCustom if its available, assign that renderCustom in those elements to your implementation.

[danvoyce]

Hi @ivanpopelyshev and @alexkirsz, I'm fairly new to PIxiJS and need to solve this same problem. It would be really handy (and appreciated) if you could share a code example or codepen (or something) as to better understand your solutions.

Thanks!

[alexkirsz]

@danvoyce I've since given up on using PIXI.js for my use case and haven't kept the code. The basic idea is that you can push more than one mask at https://github.com/pixijs/pixi.js/blob/fc3811402c8aa36e79e6c94555ebcfd38c9b5dd3/packages/display/src/Container.js#L552, and then pop them afterwards.

[ivanpopelyshev]

@danvoyce Sorry, didnt notice your comment. The idea is to override Container renderWebGL stuff

container.renderWebGL = function ()  {
//everything like in original
renderer.mash.push(this, this._secondMask);
}

in v5 its render function.

I'm sorry, but I have a huge set of demos that I have to do. Yesterday I helped with http://www.html5gamedevs.com/topic/42468-fading-trail/ , but it took me several hours of thinking "how to improve that stuff in the future", its too difficult to stay on track. Are you sure you cant do it on your own?

[GoodBoyDigital]

hey ya!

V5 accepts a container and its children as a mask so the following would work:

const myMask = new PIXI.Container();

myMask.addChild(graphics2);
myMask.addChild(graphics3);

graphics1.mask = myMask

Cheers!

[danvoyce]

🕺

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.