Storyboard - Problems with z-Index of display items

[nalorin]

Thanks in advance for your help! Sorry about the long post.

I’m making an app that uses a popup menu to select the language (for localization).

I’m trying to create the menu as a scene (langMenuScene.lua) that covers the main scene (mainScene.lua) with a semi-transparent background and then has a view for containing the menu. I also want to ensure that the language button is not clickable when the menu is showing because it’s supposed to be obscured by the menu.

Here’s my attempt to do so:

[lua]–[[main.lua]]–
local storyboard = require “storyboard”
storyboard.gotoScene(“mainScene”)[/lua]

[lua]–[[mainScene.lua]]–
function langMenu (event)
print(“langMenu Function”)
–storyboard.loadScene(“langMenuScene”)
storyboard.gotoScene(“langMenuScene”,“slideLeft”,500)
end

function scene:createScene( event )
local group = self.view

– Show logo & header text
local r, p = 16,4 – logo radius & margin padding
local logo = display.newImageRect(“maple_leaf_small.png”, r*2, r*2) – logo image
logo.x, logo.y = r+p, r+p
local title = display.newText(strings[storyboard.settings.lang].title, r*2+p*2, p, “arial”, 20) – logo text

– create the language menu activation button (a quarter-circle in the corner of the screen, with the
– 2-character language abbreviation for its text (default: “en”)
local langButtonGroup = display.newGroup()
local langButton = display.newCircle(langButtonGroup, display.contentWidth, 0, 2*r)
local langLabel = display.newText(langButtonGroup, storyboard.settings.lang, 0, p, “arial”, 14)

langLabel.x = display.contentWidth - langLabel.width
langLabel:setTextColor(0)

langButton:addEventListener(“tap”, langMenu)

end[/lua]

[lua]–[[langMenuScene.lua]]–
function scene:createScene( event )
local group = self.view

– get width and height of display for easier calculation
local w = display.contentWidth
local h = display.contentHeight
local langGroup = display.newGroup()

– make background overlay and a view in which to put menu items
local bg = display.newRect(langGroup,0,0,w,h)
local fg = display.newRect(langGroup, w *.1 - 1, h * .1 -1, w * .8 + 2, h * .8 + 2)

– color and add transparency to menu overlay and view
bg:setFillColor(32,200)
fg:setFillColor(64,200)

– ===== Problem Spot ===== –
– I’ve tried using each of the following lines (separately):
group:insert(group) – Right: button obscured and not clickable. Wrong: error to console; no transition
group.parent:insert(group) – Right: button obscured; no error. Wrong: no transition; button clickable
group:insert(langGroup) – Right: transition; no error. Wrong: button not obscured; button clickable
end[/lua]

The “Problem Spot” at the end of the last piece of code is where I’ve been focusing my attention (after refactoring my code in other areas - like moving the language button and the logo from main.lua to mainScene.lua (it’s own scene) to prevent it showing on all scenes.

The problem is that none of the methods I’ve tried meet all of the following conditions:

• slide-transition into place
• cover/obscure the mainScene, including logo, logo text and language menu button
• make mainScene buttons unclickable (while mainScene is obscured), and
• keep the console free of errors

The error that I’ve been getting when using “group:insert(group)” is [text]…\langMenuScene.lua:20: Attempt to insert display object into itself.[/text], as I would expect it to be. And in the other two attempts, the button remains clickable (which I can tell by the “print” statement in my click function (“langMenu”)).

Can anyone please help me figure this out?

Thank you! [import]uid: 200441 topic_id: 33490 reply_id: 333490[/import]

[rob]

Try this:

--[[mainScene.lua]]--  
function langMenu (event)  
 print("langMenu Function")  
 --storyboard.loadScene("langMenuScene")  
 storyboard.gotoScene("langMenuScene","slideLeft",500)  
end  
   
function scene:createScene( event )  
 local group = self.view  
   
 -- Show logo & header text  
 local r, p = 16,4 -- logo radius & margin padding  
 local logo = display.newImageRect("maple\_leaf\_small.png", r\*2, r\*2) -- logo image  
 logo.x, logo.y = r+p, r+p  
 local title = display.newText(strings[storyboard.settings.lang].title, r\*2+p\*2, p, "arial", 20) -- logo text  
  
 group:insert(logo)  
 group:insert(title)  
   
 -- create the language menu activation button (a quarter-circle in the corner of the screen, with the  
 -- 2-character language abbreviation for its text (default: "en")  
 local langButtonGroup = display.newGroup()  
 local langButton = display.newCircle(langButtonGroup, display.contentWidth, 0, 2\*r)  
 local langLabel = display.newText(langButtonGroup, storyboard.settings.lang, 0, p, "arial", 14)  
   
 langLabel.x = display.contentWidth - langLabel.width  
 langLabel:setTextColor(0)  
   
 langButton:addEventListener("tap", langMenu)  
 group:insert(langButtonGroup)   
end  

and

--[[langMenuScene.lua]]--  
function scene:createScene( event )  
 local group = self.view  
  
 -- get width and height of display for easier calculation  
 local w = display.contentWidth  
 local h = display.contentHeight  
 local langGroup = display.newGroup()  
  
 -- make background overlay and a view in which to put menu items  
 local bg = display.newRect(langGroup,0,0,w,h)  
 local fg = display.newRect(langGroup, w \*.1 - 1, h \* .1 -1, w \* .8 + 2, h \* .8 + 2)  
  
 -- color and add transparency to menu overlay and view  
 bg:setFillColor(32,200)  
 fg:setFillColor(64,200)  
  
 group:insert(langGroup) -- Right: transition; no error. Wrong: button not obscured; button clickable  
end  

The reason you are having problems is you were not putting things in mainScene.lua into that scene’s view group. Anything not in a storyboard scene’s view (the “group” group in createScene) is not managed by storyboard and sits on top of everything managed by storyboard. This is by design so you can have ever-present items like a heads up display that stays even though the scenes under it change.

Just remember if you create it in createScene (or enterScene) and you want to put it in that scene, then put it in “group”.

[import]uid: 199310 topic_id: 33490 reply_id: 133069[/import]

[nalorin]

Rob, Thank you so much for your reply - it’s been a huge dosage of hope for me!

Your code’s results are much better than mine, but not quite what I’m looking for (and, if all else fails, I will revert to just using this) because the mainScene content disappears completely after the langMenuScene finishes its entry. This gives me the feeling that I’m going about this the wrong way. I get the feeling that your example is the intended use & behaviour of scenes in storyboard… when one loads, the other is hurried out of view and into memory.

If that’s the case, is there another way to do this? (For example, instead of loading a new scene, just inserting the content into the current scene and somehow making it so that touches don’t propagate beyond the forwardmost layer?

If possible, I’d like to be able to do this without having to individually remove the “tap”/“touch” events from all the views that are not in the forwardmost layer, and re-adding them when the menu is closed. Essentially, I want the mainScene visible through the semi-transparent menu layers but not clickable.

Thanks again! [import]uid: 200441 topic_id: 33490 reply_id: 133099[/import]

[nalorin]

Ok, so I decided to just ditch the semi-transparent menu for now and instead just made it slide transition between the language menu and the main scene and put a new button in the top-left corner of the menu to go back to the main scene.

If you do still have another suggestion on how I can get the original effect I was looking for, I’d love to hear it.

Thank you! [import]uid: 200441 topic_id: 33490 reply_id: 133112[/import]

[rob]

Try this:

--[[mainScene.lua]]--  
function langMenu (event)  
 print("langMenu Function")  
 --storyboard.loadScene("langMenuScene")  
 storyboard.gotoScene("langMenuScene","slideLeft",500)  
end  
   
function scene:createScene( event )  
 local group = self.view  
   
 -- Show logo & header text  
 local r, p = 16,4 -- logo radius & margin padding  
 local logo = display.newImageRect("maple\_leaf\_small.png", r\*2, r\*2) -- logo image  
 logo.x, logo.y = r+p, r+p  
 local title = display.newText(strings[storyboard.settings.lang].title, r\*2+p\*2, p, "arial", 20) -- logo text  
  
 group:insert(logo)  
 group:insert(title)  
   
 -- create the language menu activation button (a quarter-circle in the corner of the screen, with the  
 -- 2-character language abbreviation for its text (default: "en")  
 local langButtonGroup = display.newGroup()  
 local langButton = display.newCircle(langButtonGroup, display.contentWidth, 0, 2\*r)  
 local langLabel = display.newText(langButtonGroup, storyboard.settings.lang, 0, p, "arial", 14)  
   
 langLabel.x = display.contentWidth - langLabel.width  
 langLabel:setTextColor(0)  
   
 langButton:addEventListener("tap", langMenu)  
 group:insert(langButtonGroup)   
end  

and

--[[langMenuScene.lua]]--  
function scene:createScene( event )  
 local group = self.view  
  
 -- get width and height of display for easier calculation  
 local w = display.contentWidth  
 local h = display.contentHeight  
 local langGroup = display.newGroup()  
  
 -- make background overlay and a view in which to put menu items  
 local bg = display.newRect(langGroup,0,0,w,h)  
 local fg = display.newRect(langGroup, w \*.1 - 1, h \* .1 -1, w \* .8 + 2, h \* .8 + 2)  
  
 -- color and add transparency to menu overlay and view  
 bg:setFillColor(32,200)  
 fg:setFillColor(64,200)  
  
 group:insert(langGroup) -- Right: transition; no error. Wrong: button not obscured; button clickable  
end  

The reason you are having problems is you were not putting things in mainScene.lua into that scene’s view group. Anything not in a storyboard scene’s view (the “group” group in createScene) is not managed by storyboard and sits on top of everything managed by storyboard. This is by design so you can have ever-present items like a heads up display that stays even though the scenes under it change.

Just remember if you create it in createScene (or enterScene) and you want to put it in that scene, then put it in “group”.

[import]uid: 199310 topic_id: 33490 reply_id: 133069[/import]

[nalorin]

Rob, Thank you so much for your reply - it’s been a huge dosage of hope for me!

Your code’s results are much better than mine, but not quite what I’m looking for (and, if all else fails, I will revert to just using this) because the mainScene content disappears completely after the langMenuScene finishes its entry. This gives me the feeling that I’m going about this the wrong way. I get the feeling that your example is the intended use & behaviour of scenes in storyboard… when one loads, the other is hurried out of view and into memory.

If that’s the case, is there another way to do this? (For example, instead of loading a new scene, just inserting the content into the current scene and somehow making it so that touches don’t propagate beyond the forwardmost layer?

If possible, I’d like to be able to do this without having to individually remove the “tap”/“touch” events from all the views that are not in the forwardmost layer, and re-adding them when the menu is closed. Essentially, I want the mainScene visible through the semi-transparent menu layers but not clickable.

Thanks again! [import]uid: 200441 topic_id: 33490 reply_id: 133099[/import]

[nalorin]

Ok, so I decided to just ditch the semi-transparent menu for now and instead just made it slide transition between the language menu and the main scene and put a new button in the top-left corner of the menu to go back to the main scene.

If you do still have another suggestion on how I can get the original effect I was looking for, I’d love to hear it.

Thank you! [import]uid: 200441 topic_id: 33490 reply_id: 133112[/import]