lean / phaser-es6-webpack

A bootstrap project for create games with Phaser + ES6 + Webpack.
MIT License
1.28k stars 314 forks source link

Phaser plugins integration #74

Closed Huljo closed 6 years ago

Huljo commented 6 years ago

Hello,

I try to use some Phaser plugins but nothing works for me.

My first attempt was with Slick-UI.

As suggested here I just added the plugin inside my vendors bundle and added it in my game using the preload function (src/states/Boot.js) but I get an unexpected result :

webpack.config.js :

var slickui = path.join(__dirname, '/node_modules/slick-ui/dist/slick-ui.min.js')
[...]
  entry: {
    app: [...],
    vendor: [..., 'slickui']
  },
module: {
    rules: [...
      { test: /slick-ui\.min\.js/, use: ['expose-loader?SlickUi'] } // SlickUi = {<empty object>} in browser
    ]
  },
  resolve: {
    alias: { ...
      'slickui': slickui
    }
  }

src/index.html :

    <script>
      var SlickUI;
    </script>

src/states/Boot.js :

preload() {
 SlickUI = this.game.plugins.add(Phaser.Plugin.SlickUI);
}

src/states/Boot.js :

create() {
 var panel;
 SlickUI.add(panel = new SlickUI.Element.Panel(8, 8, 150, this.game.height - 16)); // Throw an Error : "Uncaught TypeError: Cannot read property 'Panel' of undefined"
}

In the plugin demo (here) the plugin object looks like this (Plugin added to the game):

> SlickUI
{
  Container: Object
  Element: Object // < The property I want to use
  Keyboard: Object
  namespace: Function
}

But in my case I get a different object (Plugin added to the game):

> SlickUI
{
  active: true,
  defaultRenderer: Object,
  game: Game,
  hasPostRender: true,
  hasPostUpdate: false,
  hasPreUpdate: true,
  hasRender: true,
  hasUpdate: true,
  parent: Phaser.PluginManager,
  renderer: Object,
  visible: true,
  __proto__: Phaser.Plugin
}

Slick-Ui add itselft to Phaser's plugins global object : Phaser.Plugin.SlickUI // I can reach this one It need Phaser.Plugin.prototype to properly initiate the plugin (before using it in game)

Any help welcome, Im stuck with this issue since a few days..

lean commented 6 years ago

https://github.com/Flaxis/slick-ui/issues/26 please check if that library is working as npm module. If is not, you could include in the html (old school mode)