getTicker

The pixi-solid library provides two hooks, getTicker and onTick, to interact with the Pixi.js Ticker instance.

The getTicker hook provides direct access to the PIXI.Application’s shared Ticker instance. This is useful when you need more control over the ticker, such as pausing, starting, or adjusting its speed globally. The hook must be called from a component that is a descendant of the <PixiApplication />component.

Usage

import { getTicker, Container } from "pixi-solid";
import { createEffect, createSignal } from "solid-js";

const MyComponent = () => {
  const [tickerRunning, setTickerRunning] = createSignal(true);
  const ticker = getTicker();

  createEffect(() => {
    // You can now safely use the Pixi.js Ticker instance
    console.log("Pixi.js Ticker instance:", ticker);

    // Example start and stop the ticker based on a signal
    if (tickerRunning()) {
      ticker.start();
    } else {
      ticker.stop();
    }
  });

  return <Container>{/* Your components here*/}</Container>;
};

When to use it

• When you need to globally control the animation loop (e.g., stopping or starting all animations).
• To adjust the overall speed or framerate of the application.
• To add or remove ticker callbacks dynamically based on complex logic.