piotr Posted January 11, 2021 Share Posted January 11, 2021 (edited) 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 January 11, 2021 by piobug Link to comment Share on other sites More sharing options...
rich Posted January 11, 2021 Share Posted January 11, 2021 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 More sharing options...
piotr Posted January 11, 2021 Author Share Posted January 11, 2021 (edited) 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) <body> <script type="module" src="main.js"></script> </body> 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 January 12, 2021 by rich Fixed tutorial url Link to comment Share on other sites More sharing options...
rich Posted January 12, 2021 Share Posted January 12, 2021 The boot.json file is just used by the Phaser 3 Examples site, you don't need it for your own projects. All you need is the entry point, the html you pasted above and your source files. piotr 1 Link to comment Share on other sites More sharing options...
Recommended Posts