You are browsing legacy Phaser documentation that is 4+ years out of date. Please see https://newdocs.phaser.io

Class: TimeStep

Phaser.Core. TimeStep

The core runner class that Phaser uses to handle the game loop. It can use either Request Animation Frame, or SetTimeout, based on browser support and config settings, to create a continuous loop within the browser.

Each time the loop fires, TimeStep.step is called and this is then passed onto the core Game update loop, it is the core heartbeat of your game. It will fire as often as Request Animation Frame is capable of handling on the target device.

Note that there are lots of situations where a browser will stop updating your game. Such as if the player switches tabs, or covers up the browser window with another application. In these cases, the 'heartbeat' of your game will pause, and only resume when focus is returned to it by the player. There is no way to avoid this situation, all you can do is use the visibility events the browser, and Phaser, provide to detect when it has happened and then gracefully recover.

new TimeStep(game, config)

Parameters:
Name Type Description
game Phaser.Game

A reference to the Phaser.Game instance that owns this Time Step.
config Phaser.Types.Core.FPSConfig
Since: 3.0.0
Source: src/core/TimeStep.js (Line 14)

Members

<readonly> actualFps :number

An exponential moving average of the frames per second.

Type:
  • number
Since: 3.0.0
Default Value:
  • 60
Source: src/core/TimeStep.js (Line 134)

callback :Phaser.Types.Core.TimeStepCallback

A callback to be invoked each time the Time Step steps.

Type:
Since: 3.0.0
Default Value:
  • NOOP
Source: src/core/TimeStep.js (Line 168)

delta :number

The delta time, in ms, since the last game step. This is a clamped and smoothed average value.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 267)

deltaHistory :Array.<number>

Internal array holding the previous delta values, used for delta smoothing.

Type:
  • Array.<number>
Since: 3.0.0
Source: src/core/TimeStep.js (Line 287)

deltaIndex :number

Internal index of the delta history position.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 277)

deltaSmoothingMax :number

The maximum number of delta values that are retained in order to calculate a smoothed moving average.

This can be changed in the Game Config via the fps.deltaHistory property. The default is 10.

Type:
  • number
Since: 3.0.0
Default Value:
  • 10
Source: src/core/TimeStep.js (Line 296)

<readonly> forceSetTimeOut :boolean

You can force the Time Step to use Set Timeout instead of Request Animation Frame by setting the forceSetTimeOut property to true in the Game Configuration object. It cannot be changed at run-time.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/core/TimeStep.js (Line 178)

<readonly> frame :number

The current frame the game is on. This counter is incremented once every game step, regardless of how much time has passed and is unaffected by delta smoothing.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 221)

<readonly> framesThisSecond :number

The number of frames processed this second.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 157)

<readonly> game :Phaser.Game

A reference to the Phaser.Game instance.

Type:
Since: 3.0.0
Source: src/core/TimeStep.js (Line 43)

<readonly> inFocus :boolean

Is the browser currently considered in focus by the Page Visibility API? This value is set in the blur method, which is called automatically by the Game instance.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • true
Source: src/core/TimeStep.js (Line 233)

lastTime :number

The time, as returned by performance.now of the previous step.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 211)

minFps :number

The minimum fps rate you want the Time Step to run at.

Type:
  • number
Since: 3.0.0
Default Value:
  • 5
Source: src/core/TimeStep.js (Line 88)

<readonly> nextFpsUpdate :number

The time at which the next fps rate update will take place. When an fps update happens, the framesThisSecond value is reset.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 145)

now :number

The time, as returned by performance.now at the very start of the current step. This can differ from the time value in that it isn't calculated based on the delta value.

Type:
  • number
Since: 3.18.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 334)

panicMax :number

The number of frames that the cooldown is set to after the browser panics over the FPS rate, usually as a result of switching tabs and regaining focus.

This can be changed in the Game Config via the fps.panicMax property. The default is 120.

Type:
  • number
Since: 3.0.0
Default Value:
  • 120
Source: src/core/TimeStep.js (Line 308)

<readonly> raf :Phaser.DOM.RequestAnimationFrame

The Request Animation Frame DOM Event handler.

Type:
Since: 3.0.0
Source: src/core/TimeStep.js (Line 53)

