CODEWITHSUNDEEP
loadingpreloadpixi.js
Asmund Olafsen
Asmund Olafsen

Reputation: 11

show loading screen before assets loaded by Pixi JS

I need to show loading screen with Pixijs before all assets are loaded. How can I do this? Is there any way/method to render something in canvas container before loading the assets?

Upvotes: 1

Views: 3117

Answers (2)

Prachi Joshi
Prachi Joshi

Reputation: 375

try this sample snippet that works

const loader = new PIXI.Loader(); 
loadAssets() {

for (var i in resources) {

  loader.add(i, resources[i]);
}

loader.on("progress", handleLoadProgress)
  .on("load", handleLoadAsset)
  .on("error", handleLoadError)
  .load(handleLoadComplete);
function handleLoadProgress(loader, resource) { }

function handleLoadAsset(loader, resource) { }

function handleLoadError() { }

function handleLoadComplete() { }

loader.onProgress.add(() => {
  this.loadingText.text = "Loading " + loader.progress.toFixed(2) + "%";
});
loader.onError.add(() => { }); // called once per errored file
loader.onLoad.add(() => { }); // called once per loaded file
loader.onComplete.add(() => {
  this.loadingComplete();

}); // called once when the queued resources all load.

}

Upvotes: 2

Anılhan Hasceviz
Anılhan Hasceviz

Reputation: 751

I think the answer to this,

const loader = new PIXI.Loader(); 

loader.add('bunny', 'data/bunny.png')
loader.add('scoreFont', 'assets/score.fnt');

loader.onProgress.add(() => {}); // called once per loaded/errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(() => {}); // called once when the queued resources all load.

source: https://pixijs.download/dev/docs/PIXI.Loader.html

Upvotes: 1

Related Questions