Storyboard gotoScene not working properly

Solar2D Composer
#1

So, I recently try to test Corona SDK,  and trying on one of the cool features called storyboard, I’ve tried to follow based on what samples code are given. But it seems that I can’t make the gotoScene() to work out. any ideas why this happen?

these are both my main.lua file and one of the menu that supposed to be linked with storyboard.

main.lua

display.setStatusBar( display.HiddenStatusBar ) local widget = require("widget") local storyboard = require( "storyboard" ) local background = display.setDefault("background", 1) local flagButton = { { left = 25, top = 927, width = 55, height = 75, id = "languageEnglish", defaultFile = "flags/final/english.png", overFile = "flags/checked/english.png", onEvent = function() storyboard.gotoScene( "english" ) end, selected = true }, { left = 95, top = 927, width = 55, height = 75, id = "languageGerman", defaultFile = "flags/final/germany.png", overFile = "flags/checked/germany.png", onEvent = function() storyboard.gotoScene( "german" ) end, }, { left = 165, top = 927, width = 55, height = 75, id = "languageSpain", defaultFile = "flags/final/spain.png", overFile = "flags/checked/spain.png", onEvent = function() storyboard.gotoScene( "spain" ) end, }, { left = 235, top = 927, width = 55, height = 75, id = "languageItaly", defaultFile = "flags/final/italy.png", overFile = "flags/checked/italy.png", onEvent = function() storyboard.gotoScene( "italy" ) end, }, { left = 305, top = 927, width = 55, height = 75, id = "languageFrance", defaultFile = "flags/final/france.png", overFile = "flags/checked/france.png", onEvent = function() storyboard.gotoScene( "france" ) end, } } local tabBar = widget.newTabBar { top = display.contentHeight - 50, width = display.contentWidth, buttons = flagButton } storyboard.gotoScene( "english" )

english.lua

local widget = require( "widget" ) local storyboard = require( "storyboard" ) local scene = storyboard.newScene() function scene:createScene(event) local group = self.view local background = display.newImage("Assets/menu/menu\_en.jpg", 380, 480) group:insert(background) end scene:addEventListener( "createScene" ) return scene
#2

Is that your whole code?  There should be enterScene, exitScene, destroyScene routines in there too.  I’m not sure if anything displays until enterScene.

And what exactly isn’t working?  

E.g. since your tab-bar is created in main.lua and not attached to any storyboard, it will persist when you change to the new scene.  To get rid of that behavior, you’d have to explicitly remove or disable the tab-bar in the onEvent functions.

#3

does the storyboard cycle should include all of those methods? I thought those aren’t necessary yet, as I try to check the code to work without any error or so. what do you mean by remove the tab bar?

#4

Below is a blank storyboard file that I use to build each new scene:

[lua]

– LIBRARIES

local storyboard = require(“storyboard”)

– DISPLAY GROUPS

local group = display.newGroup()

– LOCAL VARIABLES

local scene = storyboard.newScene()

– OBJECT DECLARATIONS

– MY SCENE FUNCTIONS

– STORYBOARD FUNCTIONS

– Called when the scene’s view does not exist:

function scene:createScene(event)

    group = self.view

end

– Called BEFORE scene has moved onscreen:

function scene:willEnterScene(event)

    group = self.view

end

– Called immediately after scene has moved onscreen:

function scene:enterScene(event)

    group = self.view

end

– Called when scene is about to move offscreen:

function scene:exitScene(event)

    group = self.view

end

– Called AFTER scene has finished moving offscreen:

function scene:didExitScene(event)

    group = self.view

end

– Called prior to the removal of scene’s “view” (display group)

function scene:destroyScene(event)

    group = self.view

end

– Called if/when overlay scene is displayed via storyboard.showOverlay()

function scene:overlayBegan(event)

    group = self.view

    local overlay_scene = event.sceneName – overlay scene name

end

– Called if/when overlay scene is hidden/removed via storyboard.hideOverlay()

function scene:overlayEnded(event)

    group = self.view

    local overlay_scene = event.sceneName – overlay scene name

end

– END OF YOUR IMPLEMENTATION

scene:addEventListener(“createScene”, scene)

scene:addEventListener(“willEnterScene”, scene)

scene:addEventListener(“enterScene”, scene)

scene:addEventListener(“exitScene”, scene)

scene:addEventListener(“didExitScene”, scene)

