Pixi.js: Texture frame ignores x and y when used as alpha mask

[mathieuanthoine]

I tried to apply a Sprite as mask of an other.
Each Sprite is a frame of a unique png
All the sprites are displayed correctly but when I use a Sprite as mask, even if it's not the case, the x and the y of the texture of this Sprite seems redefined as 0 0 in the BaseTexture.
The result is that the mask applied is not the expected sprite but a sprite with a frame texture using the good width and height but x an y of 0,0 instead of the right values.

Check the attached example. The red sprite is the sprite in the Base Texture that is used as mask. The result is that it's the top left corner of the .png with the width and height of this sprite that is used as the mask instead.

Hope it could help..

bug_alphamask.zip

[mathieuanthoine]

It seems that the bug is around this line of code:

MaskManager.prototype.pushSpriteMask = function pushSpriteMask(target, maskData) { ... // TODO - may cause issues! target.filterArea = maskData.getBounds(true); ... };

Is there a workaround or a quick fix possible ?
Thank you for your help

[ivanpopelyshev]

I don't think its possible to use sprite from atlas as a mask. Mask cant have a rectangle :(

[mathieuanthoine]

Ivan,
If you change the anchor of the maskData it works perfectly. I think that it's possible. I can send you my patch but I 'm not as easy as you with the pixi engine and think that therés a better way to do that.

[mathieuanthoine]

Here is the code that works:

        //HACK
    maskData.anchor.set(0,0);

        // TODO - may cause issues!
        target.filterArea = maskData.getBounds(true);

    // HACK
        maskData.anchor.x=maskData.texture.frame.x/maskData.texture.baseTexture.width;
    maskData.anchor.y=maskData.texture.frame.y/maskData.texture.baseTexture.height;

        this.renderer.filterManager.pushFilter(target, alphaMaskFilter);

I think that there's another way more elegant to do that, I hope this hack will help you change the code to make it works.

PS: With this fix, the GAF media player for Pixi could support masks :) (https://github.com/mathieuanthoine/PixiGAFPlayer)

[mathieuanthoine]

Ivan, I have just added a line of code in the HACK I have forgotten, sorry. You need to set the anchor to 0.0 before the getBounds.

[mathieuanthoine]

It is possible that this hack was not perfect. I did more tests and it seems that the mask keep the part at the left or the top of the Rectangle defined by the getBounds.

In any case if you need more tests, I'm your man :)

[ivanpopelyshev]

I like that you already found a workaround! However, I want to make correct fix, that allows to use any frames. Its a bit of filters magic, related to SpriteMaskFilter

[mathieuanthoine]

Hi @ivanpopelyshev,

Forgive me if it's a frequent question but, do we have some leaderboard that we can consult about the progression of the different issues reported ? And in particular for this one :)

Thank you

[ivanpopelyshev]

@mathieuanthoine its not. Yeah, good idea, we need Q&A Btw, this is related to https://github.com/pixijs/pixi.js/wiki/Creating-Filters-in-Pixi-v4

[mathieuanthoine]

@ivanpopelyshev, is the answer is that we have to wait Pixi v5 ? :(

[KaiSoellch]

hey @ivanpopelyshev,

i just got the same problem - here is a quick fix that worked for me.
my anchors are always 0,1 so maybe u need to adjust my if statement a bit. (the height part)

in your application code just overwrite pixi's function:

_renderer.renderer.maskManager.pushSpriteMask = _maskHack;

then add _maskHack to your app code:

/* eslint-disable */
var _maskHack = function(target, maskData) {
    var alphaMaskFilter = this.alphaMaskPool[this.alphaMaskIndex];

    if (!alphaMaskFilter) {
        alphaMaskFilter = this.alphaMaskPool[this.alphaMaskIndex] = [new PIXI.SpriteMaskFilter(maskData)];
    }

    alphaMaskFilter[0].resolution = this.renderer.resolution;
    alphaMaskFilter[0].maskSprite = maskData;

    // hack
    maskData.anchor.set(0,0);

    // TODO - may cause issues!
    target.filterArea = maskData.getBounds();

    // HACK
    maskData.anchor.x=maskData.texture.frame.x/maskData.texture.baseTexture.width;
    maskData.anchor.y=maskData.texture.frame.y/maskData.texture.baseTexture.height;
    if (!maskData._positionHacked) {
      maskData.position.y -= maskData.height;
      maskData._positionHacked = true;
    }

    this.renderer.filterManager.pushFilter(target, alphaMaskFilter);

    this.alphaMaskIndex++;
}
/* eslint-enable */

thanks to @mathieuanthoine

[ivanpopelyshev]

Huzzah! #4357 is fixing this thing.

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