Loader.once('complete'... responds only after all asset are loaded

[enricosapicco]

I have been trying to add a loading screen to my game. I know that I need to use .on('progress') and .once('complete') handlers. I run following code for loading an asset batch;

assetManager.loadImageBatch = function(args, callback){
  var ctr = 0;
  var toLoad = args.assets.length;
  args.assets.forEach(elm=>{
    loadFile(elm.name, args.pathPrefix + elm.path);
  })

  function loadFile(name, path){
    assetManager.loader.add(name, path);
    assetManager.loader.once('complete', loadCallback);
    assetManager.loader.load();
  }

  function loadCallback(){
    console.log("loading");
    ctr++;
    if(ctr == toLoad)
      callback();
  }
}

it runs ok, loads all assets but as it has to log "loading" after loading each asset, it logs it after loading the whole asset batch. I tested it on both local and on my website. It results the same, nothing to do with download speed or whatsoever. I googled about loading screen usage on pixi but I wasn't able to find anything useful. Any thoughts?

[xerver]

https://github.com/englercj/resource-loader/blob/408199ceea27aea601bb776fb01ea0e6e3bb04c6/README.md

From the resource-loader readme:

// throughout the process multiple events can happen.
loader.on('progress', ...); // called once per loaded/errored file
loader.on('error', ...); // called once per errored file
loader.on('load', ...); // called once per loaded file
loader.on('complete', ...); // called once when the queued resources all load.

The loader loads a queue of resources, not one resource at a time. Calling `.load()`, then calling `.add()` afterwards is an error. If you call loadFile() multiple times you will get an error thrown.

You even say in your comment that you know you need to use progress, but then your code doesn't...

Try this instead:

assetManager.loadImageBatch = function(args, callback){
  args.assets.forEach(elm => {
    assetManager.loader.add(elm.name, args.pathPrefix + elm.path);
  })

  assetManager.loader.on('progress', onProgress);
  assetManager.loader.once('complete', callback);
  assetManager.loader.load();

  function onProgress(){
    console.log("loading: %d% done", assetManager.loader.progress);
  }
}

 

[enricosapicco]

@xerver first of all, thanks. Shortly after I posted this when I was browsing more on resource-loader code, I realized what you mentioned above. I realized that I didn't get the working logic of the loader correct. I changed it to something similar what you suggested above and it worked. Thanks a lot anyway!