Invalid Scene Plugin: UIPlugin

Phaser 3
5

@yannick thank you! It took me a little time to get it work fine but finally I could solve my problem. I add it here what I did just in case someone finds it useful. My final project structure is this:

├── dist
│   └── index.html
├── firebase.json
├── package.json
├── src
│   ├── app.js
│   ├── assets
│   │   └── .jpg, .png files...
│   ├── gameService.js
│   ├── loginService.js
│   └── scenes
│       ├── game.js
│       ├── main.js
│       └── ranking.js
└── webpack.config.js

Using NPM I installed webpack, file-loader, Phaser, phaser3-rex-plugins, etc. (indeed, you can see from my project structure that I no longer save the plugin files locally). My webpack configuration is the below:

const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/app.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
       {
         test: /\.(png|jpg)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
};

Now, I can import the plugin in app.js like you suggested:

import UIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin.js";

and add it to the game config.

I can also import assets like images using the file-loader in webpack and use them wherever they are needed.

The last thing left is to run webpack from the terminal and access /dist/index.html in the browser.

1 Like