A Game Development Website

Development Blog

Moonlit Development blog containing posts primarily about Game Development, and related projects.

The Designer's Folder: Rimworld's At-A-Glance User Interface Elements

Designer's Folder.png

The Designer's Folder is an idea that came to mind recently about keeping track of interesting and potentially very good design ideas from various games. Many of the ideas are ones that can be found and discussed in a wide variety of games, often they are not unique to the game put forward as an example, but the example does act as a way to talk about this interesting design element. 

At-A-Glance User Interface Elements

AAG User Interface Elements, in short, is what I call aspects of the user interface that the player often makes use of, but is able to deliver needed information with a simply glance. This is important because the piece of information being relayed is both important, and yet can be needed at a moments notice. Instead of forcing players to go through a number of menus or any other procedure; such as finding the unit which is about to rout in Total War: Rome (Creative Assembly) by having to select on each individual unit, these AAG elements display the needed information in as quick and easy as a manner as possible. 

Rimworld's At-A-Glance Colonist UI Element

For this Designer's Folder look into At-A-Glance UI elements, I will be putting forward the example of Rimworld (Ludeon Studios) Colonist UI Element. In Rimworld, you have a number of colonists that make up your settlement. Each colonist has a meter which determines how close they are to having a 'mental break' - where they essentially can go on a rampage attacking friendly colonists, braking colony furniture or equipment, binge eating a lot of food and so on. Needless to say, you can imagine that you would want to keep an eye on your colonists morale closely for this reason.

Rimworld Colonists UI

Clothing also plays an important role - colonists can equip various combat equipment such as power armour, bullet-proof vests or shielding - and also equip various forms of clothing like jackets, hats, shirts, pants and so on to deal with the heat or cold. This can be easy to keep track with low numbers of colonists but may be more difficult once the colony grows larger, or the seasons change and you to be sure your colonists changed their clothing accordingly to avoid heat stroke or freezing. 

Finally - you are able to both select individual colonists via this interface element - and have an idea of the condition of the colonists medically - whether they are incapacitated and need rescue, whether they are fully healthy - or whether they are asleep or awake. 

All this information is immediately evident via the UI elements shown in the screenshot.

Quickly Relaying Information

These UI elements are able to relay information quickly because they show their information in a clear and concise manner. The background of the square indicates the morale of the colonists, as the morale is low - the square is a darker shade [Kena has lower morale than Lumi and Anta for instance]. The clothing is shown on the colonists' avatar. Another important aspect is that the colonists are fairly recognisable - meaning you can easily know which colonist you are viewing information for without reading their name - although their name is also available if need be. 

In essence - here we are discussing 'Player Feedback' and 'Player Convenience' in terms of design. The game displayed morale in a sub-menu that is available by clicking on a colonist, and switching to that sub-menu. To avoid having the player needed to periodically check each colonist's morale [which can be tedious on large colonies] - they are able to gain a quick update on the colony's general morale in a quick manner. Depending on the style of game being discussed - this can be significant; it makes the game more pleasant to play, in a way it makes it easier, but essentially because the player is given a more convenient way to get important information quickly. 

These types of AAG UI elements can be found in a variety of other games. Total War: Rome for instance has banners above each unit - once the unit begins to lose morale and are about to rout, the banner flashes white until becoming fully white if the unit has routed. In a large number of Role-Playing Games - weapons which have a fiery enchantment might be on fire, whilst icy ones may have a frost-type effect. A number of Real-Time Strategy games such as Starcraft II (Blizzard) offer the option to have small health bars above each unit to display the amount of health that unit has. And so on. 

What all these elements seem to have in common is the ability to relay important or useful information clearly but also in a manner that does not require the player to look for very much longer than a simple glance. These methods are often done visually rather than via text - as shown with Rimworld's colonist UI elements. It may be worth considering whether there is game information within your own projects that can be shown in this manner - information the player needs to know often, is tucked away in a sub-menu, and can be needed at a moments notice. All these factors potentially could indicate that an At-A-Glance UI element to represent them could possibly be useful and convenient to have for the player, and possibly even providing your player a better play experience with your game overall!


Dylan Moon