shohan4556 Posted November 3, 2015 Share Posted November 3, 2015 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. Link to comment Share on other sites More sharing options...
Tom Atom Posted November 3, 2015 Share Posted November 3, 2015 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. chongdashu and shohan4556 2 Link to comment Share on other sites More sharing options...
shohan4556 Posted November 3, 2015 Author Share Posted November 3, 2015 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 More sharing options...
chongdashu Posted November 3, 2015 Share Posted November 3, 2015 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. Link to comment Share on other sites More sharing options...
shohan4556 Posted November 3, 2015 Author Share Posted November 3, 2015 Thanks everybody Link to comment Share on other sites More sharing options...
SET001 Posted November 13, 2016 Share Posted November 13, 2016 `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? Link to comment Share on other sites More sharing options...
stupot Posted November 13, 2016 Share Posted November 13, 2016 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. Link to comment Share on other sites More sharing options...
SET001 Posted November 14, 2016 Share Posted November 14, 2016 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 More sharing options...
squilibob Posted November 14, 2016 Share Posted November 14, 2016 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); }, samme 1 Link to comment Share on other sites More sharing options...
Recommended Posts