pixi.js
    Preparing search index...

    Interface AssetInitOptions

    Options for initializing the Assets class. These options configure how assets are loaded, resolved, and managed in your PixiJS application.

    interface AssetInitOptions {
        basePath?: string;
        bundleIdentifier?: BundleIdentifierOptions;
        defaultSearchParams?: string | Record<string, any>;
        loadOptions?: Partial<LoadOptions>;
        manifest?: string | AssetsManifest;
        preferences?: Partial<AssetsPreferences>;
        skipDetections?: boolean;
        texturePreference?: {
            format?: ArrayOr<string>;
            resolution?: number | number[];
        };
    }
    Index

    Properties

    basePath? bundleIdentifier? defaultSearchParams? loadOptions? manifest? preferences? skipDetections? texturePreference?

    Properties

    basePath?: string

    Base path prepended to all asset URLs. Useful for CDN hosting.

    await Assets.init({
        basePath: 'https://my-cdn.com/assets/'
    });

    // Now you can load assets like this:
    // Will load from: https://my-cdn.com/assets/images/sprite.png
    const texture = await Assets.load('images/sprite.png');
    bundleIdentifier?: BundleIdentifierOptions

    Override how bundle IDs are generated and resolved.

    This allows you to customize how assets are grouped and accessed via bundles and allow for multiple bundles to share the same asset keys.

    const manifest = {
        bundles: [
            {
                name: 'bunny1',
                assets: [
                    {
                        alias: ['character', 'character2'],
                        src: 'textures/bunny.png',
                    },
                ],
            },
            {
                name: 'bunny2',
                assets: [
                    {
                        alias: ['character', 'character2'],
                        src: 'textures/bunny-2.png',
                    },
                ],
            },
        ]
    };

    const bundleIdentifier: BundleIdentifierOptions = {
        connector: ':',
    };

    await Assets.init({ manifest, basePath, bundleIdentifier });

    const resources = await Assets.loadBundle('bunny1');
    const resources2 = await Assets.loadBundle('bunny2');

    console.log(resources.character === resources2.character); // false
    defaultSearchParams?: string | Record<string, any>

    URL parameters to append to all asset URLs. Useful for cache-busting or version control.

    // As a string
    await Assets.init({
        defaultSearchParams: 'version=1.0.0'
    });

    // As an object
    await Assets.init({
        defaultSearchParams: {
            version: '1.0.0',
            t: Date.now()
        }
    });
    loadOptions?: Partial<LoadOptions>

    Options for defining the loading behavior of assets.

    await Assets.init({
       loadOptions: {
          onProgress: (progress) => console.log(`Loading: ${Math.round(progress * 100)}%`),
          onError: (error, asset) => console.error(`Error loading ${asset.src}: ${error.message}`),
          strategy: 'retry',
          retryCount: 5,
          retryDelay: 500,
      }
    });
    • onProgress callback receives values from 0.0 to 1.0
    • onError callback is invoked for individual asset load failures
    • strategy can be 'throw' (default), 'retry', or 'skip'
    • retryCount sets how many times to retry failed assets (default 3)
    • retryDelay sets the delay between retries in milliseconds (default 250ms)

    LoadOptions For all available load options

    manifest?: string | AssetsManifest

    A manifest defining all your application's assets. Can be a URL to a JSON file or a manifest object.

    // Using a manifest object
    await Assets.init({
        manifest: {
            bundles: [{
                name: 'game-screen',
                assets: [
                    {
                        alias: 'hero',
                        src: 'hero.{png,webp}'
                    },
                    {
                        alias: 'map',
                        src: 'map.json'
                    }
                ]
            }]
        }
    });

    // Using a URL to manifest
    await Assets.init({
        manifest: 'assets/manifest.json'
    });

    // loading a bundle from the manifest
    await Assets.loadBundle('game-screen');

    // load individual assets from the manifest
    const heroTexture = await Assets.load('hero');
    preferences?: Partial<AssetsPreferences>

    Optional preferences for asset loading behavior.

    await Assets.init({
        preferences: {
            crossOrigin: 'anonymous',
            parseAsGraphicsContext: false
        }
    });
    skipDetections?: boolean

    Skip browser format detection for faster initialization. Only use if you know exactly what formats your target browsers support.

    await Assets.init({
        skipDetections: true,
        texturePreference: {
            format: ['webp', 'png'] // Must explicitly set formats
        }
    });
    texturePreference?: { format?: ArrayOr<string>; resolution?: number | number[] }

    Configure texture loading preferences. Useful for optimizing asset delivery based on device capabilities.

    Type declaration

    • Optionalformat?: ArrayOr<string>

      Preferred texture formats in order of preference. Default: ['avif', 'webp', 'png', 'jpg', 'jpeg']

    • Optionalresolution?: number | number[]

      Preferred texture resolution(s). Can be a single number or array of resolutions in order of preference.

    await Assets.init({
        texturePreference: {
            // Prefer high-res textures on retina displays
            resolution: window.devicePixelRatio,

            // Prefer modern formats, fallback to traditional
            format: ['avif', 'webp', 'png']
        }
    });

    Settings

    Member Visibility

    On This Page

    Properties