The limit of Phaser 3 and its performance

[RaynhardMK]

Hi, there!!!
I’m a newbie and I just want to ask some simple questions:

1. How to check the performance of game? How to check whether a game has got too heavy to be played in the browser?

2. (I don’t know the right wording for this)
   Are there any features that should be avoided to be used in Phaser 3? I used event emitter and event listener a lot, will that affect the performance or should I use something else?

3. Do you have any advice to increase the perfomance of a game?

Thanks!!

[exciteabletom]

Sorry for the late reply!

1. To check the framerate of your game press F12 and navigate to the performance tab. If your framerate dips below 30ish. It’s not running well.

2. I think those are fine to use.

3. Try to keep your main update loop quite simple, use events instead of checking lots of stuff in the update loop. You can also use the setFPS method to limit the amount of updates your game does every second. This can make the game easier to run if it doesn’t need to update very frequently.

Have fun with Phaser!

[Zizaco]

This video is not super up-to-date but it shows how to find performance bottlenecks in your code: https://www.youtube.com/watch?v=mDcNGwxAvKY

For example, this helped me identify that the Elipses in my scene were a bottleneck (20% of the rendering time!). With this info I could find the “needle in the haystack” that was making the game loop heavier than it could be.

Another example, (the second bootleneck that I found) was the Container.getAll method being called at the loop. This was very easy to fix by simply storing them in an array so that the game would not need to “get” then in every frame.

You can also use the CPU throttling option of the performance tab to ensure that it will run smoothly in slower devices.

If you keep eye in the performance tab you will be able to troubleshoot any perf issues with ease

[namonaihito]

Hi!

I can add two more points to previous answers:

1. Useful tools in chrome allow you:
   a) Show FPS on the screen during gameplay. You can turn it on in simple steps:
   open chrome dev tools -> CTR+SHIFT+P -> type ‘fps’ -> enter
   Then you can see fps chart on the screen and find out when is some fps drops (what you are doing curretnly at game. Adding, loading, moving etc.)
   
   b) Chrome performance tool show you summary like previous answer shows. But you can alsow see timeline and localize each requestAnimationFrame function fired and check if you finished your all actions in JS before next one is fired. I have a rule that “free time” between my script and next requestAnimationFrame fired should be at least 1/3 frame time. It’s time for GPU, rendering, browser proceses, layout etc. If you keep that, the game should be ‘smooth’ even during resizing browser window.
   
2. And additional info about FPS in brawser and requestAnimationFrame function: It depends on user hardware such as monitor For 144HZ monitor you have only ~6ms for frame, not ~16ms. Keep it in mind. For development purpuse I have 144HZ monitor to test “worst case scenario”. If youre game can run full 144 FPS, then it will be super light for curent standard 60 FPS.

Good luck with your project!