scene:addEventListener(“destroyScene”, scene)

scene:addEventListener(“overlayBegan”, scene)

scene:addEventListener(“overlayEnded”, scene)

return scene

[/lua]

#5

Thanks nick. I will try to use it, and post the results

#6

I hae modified my code. but it seems that storyboard is still not working. Am I doing this wrong?

display.setStatusBar( display.HiddenStatusBar ) local widget = require("widget") local storyboard = require( "storyboard" ) local background = display.setDefault("background", 1) local flagButton = { { left = 25, top = 927, width = 55, height = 75, id = "languageEnglish", defaultFile = "flags/final/english.png", overFile = "flags/checked/english.png", onEvent = function() storyboard.gotoScene( "english" ) end, selected = true }, { left = 95, top = 927, width = 55, height = 75, id = "languageGerman", defaultFile = "flags/final/germany.png", overFile = "flags/checked/germany.png", onEvent = function() storyboard.gotoScene( "german" ) end, }, { left = 165, top = 927, width = 55, height = 75, id = "languageSpain", defaultFile = "flags/final/spain.png", overFile = "flags/checked/spain.png", onEvent = function() storyboard.gotoScene( "spain" ) end, }, { left = 235, top = 927, width = 55, height = 75, id = "languageItaly", defaultFile = "flags/final/italy.png", overFile = "flags/checked/italy.png", onEvent = function() storyboard.gotoScene( "italy" ) end, }, { left = 305, top = 927, width = 55, height = 75, id = "languageFrance", defaultFile = "flags/final/france.png", overFile = "flags/checked/france.png", onEvent = function() storyboard.gotoScene( "france" ) end, } } local tabBar = widget.newTabBar { top = display.contentHeight - 50, width = display.contentWidth, buttons = flagButton } storyboard.gotoScene( "english" )

main.lua

local widget = require( "widget" ) local storyboard = require( "storyboard" ) local scene = storyboard.newScene() -- Called when the scene's view does not exist: function scene:createScene(event) local group = self.view local background = display.newImage("Assets/menu/menu\_en.jpg", 380, 480) group:insert(background) local menu1 = display.newRect(193, 220, 350, 250) menu1.isVisible = hidden group:insert(menu1) local menu2 = display.newRect(563, 220, 350, 250) menu2.isVisible = hidden group:insert(menu2) local menu3 = display.newRect(193, 490, 350, 250) menu3.isVisible = hidden group:insert(menu3) local menu4 = display.newRect(563, 490, 350, 250) menu4.isVisible = hidden group:insert(menu4) local menu5 = display.newRect(193, 760, 350, 250) menu5.isVisible = hidden group:insert(menu5) local menu6 = display.newRect(563, 760, 350, 250) menu6.isVisible = hidden group:insert(menu6) local logo = display.newImage("Assets/happyTouchLogo.png", 100, 40) group:insert(logo) local function subMenu() storyboard.gotoScene() end local function happyTouchJingle(event) media.playSound("Assets/Sound/jingle.mp3") local animation = function() transition.to( logo, { time=300, xScale=2.0, yScale=2.0, transition=easing.linear} ) transition.to( logo, { time=200, xScale=1.0, yScale=1.0, delay=350 } ) end local stopSound = function() media.stopSound() end timer.performWithDelay(50, animation) timer.performWithDelay(5000, stopSound) end logo:addEventListener("tap", happyTouchJingle) menu1:addEventListener("tap", subMenu) end function scene:willEnterScene(event) group = self.view end -- Called immediately after scene has moved onscreen: function scene:enterScene(event) group = self.view end -- Called when scene is about to move offscreen: function scene:exitScene(event) group = self.view end -- Called AFTER scene has finished moving offscreen: function scene:didExitScene(event) group = self.view end -- Called prior to the removal of scene's "view" (display group) function scene:destroyScene(event) group = self.view end -- Called if/when overlay scene is displayed via storyboard.showOverlay() function scene:overlayBegan(event) group = self.view local overlay\_scene = event.sceneName -- overlay scene name end -- Called if/when overlay scene is hidden/removed via storyboard.hideOverlay() function scene:overlayEnded(event) group = self.view local overlay\_scene = event.sceneName -- overlay scene name end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- scene:addEventListener("createScene", scene) scene:addEventListener("willEnterScene", scene) scene:addEventListener("enterScene", scene) scene:addEventListener("exitScene", scene) scene:addEventListener("didExitScene", scene) scene:addEventListener("destroyScene", scene) scene:addEventListener("overlayBegan", scene) scene:addEventListener("overlayEnded", scene) --------------------------------------------------------------------------------- return scene

