Switching Screens

Using the Coffee demo on Ansca Mobile’s blog I put together a demo showing how to switch from one screen to another, for example, switch from the play screen to a high score screen and back again. To make it work you’ll need a couple button graphics and the ui.lua file from that Coffee demo. It’s pretty plain-Jane, but it does show how to switch from one screen to another.

I also recorded a little walkthrough video of the code, it’s 3-minutes long and you can see it here:

-- test code to switch from one screen to another
-- By J. A. Whye - September 25, 2010 -- http://gamedevnation.com

local ui = require ( "ui" )

-- button handler for the Play Game button
local function hsButtonHandler(event)
        transition.to(scrnHighScores, {time=400, x=display.contentWidth*-1, transition=easing.linear, alpha=0 })
        transition.to(scrnPlay, {time=400, x=0, transition=easing.linear, alpha=1 })
end

-- the button that goes on the High Scores screen, leads you to the Play screen
local hsButton = ui.newButton {
        defaultSrc = "buttonGreen.png" , defaultX = "150" , defaultY = "40",
        overSrc = "buttonGreenOver.png" , overX = "150" , overY = "40",
        onEvent = hsButtonHandler, id = "myButton", x = 150, y = 340,
                text = "Play Game"
}

-- button handler for the High Scores button
local function msButtonHandler(event)
                transition.to(scrnPlay, {time=400, x=display.contentWidth*-1, transition=easing.linear, alpha=0 })
                transition.to(scrnHighScores, {time=400, x=0, transition=easing.linear, alpha=1 })
end

-- the button that goes on the Play screen, leads you to the High Scores screen
local msButton = ui.newButton {
        defaultSrc = "buttonGreen.png" , defaultX = "150" , defaultY = "40",
        overSrc = "buttonGreenOver.png" , overX = "150" , overY = "40",
        onEvent = msButtonHandler, id = "msButton", x = 150, y = 300,
                text = "High Scores"
}

-- set up groups for the screens
scrnPlay = display.newGroup()
scrnHighScores = display.newGroup()
scrnHighScores.x = display.contentWidth*-1 -- start with the High Score screen out of site
scrnHighScores.alpha = 0 -- and start with it transparent

-- create text for the High Scores screen
hsText = display.newText("High Scores Here", 10, 50, native.systemFontBold, 24)
hsText:setTextColor(255, 255, 255)

-- put the text and the button into the group
scrnHighScores:insert(hsText)
scrnHighScores:insert(hsButton)

-- create text for the Play screen
playScreenText = display.newText("Play Game Here", 10, 50, native.systemFontBold, 24)
playScreenText:setTextColor(255, 255, 255)

-- create a colored background to differentiate between the screens
local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,125,125)

-- put the , background, text and the button into the group
scrnPlay:insert(detailBg)
scrnPlay:insert(playScreenText)
scrnPlay:insert(msButton)