Jump to content

Is there a way to have a mask only affect shape and not colour?


Recommended Posts


When a player goes behind something in my game, I still want them to be visible so when there is a collision I draw an outline of the player and mask it with a copy of the texture that is being touched.

image.png.6109df4d7b8becf0342f3efd7442b998.pngimage.png.755b86318df74b652ae31a218a812e2f.png image.png.8e80c413a460ed95a78a67f5596f2b49.png

This works great apart from the colours of the outline get blended with the colors of the mask texture. So when the mask is something dark the outline is almost invisible. Disabling the mask shows what a difference there is. Sure I could make a solid white texture for everything the player could collide with but that would be an inconvenience.

this.outline.mask = this.mask;

Nothing I change seems to have any affect.

Does anybody know if I'm doing something wrong or have any idea if its possible to disable/work around this so that the colours aernt affected?

Any help would be appreciated.

(I am using Pixi.js 4.5.1)

Link to comment
Share on other sites

Enter not-safe-for-newbs territory.

Sprite mask uses ALPHA and RED channels. You can force it to use only alpha by changing the spriteMaskFilter fragment shader and rebuilding whole pixi: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/spriteMaskFilter.frag

You can also use vanilla pixi + override "PIXI.SpriteMaskFilter" class with your own, change the fragment shader.

Link to comment
Share on other sites

Thanks for the help Ivan.

My preferred method was to overload it but I couldn't work out how. The code seemed to be trapped inside the constructor of the class or something.

So I just downloaded pixi.js and removed the masky.r from the spriteMaskFilter function and it works great.



So thanks very much. If you could work out how to overload it I would still prefer that for if sometime in the future i want to change versions but for now I am very happy.

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...