Skip to content
Pixi Solid

Loading Individual Assets

Solid.js’s createResource function provides an excellent way to handle asynchronous data loading and we can pair it very simply with the PixiJS Assets class.

Example: Loading a Single Image

Section titled “Example: Loading a Single Image”

Let’s say you want to load a single background image for your scene.

import type * as Pixi from "pixi.js";
import { Assets } from "pixi.js";
import { PixiApplication, PixiCanvas, PixiStage, 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 (
    <PixiApplication>
      <PixiCanvas>
        {/* Use the <Show> component to render the Sprite only when the asset is loaded */}
        <Show when={backgroundImage()}>
          {(texture) => (
            <PixiStage>
              <Sprite texture={texture()} anchor={0.5} position={[400, 300]} scale={0.5} />
            </PixiStage>
          )}
        </Show>
      </PixiCanvas>
    </PixiApplication>
  );
};

Further reading

Section titled “Further reading”