January 2024 Combat UX/UI Updates
Greetings,
As we begin 2024, the team continues to work diligently on updating and building out towards release later this year. Today, we're excited to share a work-in-progress update on our upcoming game's combat HUD and UI. Redesigning the combat HUD has been on the radar for quite some time. We’ve wanted the HUD to improve in two major aspects: readability and visual clutter. Our battles have a lot of info going on with things like the cards, ranges, enemies targeting abilities, status effects, movement, health, and defenses. Our goal was to make all of this information available without making the battlefield a collage of icons flying around, especially when facing lots of enemies. The information has to be clear and accessible, but not overpowering.
First, here is a UX/UI Mockup and guide of the new system and the information that will be shown throughout the update iterations.
First Iteration:
We explored the possibility of using shaped icons for Armor and Evasion indicators instead of colored circles. We also considered hiding unused slots for status effects. There are a total of 8 slots to distribute among passives/traits and status effects, so in this iteration, we looked into the placement of unit names, shortening the HP bar, and adding a Cover HP counter.
Second Iteration:
Here, we addressed the display of Movement Points (MP) with more segmented visuals. We can show as many segments as MP the unit has (if it's just 1, then it will look like a semi-circle). We introduced icons for Armor and Evasion while experimenting with the order of the defense indicators. Lastly, we explored different options for visualizing unit movement, enemy intent, and stun status.
Third Iteration:
We aimed to incorporate more variations to illustrate how the HUD would appear in different states. Things to look at here include Squig, who has expended movement for the turn, Agama showcasing a complete HUD, and Norton portraying the appearance when a player focuses on a character – in this scenario, the HUD takes precedence over all other units.
One challenge encountered pertained to Traits, particularly in Norton's illustration. A suggestion we had internally was having Statuses and Traits share the same space, alternating at a fixed interval, and freezing when the player places focus on them. In this envisioned scenario, Norton could display "Charge" as his trait. Addressing feedback from the team, we realized that we had too many colors. To streamline and enhance visual clarity, a proposal was made to reduce the number of colors, especially since shapes will be introduced in the statuses. Using shapes rather than an extensive color palette should simplify the distinction between different statuses.
Fourth Iteration:
In the standard UI state, Norton is the highlighted unit, causing his HUD to take precedence over all other units while being hovered upon. By default, HP numbers are not displayed and only appear when hovering over the unit. HP bars now feature segments, reminiscent of those in League of Legends, where each segment represents 5 HP. This visual enhancement provides a quick assessment of units' HP status. Hovering over the bars reveals the exact HP number.
Notable changes include an increase in size for Armor and Evasion counters, along with the addition of a background to the icons, this is helping to separate them from the battlefield. Stack numbers in statuses/traits are now larger, and HUDs have been extended slightly to improve spacing between icons. Traits and Statuses continue to cycle at a fixed interval below the HP bar.
A consideration regarding freezing traits/statuses when hovering over a unit, given the existence of the inspect window for closer examination. With tooltips accessible from the inspect window, this becomes a point of discussion. An example featuring a stunned unit is provided, indicated in the Enemy Intent part of the HUD.
Some additional QoL points: The color for movement points has been adjusted for clarity. The Energy Counter has been changed to align aesthetically with the End Turn button for consistency. A vignette effect at the bottom of the screen has been added to enhance separation between the UI and the background, improving readability. A prompt to open the inspect window is now present over the deck indicator. Cover HP indicators have been reduced to match Armor indicators for consistency, as both operate similarly (covers use armor to set the number of hits they can take).
From the previous state, pressing 'Q' or the corresponding button on the controller initiates the opening of the inspect window. This version does not represent Norton's current state but provides an overview of how a complete inspect window could look. When the inspect window is open, players can browse different items within it. When hovering over items in the inspect window a tooltip display appears next to it.
An example is provided for an enemy inspect window, featuring an additional field between Block and MP to show Intent. For characters, this space remains empty unless the character is stunned, considering the potential shift from a Status Effect display. Empty elements, such as traits, persist in the window rather than disappearing. Movement is displayed as greyed out when a unit is unable to move due to stun or when a character expends all movement. In the given example, as the enemy is the focus, Norton's HUD is rendered behind Agama.
Conclusion
Thanks to Felipe and the team for providing the update on the UI and Combat HUD. As we inch closer to the completion of this combat HUD and UI overhaul, the team cannot wait for you all to experience the world they’ve been hard at work on. We would love to hear your thoughts on the UI and HUD updates, please let us know if you have any feedback on what we’ve built so far.
Stay tuned for more developer updates as the year goes on and thank you all for your continued support!
- Rob