english.lua

#7

I just noticed after double checking my main.lua. All of the function that link my storyboard doesn’t have a event listener attached to each of them. Does that will work ? Because I create this, using references from Corona samples project. One of the sample project is using a storyboard API without adding event listener to the main.lua

#8

Everything seemed to work for me … you do not need the addListener calls in main.lua, they go in the storyboard scene file (like you have).

#9

have you tried the code? It didn’t run with the simulator. which is confusing. 

#10

I have found the problem. It persists on the onEvent, on the button options. I simply change it to  onPress, and it worked like magic

#11

Just for those who want to know why this fix worked:

widget.newButton’s onEvent is a “touch” handler.  It gets called twice:  once on press and once on release.  These come in known as phases:  “began” and “ended”.  So any time you use onEvent, the function is going to fire twice.  You have to look for the phase and trap for it.   onPress and onRelease events only call once so you don’t need an if statement.

Rob

#12

thanks for the advanced tip, Rob! btw, when does onEvent usually used? Does it mean that you can’t use it to buttons?

#13

onEvent  allows you to react to the state of the button.  Lets say you wanted to have a feature where while holding the button down a  power bar increases.  You could set a flag in the onEvent’s “began” phase, then using an Runtime “enterFrame” listener, increment the power bar while the flag is true and then when you let up, onEvent fires again clearing the flag. 

Rob

#14

so it would create more possibilities to trigger different function, while being pressed, released, and the moment the button is pressed? Thanks for the in depth explanation. will do remember that when it would come to some cases! :smiley:

#15

I believe you can use onEvent with one function to handle both up and down, or you can use onPress and onRelease as separate functions.  I don’t’ think you can use onEvent with onPress/onRelease

#16

Is that your whole code?  There should be enterScene, exitScene, destroyScene routines in there too.  I’m not sure if anything displays until enterScene.

And what exactly isn’t working?  

E.g. since your tab-bar is created in main.lua and not attached to any storyboard, it will persist when you change to the new scene.  To get rid of that behavior, you’d have to explicitly remove or disable the tab-bar in the onEvent functions.

#17

does the storyboard cycle should include all of those methods? I thought those aren’t necessary yet, as I try to check the code to work without any error or so. what do you mean by remove the tab bar?

#18

Below is a blank storyboard file that I use to build each new scene:

[lua]

– LIBRARIES

local storyboard = require(“storyboard”)

– DISPLAY GROUPS

local group = display.newGroup()

– LOCAL VARIABLES

local scene = storyboard.newScene()

– OBJECT DECLARATIONS

– MY SCENE FUNCTIONS

– STORYBOARD FUNCTIONS

– Called when the scene’s view does not exist:

function scene:createScene(event)

    group = self.view

end

– Called BEFORE scene has moved onscreen:

function scene:willEnterScene(event)

    group = self.view

end

– Called immediately after scene has moved onscreen:

function scene:enterScene(event)

    group = self.view

end

– Called when scene is about to move offscreen:

function scene:exitScene(event)

    group = self.view

end

– Called AFTER scene has finished moving offscreen:

function scene:didExitScene(event)

    group = self.view

end

– Called prior to the removal of scene’s “view” (display group)

function scene:destroyScene(event)

    group = self.view

end

– Called if/when overlay scene is displayed via storyboard.showOverlay()

function scene:overlayBegan(event)

    group = self.view

    local overlay_scene = event.sceneName – overlay scene name

end

– Called if/when overlay scene is hidden/removed via storyboard.hideOverlay()

function scene:overlayEnded(event)

    group = self.view

    local overlay_scene = event.sceneName – overlay scene name

end

– END OF YOUR IMPLEMENTATION

scene:addEventListener(“createScene”, scene)

scene:addEventListener(“willEnterScene”, scene)

scene:addEventListener(“enterScene”, scene)

scene:addEventListener(“exitScene”, scene)

scene:addEventListener(“didExitScene”, scene)

scene:addEventListener(“destroyScene”, scene)

scene:addEventListener(“overlayBegan”, scene)

scene:addEventListener(“overlayEnded”, scene)

return scene

[/lua]

#19

Thanks nick. I will try to use it, and post the results

#20

