Skip to content
Pixi Solid

TickerProvider

TickerProvider supplies a Pixi.Ticker to descendants through context. It does not create or add anything to the Pixi scene graph.

PixiCanvas and PixiApplicationProvider already provide ticker context. Use TickerProvider when a scene graph branch needs a different ticker instance. Descendants can use onTick, createDelay, createAsyncDelay, and getTicker with that ticker.

Example

Section titled “Example”

This branch runs at half speed while the rest of the scene uses the canvas ticker.

import { PixiCanvas, Container, TickerProvider, onTick } from "pixi-solid";
import { Sprite } from "pixi-solid";
import { Texture, Ticker } from "pixi.js";
import { createSignal, onCleanup } from "solid-js";


// Component that rotates using the context ticker
const RotatingSprite = () => {
  const [rotation, setRotation] = createSignal(0);


  onTick((ticker) => {
    setRotation((r) => r + 0.01 * ticker.deltaTime);
  });


  return <Sprite texture={Texture.WHITE} rotation={rotation()} x={100} y={100} />;
};


export const DemoApp = () => {
  // Create a separate ticker for one scene graph branch.
  const slowTicker = new Ticker();
  slowTicker.speed = 0.5; // Half speed
  slowTicker.start();


  // The caller owns this externally-created ticker.
  onCleanup(() => {
    slowTicker.stop();
    slowTicker.destroy();
  });


  return (
    <PixiCanvas style={{ width: "100%", height: "100dvh" }}>
      <Container>
        {/* Uses the default canvas ticker */}
        <RotatingSprite />


        {/* Uses its own slower ticker */}
        <TickerProvider ticker={slowTicker}>
          <RotatingSprite />
        </TickerProvider>
      </Container>
    </PixiCanvas>
  );
};

Props

Section titled “Props”
  • ticker: Pixi.Ticker - The ticker instance to provide to child components (required)
  • children: JSX.Element - The child components that will have access to the ticker context

When to use it

Section titled “When to use it”

TickerProvider is an edge-case provider. Use it when:

  • A scene graph branch needs an independently managed ticker, such as a different rate or clock.
  • An existing ticker owned by another system must drive a branch.
  • A non-standard integration must populate ticker context outside the normal application provider tree.

For normal scenes, use PixiCanvas or PixiApplicationProvider. For tests, use createManualTicker and createTestContext instead.

The caller owns the ticker passed to TickerProvider. Create, start, stop, and destroy it outside the provider when appropriate.

Further reading

Section titled “Further reading”