How to show progress when loading scene

Hi all,

Would need advice how would one show loading progress when loading a new scene from the current active scene. My issue is that the new scene will take sometime to get loaded, thus the current active scene appears to be momentarily hang during this transition. I tried using the native activity indicator, however it does not show up on the active scene when it waits for the new scene to be loaded.

Thanks.

Cheers [import]uid: 70056 topic_id: 35578 reply_id: 335578[/import]

I don’t know if there’s something “native” you can do, but here’s an approach that will work.

You can split the loading assets into groups. Each group will be loaded by calling a function.

As you know, Corona runs all the code and after that the effects are visible on the device. (So for an instruction to make an effect it’s not enough for it to finish executing, all the instructions need to finish).

Let’s assume you have to load a background, character A, B and C.

[blockcode]
local background = {}
local A = {}
local B = {}
local C = {}

local function updateProgressBar(value)
–update the progress bar using the value
end

local function loadC()
–load C
updateProgressBar(100)
–everything is loaded
end

local function loadB()
–load B
updateProgressBar(75)
timer.performWithDelay(100,loadC)
end

local function loadA()
–load A
updateProgressBar(50)
timer.performWithDelay(100,loadB)
end

local function loadBackground()
–load background
updateProgressBar(25)
timer.performWithDelay(100,loadA)
end
updateProgressBar(0)

–The delay it’s required because all the code needs to be executed before changes are visible on the device
–If you wouldn’t use a delay then the progress bar wouldn’t update until everything would be loaded
timer.performWithDelay(100,loadBackground)
[/blockcode] [import]uid: 70003 topic_id: 35578 reply_id: 141395[/import]

Thanks Beck.

My main issue is the current active scene, rather than the new scene that is going to be loaded. The current active scene appears to freeze for a while after a button press to trigger scene transition. [import]uid: 70056 topic_id: 35578 reply_id: 141516[/import]

I appears to freeze because after You press the button, storyboard calls createScene and loads all assets for it and doesn’t purge/delete the scene with pressed button because it is needed for the transition effect.
I don’t have a perfect solution because there is no loading animation but also there is no freeze effect.
I created an additional scene “loading”. I enter it every time I change scenes and I also tell it which scene will be next.
Then in the loading scene I call timer.performWithDelay(1000, loadNextScene). Of course application freezes for a while when loading assets for the next scene but on the loading screen so it is not so bad-looking for a user. [import]uid: 117071 topic_id: 35578 reply_id: 141965[/import]

When I have a lot of assets to pre-load I use something like this.

local storyboard = require "storyboard"  
local scene = storyboard.newScene()  
  
function scene:createScene( event )  
  
 -- loading background  
 local loadingbackground = display.newImageRect("images/main/loading\_background.png", 570, 380)  
 loadingbackground.x = display.contentWidth / 2  
 loadingbackground.y = display.contentHeight / 2  
 scene.view:insert(loadingbackground)  
  
 -- instantiate scene  
 timer.performWithDelay( 100, createActualScene )  
end  
  
function createActualScene()  
 loadAssets()  
  
 -- Don't forget to remove the background to free memory  
 local aux = scene.view[1]  
 aux:removeSelf()  
 aux = nil  
end  
scene:addEventListener( "createScene" )  

So at the first iteration the loading background will be displayed on the screen and a timer will be created to call createActualScene function.

After 100 milliseconds createActualScene will be called. The display on the device won’t change until everything executes (all the assets are loaded into memory). After that happens the loading background is removed.

If you want to make a progress bar you will have to combine this with the code I previously posted, and instead removing the loading background in createActualScene() you will remove it (or update it) after each group of assets is loaded.

Hope it’s clear now.
[import]uid: 70003 topic_id: 35578 reply_id: 141970[/import]

I don’t know if there’s something “native” you can do, but here’s an approach that will work.

You can split the loading assets into groups. Each group will be loaded by calling a function.

As you know, Corona runs all the code and after that the effects are visible on the device. (So for an instruction to make an effect it’s not enough for it to finish executing, all the instructions need to finish).

Let’s assume you have to load a background, character A, B and C.

[blockcode]
local background = {}
local A = {}
local B = {}
local C = {}

local function updateProgressBar(value)
–update the progress bar using the value
end

local function loadC()
–load C
updateProgressBar(100)
–everything is loaded
end

local function loadB()
–load B
updateProgressBar(75)
timer.performWithDelay(100,loadC)
end

local function loadA()
–load A
updateProgressBar(50)
timer.performWithDelay(100,loadB)
end

local function loadBackground()
–load background
updateProgressBar(25)
timer.performWithDelay(100,loadA)
end
updateProgressBar(0)

–The delay it’s required because all the code needs to be executed before changes are visible on the device
–If you wouldn’t use a delay then the progress bar wouldn’t update until everything would be loaded
timer.performWithDelay(100,loadBackground)
[/blockcode] [import]uid: 70003 topic_id: 35578 reply_id: 141395[/import]

Thanks Beck.

My main issue is the current active scene, rather than the new scene that is going to be loaded. The current active scene appears to freeze for a while after a button press to trigger scene transition. [import]uid: 70056 topic_id: 35578 reply_id: 141516[/import]

I appears to freeze because after You press the button, storyboard calls createScene and loads all assets for it and doesn’t purge/delete the scene with pressed button because it is needed for the transition effect.
I don’t have a perfect solution because there is no loading animation but also there is no freeze effect.
I created an additional scene “loading”. I enter it every time I change scenes and I also tell it which scene will be next.
Then in the loading scene I call timer.performWithDelay(1000, loadNextScene). Of course application freezes for a while when loading assets for the next scene but on the loading screen so it is not so bad-looking for a user. [import]uid: 117071 topic_id: 35578 reply_id: 141965[/import]

When I have a lot of assets to pre-load I use something like this.

local storyboard = require "storyboard"  
local scene = storyboard.newScene()  
  
function scene:createScene( event )  
  
 -- loading background  
 local loadingbackground = display.newImageRect("images/main/loading\_background.png", 570, 380)  
 loadingbackground.x = display.contentWidth / 2  
 loadingbackground.y = display.contentHeight / 2  
 scene.view:insert(loadingbackground)  
  
 -- instantiate scene  
 timer.performWithDelay( 100, createActualScene )  
end  
  
function createActualScene()  
 loadAssets()  
  
 -- Don't forget to remove the background to free memory  
 local aux = scene.view[1]  
 aux:removeSelf()  
 aux = nil  
end  
scene:addEventListener( "createScene" )  

So at the first iteration the loading background will be displayed on the screen and a timer will be created to call createActualScene function.

After 100 milliseconds createActualScene will be called. The display on the device won’t change until everything executes (all the assets are loaded into memory). After that happens the loading background is removed.

If you want to make a progress bar you will have to combine this with the code I previously posted, and instead removing the loading background in createActualScene() you will remove it (or update it) after each group of assets is loaded.

Hope it’s clear now.
[import]uid: 70003 topic_id: 35578 reply_id: 141970[/import]