Facebook Instant Games in Phaser 3

Now that we've received the all important startgame event from the plugin, we're in a position where we can access the SDKs features. The core app and player details are already available from the plugin, which means you can access any of the following:

Let's use this to show the player's name and photo:

class PlayerDetails extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'PlayerDetails', active: false });
    }

    create ()
    {
        this.add.bitmapText(400, 400, 'azo', this.facebook.playerName).setOrigin(0.5);

        this.facebook.loadPlayerPhoto(this, 'player').once('photocomplete', this.addPlayerPhoto, this);
    }

    addPlayerPhoto (key)
    {
        this.add.image(400, 200, key);
    }

}

The code should be pretty clear, but to explain: The playerName is a property of the plugin that contains the current player's name. There are other properties available too, but we just use the name for this screen. It is being displayed with a bitmap font.

Then we use the built-in loadPlayerPhoto method to use Phaser's internal Loader to grab the player photo and call addPlayerPhoto when it finishes loading.

The end result looks like this:

Rather than use loadPlayerPhoto you could also use the Loader Plugin directly. Here is the same as the above, but using direct Loader calls:

class PlayerDetails extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'PlayerDetails', active: false });
    }

    create ()
    {
        this.add.bitmapText(400, 400, 'azo', this.facebook.playerName).setOrigin(0.5);

        this.load.image('player', this.facebook.playerPhotoURL);

        this.load.once('filecomplete-image-player', this.addPlayerPhoto, this);

        this.load.start();
    }

    addPlayerPhoto (key)
    {
        this.add.image(400, 200, key);
    }

}

You'll get the same end result.

For a complete list of all the properties available, such as playerName, please see the plugin API documentation.

Modifying Player Photos

Very often you'll want to modify the player's photo. Perhaps to make it into a circle, or add some kind of mask to it. There are lots of ways to achieve this and here I'll present one of them: using a Canvas Texture object.

First, let's add a new function:

    addRoundedPlayerPhoto (key)
    {
        var photo = this.textures.createCanvas('playerMasked', 196, 196);

        var source = this.textures.get('player').getSourceImage();

        photo.context.beginPath();

        photo.context.arc(98, 98, 98, 0, Math.PI * 2, false);

        photo.context.clip();

        photo.draw(0, 0, source);

        this.add.image(400, 200, 'playerMasked');
    }

Here we create a new Canvas Texture called playerMasked. We draw an arc to it, just using the normal canvas operations, but set it to be a clipping path. Finally, we draw the image we've loaded from Facebook. The end result is a clipped photo:

Rather than define a clipping path, you can also draw a masked image over the top of your photo. I created a simple 196 x 196 mask in Photoshop that looks like this:

You can apply it to the photo using the following method:

    addMaskedPlayerPhoto (key)
    {
        var photo = this.textures.createCanvas('playerMasked', 196, 196);

        var source = this.textures.get('player').getSourceImage();
        var mask = this.textures.get('mask').getSourceImage();

        photo.draw(0, 0, mask);

        photo.context.globalCompositeOperation = 'source-in';

        photo.draw(0, 0, source);

        this.add.image(400, 200, 'playerMasked');
    }

Where the composite blend mode of source-in allows us to achieve the end result we want:

Obviously, the mask can look a lot better than the squiggle above, but hopefully you get the idea!