In 2007 I designed all 22 UIs for the US Navy training game GeoCommander Master Training Station (GMTS), developed at Whatif Productions.


Below is my design for the "Viz" menu, where the player chooses the type of rendering mode they want use to examine the world with, the view distance, and which information overlays they need. My mockups were used as guides for the UI programmer to recreate the interfaces in the engine's UI rendering code.


I worked with the lead programmer to understand all the possible UI rendering controls so I could design with them in mind. Then I created a text-based style guide with codes for each unique set of rendering controls that I used. This reference image points to those codes, so the UI programmer could copy and paste the relevant sections directly into his code. The callout text is nearly unreadable at this web-friendly scale, the original images are 1600 pixels wide.

Initially the UI rendering system was meant to use bump mapping, parallax mapping, and a slowly-revolving cubemap reflection, so for each element I created height and specular maps as well as the reflection cube. However these rendering improvements were later dropped in favor of other priorities so I baked the lighting into all the elements instead. I would have preferred to use a better technique for the rollover state (here seen as a soft white haze under the pointer) but ultimately you have to work within the time constraints and tech that's available.



Most buttons have icons associated with them, here is one of the icon sheets used in the game. One of the UI functions allowed buttons to be colored individually by a multiplied color value, so I was able to reuse the same button graphics for multiple functions.