Skip to main content

1. Initialize the plugin​

First, make sure to add the @playe/phaser-3 plugin as a dependency to your project:

npm install --save-dev @playe/phaser-3

Now add the plugin to the Plugins section of your Phaser configuration, for example:

import { PlayePlugin } from "@playe/phaser-3";
// ...
const config = {
  // ...
  plugins: {
    global: [
      {
        plugin: PlayePlugin,
        key: "playe",
        start: true, // must be true, in order to load
        data: {
          // This must be the key/name of your loading scene
          loadingSceneKey: "LoadingScene",
          // This must be the key/name of your game (gameplay) scene
          gameplaySceneKey: "PlayScene",
        },
      },
    ],
  },
};
// ...
var game = new Phaser.Game(config);

2. Implement the game loading logic​

The playe Phaser plugin will automatically call ⌛ gameLoadingFinished() if the loadingSceneKey is configured. Please make sure your loading scene is included in the config object.

const config = {
  // ...
  plugins: {
    global: [
      {
        data: {
          loadingSceneKey: "LoadingScene",
        },
      },
    ],
  },
};

3. Implement the gameplay events​

The playe Phaser plugin will automatically call 🎮 gameplayStart() and ☠ gameplayStop() if the gameplaySceneKey is configured. Please make sure your gameplay scene is included in the config object.

const config = {
  // ...
  plugins: {
    global: [
      {
        data: {
          gameplaySceneKey: "PlayScene",
        },
      },
    ],
  },
};