Phaser JS 3: how to debug game performance

Question

So, I'm working on a project, attempting to learn Phaser as a ruby dev (JS isn't my most confident programming language).

Having run my game on a lower-spec laptop recently, I realised that it kept heating up and the fan was spinning up. Long story short, something about my game is munching the processor.

I don't really know where to start debugging this. Possible lines of enquiry:

• Does Phaser have any tools to tell you what's doing the work?
• Is there a way to make collision events happen once, rather than constantly while in contact?
• Could the update method be called less often for lower-spec machines?
• I've got a large world, then I'm bringing the player window down with the camera. Is there a way to cut the game size down and still scroll to objects off-screen?

Sorry for the vague question, here. I'm just not sure what to do next.

Note: The code is available in full here: https://github.com/AJFaraday/night_and_day

Answer 1

A nice way to debug performance issues in any Javascript Application is to use the Performance tab in Chrome or Firefox. As far as my experience goes, it is the first step any one should follow.

If you plan to develop games using Phaser, you can try to extract some information using a similar way to this.

In that example, you can also see how to limit the fps by setting in your game config:

fps: {
  forceSetTimeOut: true,
  // panicMax: 0,
  // smoothStep: false,
  target: 15
},