Pixi.js: Question about mask in V3

[jeremypetrequin]

Hello,

I've already used PIXI in several projects, firstly, i want to thank you for all this awesome work!
But for my current project, I need to do a mask with a complexe shape, that i can't draw with code. The perfect solution for me could be to have a PNG image as a mask, and render my texture only on the visible part of this PNG.

Something like that seems to be possible with the V3 (http://www.goodboydigital.com/client/goodboy/nebulon/)? But there's not a lot of documentation yet and the deadline for my project doesn't allow me to wait the official release..

Could someone help me a little bit with that?

[englercj]

You can use a sprite as a mask in v3, just assign a sprite to another sprites mask property.

[jeremypetrequin]

Hello,

thank for your response,

You mean that a mask will only use the visible pixels of the sprite, no matter what there are inside? Using alpha too I guess? If yes, seems to be very awesome!

But, i've just made a quick test, and it doesn't seem to work as expected:

var textureLogo = PIXI.Texture.fromImage('img/logo-mask.png');
var logoMask = new PIXI.Sprite(textureLogo);

var textureTexture = PIXI.Texture.fromImage('img/logo-texture.jpg');
var logoTexture = new PIXI.Sprite(textureTexture);

canvasStage.addChild(logoMask);
logoTexture.mask = logoMask;
canvasStage.addChild(logoTexture);
canvasRenderer.render(canvasStage);

logo-mask.png is a PNG file where the shape is black and the rest is transparent.
If I comment the line logoTexture.mask = logoMask; the both images appear

I think I misunderstood something?

(sorry for my english, and thanks again for help!)

[englercj]

Try waiting until the images load, then using the mask. Don't remember if it handles unloaded images properly.

[jeremypetrequin]

I already wait the end of loading before apply the mask. I've simplified a little bit the code for my post, but in fact, I use the new PIXI.loader to preload my assets, then I draw my stage.
Using Texture.fromFrame or Texture.fromImage the results are the same: when I apply the mask, the both images disappear, even in a big setTimeout to be sure i'm waiting enough time for loading.

[GoodBoyDigital]

hi there! are you using webGL? Alpha masking is only available in webGL at the mo. cheers!

[jeremypetrequin]

Hi!
I've found the solution thanks to your help,
two things:

• first, I was using a black and transparent PNG, if I use the same with white instead of black it works,
  I don't know if it's "normal" that black be considered as transparent?
• secondly, it need a second "render" call, in a `setTimeout(function() {}, 0) to be displayed.. weird

Thanks again for your help

[GoodBoyDigital]

good stuff! yes alpha masks use alpha / color to make life easy for people. So black and alpha of 0 will mask the item. Thanks!

[jeremypetrequin]

Ok!
Just a little precision about the second point, it doesn't need a setTimeout, just need two calls to render:

canvasRenderer.render(canvasStage);
canvasRenderer.render(canvasStage);

and it's ok, but without the second, the mask doesn't display.. Don't know if it's "normal" again?

[clark-stevenson]

Just a quick question.

The docs say Graphics.

Can a mask be any DisplayObject or is it limited to say, Graphics | Sprite?

[englercj]

Right now it is Graphics | Sprite.

This line needs to be updated: https://github.com/GoodBoyDigital/pixi.js/blob/07e4e26f8fd404524a7ebaa73c210de3d8f2cf25/src/core/display/DisplayObject.js#L225
(and the @property line below that removed)

[sphinxc0re]

I just stumbled over this issue myself. I can't seem to get masking working at all. I'm using a sprite loaded from an Image to mask a rectangle created from a PIXI.Graphics object. This is my code:

var bg_color = 0xCFD1CE;

var render_options = {
    antialias: true,
    backgroundColor: bg_color
};

this.renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight, render_options);

document.body.appendChild(this.renderer.view);

var app = new PIXI.Container();

var variable = PIXI.Sprite.fromImage('img/testmask3.png');

setInterval(function()  {
    var rColor = Math.random() * 0xFFFFFF;
    app.removeChildren();
    var first = new PIXI.Graphics();
    first.beginFill(rColor).drawRect(0, 0, 640, 480).endFill();
    first.mask = variable;
    app.addChild(first);

    this.renderer.render(app);
}, 500);

I used these three testimages as masks:
1.

2.

3.

[bartzy]

@englercj I am getting the same issue as @SphinxC0re .

Using the WebGL renderer, latest Pixi.js source from master.
I verified that the mask is loaded and my code looks like:

var object = new PIXI.Sprite.fromImage(this.getAssetPath(layer.image));

object.width = layer.width;
object.height = layer.height;
object.x = layer.x;
object.y = layer.y;

var mask = PIXI.Sprite.fromImage(this.getAssetPath(layer.mask));

object.mask = mask;

container.addChild(object);

and of course I have renderer.render(container) running in a RAF callback.

Are we using the mask property wrong with PIXI.Sprite objects?

Thanks!

[bartzy]

Update: If I specify the object.x and object.y as 0, then the mask works perfectly. As I increase the object's position in the X and/or Y axes, the object gets "cut" in its top and left boundaries.

[englercj]

Add the mask as a child of the object is is masking, so that it follows it around.

object.mask = mask;
object.addChild(mask);

[bartzy]

Thanks,

Just did that and indeed it is masking in the correct place, but it seems like it's smaller than it should be. The mask image is exactly the same size as the object's image, but the resulting masked object I get is smaller for some reason?

Also, what's the reasoning behind having the mask layer in the layer tree itself? For me it seems like a "mask" is just like any other layer property that changes its appearance.

Thanks again,
Bar.

[perfectbeeing]

Has support for canvas alpha masking ever been included? Is it possible? The project uses PIXI.js for server side rendering of video with heavy use of masking. Thank you so much!!

[englercj]

No alpha masking works using a gl shader, no canvas support.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.