onTick

The onTick hook is a more focused utility for registering a callback function to be executed on every frame of the PIXI.Application’s ticker. The callback is automatically added to the ticker when it first runs and removed when the hook’s owning scope is cleaned up, ensuring proper resource management.

It must be called within a SolidJS tracking scope, such as a component or another hook, that is a descendant of PixiApplication.

Usage

import { onTick, Sprite } from "pixi-solid";
import { createSignal } from "solid-js";
import * as Pixi from "pixi.js";

const RotatingSpriteBySignal = (props: { texture: Pixi.Texture }) => {
  const [rotation, setRotation] = createSignal(0);

  onTick((ticker) => {
    // Set a signal every frame
    setRotation((r) => r + 0.01 * ticker.deltaTime);
  });

  return <Sprite texture={props.texture} anchor={0.5} rotation={rotation()} />;
};

const RotatingSprite = (props: { texture: Pixi.Texture }) => {
  return (
    <Sprite
      texture={props.texture}
      anchor={0.5}
      ref={(sprite) => {
        onTick((ticker) => {
          // Update rotation directly every frame
          // Slightly more efficient but limited in scope
          sprite.rotation = sprite.rotation + 0.01 * ticker.deltaTime;
        });
      }}
    />
  );
};

When to use it

• Any time you want to subscribe to the ticker for the lifetime of a SolidJS tracking scope (component or createEffect).
• When you need a simple and self-managing way to run code on each ticker update without directly managing ticker.add and ticker.remove.
• For creating continuous animations, movement, or other frame-by-frame updates within a component.