Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking loading progress of an assets #26

Open
AlphaGamingArcade opened this issue Apr 16, 2024 · 0 comments
Open

Tracking loading progress of an assets #26

AlphaGamingArcade opened this issue Apr 16, 2024 · 0 comments

Comments

@AlphaGamingArcade
Copy link

AlphaGamingArcade commented Apr 16, 2024

What's the best way to track the total loaded assets percentage using PIXI JS.
What I did is like this

/** Load assets bundles that have nott been loaded yet */
export async function loadBundles(bundles: string | string[], onProgress?: ProgressCallback ) {
    if (typeof bundles === 'string') bundles = [bundles];

    // Check bundles requested if they exists
    for (const bundle of bundles) {
        if (!checkBundleExists(bundle)) {
            throw new Error(`[Assets] Invalid bundle: ${bundle}`);
        }
    }

    // Filter out bundles already loaded
    const loadList = bundles.filter((bundle) => !loadedBundles.includes(bundle));

    // Skip if there is no bundle left to be loaded
    if (!loadList.length) return;

    // Load bundles
    console.log('[Assets] Load:', loadList.join(', '));
    await Assets.loadBundle(loadList, onProgress);

    // Append loaded bundles to the loaded list
    loadedBundles.push(...loadList);
}
/** Initialise and start background loading of all assets */
export async function initAssets(onProgress: ProgressCallback) {
    // Load assets manifest
    assetsManifest = await fetchAssetsManifest('assets/assets-manifest.json');

    // Init PixiJS assets with this asset manifest
    await Assets.init({ manifest: assetsManifest, basePath: 'assets' });

    // Load assets for the load screen
    await loadBundles('preload', onProgress);
    
    // List all existing bundles names
    const allBundles = assetsManifest.bundles.map((item) => item.name);
    
    // Start up background loading of all bundles
    Assets.backgroundLoadBundle(allBundles);
}
    // Setup assets bundles (see assets.ts) and start up loading everything in background
    await initAssets((progress) => {
        console.log(progress)
    });

Do you happen to have any suggestion how to do it, or this is okay. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant