I’ve just come off a week long session of implementing GUIs for Turf. GUI development is especially time consuming for me as they are all implemented using HTML5 Canvas rather than using HTML DOM elements. It is this decision which allows our titles to eke out maximum performance on CocoonJs, our adopted mobile app platform.
These days, I’m able to put together reasonable looking functional screens in half a day and it’s largely thanks to a few key UI widgets which I’ve come to rely on over and over again….
The button widget
The ubiquitous button widget, staple of all user interfaces. Enough said…
The table widget
The table widget is both revered and hated by web developers. While it’s primary use is for tabling information, it is a frequently abused to achieve all sorts of clever layouts. Key table features I rely on include table/cell padding, horizontal and vertical cell alignments, minimum widths (per column) and minimum heights (per row), and especially column spanning
It’s especially tricky to implement – it took 2 days of solid coding to implement the CAAT table widget to spec – but the payoff is huge.
The panel widget
Sometimes you just need stuff to be laid out in a row, either horizontally or vertically. I’m able to produce a semi-decent screen layout just by nesting a couple of panel widgets in alternating layout directions. The only layout it has trouble handling is one where elements are laid out uniformly both vertically as well as horizontally. For that, I have the table widget and the grid widget.
The grid widget
The grid widget positions items at regular intervals in a designated rectangular space. It’s extremely useful for putting together inventory screens or level select screens.
The multi-page container widget
This widget is my take on abstracting what seems to be a fairly standard ‘level select’ screen mechanics for mobile apps. The multi-page container widget displays one page at a time and allows users to navigate from page to page using swipe gestures, touch dragging, or by touching the next/previous page buttons. The widget includes customizable page transitions to add some visual pizazz.
The text field widget
Game HUDs frequently have a UI widget consisting of an icon label that is preceded or followed by the associated text value. The text field widget is exactly that – it lets me slap together an icon with some text and it automatically positions the elements in a pleasing layout. The widget also allows the icon label and text value to be animated independently, or as a single unit.
The bar widget
This is a horizontal or vertical bar widget that represents a value range. It’s frequently used to represent health levels, timers, and loading progress.
The overlay container widget
Last but not least, we have the overlay container widget – used to represent a single game overlay. It comes bundled with an overlay manager for managing those pesky overlay transitions.
In Hyper Grav, the overlay container was used purely to manage overlays. For Turf, the system was expanded to support full screen overlays and is now the basis for Turf’s screen navigation system.