Get the latest Education e-news
 
  • A Look Inside Sunless Skies' UI Redesign

    [03.12.19]
    - Tobias Cook

  • Text logging and readability

    The biggest technical challenge we faced during the redesign was the implementation of logging. Previously, every selection made in the reading panel would wipe and refresh the content entirely. Adding logging allowed players to review their past decisions and refresh their memory on previous events in the current area, as well as tackling layout issues where the refreshed content might consist of only a single line. Implementing this system posed many challenges; smooth fading and transitioning of large quantities of text, a scrollbar that could adapt dynamically to these changes, and defining the rhythm and appearance of new content. Ultimately I think this system adds a feeling of weight to player decisions and just *feels* more natural to read.

    HUD matters

    The inventories all received a degree of attention, again with the intention of increasing readability whilst also better leveraging our icon library (one feature of the redesign was a 50% increase the the size of our small icons - you can generally see what they are supposed to be now.). Changes here were typically less substantial and more about layout adjustments and aligning visually with the reading panel, as well as improving affordance and highlighting to better indicate areas of interaction.

    For the HUD, we moved away from the spherical health indicator and curved fuel/supply indicators, which we considered too difficult to read, and moved back to a more traditional bar format. The contrast, size and colouration of the bars was reconsidered to better balance their visual priority and provide better at-a-glance access to key data. All HUD elements were moved to the lower portion of the screen and reframed, ensuring a better visual balance and easier comparison especially of the central heat bar and the health bar on the left.


    [Pictured: An example of the new content logging feature. Link to larger image.]

    Atmosphere

    To refine the tone and atmosphere of the UI, we adjusted the texturing and saturation of the frames to give a more distressed appearance, and used a more restricted colour palette in the text with brighter colours reserved for interaction and important points of interest. Another challenge was selecting a typeface that felt tonally correct (Sunless Skies takes place in an alternate history Victorian setting) whilst remaining readable. Ultimately we landed on Vollkorn for much of our text, which maintains an aspect of our targeted period tone whilst retaining readability (a common issue with serif typefaces).


    [Pictured: Another example of the center panel layout. Link to larger image.]

    Scaling

    The previous design was very ambitious -  it allowed granular independent user scaling of both the UI frames and the text. Users could fine tune both to suit their own tastes. Unfortunately, though it allowed a wide range of customisation, it also presented huge challenges in presenting a functional, consistent UI. We therefore decided to  to scale back this feature, restricting scaling options instead to two text size options. We felt this accommodated what would be the most valuable scaling feature - larger text - while also not creating undue obstacles and risk in implementing the UI redesign successfully in the time we had left.

    We made innumerable other small decisions not noted here in the redesign, but I hope this has provided some insight into our process. I'm really proud of the work we've done on the new UI - you can check it out in the Commander release of Sunless Skies!

Comments

comments powered by Disqus