onTick

The onTick hook registers a callback function that runs on every frame of the PixiJS ticker. onTick automatically adds the callback to the ticker when it first runs and removes it when the hook's owning scope is cleaned up.

Call onTick within a SolidJS tracking scope. This scope must be a descendant of <PixiApplicationProvider />, <PixiCanvas />, or <TickerProvider />.

Usage

import { onTick, PixiCanvas, Sprite } from "pixi-solid";
import { createSignal } from "solid-js";
import { Texture } from "pixi.js";
import type * 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;
        });
      }}
    />
  );
};

export const DemoApp = () => {
  return (
    <PixiCanvas>
      <RotatingSpriteBySignal texture={Texture.WHITE} />
    </PixiCanvas>
  );
};

When to use it

• To subscribe to the ticker for the lifetime of a SolidJS tracking scope (component or createEffect).
• To run code on each ticker update without managing ticker.add and ticker.remove directly.
• To create continuous animations, movement, or other frame-by-frame updates within a component.