Trying to implement GUIs faster

Solar2D General Questions/Discussion
#1

Currently, implementing rather trivial GUIs for my games takes me absurd amounts of time compared to the rest of the app (estimation ~30% of dev time, it would be even worse if I had to make a GUI heavy game). While 30% of time may seem reasonable, it’s a lot of very menial work that doesn’t require brain power (manually trying to find right (x, y) for a display object for instance).

My current workflow is this when designing a screen (such as level selection):

  1. Draw GUI in vector graphics program
  2. Manually code display objects using exported images
  3. Ad-hoc program most GUI controls logic
  4. Connect GUI with game logic

Step 2 and 4 leaves most room for improvement here. What would basically benefit me greatly is if I could create and lay out Corona display objects visually, and then generate code (together with custom event handlers). Is there such a tool available somewhere? Otherwise I’m considering writing it myself.

I know step 3 is problematic and know what to do about it ;), I’m just lazy. Will need to compile a library of controls from all GUI code I wrote. [import]uid: 58849 topic_id: 17300 reply_id: 317300[/import]

#2

Not sure if it would help but you can try using relative positioning instead of absolute coordinates.

For example nav bar with buttons at bottom of the screen:

  1. Load nav bar background
  2. Set y handle of nav to bottom
  3. Position y of nav to device height
  4. Create display group
  5. Add first button in display group to x = 0 with handle set to left.
  6. Add additional button to display group to the right of the previous button
  7. Set centre x,y of display group to centre x,y of nav bar

You can essentially position everything pixel perfect with only one fixed coordinate - x = 0. All the other positions are calculated and relational.

Sounds like a lot of work but once you get used to thinking of everything in terms of relative positions you can do some cracking layouts which are easy to alter.

I very rarely ever specify an absolute x,y coordinate for UI elements on the screen. It’s almost always based on the width, height, or position of another object including the screen itself. [import]uid: 11393 topic_id: 17300 reply_id: 65423[/import]

#3

Hi, thanks for the reply.

Yeah I do use groups and relative positioning, but you seem to go further than I do. :slight_smile: Actually your method sounds superior if GUI doesn’t need to match a reference image (with varying padding between elements).

By drawing custom GUI images I get the problem however to match the reference image exactly (much like creating a web page from an image) - in this case I will still be adjusting (x,y) with relative positioning.

I’m considering to abandon my approach and start doing things your way since it seems to save a lot of time. Would also work better with reusable GUI elements. [import]uid: 58849 topic_id: 17300 reply_id: 65471[/import]

#4

I have some helper functions which I include into a gfx library makes relative positioning a hell of a lot easier. One function call instead of of two lines of code to set reference point and then get/set the coord:

-- Sets the handle placement of the supplied image object  
function handle( img, pos )  
 if not pos then pos = "centre" else pos = string.lower( pos ) end  
 if pos == "centre" or pos == "center" then  
 img:setReferencePoint( display.CenterReferencePoint )  
 elseif pos == "left" then  
 img:setReferencePoint( display.TopLeftReferencePoint )  
 elseif pos == "right" then  
 img:setReferencePoint( display.TopRightReferencePoint )  
 elseif pos == "top" then  
 img:setReferencePoint( display.TopCenterReferencePoint )  
 elseif pos == "bottom" then  
 img:setReferencePoint( display.BottomCenterReferencePoint )  
 end  
end  
-- Set x coordinates of an object with "left", "right", "centre", placement  
function setx( img, x, pos )  
 if not x then x = display.contentWidth\*0.5 end  
 handle( img, pos )  
 img.x = x  
end  
  
-- Set x coordinates of an object with "top", "bottom", "centre", placement  
function sety( img, y, pos )  
 if not y then y = display.contenHeight\*0.5 end  
 handle( img, pos )  
 img.y = y  
end  
  
-- Get "left", "right", "centre" position of an object  
function getx( img, pos )  
 handle( img, pos )  
 return img.x  
end  
  
-- Get "top", "bottom", "centre" position of an object  
function gety( img, pos )  
 handle( img, pos )  
 return img.y  
end

Had to modify some of the above to work without library variables that I’ve set but it should more or less work.

So…

setx( img, 0, “left” ) – Aligns img to left of screen
setx( img, display.contentWidth, “right” ) – Aligns img to right of screen
setx( img, 0, “right” ) – Hides img offscreen
setx( img ) – Centres img onscreen

sety( nav, display.contentHeight, “bottom” ) – Places nav at bottom of screen
sety( titlebar, 0, “top” ) – Places title at top of screen

sety( titletext, gety( titlebar ) ) – Vertically centres title text on the title bar

[import]uid: 11393 topic_id: 17300 reply_id: 65630[/import]

#5

I think you’ll definitely find this useful:
http://atg.anscamobile.com/?p=19

More details to come :slight_smile: [import]uid: 52430 topic_id: 17300 reply_id: 66576[/import]

#6

Looks great, that’s exactly the sort of thing I was thinking of programming myself, but it’s a huge time saver if I don’t have to.

Bedhouin: Thanks, forgot to reply last week. Those kind of utilities are useful. :slight_smile: [import]uid: 58849 topic_id: 17300 reply_id: 66634[/import]