CODEWITHSUNDEEP
javascriptpixi.js
renathy
renathy

Reputation: 5355

How to load new resources into pixi.js app after resources were already loaded?

I have json file that contains list of files that should be loade, how to achieve this with PIXI?

// THIS IS FIRST LOAD OF RESOURCES

this.app.loader
    .add("bin", "ui/" + "bin.png")
    .add("rotatecw", "ui/" + "rotatecw.png")
    .add("rotateccw", "ui/" + "rotateccw.png")
    ...

    .add("categorieConfigJson", "config/allCategoriesConfig.json");

 this.app.loader.load();
 this.app.loader.onComplete.add((event) => this.onLoadComplete(//and here inside I am doing the main logic));

As you see there is one allCategoriesConfig.json file. It contains some game configuration as well as additional list of files that should be loaded. In future here will be some AJAX call to backend and backend will send json, but for now it is json file. So now in Pixi App I have to parse this file and load additionall resources. So how to do this if I already did this.app.loader.load()?

Assume that in onLoadComplete I have parsed my json file and loaded list of newly necessary files into variable categoriesConfig. The questions is - if I have already loaded all resources using this.app.loader and load(), how, can I add more files there???

// THIS IS CALLED AFTER RESOURCES ARE LOADED, AND HERE I NEED TO LOAD ADDITIONAL RESOURCES

private onLoadComplete2() 
{
    // parse json file and get file names into categoriesConfig array

    // and now need to load additional resources, how?
    categoriesConfig.forEach(fileName => {
       // how to add fileName to already loaded this.app.loader?
    });
 }

Upvotes: 0

Views: 1867

Answers (1)

Josef Wittmann
Josef Wittmann

Reputation: 1349

So you should create a new loader for this second round of loading, since the loader is not meant for managing resources.

If you want to reuse this instance, you can call loader.reset() before adding and loading new resources. But bear in mind that on the load callback, the old resources won't be there anymore.

Read the loader's philosophy:

[...] your project should have a Resource Manager that stores resources and manages data lifetime. When it decides something needs to be loaded from a remote source, only then does it create a loader and load them.

How to use

// This collects all loaded resources.
const allResources = {}

this.app.loader.add( /* statically known stuff */ )
this.app.loader.add('dynamicResourcesJson', ...)

this.app.loader.load((loader, resources) => {
  // Store the loaded resources
  Object.assign(allResources, resources)

  // Reset the loader or create a new one
  loader.reset()
  // or `loader = new PIXI.Loader()`

  // Enqueue the new resources
  const newResources = JSON.parse(resources['dynamicResourcesJson'].data)
  for(const [name, url] of Object.entries(newResources)) {
    loader.add(name, url)
  }

  loader.load((loader, resources) => {
    // Store the loaded resources
    Object.assign(allResources, resources)
  })
})

Upvotes: 1

Related Questions