Things I wish I had been told before starting a Phaser 3 project

This is just a quick listicle for things than have been bouncing around my head for a while now. They are in no particular order, but they definitely would have saved me a lot of time if I had kept them in mind from the start.

  • Start with the Phaser Lab examples. It is possible to look at the docs and try to compose your own code flowing the way you want it, but it often ends up more expedient to begin with the comprehensive example code snippets and modify them for your use case. This strategy will often save yourself hours or days of pain muddling through syntax and the order of commands.
  • Use a BaseScene.js. It took me a while to realise that my project was going to be so complicated that it needed to use techniques more advanced than those beginner one-file examples you see. I will post my particular set up in a subsequent post, but samme’s template is good as a starter. In particular, it is very handy for defining constants for your colours and styles, and enables passing data between scenes with an events emitter. More on that when I post my own BaseScene template.
  • Turn off the minimizer in Webpack. I spent years trying to decipher code that had been minified and obfuscated by Webpack, when all the time I should have been debugging my own expanded code without all the compression tricks. tl;dr, the solution is right at the top of your webpack.config.js file which should be in the root folder of your project: change mode: 'production' to mode: 'development'.
  • Use JSHint (not JSLint), and turn off the style warnings. If you delve into the comments on JSLint you will find plenty of chuntering about how its author has a certain authoritarian view on JavaScript syntax that not everyone shares. The JSHint dude has stepped back from mandating style habits, and you can change what it flags in the config anyway.
  • Use TexturePacker. Pay for it too, don’t be cheap. It’s well worth it, as it will become an indispensable part of your development workflow and must be used in production.
  • Scrollable containers depending on masks suck, go with camera-based scripts. There still isn’t a good and widely-accepted solution for this outside @rex's intricately-designed plugins, probably because @photonstorm had to be dragged into supporting containers halfway through Phaser 3’s development lifecycle. I use cameras at the moment in my game, which as a Football Manager-style title has many carousels, tables and scrollable lists, but I will have to roll my own scrollbar which will be annoying.

Do you have any further suggestions? Leave them in the comments, and I will add them to the article. I will probably add other items myself as I remember them.