Loading Individual Assets

Solid.js's createResource function handles asynchronous data loading. Pair it with the PixiJS Assets class to load assets.

Example: Loading a Single Image

This example loads a single background image for a scene.

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

export const IndividualAssetLoadingDemo = () => {
  // Use createResource to load a single asset
  const [backgroundImage] = createResource(async () => {
    // Initialize Pixi.js Assets manager if not already done globally
    await Assets.init();
    // Load a single asset by its path
    const texture = await Assets.load<Pixi.Texture>("/background.png");
    return texture;
  });

  return (
    <PixiCanvas>
      {/* Use the <Show> component to render the Sprite only when the asset is loaded */}
      <Show when={backgroundImage()}>
        {(texture) => <Sprite texture={texture()} anchor={0.5} position={[400, 300]} scale={0.5} />}
      </Show>
    </PixiCanvas>
  );
};

Further reading

• See the Solid.js createResource docs.
• See the PixiJS Assets guide for details.