Black mask changing white sprite to grey.

[calbo90]

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? 

 

[ivan.popelyshev]

Do you use latest version of PIXI?

[calbo90]

Hey there, 

I am using version 4.3.1

[ivan.popelyshev]

Try latest. It might have been fixed.

[calbo90]

Okay, i'll try that and report back

[calbo90]

Yup issue is still there even when using newest version of PIXI. 

[ivan.popelyshev]

Ok, now I need a fiddle. Cant debug 0 lines of code

[calbo90]

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});
document.body.appendChild(app.view);

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;

app.stage.addChild(eyesBlack);
app.stage.addChild(eyesBlack2);
app.stage.addChild(pupilsSprite);

 

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

[calbo90]

Okay so setting the mask alpha to a really high number seems to work

21 hours ago, calbo90 said:

pupilsSprite.mask.alpha = 10;