Animated Sprite

A SolidJS component that renders a PixiJS AnimatedSprite.

Please see the PixiJS docs for detailed information.

autoUpdate behaviour

AnimatedSprite in pixi-solid autoUpdate behaviour intentionally differs from PixiJS defaults to integrate with the pixi-solid ticker context providers.

In PixiJS:

• AnimatedSprite default behaviour or with autoUpdate: true updates itself with the Ticker.shared.

In pixi-solid:

• AnimatedSprite default behaviour or with autoUpdate={true} updates itself with the ticker in the nearest parent Ticker context provider. Either a PixiCanvas or TickerProvider.

This avoids accidentally mixing multiple tickers and makes AnimatedSprite behaviour consistent with the rest of the pixi-solid lifecycle utilities.

Practical guidance

• Use the default behaviour (omit autoUpdate) for most apps. This keeps animation timing bound to your app’s configured ticker.
• Set autoUpdate={false} and access the instance via a ref and manually call the update method if you want full manual control over frame updates.

Demo

Code example

demo-app.tsx

import { AnimatedSprite, PixiCanvas, usePixiScreen } from "pixi-solid";
import type * as Pixi from "pixi.js";
import { Assets, TextureStyle } from "pixi.js";
import { createResource, Show } from "solid-js";

import assetUrl_01 from "@/assets/run_01.png";
import assetUrl_02 from "@/assets/run_02.png";
import assetUrl_03 from "@/assets/run_03.png";
import assetUrl_04 from "@/assets/run_04.png";
import assetUrl_05 from "@/assets/run_05.png";
import assetUrl_06 from "@/assets/run_06.png";

const DemoComponent = () => {
  const pixiScreen = usePixiScreen();

  // Create a resource to load the required assets
  const [textureResource] = createResource(async () => {
    // Setting scale mode to nearest for crisp pixel art
    TextureStyle.defaultOptions.scaleMode = "nearest";

    const runTextures = await Assets.load<Pixi.Texture>([
      assetUrl_01,
      assetUrl_02,
      assetUrl_03,
      assetUrl_04,
      assetUrl_05,
      assetUrl_06,
    ]);

    return Object.values(runTextures);
  });

  return (
    <Show when={textureResource()}>
      {/* Show our AnimatedSprite only when the textures are loaded */}
      {(textures) => (
        <AnimatedSprite
          autoPlay={true}
          textures={textures()}
          scale={3}
          animationSpeed={0.25}
          anchor={0.5}
          x={pixiScreen.width * 0.5}
          y={pixiScreen.height * 0.5}
        />
      )}
    </Show>
  );
};

export const Demo = () => (
  <PixiCanvas style={{ "aspect-ratio": "2/1.5" }} antialias={true}>
    <DemoComponent />
  </PixiCanvas>
);