First transition between storyboards scenes.

victor.bielak · December 24, 2013, 12:40pm

I,

I try to perform a transition between the loadmainmenu.lua and mainmenu.lua files.

I do not understand why the transition (“fade effect”) is not functioning the first time it is executed but only after mainmenu.lua has called loadmainmenu back.

the transition functions (inside enterScene) are the followings:

loadmainmenu:

function scene:enterScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: enterScene event") &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;loadingImage = display.newImageRect ( "loading.png", 480, 320) &nbsp;&nbsp;&nbsp;&nbsp;loadingImage.x = 240; loadingImage.y = 160&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert(loadingImage) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local goToMenu = function() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene ("mainmenu", "fade", 500) &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;myTimer = timer.performWithDelay (5000, goToMenu, 1) &nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;

Inside mainmenu.lua I have

function scene:enterScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n mainmenu: enterScene event") &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local backgroundImage = display.newImageRect ("mainMenuBG.png", 480, 320) &nbsp;&nbsp;&nbsp;&nbsp;backgroundImage.x = 240; backgroundImage.y = 160 &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert (backgroundImage) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local playBtn &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local onPlayTouch = function (event) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if event.phase == "release" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--audio.play (btnSound) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene ("loadmainmenu", "fade", 300) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;playBtn = ui.newButton { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultSrc = "playbtn.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultX = 100,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultY = 100,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overSrc = "playbtn-over.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overX = 100, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overY = 100, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onEvent = onPlayTouch, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id = "PlayButton", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = "", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font = "Helvetica", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textColor = { 255, 255, 255, 255 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size = 16,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emboss = false &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;playBtn.x = 240; playBtn.y = 400 &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert(playBtn) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;btnAnim = transition.to (playBtn, { time=500, y=260, transition=easing.inOutExpo }) end &nbsp;

rob · December 24, 2013, 5:50pm

You are creating your display objects in enterScene. When the enterScene event fires, the scene is already transitioned on the screen. The next time you come back the scene transitions because it already exists. Your display objects should be created in the createScene() function. enterScene() is a place to create native objects, objects not managed by storyboard, start timers, transitions, etc.

Rob

victor.bielak · December 25, 2013, 11:50am

I tried to change the position of my display objects but nothing changes. Its like the transition options are not followed when called for the first time, although the transition time is respected. I even tried to define the transition options as a separate variable, but still no “fade” transition for the first time, and its works after, when back from the mainmennu scene.

loadingmainmenu.lua

