Rex Virtual joystick Cannot read properties of undefined (reading ‘get’)

Phaser 3
1

I added the following according to the docs

npm i phaser3-rex-plugins

import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';

var joystick = scene.plugins.get('rexVirtualJoystick').add(scene, {
    x: 100,
    y: 100,
    //radius: 100,
    //base: baseGameObject,
    //thumb: thumbGameObject,
    // dir: '8dir',
    // forceMin: 16,
    // fixed: true,
    // enable: true
});

I got the following errors :

world.js?5e60:85 Uncaught TypeError: Cannot read properties of undefined (reading ‘get’)
at world.create (world.js?5e60:86:1)
at SceneManager.create (phaser.js?d4ef:100338:1)
at SceneManager.loadComplete (phaser.js?d4ef:100250:1)
at LoaderPlugin.emit (phaser.js?d4ef:1908:1)
at LoaderPlugin.loadComplete (phaser.js?d4ef:196794:1)
at LoaderPlugin.fileProcessComplete (phaser.js?d4ef:196760:1)
at ImageFile.onProcessComplete (phaser.js?d4ef:4961:1)
at Image.data.onload (phaser.js?d4ef:19311:1)

2

Add

console.log(scene, scene.plugins);

before that. What are they?

3

Updates, I add the following to game config and managed to get the scene and plug-in manager loaded…

import VirtualJoystickPlugin from "phaser3-rex-plugins/plugins/virtualjoystick-plugin.js";

plugins: {
        global: [
          {
            key: "rexVirtualJoystick",
            plugin: VirtualJoystickPlugin,
            start: true,
          },
          // ...
        ],
      },

and the following changes

console.log("scene: ", this.scene);
    console.log("plugins: ", this.scene.scene.plugins);
    var joystick = this.scene.scene.plugins
      .get("rexVirtualJoystick")
      .add(this, {
        x: 100,
        y: 100,
        //radius: 100,
        //base: baseGameObject,
        //thumb: thumbGameObject,
        // dir: '8dir',
        // forceMin: 16,
        // fixed: true,
        // enable: true
      });

Console.log …

scene:  ScenePlugin {scene: world, systems: Systems, settings: {…}, key: 'world', manager: SceneManager, …}

plugins:  PluginManager {_events: Events, _eventsCount: 0, game: Game, plugins: Array(0), scenePlugins: Array(0), …}

I m getting this error now …

EventEmitterMethods.js?56de:4 Uncaught TypeError: Cannot read properties of undefined (reading 'EventEmitter')
    at VirtualJoyStick.setEventEmitter (EventEmitterMethods.js?56de:4:1)
    at new VirtualJoyStick (VirtualJoyStick.js?b403:15:1)
    at VirtualJoyStickPlugin.add (virtualjoystick-plugin.js?38a6:15:1)
    at world.create (world.js?5e60:87:1)
    at SceneManager.create (phaser.js?d4ef:100338:1)
    at SceneManager.loadComplete (phaser.js?d4ef:100250:1)
    at LoaderPlugin.emit (phaser.js?d4ef:1908:1)
    at LoaderPlugin.loadComplete (phaser.js?d4ef:196794:1)
    at LoaderPlugin.fileProcessComplete (phaser.js?d4ef:196760:1)
    at ImageFile.onProcessComplete (phaser.js?d4ef:4961:1)
4

The first parameter of add method is scene instance, according to this line

this.scene.scene.plugins.get

The this variable might not be a scene instance.

5

You should be able to use this.plugins.get("rexVirtualJoystick").

6

I think I found out WHY it did not load / work…

One version running OK, Phaser3 was loaded directly from index.html where as the other version (not OK) was launch from Vue.JS mounted() as a div id=“phaser-game”

How do I solve this ?

Any pointers ?

<template>
  <div>
    <div id="phaser-game"></div>
  </div>
</template>

 mounted() {
    console.log("startGame mounted", this.gameParams.runOnce);
    window.Phaser = new Game(); 
  },

Game Object :

export default class Game extends Phaser.Game {
  constructor() {
    const config = {
      type: Phaser.AUTO,
      width: 32 * 35,
      height: 32 * 18,
      physics: {
        default: "arcade",
        arcade: {
          debug: true,
        },
      },
      scale: {
        zoom: 1,
      },
      dom: {
        createContainer: true,
      },
      parent: "phaser-game",
      backgroundColor: "#000000",
      pixelArt: true,
      // Skip loginScene as the Moralis auth is done by Vue side and passed to Phaser
      scene: [
        preload,
        menuScene,
        handleEvents,
        world,
        blockA,
        blockB,
        blockC,
        blockD,
      ],
    };

    super(config);
  }
7

Fixed here