How do I get the percentage info of the loading process in Phaser 3?

I’m trying to add a loading animation for my phaser game, here is the code simulating the load process

this.load.spritesheet('brawler', 'assets/animations/brawler48x48.png', {
  frameWidth: 48,
  frameHeight: 48
});
this.load.audio('goldrunner', 'assets/audio/Scyphe-Goldrunner_(Maccie_Pimp_Me Up_Remix).mp3');
this.load.image('taikodrummaster', 'assets/pics/taikodrummaster.jpg');
this.load.image('sukasuka-chtholly', 'assets/pics/sukasuka-chtholly.png');
this.load.video('chrome', 'assets/video/chrome.webm');

There are 5 assets in total.

I know I can use something like this.load.on('complete', function() {}) to check if the whole loading process is finished.

I’d just like to know how do I get the percentage info of the loading process to give players a hint that how long the game would take to load the assets.

something like the following

enter image description here

enter image description here

>Solution :

You can use the event progress, here is the link to the phaser documentation

Just add the line, in the preload methode of the Scene:

this.load.on('progress', function (progress) {
    // progress is a value between 0 and 1
    let percentage = parseInt(progress * 100);
    // Set here the label with the precentage
    ...
});

Extra: If you want to track the progress of the file itself you could use the event fileprogress. The callback of that specific event returns two parameters, on the file loaded and one with the percentage of the file that has been loaded.
If you want a more fine grade result / information.

Leave a Reply