How to pre load a scene (storyboard)?

Hi,

When I switch from one scene to another certain scene it lags which is really ugly. I know that the images are bigger than they should be but I was wondering why this doesn’t work:

 local scene\_game = storyboard.loadScene( "scene\_game", options) storyboard.gotoScene("scene\_game", options)

Shouldn’t this preload the scene (even if it takes some time loading) and then _flowing_ to the scene?

Best regards,

Tomas

Aslo according to the documentation I can use the doNotLoadView flag but when I use it, it fails, as Corona seems to think the boll flag is the options parameters.

http://docs.coronalabs.com/api/library/storyboard/loadScene.html

I’ve never used loadScene() but how do you know it’s not working?  If you’re still seeing the lag, it’s very likely that you’re calling loadScene() and microseconds later, you’re calling gotoScene() so loadScene() never has time to complete.  You would need to load the scene earlier.

Rob

That is how I do it right now i.e. I do all the preloading stuff which needs to be done, then I run loadScene and then gotoScene() however shouldn’t then loadScene load everything completely and then, when everything has been loaded, gotoScene should be run without any lag?

Best regards,

Tomas

If you don’t have some time between loadScene() and gotoScene(), you still have to wait on loadScene() to finish before gotoScene() fires, so you will still have lag.

All loadScene does is call the scene’s createScene() function and stick the resulting scene in the back of the display hirearchy.  Then when gotoScene() is called, it transitions away the current scene and moves the new one on screen.  But if loadScene() isn’t done, then it can’t be transitioned on with gotoScene().

I’m not talking about lag like:

Click -> Wait -> Scene moving

I’m talking about lag like this:

Click -> Scene starts -> Moves a little bit -> Stops -> Moves a little bit -> Stops -> Moves a little bit etc. 

So the scene change starts immediately but during the transition from the original scene to the next scene it doesn’t flow, it moves more like it was over a washboard.

So if I understand correctly I should be able to Click, loadScene be triggered and the scene change should start. However, during the scene change it should flow like water. What I think now (I need to tested this but I will) is if I i create a loading screen before the loadScene the gotoScene will still lag like a washboard.

It might be because of the graphics but shouldn’t loadScene take care of that?

The images right now are for the second scen:

* 1 image 640 * 440 (Which if I understood correctly takes up 1024 * 1024 in the memory?) (Scaled down to 50%)

* A navigation bar 422 * 44 (Scaled down to 50%)

* A letter image for each letter in the alpabet, 59 * 85 (Scaled down to 50%)

If I remove some graphics it works better so it seems to be because of the graphics.

Best regards,

Tomas

If you are seeing your scene on the screen, you are past the createScene() phase and have gotten into your enterScene() phase.  The storyboard.loadScene() only causes createScene() to return early.

So something is causing your lag during/after enterScene() runs.  Preloading won’t help. 

Hi Rob,

everything is created in the createScene:

local verifyButton function scene:createScene( event ) group = self.view -- Create and insert Keyboard into group -- Preload keyboard? Transition.to bara? local kb = keyboard.loadKeyboard() for i = 1, #kb, 1 do if kb[i].letter == "!" then -- Return kb[i]:addEventListener("tap", verifyWordTap) end group:insert(kb[i]) end local topBorder = display.newRect(0,44, 400,1) topBorder:setFillColor(0,0,0) group:insert(topBorder) local bottomBorder = display.newRect(0,265, 400,1) bottomBorder:setFillColor(0,0,0) group:insert(bottomBorder) local nav = navigation.drawNavigationBar() group:insert(nav) local arrow = navigation.drawLeftArrow() arrow.name = "back" arrow:addEventListener("tap", onTapIcon) group:insert(arrow) wordCounter = 0 maxWordsCounter = 2 -- Will be set by the user later on local textfield = keyboard.returnTextField() group:insert(textfield) -- Load words from sent in categories words = event.params.words -- Draw next word (in this case, the first) nextWord() end function scene:enterScene( event ) local group = self.view --code here executes every time the scene is entered regardless --of it's creation state. end

What about the function nextWord? In that function a big image is created (that’s why group is not local so that I can insert the image into the group). Is it possible that createScene creates all the objects, calls the createScene and at the same time (as it’s in another function) creates the image (which is 640*440) and that makes the createScene lag?

Best regards,

Tomas

I think we need to see what’s going on in nextWord(), but unless you are doing some network downloads or some other async operation createScene() would not complete until that function is done.  The scene won’t transition on to the screen until createScene() is complete.

Hi, i have the same problem.

In my case without imagesheet the animation between scene return smooth.

The animation betwen scene return smooth also if i set the alpha of imagesheet with alpha 0.

Hi Rob,

function nextWord() if isMessageActive == false then keyboard.resetWord() wordCounter = wordCounter + 1 if wordCounter \<= maxWordsCounter then removePrevImage() drawNextImage() else endGame() end end end

