Is it possible to load a plugin globally using an URL?

Phaser 3
1

I have been able to load a plugin into a scene this way:

class Ranking extends Phaser.Scene {
    constructor() {
        super({
            key: 'ranking'
        });
    }

    preload() {
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });
    }
}

Then, found this example which loads a plugin globally in the game config:

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    plugins: {
        global: [
            { key: 'RandomNamePlugin', plugin: RandomNamePlugin, start: true }
        ]
    },
    scene: {
        preload: preload,
        create: create
    }
};

let game = new Phaser.Game(config);

My question is: is it possible to add a plugin globally but using an URL (like in the this.load.scenePlugin() shown above) instead of directly the JavaScript class? So, I would have something like this:

    ...
    plugins: {
        global: [
            { key: 'rexuiplugin', url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexuiplugin.min.js',start: true }
        ]
    },
    ...

If I try this last way, and try to use it in some scene, I get null when I try this.plugins.get('rexuiplugin') in the preload() method.

2

I get that there are times when you would actually want to load dynamically (and sorry I can’t help you with that because I am a Phaser newbie), but for a plugin like this, that is vital to the operation of the app, you probably don’t want to do it this way, because the api might change, it suddenly may not be available one day, the load could fail, it wouldn’t work offline, etc…

So the way I would handle something like this, would be to integrate it into the build script. If it is not available through the regular package managers, then use wget to download the latest file (or copy from another folder where you have git cloned, etc…) whenever you want to upgrade, or just on every release. Any issues can then be picked up at compile time.

1 Like
3

@frontier thank you for your suggestion. It took me a while to get it work fine but finally I chose to install the plugin through NPM, import it with ES6 import where I needed it and bundle it all together using webpack (also installed with NPM).

Despite of this, I like your suggestion of having the plugin files saved in local because it seems an avoid-possible-future-problems option.

I had other troubles when trying to use the plugin in my app, so maybe this other question is useful for others.