I’m new to Corona and come from Java/Android background. I want to know if there are any layouts or panels in which we can put our GUI elements and then just change the x and y coordinates of the panel and the GUI elements move along with the panel. It is quite a logical approach to building graphical user interfaces by grouping GUI elements inside panels. I read that Corona has groups but i don’t see how we can set the x and y coordinates of groups. What if i want a panel centered in the middle of the screen with 3 buttons inside it? Is there no way that to move all three buttons to the bottom of the screen we can just move the panel’s x and y coordinates? Please help designing in Corona is getting complicated without panels for grouping elements, thanks in advance!
Well 1st question is this for the user to move the panels or - as a tool for you when designing the game and once you decide where then the panel stays there.
If 2 then yes - declare the panel first (basic display.newRoundedRect)- and then position the buttons based on their relationship to the panel - so if you want to try a different panel position - change the panel X & Y and the buttons will follow.
i hope this helps and i understood what you were meaning as it is quite simple approach.
You can choose if you want a special group or just the normal composer group.
if 1 still probably possible with drag code and runtime listener.
Another thing i do is at the start divide up content height by 10 - then for placement purposes use object.y = quasiG.con10 * 4.5 - combined with the panel idea above works nicely for me.
T.
No, I don’t think there is 
Implementing some simpler ones wouldn’t be too difficult I think. There is a thing called “Widget Candy” - which I have never used - which does claim to do it better. Though this isn’t free.
thanks for your replies ToeKnee and PaulScottRobson!
Your solutions look great and i’d like to try them. And yea i am looking for option 2 currently, just for design purpose
can you share a bit more about what you meant by this. Is it something to do with anchors? apologize for it
but being new i’ve got a lot to cover and any help is appreciated!
and then position the buttons based on their relationship to the panel - so if you want to try a different panel position - change the panel X & Y and the buttons will follow.
too bad Corona does not have an inbuilt library for this. I did have a look at Widget Candy which looks good. lets see if we come across any open source widget library to handle gui building. Till then will try to implement myself
thanks!
I may have misunderstood your question, it sounds like you want to use groups.
https://www.youtube.com/watch?v=-muVUHew048&feature=youtu.be&hd=1
Try the code below or download it here.
local centerX = display.contentCenterX local centerY = display.contentCenterY local function onTouch( self, event ) local phase = event.phase if( phase == "began" ) then self.alpha = 0.2 elseif( phase == "ended") then self.alpha = 1 transition.to( self.parent, { x = self.toX, y = self.toY, time = 250 } ) end return true end local function makePanel( x, y ) local group = display.newGroup() -- WHITE BUTTON local tmp = display.newCircle( group, 0, 0, 20 ) tmp.toX = centerX tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- RED BUTTON local tmp = display.newCircle( group, 40, 0, 20 ) tmp:setFillColor(1,0,0) tmp.toX = centerX + 100 tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- YELLOW BUTTON local tmp = display.newCircle( group, -40, 0, 20 ) tmp:setFillColor(1,1,0) tmp.toX = centerX - 100 tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- PINK BUTTON local tmp = display.newCircle( group, 0, 40, 20 ) tmp:setFillColor(1,0,1) tmp.toX = centerX tmp.toY = centerY + 100 tmp.touch = onTouch tmp:addEventListener( "touch" ) -- CYAN BUTTON local tmp = display.newCircle( group, 0, -40, 20 ) tmp:setFillColor(0,1,1) group.x = x group.y = y tmp.toX = centerX tmp.toY = centerY - 100 tmp.touch = onTouch tmp:addEventListener( "touch" ) return group end makePanel( centerX, centerY ) It’s much the same process as @roaming… above - same concept really.
Instead of panel lets say “point”.
point.x = 305
point.y = 127
Then just reference your buttons in relation to that point
button1= point.x + 15
button1.y = point.y - 27
So based on that Button1’s X point = 320, Y = 100
To move it you could do 2 things,
change point’s location Button1 will follow
point.x = 205 -> button1 = 220
point.y = 227 – > buton1 = 200
or change actual Button1’s location ( adjust the +15 , or -27)
T.
Hi ToeKnee and Roamingamer, thanks a lot for taking out the time and sharing the codes and it works like a charm! i appreciate it!
Well 1st question is this for the user to move the panels or - as a tool for you when designing the game and once you decide where then the panel stays there.
If 2 then yes - declare the panel first (basic display.newRoundedRect)- and then position the buttons based on their relationship to the panel - so if you want to try a different panel position - change the panel X & Y and the buttons will follow.
i hope this helps and i understood what you were meaning as it is quite simple approach.
You can choose if you want a special group or just the normal composer group.
if 1 still probably possible with drag code and runtime listener.
Another thing i do is at the start divide up content height by 10 - then for placement purposes use object.y = quasiG.con10 * 4.5 - combined with the panel idea above works nicely for me.
T.
No, I don’t think there is Implementing some simpler ones wouldn’t be too difficult I think. There is a thing called “Widget Candy” - which I have never used - which does claim to do it better. Though this isn’t free.
thanks for your replies ToeKnee and PaulScottRobson!
Your solutions look great and i’d like to try them. And yea i am looking for option 2 currently, just for design purpose
can you share a bit more about what you meant by this. Is it something to do with anchors? apologize for it
but being new i’ve got a lot to cover and any help is appreciated!
and then position the buttons based on their relationship to the panel - so if you want to try a different panel position - change the panel X & Y and the buttons will follow.
too bad Corona does not have an inbuilt library for this. I did have a look at Widget Candy which looks good. lets see if we come across any open source widget library to handle gui building. Till then will try to implement myself
thanks!
I may have misunderstood your question, it sounds like you want to use groups.
https://www.youtube.com/watch?v=-muVUHew048&feature=youtu.be&hd=1
Try the code below or download it here.
local centerX = display.contentCenterX local centerY = display.contentCenterY local function onTouch( self, event ) local phase = event.phase if( phase == "began" ) then self.alpha = 0.2 elseif( phase == "ended") then self.alpha = 1 transition.to( self.parent, { x = self.toX, y = self.toY, time = 250 } ) end return true end local function makePanel( x, y ) local group = display.newGroup() -- WHITE BUTTON local tmp = display.newCircle( group, 0, 0, 20 ) tmp.toX = centerX tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- RED BUTTON local tmp = display.newCircle( group, 40, 0, 20 ) tmp:setFillColor(1,0,0) tmp.toX = centerX + 100 tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- YELLOW BUTTON local tmp = display.newCircle( group, -40, 0, 20 ) tmp:setFillColor(1,1,0) tmp.toX = centerX - 100 tmp.toY = centerY tmp.touch = onTouch tmp:addEventListener( "touch" ) -- PINK BUTTON local tmp = display.newCircle( group, 0, 40, 20 ) tmp:setFillColor(1,0,1) tmp.toX = centerX tmp.toY = centerY + 100 tmp.touch = onTouch tmp:addEventListener( "touch" ) -- CYAN BUTTON local tmp = display.newCircle( group, 0, -40, 20 ) tmp:setFillColor(0,1,1) group.x = x group.y = y tmp.toX = centerX tmp.toY = centerY - 100 tmp.touch = onTouch tmp:addEventListener( "touch" ) return group end makePanel( centerX, centerY ) It’s much the same process as @roaming… above - same concept really.
Instead of panel lets say “point”.
point.x = 305
point.y = 127
Then just reference your buttons in relation to that point
button1= point.x + 15
button1.y = point.y - 27
So based on that Button1’s X point = 320, Y = 100
To move it you could do 2 things,
change point’s location Button1 will follow
point.x = 205 -> button1 = 220
point.y = 227 – > buton1 = 200
or change actual Button1’s location ( adjust the +15 , or -27)
T.
Hi ToeKnee and Roamingamer, thanks a lot for taking out the time and sharing the codes and it works like a charm! i appreciate it!