如何获取 Phaser 3 中加载过程的百分比信息？

Question

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

Answer 1

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.