Hi how can i make a popup / screen overlay like the one below:
Regards Kevin
Here is the documentation on creating native popups:
http://docs.coronalabs.com/api/library/native/showPopup.html
You can either use a storyboard overlay, which basically loads another scene on top of the one you’re currently on. This might be preferable if there is a lot of code involved in creating the popup or you need the popup to be accessible from a number of different scenes.
Another option is to put all the objects for the popup in a separate display group, and either hide the group using .alpha = 0, or store it off-screen using the .x or .y properties. Then use a transition to show/hide/move the popup when required.
Pretty much I hate the overlay, so I rolled my own overlay.This is using the new graphics 2.0, just be aware of that.
my pause button onRelease code:
--UI transition controls. local transitionDelay = 200 local transitionDownYposition = 2000 local transitionUpYposition = display.contentHeight\*.5 local function onPauseBtnRelease() physics.pause() pauseBtn.alpha = 0 --make the pause button invisible local menuTrans = transition.to(menuBtn, {time = transitionDelay, y = transitionUpYposition}) local restartTrans = transition.to(resumeBtn, {time = transitionDelay, y = transitionUpYposition}) local restartTrans = transition.to(restartBtn, {time = transitionDelay, y = transitionUpYposition}) local pauseOverlayTrans = transition.to(pauseOverlay,{time = transitionDelay, y = transitionUpYposition}) return true -- indicates successful touch end
pauseBtn = widget.newButton{ textOnly = true, label="||", fontSize = 60, labelColor = { default={.5}, over={1} }, onRelease = onPauseBtnRelease -- event listener function } pauseBtn.x = display.contentWidth -20 pauseBtn.y = 40
Then, my overlay button:
pauseOverlay = widget.newButton{ label="", defaultFile= "menuimages/overlay.png", width=1000, height=620, } pauseOverlay.x = display.contentWidth\*.5 pauseOverlay.y = 2000 pauseOverlay.alpha = .7
Then, I attach my buttons TO that overlay button.
-- create a widget button (which will loads reload.lua on release) restartBtn = widget.newButton{ label="Restart", labelYOffset = -8, fontSize = 30, labelColor = { default={0,205/255,205/255}, over={128} }, defaultFile= "menuimages/button.png", overFile="menuimages/button.png", width=224, height=100, onRelease = onRestartBtnRelease -- event listener function } restartBtn.x = pauseOverlay.x + 260 restartBtn.y = pauseOverlay.y restartBtn.alpha = .8
Finally, then you’ll notice I have them all going to transitionUpYposition. The trick is you put everything at a starting point, then transition to the ending point.
I suppose I could have just transitioned the group…hmm I should change my code 
But this works. If you are using storyBoard, use the widgets as it makes function scope easier to deal with. Also, if you use storyboard storyboard.removeAll() anywhere, the regular overlay doesn’t work properly. That’s why I use this hack method, which works wonderfully.
Keep in mind, this is copy pasted code, and I may not have everything in there to work, but the premise is pretty simple. Create the overlay off screen (like 2000 pixels down). Then put buttons on the overlay using button.x = overlay.x or whatever. Then place the group down below, and then transition back up. Whatever you want to do the sky is the limit!
-Nick
Thanks a lot guys 
Here is the documentation on creating native popups:
http://docs.coronalabs.com/api/library/native/showPopup.html
You can either use a storyboard overlay, which basically loads another scene on top of the one you’re currently on. This might be preferable if there is a lot of code involved in creating the popup or you need the popup to be accessible from a number of different scenes.
Another option is to put all the objects for the popup in a separate display group, and either hide the group using .alpha = 0, or store it off-screen using the .x or .y properties. Then use a transition to show/hide/move the popup when required.
Pretty much I hate the overlay, so I rolled my own overlay.This is using the new graphics 2.0, just be aware of that.
my pause button onRelease code:
--UI transition controls. local transitionDelay = 200 local transitionDownYposition = 2000 local transitionUpYposition = display.contentHeight\*.5 local function onPauseBtnRelease() physics.pause() pauseBtn.alpha = 0 --make the pause button invisible local menuTrans = transition.to(menuBtn, {time = transitionDelay, y = transitionUpYposition}) local restartTrans = transition.to(resumeBtn, {time = transitionDelay, y = transitionUpYposition}) local restartTrans = transition.to(restartBtn, {time = transitionDelay, y = transitionUpYposition}) local pauseOverlayTrans = transition.to(pauseOverlay,{time = transitionDelay, y = transitionUpYposition}) return true -- indicates successful touch end
pauseBtn = widget.newButton{ textOnly = true, label="||", fontSize = 60, labelColor = { default={.5}, over={1} }, onRelease = onPauseBtnRelease -- event listener function } pauseBtn.x = display.contentWidth -20 pauseBtn.y = 40
Then, my overlay button:
pauseOverlay = widget.newButton{ label="", defaultFile= "menuimages/overlay.png", width=1000, height=620, } pauseOverlay.x = display.contentWidth\*.5 pauseOverlay.y = 2000 pauseOverlay.alpha = .7
Then, I attach my buttons TO that overlay button.
-- create a widget button (which will loads reload.lua on release) restartBtn = widget.newButton{ label="Restart", labelYOffset = -8, fontSize = 30, labelColor = { default={0,205/255,205/255}, over={128} }, defaultFile= "menuimages/button.png", overFile="menuimages/button.png", width=224, height=100, onRelease = onRestartBtnRelease -- event listener function } restartBtn.x = pauseOverlay.x + 260 restartBtn.y = pauseOverlay.y restartBtn.alpha = .8
Finally, then you’ll notice I have them all going to transitionUpYposition. The trick is you put everything at a starting point, then transition to the ending point.
I suppose I could have just transitioned the group…hmm I should change my code
But this works. If you are using storyBoard, use the widgets as it makes function scope easier to deal with. Also, if you use storyboard storyboard.removeAll() anywhere, the regular overlay doesn’t work properly. That’s why I use this hack method, which works wonderfully.
Keep in mind, this is copy pasted code, and I may not have everything in there to work, but the premise is pretty simple. Create the overlay off screen (like 2000 pixels down). Then put buttons on the overlay using button.x = overlay.x or whatever. Then place the group down below, and then transition back up. Whatever you want to do the sky is the limit!
-Nick
Thanks a lot guys