Jump to content

Black mask changing white sprite to grey.


Recommended Posts

I am using masks for eyes in my game. I have a black background for the eye and a white pupil. The white pupil uses the black background as a mask so that when the character blinks the pupil is hidden. The issue is that my white pupil is rendered grey (if i disable the mask the pupil is rendered white which is correct). I have looked at the alpha and it is set to 1 so it does not seem to be a transparency issue. Just wondering if anyone else has had into this issue? 


Link to comment
Share on other sites

Hello again, sorry about the slow reply. I tried a few solutions with no success

I thought that the colour of the mask may be affecting the pupil colour so tried changing the mask to white, however I think it may be the colour behind the pupil that is changing the white to grey.

Here is the code:

var app = new PIXI.Application(800, 800, {backgroundColor: 0x1099bb});

var eyesBlackSprite = new PIXI.Texture.fromImage('eyes_maskBG.png');
var eyesBlack = new PIXI.Sprite(eyesBlackSprite);
var eyesBlack2 = new PIXI.Sprite(eyesBlackSprite);

var pupils = new PIXI.Texture.fromImage('pupils.png');
var pupilsSprite = new PIXI.Sprite(pupils);

pupilsSprite.position.x = screen.width / 4;
pupilsSprite.position.y = screen.height / 4;

eyesBlack.position.x =  screen.width / 4;
eyesBlack.position.y =  screen.height / 4;

eyesBlack2.position.x = screen.width / 4;
eyesBlack2.position.y = screen.height / 4;

pupilsSprite.position.x += 20;
pupilsSprite.position.y += 20;

pupilsSprite.mask = eyesBlack;

const greyscale = new PIXI.filters.ColorMatrixFilter();
greyscale.greyscale(2, true);
greyscale.enabled = true;
eyesBlack.filters = [greyscale];

const filter = eyesBlack.filters[0];
filter.enabled = true;




(I changed the pupil sprite to a solid white bar)

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