Storyboard Transitions

[tamoor666]

I’ve got a simple button function which changes the scene to one called “tutorials” and i’ve got the below code:

[lua]

local function btnPress( event )

    local phase = event.phase 

    if “ended” == phase then

        storyboard.gotoScene( “tutorial”, {effect=“flip”, time=800} )

    end

end

[/lua]

However when i press the button it does go to the “tutorial” scene however the effect’s don’t seem to work and the tutorial scene elements seem to just overlay above the current scene. Any ideas what i’m doing wrong?

The “tutorials” scene currently only has values called into ‘function scene:createScene( event )’ which is where it creates a scrollview

[rob]

This sounds to me like you’re building all your display objects in enterScene() and not createScene() or you’re not putting them into the “group” group.

Can you also post your tutorial.lua file?

[tamoor666]

I’ve got the items in my tutorial.lua file in the scene:createScene 

In the original Welcome.lua file that gets loaded first, if I insert the items into group with (the below) all the items seem to dissapear, although if i click where the button should be it takes me to the next scene

[lua]

group:insert(btnPlay)

group:insert(txt)

group:insert(txt1)

[/lua]

Welcome.lua

[lua]

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

function scene:createScene( event )

    local group = self.view

    – Add Buttons

local function btnPress( event )

    local phase = event.phase 

    if “ended” == phase then

        storyboard.gotoScene( “tutorial”, “flip”, 800)

        return true

    end

end

local btnPlay = widget.newButton

{

    defaultFile = “assets/images/btnGreen.png”,

    overFile = “assets/images/btnGreenPressed.png”,

    width = 280,

    height = 42,

    id = “btnPlay”,

    label = “Play”,

    font = “Helvetica”,

    labelColor = {default={255,255,255}, over = {255,255,255}},

    fontSize = 22,

    emboss = true,

    onEvent = btnPress

} 

btnPlay.x = 160; btnPlay.y = 250

– Add Text

local txt = display.newText(“Learn how to play with our interactive tutorial”,0,80, 275, display.contentHeight * 0.5, Helvetiva, 20)

txt:setTextColor (100,100,100)

txt:setReferencePoint(display.CenterReferencePoint)

txt.x = display.contentWidth*0.5

local txt1 = display.newText("(Alpha App)",0,display.contentHeight - 80,Helvetiva, 25)

txt1:setTextColor (100,100,100)

txt1.x = display.contentWidth*0.5

end

[/lua]

Tutorial.lua:

[lua]

    local storyboard = require( “storyboard” )

    local scene = storyboard.newScene()

    local widget = require “widget”

    local json = require “json”

    local mime = require “mime”

    ----------------------------------------------------------------------------------

    – 

    –    NOTE:

    –    

    –    Code outside of listener functions (below) will only be executed once,

    –    unless storyboard.removeScene() is called.

    – 

    ---------------------------------------------------------------------------------

    ---------------------------------------------------------------------------------

    – BEGINNING OF YOUR IMPLEMENTATION

    ---------------------------------------------------------------------------------

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

    function scene:createScene( event )

        local group = self.view

        

        – Add NavBar Buttons

        local btnBack = display.newImage(“assets/images/back.png”)

        navBar:setReferencePoint(display.CenterLeftReferencePoint)

        btnBack.x = navBar.x + 40

        btnBack.y = navBar.y

        local btnBackTxt = display.newText(“Back”, 0,0, native.systemFont, 14 )

        btnBack:setReferencePoint(display.CenterReferencePoint)

        btnBackTxt.x = btnBack.x + 2

        btnBackTxt.y = btnBack.y 

        – Create scroller

        local scroller = widget.newScrollView

        {

            top = 44,

            width = display.contentWidth,

            height = 568,

            scrollWidth = display.contentWidth,

            scrollHeight = display.contentHeight,

            hideBackground = true,

            horizontalScrollDisabled = true,

            maskFile = “assets/images/mask-320x568.png”

        }

        local function tutorial ()    

            – Read Title from DB

            local title = display.newText(dataTable.title,0,30, native.systemFont,24)

            title:setTextColor (1,98,112)

            title:setReferencePoint(display.CenterReferencePoint)

            title.x = display.contentWidth/2

            local titlebg = display.newImageRect(“assets/images/rounded.png”, 290,60)

            titlebg.x = display.contentWidth/2

            titlebg.y = title.y

            

            – Read Lines from DB

            

        for i=1, #dataTable.lines do

            local hiddentxt, showntxt = string.match(dataTable.lines[i].text, “^(.*)$”)

            local linebg = display.newImageRect(“assets/images/ipad-list-element.png”, 290, 40) 

              linebg.x = display.contentWidth*0.5

              linebg.y = (linebg.height * i) + title.y

              linebg:setReferencePoint(display.TopLeftReferencePoint)

            local line = display.newText(hiddentxt … " " … showntxt,0,0,nativesystemFont, 13)

            line:setTextColor(100,100,100)

            line:setReferencePoint(display.TopLeftReferencePoint)

            line.id = i

            line.x = 25

            line.y = linebg.y + 15

            scroller:insert(linebg)

            scroller:insert(line)

         end

            – Add TextBox to next blank row

            

            

            

          – Add everything to ScrollView

          scroller:insert(titlebg)

          scroller:insert(title)

                        

        end

        – Call Tutorial Function

        tutorial()

        

    end

    – Called immediately after scene has moved onscreen:

    function scene:enterScene( event )

        local group = self.view

        local lastScene = storyboard.getPrevious()

        if (lastScene) then

            storyboard.purgeScene(lastScene)

        end

    end

