How to achieve alpha mask effect?

Phaser 3
1

Hi folks,

I’m trying to develop a jigsaw puzzle game in Phaser 3 using the alpha mask but nothing happens to the image.

As an example, I’m trying to to the same as https://phaser.io/examples/v2/bitmapdata/alpha-mask, but in Phaser 3

let shape = game.add.sprite(cardPosition.x , cardPosition.y , maskName);
let mask = shape.createBitmapMask();
let cardImage = game.add.sprite(cardPosition.x, cardPosition.y, 'card');
cardImage.setMask(mask);
2

Have a look at this:

3

Hi Thyebe, thanks for your help!

I tried to replicate the example in https://phaser.io/examples/v3/view/display/masks/bitmapmask-alpha, but it’s not working outside the sandbox.

let screenWidth = window.innerWidth * window.devicePixelRatio;
let screenHeight = window.innerHeight * window.devicePixelRatio;

var config = {
    type: Phaser.WEBGL,
    parent: 'phaserContainer',
    width: screenWidth,
    height: screenHeight,
    scene: {
        preload: preload,
        create: create,
    },
    transparent: true
};

var game = new Phaser.Game(config);

var table;
var card;
var errorMargin;

function preload() {
    table = this;

	var randomCard = Math.floor(Math.random() * 7) + 1;

    if (hasHDGraphics()) {
        this.load.image('card', 'assets/puzzle_card' + randomCard + '_2x' + '.png');
        this.load.image('mask1', 'assets/puzzle_piece1' + '_2x' + '.png');
    } else {
        this.load.image('card', 'assets/puzzle_card' + randomCard + '.png');
        this.load.image('mask1', 'assets/puzzle_piece1' + '.png');
    }
}

function create() {
	card = this.make.image({
        x: screenWidth / 2,
        y: screenHeight / 2,
        key: 'card',
        add: true
    }).setAlpha(0.25);

    var mask = this.make.image({
        x: screenWidth / 2,
        y: screenHeight / 2,
        key: 'mask1',
        add: false
    });

    var piece = this.make.sprite({
        x: screenWidth / 2,
        y: screenHeight / 2,
        key: 'card',
        add: true
    });

    piece.mask = new Phaser.Display.Masks.BitmapMask(this, mask);

    errorMargin = card.width / 5;
}

This code seems to be working until it reachs “piece.mask = new Phaser.Display.Masks.BitmapMask(this, mask);”

I checked the assets used in my code and they replicate the attributes used in the example.

Do you have any idea of what’s going on?

4

Forget it!

I figured out what happened.
I was using 3.5 beta and that wasn’t working.
Downgraded to 3.24.1 and now it’s OK.

Thanks for the help!