Animated Sprite

A SolidJS component that renders a PixiJS AnimatedSprite.

Please see the PixiJS docs for detailed information.

Props

AnimatedSprite accepts all standard sprite props (anchor, event handlers, point-axis shorthands) plus the following AnimatedSprite-specific options:

Prop	Type	Description
textures	Pixi.Texture[]	Array of textures to cycle through
playing	boolean	Whether the animation is currently playing (default true)
loop	boolean	Whether the animation loops (default true)
animationSpeed	number	Speed multiplier for the animation (default 1)
autoUpdate	boolean	See autoUpdate behaviour below (default true)

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>
);