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

Share this post

Link to post
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.

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.