Control Pixi.js Ticker: Pause, Resume, and Stop

Controlling the animation loop in Pixi.js is essential for managing game states, pausing gameplay, and optimizing performance. This article provides a quick and direct guide on how to programmatically pause, resume, and entirely destroy the main Pixi.js Ticker using simple API commands.

Accessing the Ticker

In Pixi.js, the update loop is driven by a Ticker instance. If you are using the PIXI.Application helper, you can access the main ticker via app.ticker. If you are working with a global ticker instance, you can access it via PIXI.Ticker.shared.

How to Pause the Ticker

To temporarily pause the rendering loop, use the stop() method. This halts the execution of any functions added to the ticker queue but does not delete them.

// Pause the application ticker
app.ticker.stop();

// Alternative: Using the shared ticker
PIXI.Ticker.shared.stop();

You can also check if the ticker is currently running by querying the started boolean property:

if (app.ticker.started) {
    app.ticker.stop();
}

How to Resume the Ticker

To resume the update loop from where it was paused, use the start() method. This restarts the ticker and resumes calling all registered update listeners.

// Resume the application ticker
app.ticker.start();

// Alternative: Using the shared ticker
PIXI.Ticker.shared.start();

How to Completely Stop and Destroy the Ticker

If you need to permanently shut down a ticker—for example, when tearing down a scene or transitioning to a completely different part of an application—you should destroy it. This removes all event listeners and frees up memory.

// Stop and destroy the ticker
app.ticker.destroy();

Note that once a ticker is destroyed, it cannot be restarted using start(). You would need to instantiate a new PIXI.Ticker if you require a loop again.