Loading an Asset Manifest

For applications with many assets, managing individual asset loading can become cumbersome. Pixi.js provides a robust Asset Manifest system that allows you to define all your assets, their paths, and groups in a single JSON file. This approach simplifies asset management, improves organization, and enables more efficient loading strategies.

It’s recommended to use PixiJs AssetPack to generate the asset manifest automatically for you.

This guide demonstrates how to use Solid.js’s createResource to load an entire asset manifest and then access the loaded assets within your pixi-solid application.

What is an Asset Manifest?

An asset manifest is a JSON file that describes your application’s assets. It typically includes:

bundles: Groups of assets that can be loaded together. This is extremely useful for loading assets required for a specific scene or component.
assets: Individual assets with their unique alias (how you refer to them in code) and src (their file path).

Example `assets-manifest.json`

Let’s assume you have an assets-manifest.json file in your public folder like this:

{
  "bundles": [
    {
      "name": "game-assets",
      "assets": [
        {
          "alias": "background",
          "src": "/assets/background.png"
        },
        {
          "alias": "player_idle",
          "src": "/assets/player_idle.png"
        },
        {
          "alias": "coin",
          "src": "/assets/coin.png"
        }
      ]
    },
    {
      "name": "ui-assets",
      "assets": [
        {
          "alias": "button_play",
          "src": "/assets/button_play.png"
        },
        {
          "alias": "font_pixel",
          "src": "/assets/pixel_font.fnt"
        }
      ]
    }
  ]
}

With createResource, you can easily load your manifest and then use Pixi.js’s Assets manager to load the bundles defined within it.

Example: Loading Assets from a Manifest

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

export const AssetManifestLoadingDemo = () => {
  // Use createResource to initialize Assets and load the manifest
  const [assetsLoaded] = createResource(async () => {
    // 1. Initialize Pixi.js Assets manager
    await Assets.init({
      manifest: "/assets-manifest.json", // Specify your manifest file here
    });

    // 2. Load a specific bundle (or all bundles if you don't specify)
    // Here, we load the "game-assets" bundle.
    await Assets.loadBundle("game-assets");

    // We can also load other bundles as needed, or all of them.
    await Assets.loadBundle("ui-assets");

    // Return a boolean or any indicator that assets are ready
    return true;
  });

  return (
    <PixiApplication>
    {/* Suspense will show the fallback while any resources inside it are pending */}
      <Suspense fallback={<p>Loading...</p>}>
        <PixiCanvas>
          {/* Use <Show> to render components only after assets are loaded */}
          <Show when={assetsLoaded()}>
            <PixiStage>
              {/* Access assets using their alias defined in the manifest */}
              <Sprite texture={Assets.get<Pixi.Texture>("background")} anchor={0.5} position={[400, 300]} scale={0.8} />
              <Sprite texture={Assets.get<Pixi.Texture>("player_idle")} anchor={0.5} position={[400, 300]} />
              <Sprite texture={Assets.get<Pixi.Texture>("coin")} anchor={0.5} position={[450, 250]} />
              <Sprite texture={Assets.get<Pixi.Texture>("button_play")} anchor={0.5} position={[400, 450]} />
              <Text
                text="Game Loaded!"
                style={{ fontFamily: "font_pixel", fontSize: 32, fill: 0xffffff }}
                position={[200, 50]}
              />
            </PixiStage>
          </Show>
        </PixiCanvas>
      <Suspense>
    </PixiApplication>
  );
};

If we have a HTML based SolidJS app we can go further and put the Suspense boundary around a lazy dynamic import of our whole pixi-solid app. That way we could show a HTML loading indicator before we even start loading PixiJS itself.

Using an asset manifest is a powerful way to streamline asset loading in larger pixi-solid applications and we can combine with the SolidJS built in createResource and <Suspense> to manage loading states.

Loading an Asset Manifest

What is an Asset Manifest?

Example assets-manifest.json

Example: Loading Assets from a Manifest

Further reading

Example `assets-manifest.json`