Custom popup

anrantal · January 22, 2013, 11:53pm

Hi,

I would like to get some tips for following problem in my game development.

User touches the button.
Game shows custom popup with buttons.
User touches the popup button and popup disappear.

Screenshot:
https://www.dropbox.com/s/33b2e4eqdfngcec/sample.jpg

Any idea how to implement this? [import]uid: 44024 topic_id: 35229 reply_id: 335229[/import]

CraftyDeano · January 23, 2013, 1:11am

Many different ways to do this.

One way it to have the popup options displayed but with no transparency.

[lua]popupGroup.alpha = 0[/lua]

When it is transparent, it will not get any touch events.

You can then use the transition.to library to fade it in or just set alpha to 1 when the button is pressed, and 0 when the popup button is pressed.

[lua]transition.to( popupGroup, { time=500, alpha=1} )[/lua]
[lua]transition.to( popupGroup, { time=500, alpha=0} )[/lua]

If you are using the storyboard API you can use the show/hide overlay feature, details in URL below:
http://docs.coronalabs.com/api/library/storyboard/showOverlay.html [import]uid: 62706 topic_id: 35229 reply_id: 140046[/import]

10F_Jonathan · January 23, 2013, 1:12am

Sure, not that hard actully, just create a button that runs the function Showpopup() or whatever you want to call it, the popup should be a group, take a look at groups in corona SDK. and then show the group/popup, Be sure to return true on the popup buttons or they will register a touch on the buttons behind. [import]uid: 134049 topic_id: 35229 reply_id: 140047[/import]

10F_Jonathan · January 23, 2013, 1:25am

I threw togeather a plug and play code for you showing my way of doing it.

local widget = require "widget"  
local popupGroup = display.newGroup()  
local showPopup  
  
   
local hide = function (event )  
 if event.phase == "release" then  
 transition.to(popupGroup,{time = 500, alpha = 0 })  
 showPopup.alpha = 1  
 end  
 return true  
end  
  
local show = function (event )  
 if event.phase == "release" then  
 transition.to(popupGroup,{time = 500, alpha = 1 })  
 showPopup.alpha = 0   
 end  
 return true  
end  
  
local hideBtn = widget.newButton{  
 id = "btn001",  
 label = "Hide Popup",  
 width = 150, height = 28,  
 cornerRadius = 8,  
 onEvent = hide  
}  
local popupWindow = display.newRect(popupGroup, 0, 0, 250, 150)  
popupWindow.strokeWidth = 3  
popupWindow:setFillColor(0, 250, 250)  
popupWindow:setStrokeColor(255)  
popupWindow.x = display.contentWidth/2  
popupWindow.y = display.contentHeight/2  
  
popupGroup:insert( hideBtn )  
hideBtn.x = popupWindow.x  
hideBtn.y = popupWindow.y  
  
popupGroup.alpha = 0   
  
showPopup = widget.newButton{  
 id = "btn001",  
 label = "showPopup",  
 width = 150, height = 28,  
 cornerRadius = 8,  
 onEvent = show  
}  
  
showPopup.x = display.contentWidth/2  
showPopup.y = display.contentHeight/2

Ofcourse there is easier ways of doing this, but i thought this would be the easiest to understand.
[import]uid: 134049 topic_id: 35229 reply_id: 140048[/import]

thedavebaxter · January 23, 2013, 1:36am

I do this using showOverlay and then you can add a nice transition for when the popup appears.

storyboard.showOverlay( "yourscenename", { effect = "slideLeft", time = 1000, isModal = true } )

http://docs.coronalabs.com/api/library/storyboard/showOverlay.html

Dave [import]uid: 117617 topic_id: 35229 reply_id: 140052[/import]

anrantal · January 24, 2013, 8:11am

Thanks for your help. [import]uid: 44024 topic_id: 35229 reply_id: 140226[/import]

CraftyDeano · January 23, 2013, 1:11am