Skip to content

The game loop

samme edited this page Jun 28, 2024 · 14 revisions

Timing

Phaser's game loop steps based on requestAnimationFrame() (preferred) or setTimeout().

requestAnimationFrame() is usually 60Hz or higher (on fast displays), but it can be lower (e.g., 30Hz) when a device is in low-power mode or on a different-origin document frame that the user hasn't clicked on.

setTimeout() can give intervals of at least 4ms, but probably larger than that in practice.

You can check the frame rate distribution for setInterval() and requestAnimationFrame() on your device. (setInterval() has similar timing to setTimeout().)

Let's look at the game loop timing in the context of its default configuration.

name default value description
min 5 The maximum acceptable delta is 200 ms (5 fps).
target 60 The ideal delta is 16.6 ms (60 fps).
limit 0 No rate limit. Every animation frame from the browser causes one game step with the frame delta.
forceSetTimeOut false Use requestAnimationFrame().
deltaHistory 10 Use 10 consecutive frame deltas to calculate the smoothed value.
panicMax 120 During cool down, use the ideal delta for 120 frames.
smoothStep true Smooth the raw deltas and discard any deltas above 200 ms.

View these in a running Phaser game.

Some common configurations

When forceSetTimeOut is off, you probably shouldn't change target.

You could increase min, but it should be much smaller than target.

The default panicMax is rather large, so you could reduce it or set it to 0 to disable it.

If you turn off smoothStep, there's no delta smoothing, clamping, or cool down.

Cool down ☃️

The cool down feature happens when the game starts and if the user returns to a browser tab or document frame after leaving. It ignores the actual delta from the browser and uses the ideal delta instead until panicMax frames have elapsed. The purpose is to provide a consistent delta value during a period when the actual deltas can be unstable, but it can cause time distortion.

Clone this wiki locally