LogoPixi’VN
pixi-jsClasses

Class: Ticker

pixi-vn on GitHubPatreon

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:67

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.

Time Units

  • deltaTime: Dimensionless scalar (typically ~1.0 at 60 FPS) for frame-independent animations
  • deltaMS: Milliseconds elapsed (capped and speed-scaled) for time-based calculations
  • elapsedMS: Raw milliseconds elapsed (uncapped, unscaled) for measurements
  • lastTime: Timestamp in milliseconds since epoch (performance.now() format)

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

Example

// Basic ticker usage with different time units
const ticker = new Ticker();
ticker.add((ticker) => {
    // Frame-independent animation using dimensionless deltaTime
    sprite.rotation += 0.1 * ticker.deltaTime;

    // Time-based animation using deltaMS (milliseconds)
    sprite.x += (100 / 1000) * ticker.deltaMS; // 100 pixels per second
});
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

Standard

Constructors

Constructor

> new Ticker(): Ticker

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:258

Returns

Ticker

Properties

autoStart

> autoStart: boolean

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:118

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

deltaMS

> deltaMS: number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:160

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

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:135

Scalar representing the delta time factor. This is a dimensionless value representing the fraction of a frame at the target framerate. At 60 FPS, this value is typically around 1.0.

This is NOT in milliseconds - it's a scalar multiplier for frame-independent animations. For actual milliseconds, use Ticker#deltaMS.

Example

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

elapsedMS

> elapsedMS: number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:173

Time elapsed in milliseconds from the last frame to this frame. This value is not capped or scaled and provides raw timing information.

Unlike Ticker#deltaMS, this value is unmodified by speed scaling or FPS capping.

Example

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

lastTime

> lastTime: number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:188

The last time update was invoked, in milliseconds since epoch. Similar to performance.now() timestamp format.

Used internally for calculating time deltas between frames.

Example

ticker.add((ticker) => {
    const currentTime = performance.now();
    const timeSinceLastFrame = currentTime - ticker.lastTime;
    console.log(`Time since last frame: ${timeSinceLastFrame}ms`);
});

speed

> speed: number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:208

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

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:229

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

targetFPMS

> static targetFPMS: number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:90

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

Accessors

count

Get Signature

> get count(): number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:397

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

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
Returns

number

FPS

Get Signature

> get FPS(): number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:479

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.

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

number

maxFPS

Get Signature

> get maxFPS(): number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:535

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.

If maxFPS is set below the current minFPS, minFPS is automatically lowered to match. This keeps the two limits consistent.

Example
// Cap the frame rate
const ticker = new Ticker();
ticker.maxFPS = 60; // Never go above 60 FPS

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

// maxFPS below minFPS pushes minFPS down
ticker.maxFPS = 20; // minFPS is now also 20
Default
0
Returns

number

Set Signature

> set maxFPS(fps): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:536

Parameters
fps

number

Returns

void

minFPS

Get Signature

> get minFPS(): number

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:507

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 (typically 60).

If maxFPS is currently set (non-zero) and minFPS is set above it, maxFPS is automatically raised to match. This keeps the two limits consistent.

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;

// minFPS above maxFPS pushes maxFPS up
ticker.minFPS = 50; // maxFPS is raised to 50
Default
10
Returns

number

Set Signature

> set minFPS(fps): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:508

Parameters
fps

number

Returns

void

shared

Get Signature

> get static shared(): Ticker

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:580

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.

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

Ticker

system

Get Signature

> get static system(): Ticker

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:591

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.

Advanced
Returns

Ticker

Methods

add()

> add<T>(fn, context?, priority?): this

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:296

Register a handler for tick events.

Type Parameters

T

T = any

Parameters

fn

TickerCallback<T>

The listener function to add. Receives the Ticker instance as parameter

context?

T

The context for the listener

priority?

number

The priority of the listener

Returns

this

Example

// Access time properties through the ticker parameter
ticker.add((ticker) => {
    // Use deltaTime (dimensionless scalar) for frame-independent animations
    sprite.rotation += 0.1 * ticker.deltaTime;

    // Use deltaMS (milliseconds) for time-based calculations
    const progress = ticker.deltaMS / animationDuration;

    // Use elapsedMS for raw timing measurements
    console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
});

addOnce()

> addOnce<T>(fn, context?, priority?): this

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:332

Add a handler for the tick event which is only executed once on the next frame.

Type Parameters

T

T = any

Parameters

fn

TickerCallback<T>

The listener function to be added for one update

context?

T

The listener context

priority?

number

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

destroy()

> destroy(): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:439

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

remove()

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

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:375

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

T = any

Parameters

fn

TickerCallback<T>

The listener function to be removed

context?

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

start()

> start(): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:413

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

stop()

> stop(): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:426

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

update()

> update(currentTime?): void

Defined in: node_modules/pixi.js/lib/ticker/Ticker.d.ts:463

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

Class: TextureUvs

Previous Page

Class: TickerPlugin

Next Page