Loading interface for application

[morethanamotion]

Hi. I want to know how to properly make a loading interface, like when an applications’ scene is about to be shown, there’s a “loading bar” or progress view to be seen first.

Because this might be a good solution to rest assured all functions, codes, data, etc. will be put first before listening to the users’ or devices’ actions etc.

I know that I can create this just by making an incremental timer that is set to the progress view, and when the progress view hits 100%, I can then go to the scene. But I think obviously, that is not the proper way.

I understand that some games has loading interface, not because they just want their users to wait, but it is for viewing that the application is “getting ready for action”. My problem now is I don’t know, and have no idea how to make it.

I really need help so that I can learn to put a “loading interface” properly. Am also begging for examples, thank you Please help me

[Siu]

Because you want to keep updating the progress indicator, you basically have 2 choices: use timers as you described or use Lua coroutines. These are the only way you can get a screen update in the middle of loading something.

Edit: On second thought, you can also break the loading sections into sub-functions and do the screen update in between those.

@morethanamotion

Because this might be a good solution to rest assured all functions, codes, data, etc. will be put first before listening to the users’ or devices’ actions etc

Are you using composer for scene management? It’s structured to help you deal precisely with this.

[alanFlickGames]

@Siu

On second thought, you can also break the loading sections into sub-functions and do the screen update in between those.

This is exactly what we do. Our app loading is performed in an enterFrame, and we break up everything that needs to be loaded into roughly equal chunks (roughly equal in terms of how long they take, not how much code there is).
At the end of each pass of the enterFrame function, we update the loading screen UI.

[morethanamotion]

Thank you so much, Siu and alanFlickGames. I think I understand a bit what you were trying to teach me. My problem now is having a hard time configuring how to write the code for it, still it is hard for me to completely absorb it. Can you give me a sample code for this? pleas😢 Thank you.

[alanFlickGames]

It’s really going to be dependent on what your particular app needs to do. This is a simplified example of what I mean:

--main.lua
local loadingCounter = 0
local maxLoadingCounter = 5

local background
local progressBar

local function loadTheGame()

	if loadingCounter < 1 then
		--draw the loading screen background, and progress bar
		background = display.new...
		progressBar = display.new...

	elseif loadingCounter < 2 then
		--draw the background for your first level

	elseif loadingCounter < 3 then
		--draw the characters for the first level

	elseif loadingCounter < 4 then
		--draw the UI bar

	elseif loadingCounter < 5 then
		--do some other stuff

	else
		--all loaded
		Runtime:removeEventListener("enterFrame", loadTheGame)
	end

	progressBar.xScale = loadingCounter / maxLoadingCounter
end


Runtime:addEventListener("enterFrame", loadTheGame)

We don’t use composer or storyboard, so you’d need to work out how to make this loading style work with those if you use them.

[anon63346430]

This is a complex task (would be so simple with threads) and definitely not one for beginners to worry about.

Unless you have a load of data to load it is best/easiest just to display a splash screen (containing the word “loading…”)