Battle UI

Menus and UI #ui

Hoo boy.

This is the user interface that will be on-screen while a battle is ongoing. It needs to convey a lot of information in a digestible way, and without cluttering the entire screen.

Camera Control

The player must be able to pan and zoom the camera. The camera must have bounds set to slightly further than the farthest corners of the grid.

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

Main HUD

These elements will be displayed at all times, attached to one of the edges or corners of the screen at all times. It exists in screen-space (it is attached to the screen and does not exist in the world).

These elements are intended for general information about the current battle and run. The required elements are:

• If any difficulty modifiers are enabled, the run’s challenge level.
• If the Expiration Date difficulty modifier is enabled, the number of turns remaining before expiration begins.

There must be an on-screen button used to pull up the Status Menu. The player can also use the “View Status” input action to do this.

Per-Unit HUD

This HUD exists in world-space at the position of every unit.

The required elements are:

• Health (bar only)
• Shield (icon + number)
• Status effect icons + stack numbers

Selected Cell HUD

The user is able to select entities or cells. To select a cell:

• On KBM, the mouse pointer is used to click on a cell. Whichever cell they’re hovering over is slightly highlighted.
• On controller, a virtual pointer is used to select cells on the grid. The pointer should be constrained to the edges of the grid, and should automatically snap to the centre of the nearest cell when directional input stops. Whichever cell the pointer is hovering over is slightly highlighted, along with the entity on top.
  • Additionally, the Cycle Up and Cycle Down inputs should be used to cycle the selected cell between those occupied by the player’s units. If no unit is selected, the last selected party member (if applicable, otherwise the first party member) is chosen.

This HUD exists in world-space at the position of the currently selected cell. However, it remains at a constant scale no matter what the zoom of the camera is. Cells can only be selected during the player’s turn, so this would only show on the player’s turn.

• If the selected cell has no entity or cell state, display a box with the text “[empty]” on it.
• If the selected cell has a cell state, display a box that notes the cell’s state and its effect.
• If the selected cell has a unit on it, show the elements in the below section.
  • (Both of the above can be true at the same time.)

Selected Entity HUD

The required elements are:

• The entity’s name
• Health and Shield (numbers)
• For units specifically:
  • A static portrait of the unit
  • All status effects the unit is afflicted with
  • All items the unit has

If it’s a player-controlled unit:

• A button to start the movement action
  • Should be greyed out if it’s been consumed
• Buttons for each of the abilities that unit has
  • Should be greyed out if it’s on cooldown, with an icon + number indicating the cooldown amount
• These buttons must be clickable by a mouse, or navigable to be clicked by a controller (with movement or an ability highlighted by default, whichever is available in that order).

While a unit is selected, the player must be able to view details about any of the items or status effects associated.

• On keyboard/mouse, this info should be displayed when the cursor is hovered over the item/status.
• On controller, the player should press the “View Details” button to create a cursor on the item/status interface, showing details about whatever is hovered by the cursor. The player can use directional input to move the cursoro, r press the back input to escape back to navigating the movement/ability buttons.

Player Movement UI

This is shown in world-space while the user is selecting a path for their unit’s movement action. See here for movement functionality.

• The cells that are currently reachable with the movement remaining should be highlighted.
• The hovered cell should be highlighted in a lighter colour, IF it’s a cell that can be selected for movement.
• A solid-line arrow should be drawn along the path that has been chosen so far.
• A dotted-line arrow should be drawn along the shortest path from the previous/starting cell, to the hovered cell.
• Selecting a valid cell should add to the path using that cell.
• Selecting the same cell two times in a row should lock in that movement action, take down the Player Movement UI and start movement.
  • There should also be a separate button on-screen/on the controller to start movement.
• Pressing the back button (on-screen or on the controller) should remove the previous selection from the path, or cancel the movement action if no path has been defined.

Player Ability UI

This is shown in world-space while the user is selecting a target for their unit’s ability. See here for ability functionality.

• The cells that are targetable by this ability should be highlighted.
• Hovering over a cell should highlight, in a brighter colour, all cells that would be targeted by selecting that cell.
  • Line-type abilities should highlight all cells in the line that includes the hovered cell, up to the furthest entity that would be affected by the ability (considering line-of-sight, piercing, etc.)
  • Pattern-type abilities should highlight all cells in the pattern that includes that cell. If a cell is part of multiple patterns, then ??????????? help me programming
  • Radius-type abilities only need to highlight the hovered cell.
  • If the ability has an AOE-Pattern, the cells that would be hit by that pattern should be indicated around any entities that would be hit by the currently brightly-hovered cells. The indication should be different to the standard cell highlights.
• Selecting a valid cell should take down the Player Ability UI and execute the ability onto the related line/pattern/cell/aoe-pattern.
• Pressing the back input should cancel the ability action.
• If an ability can select multiple targets, the cursor should have a number next to it indicating how many cells there are left to pick.
  • For these kinds of abilities, pressing the back button while having selected one or more cells should remove the previous selection without cancelling the whole movement action.

Damage Numbers

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

• Pop into existence with an animation
• Display the total amount of damage one instance of damage dealt to the unit
• Have a black outline
• Be colored RED if it was a critical hit
• Be colored in the same color as a status effect’s icon if the damage came from a status effect
• Be colored in the same color as an item’s rarity if the damage came from an item (common is grey)
• Be colored WHITE otherwise

Aggregated Damage Numbers

In addition to the individual damage numbers explained above, a second aggregate number should appear 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.
• Shielding should be shown in blue with a brighter blue outline.
• These do not need an aggregate number.

Custom damage number colors

Can programming please look into allowing items to define their own damage number colors please and thank you uwu

Proc Effects

The UI for battles will feature pop-up effects that trigger any time an item or passive procs. (Some effects will ignore this feature, since playing over and over could get super annoying.)

• The effect will be a diamond-shaped icon appearing above the source unit, which quickly rises upwards and fades into nothingness.
• For items, the icon is the item’s icon.
• For players’ passives, the icon is the passive’s ability icon.