Battle UI and Controls

This page describes the functionality and positioning of UI elements during battles, including how the player will interact with them and how they should respond.

Universal Controls

• Holding LCTRL or RS should activate a TACTICAL MODE, which shows all units’ health bars in their FULL forms instead of their COMPRESSED forms.

UI

Battle State Splash Screen

Any time the battle state changes, a splash screen should appear showing the new state:

• BATTLE START
• YOUR TURN
• ENEMY TURN
• VICTORY
• DEFEAT

On the first turn of the battle, BATTLE START will be shown instead of YOUR TURN.

Battle State UI

The following UI must exist on the top right corner at all times.

• Text saying whose turn it is (YOUR TURN, ENEMY TURN)
• The |Challenge Rating of the run
• The |Expiration Date counter, if that difficulty modifier is on

Unit Team Indicator

On the floor beneath each unit, there should be an indication of which team the unit belongs to (PLAYER or ENEMY). This can be done with a coloured shadow for the player units, and a black shadow for the enemy units.

Unit HUD

The per-unit HUD exists in world space beneath each unit. It has two states: COMPRESSED and FULL.

Compressed

Shown by default when a unit is not selected. Precise numerical values are not required.

• Health bar
• Shield indicator

Full

Shown when the unit is hovered, selected, or the TACTICAL MODE button is held.

• Health bar + value
• Shield indicator + value
• Status effect icons + stack numbers

Damage Numbers

Every instance of damage must be indicated with a number appearing at the target.

• It should pop into existence with an animation.
• It should display the total amount of damage that one instance of damage dealt to the unit
• It should have a black outline be default.
  • If it was a Critical Hit, it should have a red outline, and also have a number of exclamation marks appended to the end to indicate which tier of crit it is.
• It should be filled white by default.
  • If the damage came from a status effect, it should be filled by a colour associated with the status effect, and also be accompanied by the status effect’s icon.
  • If the damage came from an item, it should be filled by the item’s rarity colour, and also be accompanied by the item icon.

Aggregated Damage Numbers

In addition to the individual damage numbers explained above, a second aggregate number should appear beneath the health bar that displays the total damage dealt with one ability use.

• This number should also have a popping-in animation, which should play every time a new hit is registered and the number is refreshed.

Healing and Shielding Numbers

Using the same system as damage numbers, numbers should appear near a unit when they are healed or shielded.

• Healing should be shown in green with a brighter green outline, and should be accompanied by a healing icon.
• Shielding should be shown in blue with a brighter blue outline, and should be accompanied by a shielding icon.
• These do not need an aggregate number.

Proc Indicators

The UI for battles will feature pop-up indicators that trigger any time an item or passive procs, or any time an ability is used.

• The effect should appear above the source unit. It should quickly rise upwards and then fade into nothingness.
• For items, the effect is a diamond-shaped icon with the item’s image inside it.
• For units’ abilities (both passive and active), the effect is some text with the ability’s name.

Tooltips

Standard tooltips should be shown any time an item is hovered with the mouse or controller cursor.

Player Turn Controls and Flow

It must be impossible to interact with the game scene or control the camera unless it’s the player’s turn, and there is no movement or abilities currently in progress.

Camera Control

During the player’s turn, they must be able to pan and zoom the camera. The camera must have bounds set so that you can’t see any of the background tiles overlapping.

The player can pan the camera in several ways:

• Pressing the WASD keys
• Tilting the right stick on the controller
• Clicking and dragging on the grid

The player can zoom the camera in the following ways:

Player Turn: Base

This is the state that the game is in by default whenever it’s the player’s turn and no units are selected.

In this state, the following UI must be attached to the screen:

• In the bottom right corner, there must be an END TURN button. This button should glow or pulse when all player units have exhausted their actions.

The following functionality must also occur:

• There must be some pips or indication above each of the player units’ heads to indicate whether they have any movement remaining, and whether they have an ability usage remaining.

Custom Unit Tooltip

This custom tooltip should share functionality with standard tooltips, but have completely unique visuals.

When any unit is hovered, the following information should appear to the side of the unit:

• The unit’s name
• The unit’s stats

If the LSHIFT or L button is held while a unit is hovered, additionally show:

• a description of what each stat means
• a description of each status effect that the unit has, in a container scrollable with the scroll wheel or right stick (camera control should be disabled while this button is held)

Player Turn: Selected Unit/Movement

During the player’s turn, they must be able to select units using the mouse or virtual pointer. If they hit the Cancel input (right click/B), the unit should be deselected.

Regardless of if the unit is a player or enemy unit, the following information must be shown in the top left when a unit is selected:

• The unit’s name
• The unit’s stats
• All of the items + stack amounts that the unit has.
  • If an item is hovered over with the mouse, a tooltip should appear describing the item’s functionality.

When the unit is a player unit, also show the following UI:

• The unit’s portrait should appear alongside everything else in the top left.
• The unit’s abilities and movement capacity should appear in the bottom right.
  • There must be a gauge that indicates the unit’s current maximum movement. The gauge should show how much of that movement they have left. These values should also be shown numerically.
  • The unit’s abilities should be displayed in a row. The passive ability must be smaller than the active abilities.
  • If the unit cannot use an ability this turn, all of the active abilities should be blacked out.
    • If the unit is |corrupted, they should be purpled out instead, with text laid over all the abilities reading CORRUPTED.
  • If an ability is on cooldown, the ability should be greyed out, with the cooldown shown on top of the icon.
  • Hovering over an ability with the mouse or controller cursor must show a tooltip describing the ability, and indicating how much cooldown it’ll have when used.
  • Hovering over an ability should also also hide the unit’s movement range and instead show the range of the ability.

As soon as a player unit is selected, they’ll be in movement mode by default.

• The cells they could potentially move to must be highlighted in BLUE.
• When the player hovers over one of these cells, an arrow should appear along the floor to indicate the path that they unit will take to get to that cell.
• Clicking on a valid cell will instantly begin the unit’s movement.

Player Turn: Selected Unit/Ability

When the player selects one of their unit’s abilities in the bottom left, the ability’s range should be shown on the grid instead of their movement range. The player is free to hover or select a different ability too.

• If the ability is primarily offensive, it should be highlighted in ORANGE.
• If the ability is primarily supportive, it should be highlighted in GREEN.

If the ability has an area of effect associated with it, the AOE should be highlighted in WHITE around the cell that the mouse/pointer is currently hovering.

If the player clicks on a cell, the ability should be used immediately. When the ability is finished, they should return back to the Selected Unit/Movement state.

If the player hits the Cancel input (right click/B), they should return back to the Selected Unit/Movement state.