Issue with masking transparent sprite

[wolaznik]

Hi everyone,

I began looking for ways today to recreate this affect:

 

Theres a red image, a blue image, and the black is where the overlap. I wanted a draggable canvas where the black area appeared as you dragged the blue image around over the red one.

I immediately thought to use pixijs and began looking into masking the black image.

Here is what I came up with: https://www.pixiplayground.com/#/edit/7~KRCG4gBR_GmsYZVSUsn  (The transparent images appear to have problems in pixiplayground but they are working in my project's implementation).

All 4 image links, the red, blue, black(black version of red) and mask(black version of blue) can be found in the playground above.

If I apply a Graphic mask of just a black rectangle it works fine - but shows all of the black image of course. But if I use a black version of the blue image as a mask, the black image just never appears.

Should I be masking this for a sprite mask with transparency a different way?

 

Any help is appreciated. 

[ivan.popelyshev]

It looks like a blendmode. 

https://www.pixiplayground.com/#/edit/ekJ3GcU0461C9GCTYEmB2 - we support common blending composition modes. in your case it looks like MULTIPLY  https://pixijs.download/dev/docs/PIXI.html#.BLEND_MODES , but beware - stuff like /OVERLAY is not reproduced in webgl. well, reproduced, but with plugins. But your case is easier.

[wolaznik]

That worked like a charm. I definitely wish I had not glossed over blending modes this morning, lesson learned.

 

Thanks!

[ivan.popelyshev]

Masking could help if you've changed SpriteMaskFilter and mathematically reproduced required blendmode, its just more difficult way  Also, sometimes you actually have to look several ways even incorrect ones before you understand the correct one.