I hae modified my code. but it seems that storyboard is still not working. Am I doing this wrong?

display.setStatusBar( display.HiddenStatusBar ) local widget = require("widget") local storyboard = require( "storyboard" ) local background = display.setDefault("background", 1) local flagButton = { { left = 25, top = 927, width = 55, height = 75, id = "languageEnglish", defaultFile = "flags/final/english.png", overFile = "flags/checked/english.png", onEvent = function() storyboard.gotoScene( "english" ) end, selected = true }, { left = 95, top = 927, width = 55, height = 75, id = "languageGerman", defaultFile = "flags/final/germany.png", overFile = "flags/checked/germany.png", onEvent = function() storyboard.gotoScene( "german" ) end, }, { left = 165, top = 927, width = 55, height = 75, id = "languageSpain", defaultFile = "flags/final/spain.png", overFile = "flags/checked/spain.png", onEvent = function() storyboard.gotoScene( "spain" ) end, }, { left = 235, top = 927, width = 55, height = 75, id = "languageItaly", defaultFile = "flags/final/italy.png", overFile = "flags/checked/italy.png", onEvent = function() storyboard.gotoScene( "italy" ) end, }, { left = 305, top = 927, width = 55, height = 75, id = "languageFrance", defaultFile = "flags/final/france.png", overFile = "flags/checked/france.png", onEvent = function() storyboard.gotoScene( "france" ) end, } } local tabBar = widget.newTabBar { top = display.contentHeight - 50, width = display.contentWidth, buttons = flagButton } storyboard.gotoScene( "english" )

main.lua

local widget = require( "widget" ) local storyboard = require( "storyboard" ) local scene = storyboard.newScene() -- Called when the scene's view does not exist: function scene:createScene(event) local group = self.view local background = display.newImage("Assets/menu/menu\_en.jpg", 380, 480) group:insert(background) local menu1 = display.newRect(193, 220, 350, 250) menu1.isVisible = hidden group:insert(menu1) local menu2 = display.newRect(563, 220, 350, 250) menu2.isVisible = hidden group:insert(menu2) local menu3 = display.newRect(193, 490, 350, 250) menu3.isVisible = hidden group:insert(menu3) local menu4 = display.newRect(563, 490, 350, 250) menu4.isVisible = hidden group:insert(menu4) local menu5 = display.newRect(193, 760, 350, 250) menu5.isVisible = hidden group:insert(menu5) local menu6 = display.newRect(563, 760, 350, 250) menu6.isVisible = hidden group:insert(menu6) local logo = display.newImage("Assets/happyTouchLogo.png", 100, 40) group:insert(logo) local function subMenu() storyboard.gotoScene() end local function happyTouchJingle(event) media.playSound("Assets/Sound/jingle.mp3") local animation = function() transition.to( logo, { time=300, xScale=2.0, yScale=2.0, transition=easing.linear} ) transition.to( logo, { time=200, xScale=1.0, yScale=1.0, delay=350 } ) end local stopSound = function() media.stopSound() end timer.performWithDelay(50, animation) timer.performWithDelay(5000, stopSound) end logo:addEventListener("tap", happyTouchJingle) menu1:addEventListener("tap", subMenu) end function scene:willEnterScene(event) group = self.view end -- Called immediately after scene has moved onscreen: function scene:enterScene(event) group = self.view end -- Called when scene is about to move offscreen: function scene:exitScene(event) group = self.view end -- Called AFTER scene has finished moving offscreen: function scene:didExitScene(event) group = self.view end -- Called prior to the removal of scene's "view" (display group) function scene:destroyScene(event) group = self.view end -- Called if/when overlay scene is displayed via storyboard.showOverlay() function scene:overlayBegan(event) group = self.view local overlay\_scene = event.sceneName -- overlay scene name end -- Called if/when overlay scene is hidden/removed via storyboard.hideOverlay() function scene:overlayEnded(event) group = self.view local overlay\_scene = event.sceneName -- overlay scene name end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- scene:addEventListener("createScene", scene) scene:addEventListener("willEnterScene", scene) scene:addEventListener("enterScene", scene) scene:addEventListener("exitScene", scene) scene:addEventListener("didExitScene", scene) scene:addEventListener("destroyScene", scene) scene:addEventListener("overlayBegan", scene) scene:addEventListener("overlayEnded", scene) --------------------------------------------------------------------------------- return scene

english.lua