storyboard.stage as HUD

Hi all,

sorry for the noob question-- I am in need of a HUD or chrome layer(s), which will be persistent through storyboard scene changes. So it seems the stage function of storyboard should fit the bill. I’m not having luck with implementation yet though, and I think it’s something very simple, just need a push in the right direction.

I’d like to implement this after a splash screen, on the main menu and on most screens forward.

So I put this in menu.lua:

--Add chrome that persists throughout game  
  
-- background should appear behind all scenes  
local background = display.newImageRect( "images/bgd.jpg", display.contentWidth, display.contentHeight )  
background:setReferencePoint( display.TopLeftReferencePoint )  
background.x, background.y = 0, 0  
  
--display header image on upper edge of the screen  
local header = display.newImageRect( "images/header.jpg", 480, 36 )  
header:setReferencePoint( display.TopCenterReferencePoint )  
header.x = \_W \* 0.5  
header.y = 0  
  
--position footer image on lower edge of the screen  
local footer = display.newImageRect( "images/footer.jpg", 480, 22 )  
footer:setReferencePoint( display.BottomCenterReferencePoint )  
footer.x = display.contentWidth \* 0.5  
footer.y = display.contentHeight  
  
   
-- put everything in the right order  
local display\_stage = display.getCurrentStage()  
display\_stage:insert( background )  
display\_stage:insert( storyboard.stage )  
display\_stage:insert( header )  
display\_stage:insert( footer )  

I think the problem lies in exactly where this should be placed. Thanks for some needed insight.

cheers,
Bill [import]uid: 4157 topic_id: 34952 reply_id: 334952[/import]

FYI, here is the whole code for the scene-- what’s happening is I’m getting the button, but nothing else-- no bgd, header, or footer.

thx.

[code]


– menu.lua


local storyboard = require( “storyboard” )
local scene = storyboard.newScene()

– include Corona’s “widget” library
local widget = require “widget”
– display shortcuts
local _W,_H = display.contentWidth, display.contentHeight
– forward declarations and other locals
local playBtn

– ‘onRelease’ event listener for playBtn
local function onPlayBtnRelease()

– go to game.lua scene
local options =
{
effect = “fade”,
time = 800,
}
–Add chrome that persists throughout game

– background should appear behind all scenes
local background = display.newImageRect( “images/bgd.jpg”, display.contentWidth, display.contentHeight )
background:setReferencePoint( display.TopLeftReferencePoint )
background.x, background.y = 0, 0

–display header image on upper edge of the screen
local header = display.newImageRect( “images/header.jpg”, 480, 36 )
header:setReferencePoint( display.TopCenterReferencePoint )
header.x = _W * 0.5
header.y = 0

–position footer image on lower edge of the screen
local footer = display.newImageRect( “images/footer.jpg”, 480, 22 )
footer:setReferencePoint( display.BottomCenterReferencePoint )
footer.x = display.contentWidth * 0.5
footer.y = display.contentHeight

– put everything in the right order
local display_stage = display.getCurrentStage()
display_stage:insert( background )
display_stage:insert( storyboard.stage )
display_stage:insert( header )
display_stage:insert( footer )

storyboard.gotoScene( “game”, options )

return true – indicates successful touch
end


– BEGINNING OF YOUR IMPLEMENTATION

– Called when the scene’s view does not exist:
function scene:createScene( event )
local group = self.view


– create a widget button (which will loads game.lua on release)
playBtn = widget.newButton{
label=“Play Now”,
labelColor = { default={255}, over={128} },
default=“images/button.png”,
over=“images/button-over.png”,
width=_W*.2, height=_H*.2,
onRelease = onPlayBtnRelease – event listener function
}
playBtn:setReferencePoint( display.CenterReferencePoint )
playBtn.x = _W * .5
playBtn.y = _H *.5

group:insert( playBtn )


end
– Called immediately after scene has moved onscreen:
function scene:enterScene( event )
local group = self.view

end
– Called when scene is about to move offscreen:
function scene:exitScene( event )
local group = self.view


– INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)

display.remove( playBtn )
playBtn = nil

end
– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )
local group = self.view


– INSERT code here (e.g. remove listeners, widgets, save state, etc.)


end


– END OF YOUR IMPLEMENTATION

– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene”, scene )

– “enterScene” event is dispatched whenever scene transition has finished
scene:addEventListener( “enterScene”, scene )

– “exitScene” event is dispatched before next scene’s transition begins
scene:addEventListener( “exitScene”, scene )

– “destroyScene” event is dispatched before view is unloaded, which can be
– automatically unloaded in low memory situations, or explicitly via a call to
– storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( “destroyScene”, scene )


return scene

[/code] [import]uid: 4157 topic_id: 34952 reply_id: 138939[/import]

