storyboard for beginners

Darkry999 · October 8, 2013, 6:43pm

Been trying to follow the simple storyboard implementation and it will not work. Any help much appreciated. I have 2 files (main.lua and scene1.lua), and all I want to do right now is flip between them using a button in each. The code and error message follows.

--main.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) function scene:createScene(event) local redButton = display.newImage( "Button1.png") self.view:insert(redButton) end scene:addEventListener ( "createScene", scene ) function onButtonTap() storyboard.gotoScene("scene1", "fade", 400) end redButton:addEventListener ( "tap", onButtonTap ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners end scene:addEventListener ( "destroyScene", scene) return scene

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) function scene:createScene(event) local yellowButton = display.newImage( "Button2.png") self.view:insert(yellowButton) end scene:addEventListener ( "createScene", scene) function onButtonTap() -- event argument?! storyboard.gotoScene("main", "fade", 400) end yellowButton:addEventListener ( "tap", onButtonTap ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners end scene:addEventListener ( "destroyScene", scene ) return scene

Error is:

Runtime error

…brary/Application Support/Outlaw/Sandbox/83/main.lua:17: attempt to index global ‘redButton’ (a nil value)

stack traceback:

[C]: ?

…brary/Application Support/Outlaw/Sandbox/83/main.lua:17: in main chunk

Thanks in advance for any help. I am sticking as close as I can to the Jonathan Beebe’s tutorial: Storyboard Basic Useage of Aug 12, 2012.

Alex10 · October 8, 2013, 6:51pm

Try this out:

local function onButtonTap(event) if event.phase == "ended" then storyboard.gotoScene("scene1", "fade", 400) end end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) group:insert(redButton) end scene:addEventListener ( "createScene", scene )

Remember to have event functions be above the object that will have the listener set up for them.
Have the listener be below the call to create the object.
Remember to have the “local group = self.view” set in each Storyboard scene function. This is integral.

You’re going to want to mimic this in the scene1.lua code as well.

Saerothir · October 8, 2013, 7:05pm

Have a look at the Storyboard template, included with the SDK.
If you’re using a Mac then -
Applications > CoronaSDK > SampleCode > Interface > Storyboard

Cheers!

-Saer

Darkry999 · October 8, 2013, 7:55pm

Thanks for the help.

I have moved the listener function definitions up before the display object to which they are attached. I have tried this by inserting them inside the createScene function and also before the createScene function’s definition. In both cases, I am not getting any error messages but the images are not showing on the screen - so it is not working.

I am sticking with tap as opposed to touch events, just because it is simpler.

I have checked for obvious dumb errors by commenting out all the code and just getting the image on the display. That works fine.

Code as follows.

