shohan4556

How to set loading bar with percentage in Phaser ?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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);
  },

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.