anxiety pills

UI widgets which accelerate my game GUI development


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.

Turf’s summary results was laid out using a table widget. The round status messages employed column spanning to achieve the desired positioning. Also note the buttons at the bottom of the screen which were laid out using a horizontal panel 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.

Hyper Grav's level selection screen uses the multipage container widget for managing multiple pages of level buttons while the level buttons were laid out using a grid widget.

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.

, , ,

About ChrisK

Chris Khoo cut his teeth on programming writing BASIC programs on a ZX Spectrum back in 1985. Since then, he's graduated to programming on the web and on nearly all the game consoles released since the mid-90's. Chris remains an active member of the software industry and is currently operating as indie developer and founder of Wappworks Studio.
Comments are closed.