[/lua]

[rob]

If you put things in the storyboard group and they disappear, then you have a graphic, like a background that is also not in a group.  Any images you create and do not put them in groups, they sit above any images in groups.  Storyboard will only manage (i.e. transition) images in it’s view (group).  So I’m guessing that maybe in main.lua you’re creating something outside of storyboard or

[tamoor666]

Yes i’ve got a main.lua file which sets the Global header and background image, would i have to create a new display group for these elements?

[lua]

local storyboard = require “storyboard”

– Hide status bar

display.setStatusBar( display.HiddenStatusBar )

– Import UI Elements

ui = require “ui” 

– Init local db

local loadsave = require “loadsave”

dataTable = loadsave.loadTable(“game.json”)

if dataTable == nil then

dataTable = {}

dataTable.title = “A Yellow Car”

dataTable.totalLines = “6”

dataTable.lines = {

    { text = “My car is better than your car”, player = “AI”}, 

    { text = “I love cars. Beep beep down the road. Crazy”, player = “AI”},

}

loadsave.saveTable(dataTable,“game.json”)

end         

– Game Settings

maxchars = 45

– load scenetemplate.lua

storyboard.gotoScene( “welcome” )

–Global background

local bg = display.newImage(“assets/images/bg2.png”)

bg.x = display.contentWidth/2

bg.y = display.contentHeight/2

–Setup the nav bar 

navBar = display.newImageRect(“assets/images/navbar.png”, display.contentWidth + 15, 44)

navBar.x = display.contentWidth*.5

navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

navHeader = display.newText(“My Game”, 0, 0, “Handlee”, 36)

navHeader:setTextColor(255, 255, 255)

navHeader.x = display.contentWidth*.5

navHeader.y = navBar.y

[/lua]

[tamoor666]

Reading through the docs i found some code and added the below which seems to fix everything.

I’m still new to Lua/Corona - will the blow be the order for all screens, so the bg will be first, then whatever is in the scene followed by the navBar/navHeader on top?

[lua]

local display_stage = display.getCurrentStage()

display_stage:insert(bg)

display_stage:insert(storyboard.stage)

display_stage:insert(navBar)

display_stage:insert(navHeader)

[/lua]

[rob]

This sounds to me like you’re building all your display objects in enterScene() and not createScene() or you’re not putting them into the “group” group.

Can you also post your tutorial.lua file?

[tamoor666]

I’ve got the items in my tutorial.lua file in the scene:createScene 

In the original Welcome.lua file that gets loaded first, if I insert the items into group with (the below) all the items seem to dissapear, although if i click where the button should be it takes me to the next scene

[lua]

group:insert(btnPlay)

group:insert(txt)

group:insert(txt1)

[/lua]

Welcome.lua

[lua]

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

function scene:createScene( event )

    local group = self.view

    – Add Buttons

local function btnPress( event )

    local phase = event.phase 

    if “ended” == phase then

        storyboard.gotoScene( “tutorial”, “flip”, 800)

        return true

    end

end

local btnPlay = widget.newButton

{

    defaultFile = “assets/images/btnGreen.png”,

    overFile = “assets/images/btnGreenPressed.png”,

    width = 280,

    height = 42,

    id = “btnPlay”,

    label = “Play”,

    font = “Helvetica”,

    labelColor = {default={255,255,255}, over = {255,255,255}},

    fontSize = 22,

    emboss = true,

    onEvent = btnPress

} 

btnPlay.x = 160; btnPlay.y = 250

– Add Text

local txt = display.newText(“Learn how to play with our interactive tutorial”,0,80, 275, display.contentHeight * 0.5, Helvetiva, 20)

txt:setTextColor (100,100,100)

txt:setReferencePoint(display.CenterReferencePoint)

txt.x = display.contentWidth*0.5

local txt1 = display.newText("(Alpha App)",0,display.contentHeight - 80,Helvetiva, 25)

txt1:setTextColor (100,100,100)

txt1.x = display.contentWidth*0.5

end

[/lua]

Tutorial.lua:

