How do I apply a bitmap mask when using a texture atlas?

Phaser 3
1

Hello all,
I believe this is a Phaser bug, but I am hoping one of you may have a work around. I have a texture atlas and I am simply trying to apply a bitmap mask to a texture within the atlas, using a different frame of the same atlas.

ex:
Go here and paste:

var game = new Phaser.Game({
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
});

function preload ()
{
    this.load.atlas('atlas', 'assets/atlas/megaset-1.png', 'assets/atlas/megaset-1.json');
}

function create ()
{
    let titan = this.add.image(400, 400, 'atlas', 'titan-mech');
    let ship = this.add.image(400, 400, 'atlas', 'ship');
    titan.mask = new Phaser.Display.Masks.BitmapMask(this, ship);
}
2

I am not sure what you are looking for, but from documentation:

A Bitmap Mask combines the alpha (opacity) of a masked pixel with the alpha of another pixel.

In your code you didn’t set a background. It’s black by default, but that seems to be not the case. Probably background’s alpha is set to 0 and black color you see is not a background color.

the pixel’s alpha will be multiplied by the alpha of the pixel at the same position in the Bitmap Mask’s Game Object.

Because if you simply add:

const camera = this.cameras.main;
camera.setBackgroundColor("#000000");

You’ll see that it doesn’t blink anymore. It stays on the canvas.
I don’t know what effect bitmap mask would have if it worked correctly, but on my browser, if I paste code you provided, I just saw a blink and a black background after. But now I see this:

image
image940Ă—784 4.69 KB

1 Like
3

Thanks dude, that’s a pretty awesome work-around. I’m surprised that worked.