Using Phaser with Boardgame.io

[vallivh]

I am looking to recreate this TAC boardgame as a multiplayer game. I started building the UI with Phaser, which worked pretty well. I now started to look into creating the logic and multiplayer functionality. I really like Boardgame.io but I am wondering how well it can be integrated with Phaser. I assume updating the client could be done event-based (and the server vice-versa) but I am not sure how do go about it.

Does anyone have experience with combining Boardgame.io and Phaser 3?

[delucis]

Great question! I’m curious to see if anyone’s already using these together.

My guess is it would go something like this.

Create a boardgame.io client alongside your Phaser game:

import { Client } from 'boardgame.io/client';
import Phaser from 'phaser';

const client = Client({ /* ... */ });
client.start();
const game = new Phaser.Game({ /* ... */ });

Then either access the boardgame.io client from the Phaser scene methods, e.g.

function update() {
  const state = client.getState();
  // display scene as necessary based on state

  if (someCondition) {
    // make a move
    client.moves.playCard();
  }
}

Or you could subscribe to the client and update the scene when boardgame.io emits an update:

client.subscribe(state => {
  // use state to update some scene objects
});

Maybe there are some better ways to integrate, like only running client.start() when the Phaser game starts. I’m also not clear about best practices around managing access to variables in a Phaser app. Perhaps there’s a nice way to create the client in the game’s setup and store it in a more generally available way (rather than the global variable).

I had a play around with a super basic set-up and ended up with this small example.

[vallivh]

Thank you @delucis for your advice and the example! This was already quite helpful.

I am currently going with launching a Phaser game from the Client constructor

class TacUI extends Phaser.Game {
    constructor(config, playerID) {
        super(config);
        this.playerID = playerID;
    }
}

class TacClient {
    constructor({ playerID } = {}) {
        this.client = Client({
            game: Tac,
            numPlayers : 4,
            multiplayer: SocketIO({server: "localhost:80"}),
            playerID,
        });
        this.tacUI = new TacUI(config, playerID);
        this.client.start();
        this.attachListeners();
        this.client.subscribe(state => this.update(state));
    }

Then I use Phaser game events to trigger moves on the client, which already works quite well. What I still struggle with, is updating the client with these events. Mostly I want to trigger updates when a specific function is called in the Game object, but I am having a hard time triggering the updates/events on state changes.

Example: creating a new card deck, displaying that deck in Phaser, then immediately dealing cards automatically. I have not really understood when exactly state changes are read. I create a deck in setup (or onBegin for the dealing phase when the deck is empty), then deal cards to each player also onBegin. In the end, the first state change that the client sees for the deck is after dealing (so in this case it would never actually trigger an event).

    attachListeners() {
        this.tacUI.events.on("card_played", (card) => this.client.moves.playCard(card));
    }

    update(state) {
        if (state === null) return;

        let emit = (event, args) => this.tacUI.events.emit(event, args);
        if (state.G.deck.length === 104) {
            emit("new_deck", state.G.deck);
        }

        emit("deal_card", state.G.players[state.ctx.currentPlayer].hand[-1], "test")
    }

Full code is at vallivh/TAC.