Combat UI mockups — a new layout with info cards and a vertical menu

The last batch of mockups is the combat UI. Earlier I picked B text style for the HUD and A for loading, and decided to drop the item tooltip.

I hadn't settled anything for the combat screen layout yet. I decided to unify the windows with the new skin, and instead of sticking with the current layout, draw a better option alongside it. Right now the combat UI has a horizontal quick menu in one row under the unit (Move / Attack / Skill / Item / Wait), a brown skill window on the left (TP 70 / 100), small HP bars above units' heads (red for enemies, green for allies), a dialogue box with Karin's portrait before the ultimate, and a settings button in the top right.

Screens I built

Private image

I went with the new layout.

Top left is a turn indicator, "TURN 1 · Ally Turn," so it's always clear whose turn it is. Bottom left is the selected unit card (face portrait, name and Lv, HP/MP/TP bars, AP and MOV). The small bars above heads don't tell you the numbers, so I needed an info box that's always visible. The target card in the bottom right shows the hovered enemy's name, HP and expected damage. It's there so you can decide before attacking.

To the right of the unit is a vertical quick menu, and the skill list opens right next to it.

The numbers are real data. The main character has HP 120, MP 40, AP 10, MOV 4, TP 70 / 100, the enemy has HP 80, and the skills are Greatsword Slam (10 TP, range 2) and Aurora Slash (ultimate, 50 TP, range 3).

Private image

Option A is the current layout with only the new skin applied. The quick menu is a single row of beveled-corner buttons under the unit (selected = blue glow), and the skill list is a window on the left (SKILL band, TP bar, a gold Ultimate badge on Aurora Slash).

I changed the HP bars to bordered bars and added a TP line under ally bars. The window, button and bar skins are now unified based on these mockups. Option B only changes the quick menu to a vertical list on the unit's right. I kept both A and B.

Private image

The dialogue box before the ultimate uses the same frame as dialogue option 1 (wide bottom window + name tab "Karin"). The portrait overlaps the window from the right, with soft edges. The line is "Don't stand in my way!"

Things I thought about

• A vertical quick menu. If more commands get added, they just stack downward, and it doesn't cover the grid under the unit. It also matches the pointed tab shape of the village menu.
• The skill list right next to the menu. Your eyes stay near the unit. No need to look all the way to the other side of the screen (the left).

Next up

• There's no turn system, so the turn indicator needs to be built from scratch
• There's no damage preview calculation, so the expected damage on the target card is still a placeholder number
• MP and AP aren't used for anything yet, so the unit card just shows the values
• Switch the quick menu from horizontal to vertical, and open the skill list right next to the menu