display.getCurrentStage() is not a storyboard function. It’s actually a component of the stage system that corona uses in its core, and to be honest very little of that is exposed to the user outside of :setFocus().

Typically when users here ask for a persistent UI not affected by scene changes, Corona Labs folks (and myself) recommend that you build the UI either in main.lua or in a file called by main.lua. That way you can make functions to manipulate it as you like and it isn’t nested in the scene hierarchy.

In your specific example I’d probably make the UI in main and then add a global function to toggle it on/off as necessary. That way it’s never visible until you want it visible.

I have no idea if your getStage method would work or what exactly the drawbacks are, except to say if you’re posting here it’s probably not the right way to go. :wink: [import]uid: 41884 topic_id: 34952 reply_id: 139000[/import]

Good advice,
Thanks Richard.

cheers,
bill
[import]uid: 4157 topic_id: 34952 reply_id: 139118[/import]

FYI, here is the whole code for the scene-- what’s happening is I’m getting the button, but nothing else-- no bgd, header, or footer.

thx.

[code]


– menu.lua


local storyboard = require( “storyboard” )
local scene = storyboard.newScene()

– include Corona’s “widget” library
local widget = require “widget”
– display shortcuts
local _W,_H = display.contentWidth, display.contentHeight
– forward declarations and other locals
local playBtn

– ‘onRelease’ event listener for playBtn
local function onPlayBtnRelease()

– go to game.lua scene
local options =
{
effect = “fade”,
time = 800,
}
–Add chrome that persists throughout game

– background should appear behind all scenes
local background = display.newImageRect( “images/bgd.jpg”, display.contentWidth, display.contentHeight )
background:setReferencePoint( display.TopLeftReferencePoint )
background.x, background.y = 0, 0

–display header image on upper edge of the screen
local header = display.newImageRect( “images/header.jpg”, 480, 36 )
header:setReferencePoint( display.TopCenterReferencePoint )
header.x = _W * 0.5
header.y = 0

–position footer image on lower edge of the screen
local footer = display.newImageRect( “images/footer.jpg”, 480, 22 )
footer:setReferencePoint( display.BottomCenterReferencePoint )
footer.x = display.contentWidth * 0.5
footer.y = display.contentHeight

– put everything in the right order
local display_stage = display.getCurrentStage()
display_stage:insert( background )
display_stage:insert( storyboard.stage )
display_stage:insert( header )
display_stage:insert( footer )

storyboard.gotoScene( “game”, options )

return true – indicates successful touch
end


– BEGINNING OF YOUR IMPLEMENTATION

– Called when the scene’s view does not exist:
function scene:createScene( event )
local group = self.view


– create a widget button (which will loads game.lua on release)
playBtn = widget.newButton{
label=“Play Now”,
labelColor = { default={255}, over={128} },
default=“images/button.png”,
over=“images/button-over.png”,
width=_W*.2, height=_H*.2,
onRelease = onPlayBtnRelease – event listener function
}
playBtn:setReferencePoint( display.CenterReferencePoint )
playBtn.x = _W * .5
playBtn.y = _H *.5

group:insert( playBtn )


end
– Called immediately after scene has moved onscreen:
function scene:enterScene( event )
local group = self.view

end
– Called when scene is about to move offscreen:
function scene:exitScene( event )
local group = self.view


– INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)

display.remove( playBtn )
playBtn = nil

end
– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )
local group = self.view


– INSERT code here (e.g. remove listeners, widgets, save state, etc.)


end


– END OF YOUR IMPLEMENTATION

– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene”, scene )

– “enterScene” event is dispatched whenever scene transition has finished
scene:addEventListener( “enterScene”, scene )

– “exitScene” event is dispatched before next scene’s transition begins
scene:addEventListener( “exitScene”, scene )

– “destroyScene” event is dispatched before view is unloaded, which can be
– automatically unloaded in low memory situations, or explicitly via a call to
– storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( “destroyScene”, scene )


return scene

[/code] [import]uid: 4157 topic_id: 34952 reply_id: 138939[/import]

display.getCurrentStage() is not a storyboard function. It’s actually a component of the stage system that corona uses in its core, and to be honest very little of that is exposed to the user outside of :setFocus().

Typically when users here ask for a persistent UI not affected by scene changes, Corona Labs folks (and myself) recommend that you build the UI either in main.lua or in a file called by main.lua. That way you can make functions to manipulate it as you like and it isn’t nested in the scene hierarchy.

In your specific example I’d probably make the UI in main and then add a global function to toggle it on/off as necessary. That way it’s never visible until you want it visible.

I have no idea if your getStage method would work or what exactly the drawbacks are, except to say if you’re posting here it’s probably not the right way to go. :wink: [import]uid: 41884 topic_id: 34952 reply_id: 139000[/import]

Good advice,
Thanks Richard.

cheers,
bill
[import]uid: 4157 topic_id: 34952 reply_id: 139118[/import]