Composer Scene Effects - Choppy at the start

[rshanlon]

Using the gotoscene in Composer, I’m using the Slide Right and Slide Down effects.  They work, kind of…

When I first launch my app on my iPad 2, all of these scene transitions are not smooth.  It’s like the transition stalls a brief moment then quickly jumps to the new scene.

After I’ve gone through all of my scenes, then the Slide Right and Down effects between scenes are very smooth.

How do i get that initial transition to be smooth?

All of my gotoscene are in separate functions at the top (just under Forward Refs) but before scene:create.

Thanks for your help 

[ingemar]

Have you tried loadScene() ?

[rshanlon]

Thanks for the reply.  This is what i have below.  I use composer.loadScene just before gotoScene.  Is this how you would do it?  I’m a newbie so I not really sure if how I did this is correct or the best way to do this.  These functions are above create:scene.

[lua]

local function VowelsButtonHit(event)

if event.phase == “ended” then

  composer.loadScene( “vowels”, false, options )

composer.gotoScene ( “vowels”, { effect=“slideDown”, time=1000 } )

  audio.stop( 27 )

  end

end

local function ConsButtonHit(event)

  if event.phase == “ended” then

  audio.stop( 27 )

  composer.loadScene( “consonants”, false, options )

  composer.gotoScene ( “consonants”, { effect=“slideLeft”, time=1000 } )

  end

end

local function AllButtonHit(event)

  if event.phase == “ended” then

  audio.stop( 27 )

  composer.loadScene( “all_letters”, false, options )

  composer.gotoScene ( “all_letters”, { effect=“slideUp”, time=1000 } )

  end

end

[/lua]

[ingemar]

While this in theory should work, the loadScene and gotoScene are issued within the same run-loop, which I suspect might cause hick-ups in the animation.

I usually do my loadScene in a “did show”. However what happens if you wrap your composer.gotoScene in a performWithDelay?

Something like:

timer.performWithDelay(100, function() composer.gotoScene ( "all\_letters", { effect="slideUp", time=1000 } ) end)

[davebollinger]

are you perhaps doing any “heavy work” (loading graphics/audio, etc) in did-hide or will-show?  those events occur “between”/“during” transitions in a concurrent effect (like slideDown, where both scenes need to transition at same time) and could (potentially?) get things out of sync.  flow (roughly) for concurrent effect:

old scene will hide

old scene transition start

old scene did hide – don’t delay here

new scene will show – don’t delay here

new scene transition start

new scene did show

load/goto should (in theory) be safe to call without a timer delay, as both scenes must be fully loaded before either transition is started.  so an on-demand load might might delay the overall onset of the transitions, but shouldn’t occur “during” the transition to make it “choppy”

[edit to “clarify?”] i know that docs imply did-hide won’t occur until AFTER old scene’s transition completes and old scene is completely off-screen, but that isn’t the case with concurrent effects – test it yourself:  put some “noticeable” change in did-hide, like setting your old scene’s background image .isVisible=false, then transition with a long time so you can notice it – it’ll be invisible DURING the transition – that’s why did-hide shouldn’t do time-intensive work [/edit]

[rshanlon]

Thanks both of you for helping.  It’s taken me a couple days to try these out.

Yes, loading lots of widgets and sounds but not in Hide-did nor Show-will.  I’m loading them above Create-scene inside of functions.

So great results by placing all of the composer.loadScene in Show-did.  The jerky scene transitions have disappeared.  

I did not try performWithDelay but had the same thought.  My feeling is if I can do this without adding more delay to the user experience, then the better.  I’d like the experience to be “Tap the button, Scene moves along” nice and responsive.

Hopefully I’m not celebrating too soon.  But seems to be working.

Thanks again!  And Thanks, Dave, for the breakdown of how things are playing out behind the scenes.  Some of my other apps will benefit from knowing this now.

[ingemar]

Have you tried loadScene() ?

[rshanlon]

Thanks for the reply.  This is what i have below.  I use composer.loadScene just before gotoScene.  Is this how you would do it?  I’m a newbie so I not really sure if how I did this is correct or the best way to do this.  These functions are above create:scene.

[lua]

local function VowelsButtonHit(event)

if event.phase == “ended” then

  composer.loadScene( “vowels”, false, options )

composer.gotoScene ( “vowels”, { effect=“slideDown”, time=1000 } )

  audio.stop( 27 )

  end

end

local function ConsButtonHit(event)

  if event.phase == “ended” then

  audio.stop( 27 )

  composer.loadScene( “consonants”, false, options )

  composer.gotoScene ( “consonants”, { effect=“slideLeft”, time=1000 } )

  end

end

local function AllButtonHit(event)

  if event.phase == “ended” then

  audio.stop( 27 )

  composer.loadScene( “all_letters”, false, options )

  composer.gotoScene ( “all_letters”, { effect=“slideUp”, time=1000 } )

  end

end

[/lua]

[ingemar]

While this in theory should work, the loadScene and gotoScene are issued within the same run-loop, which I suspect might cause hick-ups in the animation.

I usually do my loadScene in a “did show”. However what happens if you wrap your composer.gotoScene in a performWithDelay?

Something like:

timer.performWithDelay(100, function() composer.gotoScene ( "all\_letters", { effect="slideUp", time=1000 } ) end)

[davebollinger]

are you perhaps doing any “heavy work” (loading graphics/audio, etc) in did-hide or will-show?  those events occur “between”/“during” transitions in a concurrent effect (like slideDown, where both scenes need to transition at same time) and could (potentially?) get things out of sync.  flow (roughly) for concurrent effect:

old scene will hide

old scene transition start

old scene did hide – don’t delay here

new scene will show – don’t delay here

new scene transition start

new scene did show

load/goto should (in theory) be safe to call without a timer delay, as both scenes must be fully loaded before either transition is started.  so an on-demand load might might delay the overall onset of the transitions, but shouldn’t occur “during” the transition to make it “choppy”

[edit to “clarify?”] i know that docs imply did-hide won’t occur until AFTER old scene’s transition completes and old scene is completely off-screen, but that isn’t the case with concurrent effects – test it yourself:  put some “noticeable” change in did-hide, like setting your old scene’s background image .isVisible=false, then transition with a long time so you can notice it – it’ll be invisible DURING the transition – that’s why did-hide shouldn’t do time-intensive work [/edit]

[rshanlon]

Thanks both of you for helping.  It’s taken me a couple days to try these out.

Yes, loading lots of widgets and sounds but not in Hide-did nor Show-will.  I’m loading them above Create-scene inside of functions.

So great results by placing all of the composer.loadScene in Show-did.  The jerky scene transitions have disappeared.  

I did not try performWithDelay but had the same thought.  My feeling is if I can do this without adding more delay to the user experience, then the better.  I’d like the experience to be “Tap the button, Scene moves along” nice and responsive.

Hopefully I’m not celebrating too soon.  But seems to be working.

Thanks again!  And Thanks, Dave, for the breakdown of how things are playing out behind the scenes.  Some of my other apps will benefit from knowing this now.