@pixi/ticker

What is @pixi/ticker?

@pixi/ticker is a module from the PixiJS library that provides a highly efficient and flexible ticker for managing animation frames and timed updates. It is particularly useful for game development and other real-time applications where precise control over the rendering loop is required.

What are @pixi/ticker's main functionalities?

Basic Ticker Usage

This code demonstrates how to create a basic ticker, add a callback function to it, and start the ticker. The callback function logs the delta time (time elapsed since the last frame) to the console.

const { Ticker } = require('@pixi/ticker');
const ticker = new Ticker();
ticker.add((deltaTime) => {
  console.log(`Delta time: ${deltaTime}`);
});
ticker.start();

Adding Multiple Callbacks

This code shows how to add multiple callback functions to a single ticker. Both callbacks will be executed on each tick, logging their respective messages to the console.

const { Ticker } = require('@pixi/ticker');
const ticker = new Ticker();
const callback1 = (deltaTime) => {
  console.log(`Callback 1 - Delta time: ${deltaTime}`);
};
const callback2 = (deltaTime) => {
  console.log(`Callback 2 - Delta time: ${deltaTime}`);
};
ticker.add(callback1);
ticker.add(callback2);
ticker.start();

Removing Callbacks

This code demonstrates how to remove a callback from the ticker after a certain period of time (5 seconds in this case). The callback will no longer be executed after it is removed.

const { Ticker } = require('@pixi/ticker');
const ticker = new Ticker();
const callback = (deltaTime) => {
  console.log(`Delta time: ${deltaTime}`);
};
ticker.add(callback);
ticker.start();
setTimeout(() => {
  ticker.remove(callback);
  console.log('Callback removed');
}, 5000);

Pausing and Resuming the Ticker

This code shows how to pause and resume the ticker. The ticker is paused after 3 seconds and resumed after 6 seconds, with appropriate messages logged to the console.

const { Ticker } = require('@pixi/ticker');
const ticker = new Ticker();
ticker.add((deltaTime) => {
  console.log(`Delta time: ${deltaTime}`);
});
ticker.start();
setTimeout(() => {
  ticker.stop();
  console.log('Ticker paused');
}, 3000);
setTimeout(() => {
  ticker.start();
  console.log('Ticker resumed');
}, 6000);

Other packages similar to @pixi/ticker

raf

The 'raf' package provides a simple polyfill for requestAnimationFrame, which is used to create smooth animations in the browser. Unlike @pixi/ticker, 'raf' is more lightweight and does not offer built-in support for managing multiple callbacks or delta time calculations.

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It provides more advanced animation capabilities compared to @pixi/ticker, including keyframes, timelines, and easing functions. However, it is more focused on creating complex animations rather than managing a rendering loop.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It offers a wide range of features, including timelines, tweens, and various easing options. While GSAP is more feature-rich for animation purposes, @pixi/ticker is more specialized for managing the rendering loop in real-time applications.

README

@pixi/ticker

Installation

npm install @pixi/ticker

Usage

Create a Ticker object directly:

import { Ticker } from '@pixi/ticker';

const ticker = new Ticker();
ticker.start();

Use as an Application plugin:

import { TickerPlugin } from '@pixi/ticker';
import { Application } from '@pixi/app';
import { extensions } from '@pixi/core';

extensions.add(TickerPlugin);

const app = new Application();
app.ticker.start();