Building Context Box UI

Introduction

Team 4 & 5 collaborated on creating a new information box UI for displaying building specific information, to replace the old InfoBox UI element, which was designed to be a general purpose information box that displayed information about any number of entities selected by the player. This approach was found to be slow, the InfoBox had to aggregate over a list of all the entities registered in the game (which is a lot) and failed to communicate useful information about the buildings such as it's health, defence ability, building type and other relevant statistics.

Design/s

We prepared an initial design for the new building information box, starting off with a rough paper prototype by @Abishtu (shown below)

And a refined design by @usrnatc

It is a very elementary UI that displays:

• Building Type
• Building health, attack and defence.
• Image of building

Once we finalised and implemented this design, we realised that it didn't fit in with the other UI elements in the game, as such we decided to implement the information box designs initially used by InfoBox. The revised design looks like this:

Stat Display Design Process

Originally the attack and defense progress bar designs were used however it was realised that attack and defense stats are a static metric that do not need progress bars.

It was then decided that icons should be used to represent attack and defense stats of a building

The BuildingUIDataComponent

To draw the UI specifically for the buildings, we decided to make a UI Component that attaches to friendly building entities, on the pre-condition that the building entity atleast has CombatStatsCompnent, BuildingActions and SelectableComponent attached to it.

// Town hall example
townHall.addComponent(new BuildingUIDataComponent())

This component handles drawing the UI elements and populating it with data from dependent components, if and only if the component has been selected.