New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Texture frame ignores x and y when used as alpha mask #3974
Comments
It seems that the bug is around this line of code:
Is there a workaround or a quick fix possible ? |
I don't think its possible to use sprite from atlas as a mask. Mask cant have a rectangle :( |
Ivan, |
Here is the code that works:
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) |
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. |
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 :) |
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 |
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 |
@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 |
@ivanpopelyshev, is the answer is that we have to wait Pixi v5 ? :( |
hey @ivanpopelyshev, i just got the same problem - here is a quick fix that worked for me. 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 |
Huzzah! #4357 is fixing this thing. |
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. |
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
The text was updated successfully, but these errors were encountered: