How to set loading bar with percentage in Phaser ?

[shohan4556]

Hello devs, I have a little problem I need a progress bar with percentage something like this, I know it had a simple solution but I have no idea how to do it.

Thanks.

 

 

 

[Tom Atom]

Hi, in your state add loadUpdate function/method:

        loadUpdate() {            // update loading text percent            this.setLoadingText(this.load.progress);        }

 In it you can do anything you need - loader will call it automatically. setLoadingText is my custom method that sets percent number. You do not need to calculate this number by yourself as it is already in this.load.progress.

 

 If your loading bar is simple then you can also set this in your preload method:

            this._loadingBar = this.add.sprite(this.world.centerX - loadingBarFrame.width / 2, loadingBarY, "Loading");            this._loadingBar.anchor.setTo(0, 0);            // set the preloadBar sprite as a loader sprite.            this.load.setPreloadSprite(this._loadingBar);

 Key is setPreloaderSprite - sprite will be cropped to display load.progress % of the sprite. If your loading sprite is more complex, than you can not use this, but you can do whatever you want in loadUpdate.

[shohan4556]

Hi, in your state add loadUpdate function/method:

        loadUpdate() {            // update loading text percent            this.setLoadingText(this.load.progress);        }

 In it you can do anything you need - loader will call it automatically. setLoadingText is my custom method that sets percent number. You do not need to calculate this number by yourself as it is already in this.load.progress.

 

 If your loading bar is simple then you can also set this in your preload method:

            this._loadingBar = this.add.sprite(this.world.centerX - loadingBarFrame.width / 2, loadingBarY, "Loading");            this._loadingBar.anchor.setTo(0, 0);            // set the preloadBar sprite as a loader sprite.            this.load.setPreloadSprite(this._loadingBar);

 Key is setPreloaderSprite - sprite will be cropped to display load.progress % of the sprite. If your loading sprite is more complex, than you can not use this, but you can do whatever you want in loadUpdate.

 

what I did inside my update method.

// after creating text in create methodmytext.text = 'loading'+game.load.progress;

but It says always zero. no change any idea.

[chongdashu]

what I did inside my update method.

// after creating text in create methodmytext.text = 'loading'+game.load.progress;

but It says always zero. no change any idea.

loadUpdate, not update.

[shohan4556]

Thanks everybody 

[SET001]

`loadUpdate` triggering few times with values 25, 50, 75, 10. But I need to show progress from 1 to 100. How can I do this?

[stupot]

sounds like you're loading in 4 items each worth 25% of the total, loading progress is updated once a file has completed loading, it's that granular.

[SET001]

14 hours ago, stupot said:

sounds like you're loading in 4 items each worth 25% of the total, loading progress is updated once a file has completed loading, it's that granular.

Yes but I think there should be a way to have a % in loading screen from 1 to 100, not just  25, 50, 75, 100.

[squilibob]

7 hours ago, SET001 said:

Yes but I think there should be a way to have a % in loading screen from 1 to 100, not just  25, 50, 75, 100.

I have a smooth loading bar but mine is from a graphics object that is a circle instead of a bar. To get the smooth animation, I just set a tween every time the load update is called:

 

  loadUpdate: function(){
    loader_elements.tween = game.add.tween(loader_elements.redgraphics).to({angle:this.load.progress*1.8}, 250, Phaser.Easing.Linear.None,true);
  },