How to Create Multiple Tickers in PixiJS

Yes, you can create and run multiple independent Ticker instances within a single Pixi.js application. While Pixi.js provides a default shared ticker (PIXI.Ticker.shared or app.ticker) for general rendering and updates, instantiating custom, independent tickers allows you to isolate different animation loops, control update rates separately, and pause specific game systems without affecting others.

Creating and Using a Custom Ticker

To create a new, independent ticker, you instantiate the PIXI.Ticker class directly. Unlike the shared ticker, a newly created ticker is not started by default and must be initiated manually.

import * as PIXI from 'pixi.js';

// Create a standard Pixi.js Application
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// 1. Create a new, independent Ticker instance
const physicsTicker = new PIXI.Ticker();

// 2. Add a listener to your custom ticker
physicsTicker.add((deltaTime) => {
    // This code runs independently of the main render loop
    console.log("Physics update tick:", deltaTime);
});

// 3. Start the custom ticker
physicsTicker.start();

Why Use Multiple Tickers?

Using multiple tickers offers several architectural advantages for complex applications and games:

1. Independent Pausing and Resuming

In many games, you need to pause the gameplay (physics, character movement, enemy AI) while keeping the user interface (UI) or background effects active. By placing gameplay logic on a custom gameplayTicker and UI animations on the default app.ticker, you can easily pause the game with a single call:

// Pause only the gameplay, UI remains interactive
gameplayTicker.stop();

2. Custom Frame Rates and Throttle Control

You can control the speed and frame budget of individual tickers. For example, you might want CPU-heavy pathfinding or AI logic to run at a lower frequency than your 60 FPS rendering loop to save performance.

const aiTicker = new PIXI.Ticker();
aiTicker.maxFPS = 15; // Limit this ticker to 15 ticks per second
aiTicker.add(() => {
    // Run AI calculations here
});
aiTicker.start();

3. Adjusting Individual Speed (Time Dilation)

Each Ticker instance has its own speed property. This allows you to implement slow-motion or fast-forward effects for specific systems without speeding up or slowing down the entire application.

// Run gameplay at half speed (slow-motion)
gameplayTicker.speed = 0.5;

// Run particle effects ticker at double speed
particleTicker.speed = 2.0;

Integration with the Main Render Loop

By default, independent tickers run on their own requestAnimationFrame loop. However, if you want your custom ticker to remain synchronized with Pixi’s main rendering cycle, you can manually tick your custom ticker inside the main application ticker instead of calling .start():

const customTicker = new PIXI.Ticker();

customTicker.add((delta) => {
    // Custom logic here
});

// Manually advance the custom ticker inside the main render loop
app.ticker.add((delta) => {
    customTicker.update();
});

Using this approach, you retain control over pausing and speed scaling via customTicker while ensuring all updates happen in lockstep with the primary rendering frame.