Strange behavior related to the focus or not of the document

Phaser 3
1

Hi all,

I am currently working on an ambitious project with a lot of graphic elements.
For example mass control & pathfinding; reflections on the water, change of weather / ambient light; filters; …
Now I want to review the optimization of the game and I am faced with a problem.

The problem is that after a few seconds of play (between 10 and 30), the FPS drops from 60 to 30
When I lose focus of the document, the page becomes more fluid and the FPS goes back to 60.

So I looked for the cause by disabling each of the features of the game.
But impossible to have acceptable and diversified content while maintaining an FPS around 60.
As the problem is only when the tab is active, it should be possible to keep the game fluid. Because my computer is obviously capable of it.

For this I created a quick stresstest …
To see the problem:

  • You can start the stresstest and wait for the FPS to drop below 40
  • Then lose the focus of the window. To do this, click for example on your Windows bar at the bottom, or if you have a second screen, click on another window. You will see the FPS return to 60 and the stress will become fairly fluid.
  • If you return to the canvas focus, the FPS will decrease after a few seconds…

Here is the stresstest URL: http://51.15.190.72/phaser3-demo-lag/

It is important to know that the stresstest uses particles but this problem is global to Phaser3.

2

So you’re creating 250 particle emitters, each with a frequency of 50 and particle lifespan of 50000, and you’re wondering what the slowdown is? You might want to profile your performance in Chrome.

3

Hi Prob

No … this demo is a stresstest to show you the problem more easily.
The problem comes from the focus or not of the canvas / or the tab
Can you reproduce the behavior described in my post ?

Thank you

4

That’s not a true increase in FPS, but a change in the delta value Phaser is uses. When the game loses focus, and for a short period after it regains focus (the “cooldown” period), Phaser ignores the raw delta values and uses the target delta value instead (1000 / 60 ≈ 16.6ms).

In that example if you read this.game.loop.actualFps or 1000 / this.game.loop.rawDelta you’ll see the FPS is still low.

In your game config you can reduce fps.panicMax to 10 or even 0 to reduce the effect of focus changes.