PixiJS

Class: Ticker

Ticker

A Ticker class that runs an update loop that other objects listen to.

This class is composed around listeners meant for execution on the next requested animation frame. Animation frames are requested only when necessary, e.g. When the ticker is started and the emitter has listeners.

Members

shared Ticker staticreadonly

The shared ticker instance used by AnimatedSprite and by VideoResource to update animation frames / video textures.

It may also be used by Application if created with the sharedTicker option property set to true.

The property autoStart is set to true for this instance. Please follow the examples for usage, including how to opt-out of auto-starting the shared ticker.

Examples
 import { Ticker } from 'pixi.js';

 const ticker = Ticker.shared;
 // Set this to prevent starting this ticker when listeners are added.
 // By default this is true only for the Ticker.shared instance.
 ticker.autoStart = false;

 // FYI, call this to ensure the ticker is stopped. It should be stopped
 // if you have not attempted to render anything yet.
 ticker.stop();

 // Call this when you are ready for a running shared ticker.
 ticker.start();
 import { autoDetectRenderer, Container } from 'pixi.js';

 // You may use the shared ticker to render...
 const renderer = autoDetectRenderer();
 const stage = new Container();
 document.body.appendChild(renderer.view);
 ticker.add((time) => renderer.render(stage));

 // Or you can just update it manually.
 ticker.autoStart = false;
 ticker.stop();
 const animate = (time) => {
     ticker.update(time);
     renderer.render(stage);
     requestAnimationFrame(animate);
 };
 animate(performance.now());

system Ticker staticreadonly

The system ticker instance used by BasePrepare for core timing functionality that shouldn't usually need to be paused, unlike the shared ticker which drives visual animations and rendering which may want to be paused.

The property autoStart is set to true for this instance.

targetFPMS number static

Target frames per millisecond.

Default Value:
  • 0.06

autoStart boolean

Whether or not this ticker should invoke the method start automatically when a listener is added.

Default Value:
  • false

count number readonly

The number of listeners on this ticker, calculated by walking through linked list

deltaMS number

Scaler time elapsed in milliseconds from last frame to this frame. This value is capped by setting minFPS and is scaled with speed. Note: The cap may be exceeded by scaling. If the platform supports DOMHighResTimeStamp, this value will have a precision of 1 µs. Defaults to target frame time

Default Value:
  • 16.66

deltaTime number

Scalar time value from last frame to this frame. This value is capped by setting minFPS and is scaled with speed. Note: The cap may be exceeded by scaling.

Default Value:
  • 1

elapsedMS number

Time elapsed in milliseconds from last frame to this frame. Opposed to what the scalar deltaTime is based, this value is neither capped nor scaled. If the platform supports DOMHighResTimeStamp, this value will have a precision of 1 µs. Defaults to target frame time

Default Value:
  • 16.66

FPS number readonly

The frames per second at which this ticker is running. The default is approximately 60 in most modern browsers. Note: This does not factor in the value of speed, which is specific to scaling deltaTime.

lastTime number

The last time update was invoked. This value is also reset internally outside of invoking update, but only when a new animation frame is requested. If the platform supports DOMHighResTimeStamp, this value will have a precision of 1 µs.

Default Value:
  • -1

maxFPS number

Manages the minimum amount of milliseconds required to elapse between invoking update. This will effect the measured value of FPS. If it is set to 0, then there is no limit; PixiJS will render as many frames as it can. Otherwise it will be at least minFPS

Default Value:
  • 0

minFPS number

Manages the maximum amount of milliseconds allowed to elapse between invoking update. This value is used to cap deltaTime, but does not effect the measured value of FPS. When setting this property it is clamped to a value between 0 and Ticker.targetFPMS * 1000.

Default Value:
  • 10

speed number

Factor of current deltaTime.

Default Value:
  • 1
Example
// Scales ticker.deltaTime to what would be
// the equivalent of approximately 120 FPS
ticker.speed = 2;

started boolean

Whether or not this ticker has been started. true if start has been called. false if Stop has been called. While false, this value may change to true in the event of autoStart being true and a listener is added.

Default Value:
  • false

Methods

add (fn, context, priority) this

ts:224

Register a handler for tick events. Calls continuously unless it is removed or the ticker is stopped.

Name Type Attributes Default Description
fn TickerCallback<T>

The listener function to be added for updates
context T <optional>

The listener context
priority number <optional>
 UPDATE_PRIORITY.NORMAL

The priority for emitting
Returns:
Type Description
this This instance of a ticker

addOnce (fn, context, priority) this

ts:237

Add a handler for the tick event which is only execute once.

Name Type Attributes Default Description
fn TickerCallback<T>

The listener function to be added for one update
context T <optional>

The listener context
priority number <optional>
 UPDATE_PRIORITY.NORMAL

The priority for emitting
Returns:
Type Description
this This instance of a ticker

destroy () void

ts:371

Destroy the ticker and don't use after this. Calling this method removes all references to internal events.

remove (fn, context) this

ts:294

Removes any handlers matching the function and context parameters. If no handlers are left after removing, then it cancels the animation frame.

Name Type Attributes Description
fn TickerCallback<T>

The listener function to be removed
context T <optional>

The listener context to be removed
Returns:
Type Description
this This instance of a ticker

start () void

ts:351

Starts the ticker. If the ticker has listeners a new animation frame is requested at this point.

stop () void

ts:361

Stops the ticker. If the ticker has requested an animation frame it is canceled at this point.

update (currentTime) void

ts:390

Triggers an update. An update entails setting the current elapsedMS, the current deltaTime, invoking all listeners with current deltaTime, and then finally setting lastTime with the value of currentTime that was provided. This method will be called automatically by animation frame callbacks if the ticker instance has been started and listeners are added.

Name Type Attributes Default Description
currentTime number <optional>
 performance.now()

the current time of execution