Jump to content

How to set loading bar with percentage in Phaser ?


shohan4556
 Share

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.

Link to comment
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.

Link to comment
Share on other sites

  • 1 year later...
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.

Link to comment
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);
  },

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...