Class Ticker

A Ticker class that runs an update loop that other objects listen to. Used for managing animation frames and timing in a PixiJS application.

It provides a way to add listeners that will be called on each frame, allowing for smooth animations and updates.

Animation frames are requested only when necessary, e.g., when the ticker is started and the emitter has listeners.

Example

// Basic ticker usage
const ticker = new Ticker();
ticker.add((ticker) => {
    // Update every frame
    sprite.rotation += 0.1 * ticker.deltaTime;
});
ticker.start();

// Control update priority
ticker.add(
    (ticker) => {
        // High priority updates run first
        physics.update(ticker.deltaTime);
    },
    undefined,
    UPDATE_PRIORITY.HIGH
);

// One-time updates
ticker.addOnce(() => {
    console.log('Runs on next frame only');
});

See

TickerPlugin For use with Application
UPDATE_PRIORITY For priority constants
TickerCallback For listener function type

Index

Constructors

constructor

new Ticker(): Ticker
Returns Ticker

Properties

autoStart

autoStart: boolean = false

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

Example

// Default behavior (manual start)
const ticker = new Ticker();
ticker.autoStart = false;
ticker.add(() => {
    // Won't run until ticker.start() is called
});

// Auto-start behavior
const autoTicker = new Ticker();
autoTicker.autoStart = true;
autoTicker.add(() => {
    // Runs immediately when added
});

Default

false

See

Ticker#start For manually starting the ticker
Ticker#stop For manually stopping the ticker

deltaMS

deltaMS: number

Scalar time elapsed in milliseconds from last frame to this frame. Provides precise timing for animations and updates.

This value is capped by setting minFPS and is scaled with speed.

If the platform supports DOMHighResTimeStamp, this value will have a precision of 1 µs.

Defaults to target frame time

Note

The cap may be exceeded by scaling.

Example

// Animation timing
ticker.add((ticker) => {
    // Use millisecond timing for precise animations
    const progress = (ticker.deltaMS / animationDuration);
    sprite.alpha = Math.min(1, progress);
});

Default

16.66

deltaTime

deltaTime: number = 1

Scalar time value from last frame to this frame. Used for frame-based animations and updates.

This value is capped by setting minFPS and is scaled with speed.

Note

The cap may be exceeded by scaling.

Example

// Basic animation
ticker.add((ticker) => {
    // Rotate sprite by 0.1 radians per frame, scaled by deltaTime
    sprite.rotation += 0.1 * ticker.deltaTime;
});

elapsedMS

elapsedMS: number

Time elapsed in milliseconds from last frame to this frame. Provides raw timing information without modifications.

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

Example

// Basic timing information
ticker.add((ticker) => {
    console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
});

Default

16.66

lastTime

lastTime: number = -1

The last time update was invoked. Used for calculating time deltas between frames.

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.

Example

// Basic timing check
ticker.add(() => {
    const timeSinceStart = performance.now() - ticker.lastTime;
    console.log(`Time running: ${timeSinceStart}ms`);
});

speed

speed: number = 1

Factor of current deltaTime. Used to scale time for slow motion or fast-forward effects.

Example

// Basic speed adjustment
ticker.speed = 0.5; // Half speed (slow motion)
ticker.speed = 2.0; // Double speed (fast forward)

// Temporary speed changes
function slowMotion() {
    const normalSpeed = ticker.speed;
    ticker.speed = 0.2;
    setTimeout(() => {
        ticker.speed = normalSpeed;
    }, 1000);
}

started

started: boolean = false

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.

Example

// Check ticker state
const ticker = new Ticker();
console.log(ticker.started); // false

// Start and verify
ticker.start();
console.log(ticker.started); // true

`Static`targetFPMS

targetFPMS: number = 0.06

Target frame rate in frames per millisecond. Used for converting deltaTime to a scalar time delta.

Example

// Default is 0.06 (60 FPS)
console.log(Ticker.targetFPMS); // 0.06

// Calculate target frame duration
const frameDuration = 1 / Ticker.targetFPMS; // ≈ 16.67ms

// Use in custom timing calculations
const deltaTime = elapsedMS * Ticker.targetFPMS;

Remarks

Default is 0.06 (equivalent to 60 FPS)
Used in deltaTime calculations
Affects all ticker instances

Default

0.06

See

Ticker#deltaTime For time scaling
Ticker#FPS For actual frame rate

Accessors

count

get count(): number

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

Returns number

Example

// Check number of active listeners
const ticker = new Ticker();
console.log(ticker.count); // 0

// Add some listeners
ticker.add(() => {});
ticker.add(() => {});
console.log(ticker.count); // 2

// Check after cleanup
ticker.destroy();
console.log(ticker.count); // 0

See

Ticker#add For adding listeners
Ticker#remove For removing listeners

FPS

get FPS(): number
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.

Returns number
Example
```
// Basic FPS monitoring
ticker.add(() => {
    console.log(`Current FPS: ${Math.round(ticker.FPS)}`);
});
```

maxFPS

get 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

Returns number

Example

// Set minimum acceptable frame rate
const ticker = new Ticker();
ticker.maxFPS = 60; // Never go above 60 FPS

// Use with maxFPS for frame rate clamping
ticker.minFPS = 30;
ticker.maxFPS = 60;

// Monitor delta capping
ticker.add(() => {
    // Delta time will be capped based on maxFPS
    console.log(`Delta time: ${ticker.deltaTime}`);
});

Default

set maxFPS(fps: number): void
Parameters
- fps: number
Returns void

minFPS

get 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.

Returns number

Example

// Set minimum acceptable frame rate
const ticker = new Ticker();
ticker.minFPS = 30; // Never go below 30 FPS