function removePrevImage() removeImage = currentImage function t() removeImage:removeSelf() removeImage = nil isMoving = false end transition.to(removeImage, {time = 1000, x = -500, onComplete = t}) end

function drawNextImage() currentImage = display.newImage(words[wordCounter].imageLocation, 500, 45) currentImage:setReferencePoint(display.TopLeftReferencePoint) currentImage:scale(0.5, 0.5) currentImage.word = words[wordCounter].word currentImage:addEventListener("tap", onTapImage) transition.to(currentImage, {time = 0, x = 0}) group:insert(currentImage) end

So basically nextWord creates a new image outside of the screen (this was because before I slided it into the screen but now it just pops up i.e. time = 0) and remove the old one.

Best regards,

Tomas

Well I don’t see anything that would cause issues, though I don’t know that passing a time of 0 to transition.to would really do.  You could comment that out since it doesn’t do anything and just set the currentImage.x and currentImage.y to 0.

Do these functions live outside of createScene()?  Do you have group defined where they can see them? 

Aslo according to the documentation I can use the doNotLoadView flag but when I use it, it fails, as Corona seems to think the boll flag is the options parameters.

http://docs.coronalabs.com/api/library/storyboard/loadScene.html

I’ve never used loadScene() but how do you know it’s not working?  If you’re still seeing the lag, it’s very likely that you’re calling loadScene() and microseconds later, you’re calling gotoScene() so loadScene() never has time to complete.  You would need to load the scene earlier.

Rob

That is how I do it right now i.e. I do all the preloading stuff which needs to be done, then I run loadScene and then gotoScene() however shouldn’t then loadScene load everything completely and then, when everything has been loaded, gotoScene should be run without any lag?

Best regards,

Tomas

If you don’t have some time between loadScene() and gotoScene(), you still have to wait on loadScene() to finish before gotoScene() fires, so you will still have lag.

All loadScene does is call the scene’s createScene() function and stick the resulting scene in the back of the display hirearchy.  Then when gotoScene() is called, it transitions away the current scene and moves the new one on screen.  But if loadScene() isn’t done, then it can’t be transitioned on with gotoScene().

I’m not talking about lag like:

Click -> Wait -> Scene moving

I’m talking about lag like this:

Click -> Scene starts -> Moves a little bit -> Stops -> Moves a little bit -> Stops -> Moves a little bit etc. 

So the scene change starts immediately but during the transition from the original scene to the next scene it doesn’t flow, it moves more like it was over a washboard.

So if I understand correctly I should be able to Click, loadScene be triggered and the scene change should start. However, during the scene change it should flow like water. What I think now (I need to tested this but I will) is if I i create a loading screen before the loadScene the gotoScene will still lag like a washboard.

It might be because of the graphics but shouldn’t loadScene take care of that?

The images right now are for the second scen:

* 1 image 640 * 440 (Which if I understood correctly takes up 1024 * 1024 in the memory?) (Scaled down to 50%)

* A navigation bar 422 * 44 (Scaled down to 50%)

* A letter image for each letter in the alpabet, 59 * 85 (Scaled down to 50%)

If I remove some graphics it works better so it seems to be because of the graphics.

Best regards,

Tomas

If you are seeing your scene on the screen, you are past the createScene() phase and have gotten into your enterScene() phase.  The storyboard.loadScene() only causes createScene() to return early.

So something is causing your lag during/after enterScene() runs.  Preloading won’t help. 

Hi Rob,

everything is created in the createScene:

local verifyButton function scene:createScene( event ) group = self.view -- Create and insert Keyboard into group -- Preload keyboard? Transition.to bara? local kb = keyboard.loadKeyboard() for i = 1, #kb, 1 do if kb[i].letter == "!" then -- Return kb[i]:addEventListener("tap", verifyWordTap) end group:insert(kb[i]) end local topBorder = display.newRect(0,44, 400,1) topBorder:setFillColor(0,0,0) group:insert(topBorder) local bottomBorder = display.newRect(0,265, 400,1) bottomBorder:setFillColor(0,0,0) group:insert(bottomBorder) local nav = navigation.drawNavigationBar() group:insert(nav) local arrow = navigation.drawLeftArrow() arrow.name = "back" arrow:addEventListener("tap", onTapIcon) group:insert(arrow) wordCounter = 0 maxWordsCounter = 2 -- Will be set by the user later on local textfield = keyboard.returnTextField() group:insert(textfield) -- Load words from sent in categories words = event.params.words -- Draw next word (in this case, the first) nextWord() end function scene:enterScene( event ) local group = self.view --code here executes every time the scene is entered regardless --of it's creation state. end

What about the function nextWord? In that function a big image is created (that’s why group is not local so that I can insert the image into the group). Is it possible that createScene creates all the objects, calls the createScene and at the same time (as it’s in another function) creates the image (which is 640*440) and that makes the createScene lag?

Best regards,

Tomas

I think we need to see what’s going on in nextWord(), but unless you are doing some network downloads or some other async operation createScene() would not complete until that function is done.  The scene won’t transition on to the screen until createScene() is complete.