In-game loading bar

[jamessimo]

Hey guys, I have made a game that needs to parse and render large save files. 

The issue I have is that whiles the javascript in Phaser is doing its thing all I can do is show a gif spinner in html whiles the player waits for the game to load. 

I would like to show a progress bar, I have made a global var that basically ticks up at key intervals in the loading process. The problem is is that the number does increment however the UI in phaser does not update as well as the HTML (in html I just made a update tick and read the loadingProgress var every tick) . 

I have tested this using debug.text, html span and a phaser ext object. My entire game just locks up when processing stuff but I would like a hook that could be independent and update a number at core intervals. 

[Adel]

Hi,

You can watch the loading progress using setPreloadSprite and onFileComplete signal from Phaser.Loader.

If you want to watch the files loading progress before the page onload event try pace or nprogress.

[jamessimo]

8 minutes ago, Adel said:

Hi,

You can watch the loading progress using setPreloadSprite and onFileComplete signal from Phaser.Loader.

If you want to watch the files loading progress before the page onload event try pace or nprogress.

Hi Adel, I use setPreload sprite when loading all my assets. My issue is not loading assets, its after my game has loaded everything but has a very heavy load function internally (math mathematical calculations and bitmap rendering) 

[samme]

If the browser is busy on a long, continuous task, it won't send any animation frames to Phaser.

If you want Phaser to keep rendering, you need to split up your task into chunks somehow.

 

[jamessimo]

Cheers @samme, I think I will have to break up my monster function and break it up into chunks. Would having somthing like this be ok? 

 

init(){

loading++

 setTimeout(){function(){
//Do massive task 
loading++;
},0}


 setTimeout(){function(){
//Do another massive task 
loading++;
},100}

 setTimeout(){function(){
//Do another! another massive task 
loading++;
},200}

}

update(){
//update UI with var loading
}