local storyboard = require ("storyboard") local scene = storyboard.newScene() local loadingImage local myTimer local options = { &nbsp; &nbsp; effect = "fade", &nbsp; &nbsp; time = 1000, &nbsp; &nbsp; params = {} } ----------------------------------------------------------------------------------------- function scene:createScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: createScene event") &nbsp;&nbsp;&nbsp;&nbsp;--storyboard.removeScene ("mainmenu") &nbsp;&nbsp;&nbsp;&nbsp;storyboard.removeScene ("main") &nbsp;&nbsp;&nbsp;&nbsp;loadingImage = display.newImageRect ( "loading.png", 480, 320) &nbsp;&nbsp;&nbsp;&nbsp;loadingImage.x = 240; loadingImage.y = 160&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert(loadingImage) end ----------------------------------------------------------------------------------------- function scene:enterScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: enterScene event") &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;--scene transition &nbsp;&nbsp;&nbsp;&nbsp;local goToMenu = function() &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;storyboard.gotoScene ("mainmenu", options) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;myTimer = &nbsp;timer.performWithDelay(1000, goToMenu, 1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; end ----------------------------------------------------------------------------------------- function scene:exitScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if myTimer then timer.cancel (myTimer);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: exitScene event") end&nbsp; ----------------------------------------------------------------------------------------- function scene:destroyScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print (( " destroy loadmainmenu's scene")) end&nbsp; ----------------------------------------------------------------------------------------- scene:addEventListener ("createScene", scene) scene:addEventListener ("enterScene", scene) scene:addEventListener ("exitScene", scene) scene:addEventListener ("destroyScene", scene) return scene &nbsp;

mainmenu.lua

local storyboard = require ("storyboard") local scene = storyboard.newScene() ui = require ("ui") local btnAnim --local btnSound = audio.loadsound ("btnSound.wav") ----------------------------------------------------------------------------------------- function scene:createScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;-- removing older scenes &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;storyboard.removeScene ("loadmainmenu") &nbsp;&nbsp;&nbsp;&nbsp;print ("\n mainmenu: createScene event") &nbsp;&nbsp;&nbsp;&nbsp; end ----------------------------------------------------------------------------------------- function scene:enterScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n mainmenu: enterScene event") &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local backgroundImage = display.newImageRect ("mainMenuBG.png", 480, 320) &nbsp;&nbsp;&nbsp;&nbsp;backgroundImage.x = 240; backgroundImage.y = 160 &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert (backgroundImage) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local playBtn &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local onPlayTouch = function (event) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if event.phase == "release" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--audio.play (btnSound) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene ("loadmainmenu", "fade", 300) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;playBtn = ui.newButton { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultSrc = "playbtn.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultX = 100,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultY = 100,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overSrc = "playbtn-over.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overX = 100, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overY = 100, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onEvent = onPlayTouch, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id = "PlayButton", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = "", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font = "Helvetica", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textColor = { 255, 255, 255, 255 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size = 16,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emboss = false &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;playBtn.x = 240; playBtn.y = 400 &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert(playBtn) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;btnAnim = transition.to (playBtn, { time=500, y=260, transition=easing.inOutExpo }) end ----------------------------------------------------------------------------------------- function scene:exitScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if btnAnim then transition.cancel (btnAnim); end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n mainmenu: exitScene event") end&nbsp; ----------------------------------------------------------------------------------------- function scene:destroyScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print (( " destroy mainmenu's scene")) end&nbsp; ----------------------------------------------------------------------------------------- scene:addEventListener ("createScene", scene) scene:addEventListener ("enterScene", scene) scene:addEventListener ("exitScene", scene) scene:addEventListener ("destroyScene", scene) return scene &nbsp;

rob · December 25, 2013, 8:31pm

mainmenu is still creating things in enterScene.

Rob

victor.bielak · December 28, 2013, 12:59pm

Thank you for your response. But still, with this new code, the first transition is not made properly (but with a straight cut).

local storyboard = require ("storyboard") local scene = storyboard.newScene() local loadingImage local myTimer local options = { &nbsp; &nbsp; effect = "fade", &nbsp; &nbsp; time = 1000, &nbsp; &nbsp; params = {} } ----------------------------------------------------------------------------------------- function scene:createScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: createScene event") &nbsp;&nbsp;&nbsp;&nbsp;--storyboard.removeScene ("mainmenu") &nbsp;&nbsp;&nbsp;&nbsp;storyboard.removeScene ("main") &nbsp;&nbsp;&nbsp;&nbsp;loadingImage = display.newImageRect ( "loading.png", 480, 320) &nbsp;&nbsp;&nbsp;&nbsp;loadingImage.x = 240; loadingImage.y = 160&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;screenGroup:insert(loadingImage) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;--scene transition &nbsp;&nbsp;&nbsp;&nbsp;local goToMenu = function() &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;storyboard.gotoScene ("mainmenu", options) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;myTimer = &nbsp;timer.performWithDelay(1000, goToMenu, 1) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; end ----------------------------------------------------------------------------------------- function scene:enterScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local screenGroup = self.view &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: enterScene event") &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;--scene transition &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; end ----------------------------------------------------------------------------------------- function scene:exitScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if myTimer then timer.cancel (myTimer);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print ("\n loadmainmenu: exitScene event") end&nbsp; ----------------------------------------------------------------------------------------- function scene:destroyScene(event) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print (( " destroy loadmainmenu's scene")) end&nbsp; ----------------------------------------------------------------------------------------- scene:addEventListener ("createScene", scene) scene:addEventListener ("enterScene", scene) scene:addEventListener ("exitScene", scene) scene:addEventListener ("destroyScene", scene) return scene &nbsp;

victor.bielak · December 28, 2013, 2:07pm

In fact my problem was not in the mainmenu scene, but in the first transition fron loadingmainmenu.lua to mainmenu.lua

rob · December 24, 2013, 5:50pm