When in a fight scene, we render a unique set of UI elements that we call the combat HUD. In addition to the HUD, we also show a dialog that displays text regarding the status of the fight, typically the last action taken.

The status dialog is currently pinned to the top same as all of our dialog elements. When we refer to the combat HUD we mean the elements on the bottom.

The combat HUD displays status and action panels for each member in the party. There can be up to five party members. Enemy status is not currently displayed (something to think about).

Elements

For each party member (up to a maximum of five members), we need to draw:

Member Status Panel

The member status panel contains:

• The character portrait (note we will potentially swap out portraits based on character status)
  • The character’s name
• The character’s current and max health (red bar, star icon)
• The character’s current and max creativity (blue bar, lightning icon)

Member Actions Panel

When it is a character’s turn to act, we render an actions panel somewhere near their status panel. The actions panel includes:

• Some number of buttons for each available action (not every action will be shown, some actions can be disabled or hidden completely). The exact name and icon for each action isn’t important—we’ve changed these a bunch of times and they will continue to change throughout development. What matters is that we can display a variable number of them, and that they have three states:
  • Default
  • Selected / Highlighted
  • Disabled

Combat Menu Items

• A “spend” menu. When performing an ability, a spend fly-out appears that lets the player choose how much creativity to expend on the ability.

  

• An item menu. When using an item, an inventory fly-out appears that lets the player choose an item to use.