UI mockup session 1.

Posted on May 08, 2015

Today we want to talk a little bit about our current progress regarding the UI. For the interface of our upcoming KKnD game, we're striving to make it easy to use for fans of the classic KKnD games, aswell as allowing easy modifiability. While the original games had no modding API and no simple way of adding custom features to the interface, we figured that such system for customizing the UI might prove itself useful if not vital. In addition to facilitating easier modification, our overhauled interface API will help bringing the base game and mods to a variety of devices, including desktop computers, tablets and even smartphones.

For starters we assessed what items need to be fitted into the default interface:

  • Build menus: Infantry, Vehicles, Aircrafts, Buildings, Towers, (KKnD1: Super-Weapons), (KKnD2: Constructibles, Walls)
  • Special features: Sell building, Research, Repair Building (we discuss this a little further down)
  • A button to access the overlay menu.
  • Money and Minimap.

In our eyes, KKnD had 2 major points of debate in its game mechanics and user interface: Building Repair and Research. Selecting the research lab to upgrade a buildings felt odd to us, so we decided to introduce a Research Button. This button basically works as a shortcut to get the research cursor that would usually require selecting the lab. This feature could be easily used with KKnD 1 and 2 without breaking their game mechanics.

Secondly we were annoyed by the annoying fiddling with technicians when repairing buildings. To solve this we again decided to develop a way of making life easier without interfering with the original gameplay. Our solution boiled down to a repair button that simply gives you a repair cursor that calls the nearest technician to the desired building when clicked on it.

To get an impression of how those ideas would play out in an actual interface, we created a mockup:


As you can see we integrated almost all of the features except super weapons, which we postponed for now. This interface setup works for any usual PC screen. When it comes to tablet devices, this arrangement of icons might still fit properly, but it would be unusable on smaller portable devices like smartphones. Current generation smartphones have a high DPI screen with resolutions above 1080p which suggests vast space, but obiously the pixels are tiny and an interface that is suitably sized on a PC screen will be tiny and useless on a high DPI screen. We decided to optimize the interface for landscape mode and thus need to save space in height and possibly use more space in horizontal direction, so we tried squishing the interface buttons more to the top:


It turned out to be a possible, but not very good solution. It looked more like the interface of Open RA and didn't feel consistent with the principles of the original KKnD interface. So we tried around some more and agreed that the entire buttonrange needs to move to the long side of the screen (in this case the bottom line):


This new configuration played out rather well and was a lot close to the original KKnD interface. The only bit that still annoyed us, was the resource display that didn't fit on the screen as snuggly as it did before.To tackle this last problem we decided to use the resource display as a seperator between production buttons and and misc. buttons:


After this little journey, we had our basic future interface arrangement, ready to work with. It's surely not finished, but it's a great step forward. We hope you enjoyed this behind the scenes look at our development and please leave comments below!