[lua]

    local storyboard = require( “storyboard” )

    local scene = storyboard.newScene()

    local widget = require “widget”

    local json = require “json”

    local mime = require “mime”

    ----------------------------------------------------------------------------------

    – 

    –    NOTE:

    –    

    –    Code outside of listener functions (below) will only be executed once,

    –    unless storyboard.removeScene() is called.

    – 

    ---------------------------------------------------------------------------------

    ---------------------------------------------------------------------------------

    – BEGINNING OF YOUR IMPLEMENTATION

    ---------------------------------------------------------------------------------

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

    function scene:createScene( event )

        local group = self.view

        

        – Add NavBar Buttons

        local btnBack = display.newImage(“assets/images/back.png”)

        navBar:setReferencePoint(display.CenterLeftReferencePoint)

        btnBack.x = navBar.x + 40

        btnBack.y = navBar.y

        local btnBackTxt = display.newText(“Back”, 0,0, native.systemFont, 14 )

        btnBack:setReferencePoint(display.CenterReferencePoint)

        btnBackTxt.x = btnBack.x + 2

        btnBackTxt.y = btnBack.y 

        – Create scroller

        local scroller = widget.newScrollView

        {

            top = 44,

            width = display.contentWidth,

            height = 568,

            scrollWidth = display.contentWidth,

            scrollHeight = display.contentHeight,

            hideBackground = true,

            horizontalScrollDisabled = true,

            maskFile = “assets/images/mask-320x568.png”

        }

        local function tutorial ()    

            – Read Title from DB

            local title = display.newText(dataTable.title,0,30, native.systemFont,24)

            title:setTextColor (1,98,112)

            title:setReferencePoint(display.CenterReferencePoint)

            title.x = display.contentWidth/2

            local titlebg = display.newImageRect(“assets/images/rounded.png”, 290,60)

            titlebg.x = display.contentWidth/2

            titlebg.y = title.y

            

            – Read Lines from DB

            

        for i=1, #dataTable.lines do

            local hiddentxt, showntxt = string.match(dataTable.lines[i].text, “^(.*)$”)

            local linebg = display.newImageRect(“assets/images/ipad-list-element.png”, 290, 40) 

              linebg.x = display.contentWidth*0.5

              linebg.y = (linebg.height * i) + title.y

              linebg:setReferencePoint(display.TopLeftReferencePoint)

            local line = display.newText(hiddentxt … " " … showntxt,0,0,nativesystemFont, 13)

            line:setTextColor(100,100,100)

            line:setReferencePoint(display.TopLeftReferencePoint)

            line.id = i

            line.x = 25

            line.y = linebg.y + 15

            scroller:insert(linebg)

            scroller:insert(line)

         end

            – Add TextBox to next blank row

            

            

            

          – Add everything to ScrollView

          scroller:insert(titlebg)

          scroller:insert(title)

                        

        end

        – Call Tutorial Function

        tutorial()

        

    end

    – Called immediately after scene has moved onscreen:

    function scene:enterScene( event )

        local group = self.view

        local lastScene = storyboard.getPrevious()

        if (lastScene) then

            storyboard.purgeScene(lastScene)

        end

    end

[/lua]

[rob]

If you put things in the storyboard group and they disappear, then you have a graphic, like a background that is also not in a group.  Any images you create and do not put them in groups, they sit above any images in groups.  Storyboard will only manage (i.e. transition) images in it’s view (group).  So I’m guessing that maybe in main.lua you’re creating something outside of storyboard or

[tamoor666]

Yes i’ve got a main.lua file which sets the Global header and background image, would i have to create a new display group for these elements?

[lua]

local storyboard = require “storyboard”

– Hide status bar

display.setStatusBar( display.HiddenStatusBar )

– Import UI Elements

ui = require “ui” 

– Init local db

local loadsave = require “loadsave”

dataTable = loadsave.loadTable(“game.json”)

if dataTable == nil then

dataTable = {}

dataTable.title = “A Yellow Car”

dataTable.totalLines = “6”

dataTable.lines = {

    { text = “My car is better than your car”, player = “AI”}, 

    { text = “I love cars. Beep beep down the road. Crazy”, player = “AI”},

}

loadsave.saveTable(dataTable,“game.json”)

end         

– Game Settings

maxchars = 45

– load scenetemplate.lua

storyboard.gotoScene( “welcome” )

–Global background

local bg = display.newImage(“assets/images/bg2.png”)

bg.x = display.contentWidth/2

bg.y = display.contentHeight/2

–Setup the nav bar 

navBar = display.newImageRect(“assets/images/navbar.png”, display.contentWidth + 15, 44)

navBar.x = display.contentWidth*.5

navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

navHeader = display.newText(“My Game”, 0, 0, “Handlee”, 36)

navHeader:setTextColor(255, 255, 255)

navHeader.x = display.contentWidth*.5

navHeader.y = navBar.y

[/lua]

[tamoor666]

Reading through the docs i found some code and added the below which seems to fix everything.

I’m still new to Lua/Corona - will the blow be the order for all screens, so the bg will be first, then whatever is in the scene followed by the navBar/navHeader on top?

[lua]

local display_stage = display.getCurrentStage()

display_stage:insert(bg)

display_stage:insert(storyboard.stage)

display_stage:insert(navBar)

display_stage:insert(navHeader)

[/lua]