rawDelta :number

The actual elapsed time in ms between one update and the next.

Unlike with delta, no smoothing, capping, or averaging is applied to this value. So please be careful when using this value in math calculations.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 321)

<readonly> running :boolean

A flag that is set once the TimeStep has started running and toggled when it stops. The difference between this value and started is that running is toggled when the TimeStep is sent to sleep, where-as started remains true, only changing if the TimeStep is actually stopped, not just paused.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/core/TimeStep.js (Line 74)

smoothStep :boolean

Apply smoothing to the delta value used within Phasers internal calculations?

This can be changed in the Game Config via the fps.smoothStep property. The default is true.

Smoothing helps settle down the delta values after browser tab switches, or other situations which could cause significant delta spikes or dips. By default it has been enabled in Phaser 3 since the first version, but is now exposed under this property (and the corresponding game config smoothStep value), to allow you to easily disable it, should you require.

Type:
  • boolean
Since: 3.22.0
Source: src/core/TimeStep.js (Line 345)

<readonly> started :boolean

A flag that is set once the TimeStep has started running and toggled when it stops.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/core/TimeStep.js (Line 63)

startTime :number

The time at which the game started running. This value is adjusted if the game is then paused and resumes.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 200)

targetFps :number

The target fps rate for the Time Step to run at.

Setting this value will not actually change the speed at which the browser runs, that is beyond the control of Phaser. Instead, it allows you to determine performance issues and if the Time Step is spiraling out of control.

Type:
  • number
Since: 3.0.0
Default Value:
  • 60
Source: src/core/TimeStep.js (Line 98)

time :number

The time, calculated at the start of the current step, as smoothed by the delta value.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/core/TimeStep.js (Line 190)

Methods

blur()

Called by the Game instance when the DOM window.onBlur event triggers.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 362)

destroy()

Destroys the TimeStep. This will stop Request Animation Frame, stop the step, clear the callbacks and null any objects.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 705)

focus()

Called by the Game instance when the DOM window.onFocus event triggers.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 373)

getDuration()

Gets the duration which the game has been running, in seconds.

Since: 3.17.0
Source: src/core/TimeStep.js (Line 661)
Returns:

The duration in seconds.

Type
number

getDurationMS()

Gets the duration which the game has been running, in ms.

Since: 3.17.0
Source: src/core/TimeStep.js (Line 674)
Returns:

The duration in ms.

Type
number

pause()

Called when the visibility API says the game is 'hidden' (tab switch out of view, etc)

Since: 3.0.0
Source: src/core/TimeStep.js (Line 386)

resetDelta()

Resets the time, lastTime, fps averages and delta history. Called automatically when a browser sleeps them resumes.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 410)

resume()

Called when the visibility API says the game is 'visible' again (tab switch back into view, etc)

Since: 3.0.0
Source: src/core/TimeStep.js (Line 397)

sleep()

Sends the TimeStep to sleep, stopping Request Animation Frame (or SetTimeout) and toggling the running flag to false.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 618)

start(callback)

Starts the Time Step running, if it is not already doing so. Called automatically by the Game Boot process.

Parameters:
Name Type Description
callback Phaser.Types.Core.TimeStepCallback

The callback to be invoked each time the Time Step steps.
Since: 3.0.0
Source: src/core/TimeStep.js (Line 439)

step()

The main step method. This is called each time the browser updates, either by Request Animation Frame, or by Set Timeout. It is responsible for calculating the delta values, frame totals, cool down history and more. You generally should never call this method directly.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 472)

stop()

Stops the TimeStep running.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 687)
Returns:

The TimeStep object.

Type
Phaser.Core.TimeStep

tick()

Manually calls TimeStep.step.

Since: 3.0.0
Source: src/core/TimeStep.js (Line 607)

wake( [seamless])

Wakes-up the TimeStep, restarting Request Animation Frame (or SetTimeout) and toggling the running flag to true. The seamless argument controls if the wake-up should adjust the start time or not.

Parameters:
Name Type Argument Default Description
seamless boolean <optional>
 false

Adjust the startTime based on the lastTime values.
Since: 3.0.0
Source: src/core/TimeStep.js (Line 634)