--main.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x = cX; redButton.y = cY group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners too!! end scene:addEventListener ( "destroyScene", scene) return scene

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("main", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton.x = cX; yellowButton.y = cY group:insert(yellowButton) yellowButton:addEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners end scene:addEventListener ( "destroyScene", scene ) return scene

One obvious assumption I am making is that the gotoScene function will trigger the destroyScene function.

J Beebe’s article suggest that you can get by with just the createScene and destroyScene functions provided you set the purge boolean. That is all I am really trying to understand at the moment.

Thanks again for all the help. It is appreciated.

Alex10 · October 8, 2013, 8:07pm

I have storyboard implemented in my code and it definitely works as designed.

If the problem is that you can’t see the images, I’d suggest starting with the display.contentCenterX and display.contentCenterY to ensure that the images are being displayed.

If that isn’t the problem, please feel free to let me know.

Darkry999 · October 8, 2013, 9:09pm

I have done as suggested. The code is below, just for completeness.

I have even dared to remove the gotoScene listener in the destroyScene function(!).

If anyone has a simple 2 sheet file that allows one to switch from one storyboard .lua to another .lua using a simple button, I for one would really appreciate the template. Using just the createScene and destroyScene as described by J Beebe.

Really appreciate the help.

Code follows:

--main.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) --local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x = display.contentWidth/2; redButton.y = display.contentHeight/2 group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") redButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene) return scene

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) --local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("main", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton:addEventListener ( "tap", onButtonTap ) yellowButton.x = display.contentWidth/2; yellowButton.y = display.contentHeight/2 group:insert(yellowButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") yellowButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene ) return scene

Saerothir · October 8, 2013, 10:00pm

You can find many templates, some of which deal exclusively with Storyboard, in the file you got when you downloaded Corona.
Or you could just open the simulator and click ‘New Project’ and then choose the ‘game’ template - even if you’re not making a game, it is a good way to familiarize yourself with how Storyboard works.

Btw, are your images in a sub-folder, in main project folder? If so, then that would explain why they’re not being displayed.

-Saer

Darkry999 · October 8, 2013, 10:13pm

Hi @Saerothir

I can assure you that my images are in the same folder. I have also-triple checked that the problem is not down to a very basic error, by uncommenting just about every line of code that might create a simple idiotic error.

Many thanks, BTW, for your help. It is appreciated.

As things stand, I still cannot get the simple storyboard idea going.

My question is simple. If storyboard is what I think it is - ie a great idea - is there a simple 2 .lua file combination that can get a Corona-starter switching between scenes just by clicking buttons in each scene?! That’s all I need.

Really appreciate your input. You are right - I do need to go through the excellent documentation that Corona provides on the original download. However, I have followed the Corona advice to the letter and have not seen it work.

Cheers!

Saerothir · October 8, 2013, 10:33pm

Alright, just checking.

Well I’m not really talking about documentation. Corona comes with various templates (physics, storyboard, animations etc…) that you can use to get familiar with various concepts.
Find the CoronaSDK file on your computer, open then open the ‘SampleCode’ folder and then simply choose one of the templates. They have all the code relevant to the title of the template, and can be run on the simulator.

I learned how to use Storyboard by using the ‘game’ template. Just open the simulator, click then ‘New Project’ button and then choose the ‘Game’ template. It has two scenes, shows physics and just some basic stuff.

Good-luck.

-Saer

Darkry999 · October 8, 2013, 10:58pm

Right! The blessed thing is now running. I created 3 files in the end, including a main.lua that flips straight into scene1 without any clicking, and then buttons in scene1 & scene2 that flip from back and forth – endlessly.

Again, at the risk of boring everyone, the code:

-- main.lua local storyboard = require "storyboard" -- Load the first scene to be shown storyboard.gotoScene( "scene1")

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene2", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton:addEventListener ( "tap", onButtonTap ) yellowButton.x, yellowButton.y = cX, cY group:insert(yellowButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --yellowButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene ) return scene

--scene2.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x, redButton.y = cX, cY group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --redButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene) return scene

I now have a working template, but I would really love to know why/how this works, as opposed to why the previous attempts were so bad. Is it related to definitions?! Is it a global/ local thing that I inadvertently solved by having a main.lua that straight-off-the-bat inits another scene?!

Seemingly, creating a main.lua that just starts the storyboard and does little else has made the difference.

With many thanks for the help provided. It is much appreciated. I would love actually to understand this stuff.

Alex10 · October 8, 2013, 6:51pm

Try this out:

local function onButtonTap(event) if event.phase == "ended" then storyboard.gotoScene("scene1", "fade", 400) end end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) group:insert(redButton) end scene:addEventListener ( "createScene", scene )

Remember to have event functions be above the object that will have the listener set up for them.
Have the listener be below the call to create the object.
Remember to have the “local group = self.view” set in each Storyboard scene function. This is integral.

You’re going to want to mimic this in the scene1.lua code as well.

Saerothir · October 8, 2013, 7:05pm

Have a look at the Storyboard template, included with the SDK.
If you’re using a Mac then -
Applications > CoronaSDK > SampleCode > Interface > Storyboard

Cheers!

-Saer

Darkry999 · October 8, 2013, 7:55pm

Thanks for the help.

I have moved the listener function definitions up before the display object to which they are attached. I have tried this by inserting them inside the createScene function and also before the createScene function’s definition. In both cases, I am not getting any error messages but the images are not showing on the screen - so it is not working.

I am sticking with tap as opposed to touch events, just because it is simpler.

I have checked for obvious dumb errors by commenting out all the code and just getting the image on the display. That works fine.

Code as follows.

