Game Development Community

How to Force UI Refresh

by Jason Gossiaux · in Torque 2D Beginner · 01/08/2016 (8:07 am) · 7 replies

Howdy folks. I've found a handful of posts on this over the years, but no solutions that work for me.

I wish to add a progress bar for saving and loading as this process can take up to 15 seconds on mobile devices. Unfortunately, I'm having trouble where the UI only refreshes after Torquescript code has finished executing and the renderer calls are allowed to run.

For now I've broken the loading process out into 10 functions and chain-schedule each function with a 100ms delay. This usually works, but adds a whole second to the loading process (and doesn't always result in the UI updating..)

Does a better method exist for forcing a GUI-element refresh? Thank you!
NextNext Thread
PrevPrevious Thread
More from Torque 2D Beginner


Associate Chris Haigler
Jester Dance
#1
01/09/2016 (1:52 pm)
Breaking the loading process into discrete 'steps' is all that you can do, unless you want to dive into multi-threading. You shouldn't need to delay the loading with a schedule() call; once a function completes control will be returned to the main loop/renderer.

Something like this should update a progress bar:

function LoadMyLevel()
{
    LevelLoadStep1();
    UpdateMyProgressBar(25.0); // progress bar at 25%
    LevelLoadStep2();
    UpdateMyProgressBar(50.0); // progress bar at 50%
    LevelLoadStep3();
    UpdateMyProgressBar(75.0); // progress bar at 75%
    LevelLoadStep4();
    UpdateMyProgressBar(100.0); // progress bar at 100% - level load complete
}

Torque Owner Jason Gossiaux
Indie Dev
#2
01/09/2016 (2:08 pm)
Have you implemented and tested such a thing in the past? Because my code looks rather identical to that and it does not work. Control is not returned to the main loop/renderer after a function call ends. It simply continues execution within that function.


Seriously, this shouldn't require multi-threading.... very, very basic operation here :/

Associate Chris Haigler
Jester Dance
#3
01/09/2016 (2:27 pm)
This may be something unique to mobile devices. Torque3D handles level loading using a similar method to the one I posted and the progress bar on the loading screen updates as expected (in 'chunks' as each discrete step finishes) on PCs.

Try adding a Canvas.repaint() call just before you update your progress bar.


Torque Owner Jason Gossiaux
Indie Dev
#4
01/09/2016 (3:41 pm)
Oh, well I am testing on both Windows and Mobile. I suspect this behavior is somehow fixed in T3D and not in T2D...

Canvas.repaint() just results in the entire screen going black.

Associate Chris Haigler
Jester Dance
#5
01/09/2016 (4:48 pm)
The older engines (TGE for sure, TGB as well perhaps?) used this method as well so it works across tech generations.

I just tested this method by adding a progress bar to the TruckToy module and scheduling the TestLoad() function to run 2 seconds after the module loads. There aren't enough actual assets to load to bog down my system so I simulated a delay by running multiple for() loops. I get the expected micro-stutters as each loading 'stage' runs and then I see the progress bar update in increments.

function TestLoad()
{
	ProgressBar.SetValue(0);
	
	LoadStage1();
	
	UpdateProgress();
	
	LoadStage2();
	
	UpdateProgress();

	LoadStage1();
	
	UpdateProgress();

	LoadStage2();

	UpdateProgress();

	LoadStage2();

	UpdateProgress();	
}

function UpdateProgress()
{
	ProgressBar.setValue(ProgressBar.getValue() + 0.1);
	Canvas.repaint();
}

function LoadStage1()
{
	for(%i = 0; %i < 10000; %i++)
	{
		error("LOADING STAGE 1:");
	}
	for(%i = 0; %i < 10000; %i++)
	{
		error("LOADING STAGE 1:");
	}
	for(%i = 0; %i < 10000; %i++)
	{
		error("LOADING STAGE 1:");
	}	
}

function LoadStage2()
{
	for(%i = 0; %i < 10000; %i++)
	{
		error("LOADING STAGE 2:");
	}
}

Torque Owner Jason Gossiaux
Indie Dev
#6
01/10/2016 (9:54 am)
I suspect it is the Canvas.repaint() allowing the renderer to update. Not sure why that blanks out everything for me though...

Would it be possible to remove that line and confirm the progress bar no longer updates for me please? Just not sure what else it could be... I've not modified the engine in any way that should be affecting this.

Torque Owner Jason Gossiaux
Indie Dev
#7
01/10/2016 (12:19 pm)
Alright, I managed to correct a few things and restructure the GUI and underlying scene so Canvas.repaint() wasn't blanking things out anymore.

After that, using Canvas.repaint() fixed the problem. The progress bar and other text elements seem to be updating correctly. Thanks for the help!