Thar be the User Interface, Matey!

Today be International Talk Like A Pirate Day. In honour o’ this, we be doin’ a retrospective on the game’s UI as it progressed from the very beginning, as be standin’ now, and a glimpse o’ the future.


The Early Days

Way way back in May of 2009 the monitor station had 9 screens. It was crazy. We were crazy. We still are. The HUD consisted of a red cube for an aiming reticle and that was it. It was a simpler time, and one we remember fondly.


The Early Days – First Blood Part II

Fast forward a whole year, it is now May 2010. The most obvious change is there are now less monitors. We found that 3 or 4 agents made for the best gameplay. The other big change here is the HUD has been added. The little lines along the top and side of the screen scrolled as you looked around, adding some movement. The agent’s icon is shown in the lower right corner. Another thing you can see here is the dashed green line, representing the range of the radio. Crossing the line will begin to degrade your signal, and going further results in the screen being covered in static.

We also have the Helptron screen on the upper left there. This purpose of this screen is to relay important mission information. The font was fantastically drawn by hand by the programmer, and has won many imaginary awards.

Not shown here is the order-giving interface. Holding down an agent’s button pops his icon into the center of the screen of the agent you are controlling. On the left and right side of the agent icon, smaller icons show what order will be issued when you click the left and right mouse buttons.


Now You’re Cooking with Gas!

Here is the interface as it stood in February of 2011. The style is similar to before, but now there is a lot more information displayed. The status of the radio is shown on the Bolt agent’s screen, weapons and ammo are displayed in the bottom left corner. In the upper right corner you see the channel number that the monitor is set to. Using the default keyboard mapping, this also corresponds to the key you press to control or issue orders to the agent. Helptron is looking better with a new font. The glowing border around the currently controlled agent started eating a lot around this time and gained some weight. We put it on a vigorous exercise regimen and sugar pill diet.

The screenshot on the right is a few weeks later. We’ve added waypoint indicators at the top of the screen for important things like the radio and your agents.


Ain’t Easy Being Green

March 2012. Here you can see the agent icons in the HUD have been replaced with “sticky notes”. We like this physical representation of information. You can toggle the mouse cursor on and drag-and-drop these sticky notes to swap agents around from one monitor to another. The monitor artwork has been redone and you can also see the circular progress indicator on the left monitor. This displays when you are performing a task like picking a lock, and also goes in reverse direction while you are waiting to call in a reinforcement for a fallen agent.

We’re getting close to what we think will be the final look for the user interface, but there is a problem. Late in 2011 we revealed the game with an announcement trailer and got lots of attention on sites like Rock, Paper, Shotgun, PC Gamer, and Kotaku. We noticed that the HUD was one of the things people had issues with, and to our knowledge no one ever complemented it. Too green, too intrusive, too obnoxiously drunk all the time. Something had to be done!


Kickflip to the Rescue!

After progressively adding more and more information and icons into the HUD, it was looking really cluttered. We wanted to go back to simpler times and have a cleaner viewport, but still provide all that delicious information to the player.

We are moving ahead with taking the HUD in a more minimalist direction, and instead building that information into the frame of the monitors. The frames were a bit of a waste of space before, but now they serve as the deliverer of juicy information in a style inspired by those flip-style clocks made in the 60s. This makes the UI less flashy and distracting, while pushing forward that physical representation jive we were grooving to with the introduction of the sticky notes.

We also tweaked the colours to be a less green shade of green, and added support for the player to change the colour incase they really hate green in all its forms.

We’d love to hear your thoughts on the new design, just drop us a comment down at the bottom there!


The Future, and Beyond

We’re getting close to the finish line now, and it doesn’t look like there will be another major overhaul of the monitors. You never know what could happen, though. We might just go bananas.

2 thoughts on “Thar be the User Interface, Matey!”:

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>