--main.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x = cX; redButton.y = cY group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners too!! end scene:addEventListener ( "destroyScene", scene) return scene

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("main", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton.x = cX; yellowButton.y = cY group:insert(yellowButton) yellowButton:addEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --remove listeners end scene:addEventListener ( "destroyScene", scene ) return scene

One obvious assumption I am making is that the gotoScene function will trigger the destroyScene function.

J Beebe’s article suggest that you can get by with just the createScene and destroyScene functions provided you set the purge boolean. That is all I am really trying to understand at the moment.

Thanks again for all the help. It is appreciated.

Alex10 · October 8, 2013, 8:07pm

I have storyboard implemented in my code and it definitely works as designed.

If the problem is that you can’t see the images, I’d suggest starting with the display.contentCenterX and display.contentCenterY to ensure that the images are being displayed.

If that isn’t the problem, please feel free to let me know.

Darkry999 · October 8, 2013, 9:09pm

I have done as suggested. The code is below, just for completeness.

I have even dared to remove the gotoScene listener in the destroyScene function(!).

If anyone has a simple 2 sheet file that allows one to switch from one storyboard .lua to another .lua using a simple button, I for one would really appreciate the template. Using just the createScene and destroyScene as described by J Beebe.

Really appreciate the help.

Code follows:

--main.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) --local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x = display.contentWidth/2; redButton.y = display.contentHeight/2 group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") redButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene) return scene

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) --local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("main", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton:addEventListener ( "tap", onButtonTap ) yellowButton.x = display.contentWidth/2; yellowButton.y = display.contentHeight/2 group:insert(yellowButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") yellowButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene ) return scene

Saerothir · October 8, 2013, 10:00pm

You can find many templates, some of which deal exclusively with Storyboard, in the file you got when you downloaded Corona.
Or you could just open the simulator and click ‘New Project’ and then choose the ‘game’ template - even if you’re not making a game, it is a good way to familiarize yourself with how Storyboard works.

Btw, are your images in a sub-folder, in main project folder? If so, then that would explain why they’re not being displayed.

-Saer

Darkry999 · October 8, 2013, 10:13pm

Hi @Saerothir

I can assure you that my images are in the same folder. I have also-triple checked that the problem is not down to a very basic error, by uncommenting just about every line of code that might create a simple idiotic error.

Many thanks, BTW, for your help. It is appreciated.

As things stand, I still cannot get the simple storyboard idea going.

My question is simple. If storyboard is what I think it is - ie a great idea - is there a simple 2 .lua file combination that can get a Corona-starter switching between scenes just by clicking buttons in each scene?! That’s all I need.

Really appreciate your input. You are right - I do need to go through the excellent documentation that Corona provides on the original download. However, I have followed the Corona advice to the letter and have not seen it work.

Cheers!

Saerothir · October 8, 2013, 10:33pm

Alright, just checking.

Well I’m not really talking about documentation. Corona comes with various templates (physics, storyboard, animations etc…) that you can use to get familiar with various concepts.
Find the CoronaSDK file on your computer, open then open the ‘SampleCode’ folder and then simply choose one of the templates. They have all the code relevant to the title of the template, and can be run on the simulator.

I learned how to use Storyboard by using the ‘game’ template. Just open the simulator, click then ‘New Project’ button and then choose the ‘Game’ template. It has two scenes, shows physics and just some basic stuff.

Good-luck.

-Saer

Darkry999 · October 8, 2013, 10:58pm

Right! The blessed thing is now running. I created 3 files in the end, including a main.lua that flips straight into scene1 without any clicking, and then buttons in scene1 & scene2 that flip from back and forth – endlessly.

Again, at the risk of boring everyone, the code:

-- main.lua local storyboard = require "storyboard" -- Load the first scene to be shown storyboard.gotoScene( "scene1")

--scene1.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene2", "fade", 400) end function scene:createScene(event) local group = self.view local yellowButton = display.newImage( "Button2.png") yellowButton:addEventListener ( "tap", onButtonTap ) yellowButton.x, yellowButton.y = cX, cY group:insert(yellowButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --yellowButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene ) return scene

--scene2.lua local storyboard = require "storyboard" storyboard.purgeOnSceneChange = true local scene = storyboard.newScene ( ) local cX, cY = display.contentWidth/2, display.contentHeight/2 local function onButtonTap(event) storyboard.gotoScene("scene1", "fade", 400) end function scene:createScene(event) local group = self.view local redButton = display.newImage( "Button1.png") redButton:addEventListener ( "tap", onButtonTap ) redButton.x, redButton.y = cX, cY group:insert(redButton) end scene:addEventListener ( "createScene", scene ) function scene:destroyScene(event) print("called when scene unloaded") --redButton:removeEventListener ( "tap", onButtonTap ) end scene:addEventListener ( "destroyScene", scene) return scene

I now have a working template, but I would really love to know why/how this works, as opposed to why the previous attempts were so bad. Is it related to definitions?! Is it a global/ local thing that I inadvertently solved by having a main.lua that straight-off-the-bat inits another scene?!

Seemingly, creating a main.lua that just starts the storyboard and does little else has made the difference.

With many thanks for the help provided. It is much appreciated. I would love actually to understand this stuff.