Jump to content

How to structure a Phaser 3 project without the dependency hell (more like in Phaser 2)?


Recommended Posts

hi all,

Is there a way to break a Phaser 3 project down into multiple files for objects (Player.js, Enemy,js) and scenes (Boot.js, Game.js...) while using ES6 classes but without Node.js, Webpack and so on? All the templates I found rely on some additional app and I'd like to avoid using them.

Starting with Phaser 3 has been way more complicated than starting with Phaser 2 years ago. Setting up all those dependencies and debugging them has been a huge time sink and they still don't work to my great frustration.

In Phaser 2 it was a matter of linking all the files in the main HTML file via the <script src="..."></script> tag in the right order, and adding all the states to the global game object. I appreciate it wasn't ideal but it was simple.

Thanks for any help!


Edited by piobug
Link to comment
Share on other sites

You can still do it like this. However, note that <script> tags have no order in the html and never have had - they are loaded in whatever order the browser likes. This has been true since script tags existed, so you need to be careful that your 'Game.js' etc isn't loaded before Phaser, or it'll all go wrong (the same is true for v2 though)

If you look at one of the example games, like Avoid the Germs: https://github.com/photonstorm/phaser3-examples/tree/master/public/src/games/avoid the germs you'll see it's done exactly the way you describe, where 'main.js' is the entry point (the part that the browser loads). There's no webpack or anything else here, it's just native ES6. The important part is that when you include main.js in the html, you tell the browser its a module, not a script.

Link to comment
Share on other sites

Yay! Thank you Rich, I'm very happy that I can start with Phaser again.

Yes, the bit about the tag's order was wrong; the order was dictated by how the states where added to the main game.

For others that may see this thread, in addition to Rich's example, here's a step by step tutorial (I just found) for putting together a template.

Also the code to add 'main.js' in the html as a module would be (also in the tutorial above)

<script type="module" src="main.js"></script>

Rich, I saw that in the Germs game example, there's a boot.json file. Do I need that one too? What is it for?

Edited by rich
Fixed tutorial url
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...