// Use with maxFPS for frame rate clamping
ticker.minFPS = 30;
ticker.maxFPS = 60;

// Monitor delta capping
ticker.add(() => {
    // Delta time will be capped based on minFPS
    console.log(`Delta time: ${ticker.deltaTime}`);
});

Default

set minFPS(fps: number): void
Parameters
- fps: number
Returns void

`Static`shared

get shared(): Ticker

The shared ticker instance used by AnimatedSprite and by VideoSource 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.

Returns Ticker

Example

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();

Example

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());

`Static`system

get system(): Ticker
Advanced
The system ticker instance used by PrepareBase 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.

Returns Ticker

Methods

add

add<T = any>(fn: TickerCallback<T>, context?: T, priority?: number): this

Type Parameters

T = any

Parameters

fn: TickerCallback<T>
The listener function to be added for updates
Optionalcontext: T
The listener context
priority: number = UPDATE_PRIORITY.NORMAL
The priority for emitting (default: UPDATE_PRIORITY.NORMAL)

Returns this

This instance of a ticker

Example

// Basic update handler
ticker.add((ticker) => {
    // Update every frame
    sprite.rotation += 0.1 * ticker.deltaTime;
});

// With specific context
const game = {
    update(ticker) {
        this.physics.update(ticker.deltaTime);
    }
};
ticker.add(game.update, game);

// With priority
ticker.add(
    (ticker) => {
        // Runs before normal priority updates
        physics.update(ticker.deltaTime);
    },
    undefined,
    UPDATE_PRIORITY.HIGH
);

See

Ticker#addOnce For one-time handlers
Ticker#remove For removing handlers

addOnce

addOnce<T = any>(fn: TickerCallback<T>, context?: T, priority?: number): this
Add a handler for the tick event which is only executed once on the next frame.
Type Parameters
- T = any
Parameters
- fn: TickerCallback<T>
  The listener function to be added for one update
- Optionalcontext: T
  The listener context
- priority: number = UPDATE_PRIORITY.NORMAL
  The priority for emitting (default: UPDATE_PRIORITY.NORMAL)
Returns this
This instance of a ticker
Example
```
// Basic one-time update
ticker.addOnce(() => {
    console.log('Runs next frame only');
});

// With specific context
const game = {
    init(ticker) {
        this.loadResources();
        console.log('Game initialized');
    }
};
ticker.addOnce(game.init, game);

// With priority
ticker.addOnce(
    () => {
        // High priority one-time setup
        physics.init();
    },
    undefined,
    UPDATE_PRIORITY.HIGH
);
```
See
- Ticker#add For continuous updates
- Ticker#remove For removing handlers

destroy

destroy(): void
Destroy the ticker and don't use after this. Calling this method removes all references to internal events.

Returns void
Example
```
// Clean up with active listeners
const ticker = new Ticker();
ticker.add(() => {});
ticker.destroy(); // Removes all listeners
```
See
- Ticker#stop For stopping without destroying
- Ticker#remove For removing specific listeners

remove

remove<T = any>(fn: TickerCallback<T>, context?: T): this

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

Type Parameters

T = any

Parameters

fn: TickerCallback<T>
The listener function to be removed
Optionalcontext: T
The listener context to be removed

Returns this

This instance of a ticker

Example

// Basic removal
const onTick = () => {
    sprite.rotation += 0.1;
};
ticker.add(onTick);
ticker.remove(onTick);

// Remove with context
const game = {
    update(ticker) {
        this.physics.update(ticker.deltaTime);
    }
};
ticker.add(game.update, game);
ticker.remove(game.update, game);

// Remove all matching handlers
// (if same function was added multiple times)
ticker.add(onTick);
ticker.add(onTick);
ticker.remove(onTick); // Removes all instances

See

Ticker#add For adding handlers
Ticker#addOnce For one-time handlers

start

start(): void
Starts the ticker. If the ticker has listeners a new animation frame is requested at this point.

Returns void
Example
```
// Basic manual start
const ticker = new Ticker();
ticker.add(() => {
    // Animation code here
});
ticker.start();
```
See
- Ticker#stop For stopping the ticker
- Ticker#autoStart For automatic starting
- Ticker#started For checking ticker state

stop

stop(): void
Stops the ticker. If the ticker has requested an animation frame it is canceled at this point.

Returns void
Example
```
// Basic stop
const ticker = new Ticker();
ticker.stop();
```
See
- Ticker#start For starting the ticker
- Ticker#started For checking ticker state
- Ticker#destroy For cleaning up the ticker

update

update(currentTime?: number): void
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.
Parameters
- currentTime: number = ...
  The current time of execution (defaults to performance.now())
Returns void
Example
```
// Basic manual update
const ticker = new Ticker();
ticker.update(performance.now());
```
See
- Ticker#deltaTime For frame delta value
- Ticker#elapsedMS For raw elapsed time

Class Ticker

Example

See

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns Ticker

Properties

autoStart

Example

Default

See

deltaMS

Example

Default

deltaTime

Example

elapsedMS

Example

Default

lastTime

Example

speed

Example

started

Example

StatictargetFPMS

Example

Remarks

Default

See

Accessors

count

Returns number

Example

See

FPS

Returns number

Example

maxFPS

Returns number

Example

Default

Parameters

Returns void

minFPS

Returns number

Example

Default

Parameters

Returns void

Staticshared

Returns Ticker

Example

Example

Staticsystem

Returns Ticker

Methods

add

Type Parameters

Parameters

Returns this

Example

See

addOnce

Type Parameters

Parameters

Returns this

Example

See

destroy

Returns void

Example

See

remove

Type Parameters

`Static`targetFPMS

`Static`shared

`Static`system