Jump to content

Issue with masking transparent sprite


Recommended Posts

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...