search

rblopes / generator-phaser-plus

[🛑 DISCONTINUED] It has been a long journey but development of `generator-phaser-plus` is now over. I recommend you have a look and fork `yandeu/phaser-project-template` instead.
https://github.com/yandeu/phaser-project-template
MIT License
144 stars 14 forks source link

Including 3rd party Phaser Plugins #16

Closed mokargas closed 7 years ago

mokargas commented 8 years ago

This is more a question of approach

If I wanted to include a 3rd party plugin, installed via NPM or otherwise, what would be the best way to do that?

e.g, I've tried installing this plugin, but it doesn't seem to be part of the deployment process. Does it need to be included in index.html manually?

rblopes commented 8 years ago

For that plugin, specifically:

import 'phaser-state-transition-plugin';

Include this line in the Preload.js script and then initialize the plugin like explained in the repo README.

this.game.stateTransition = this.game.plugins.add(Phaser.Plugin.StateTransition);

Edit: the plugin will add itself to the Phaser.Plugin namespace. It's not a CommonJS module, so you won't get a function importing that module.

tl;dr

There are two ways of including third-party libraries in game projects. The easiest is to copy the necessary scripts (and its dependencies) into static/ and include those scripts right in the index.html. For libraries that depend on Phaser (like that plugin, that extends the Phaser.Plugin namescape), those should appear below the <script src='phaser.js'> tag. And, of course, no import is necessary after this.

The other way is using npm and importing the library package in the game code. For that to work, though, libraries must either be CommonJS compliant or, at least, the package.json must declare a main script.

I hope that helps.

rblopes commented 8 years ago

To clarify, I just checked again and did a little test with the plugin and edited the first reply. It's OK to install the plugin using npm, the problem is how that module is written. Since it's not an CJS module, you can't just import that module to use later.

import Plugin from 'phaser-state-transition-plugin'; // Does not work

Perhaps, this is why it didn't work for you the first time.

mokargas commented 8 years ago

Thanks for the explanations @rblopes

I understand and I made a bit of an assumption about that plugin being CJS compliant. I've decided to include it manually for now. I actually might re-write it in an ES6/CJS manner