Battle HUD against three beasts: Break shields, revealed weaknesses and the turn-order ribbon
Octopath Traveler II · HUD & Gameplay UI
Art style HD-2D & retro 3D
About this game
Developer: ACQUIRE Corp. · Publisher: Square Enix · Platform: PC (Steam) · Art style: HD-2D & retro 3D · Screen type: HUD & Gameplay UI
More Octopath Traveler II screens in the Gallery
What to study
The everyday battle HUD in daylight, and the clearest statement of Octopath Traveler II's Break/Boost design. Everything is pinned to what it describes: each of the three beasts wears its own blue shield (2 hits left) and its revealed weakness icons; the party's HP, SP and Boost Points live in one stacked ledger at right (Partitio's five red BP dots are full, he can spend); and the top ribbon lays out this turn and next as two rows of portrait diamonds, the acting character pulled large at the left. Nothing is modal and nothing is hidden, the tactical state of the fight is a single glance, which is what lets the command menu (its companion screen in this set) open over a clean field. Frame at about 4:00 in the NOV trailer - EN ESRB video (Steam), a pipeline scene-change survivor (candidates/v0_0033.png at 239.54s).
Patterns
How the screen is arranged.
status-row portrait-row minimal-hud
Components
Parts on screen.
Menu Portrait Vitals bar Badge
Screen inventory
- top, the turn-order ribbon: the acting character enlarged in a cyan diamond at far left, the rest of this turn's actors as small red and blue diamonds running right, and a second NEXT TURN row of diamonds at top centre, the whole round, both turns deep, as one line of portraits
- right, the party ledger as four stacked blocks, Partitio HP 1625/2098 SP 97/97 with all five BP dots lit red, Agnea 1500/1673 and 96/98, Osvald 1449/1594 and 240/240, Hikari 2770/2770 and 80/80, each name carrying its BP as a row of small red dots and its buff icons at the left edge
- bottom left and centre, the three dragon-like beasts each wear the blue shield badge numbered 2 and the word VULNERABLE, with every weakness already revealed as icons, sword, star and flame glyphs in dark squares, the scouting work done and pinned to the enemy it belongs to
- no command menu, no action name, no damage numbers: this is the battle at rest between orders, and the HUD still shows everything a decision needs, who acts when, who can afford what, and exactly how many hits each shield has left
Top 3 colors
#191e1e 22%#403931 17%#8a8284 16%
Top three palette colors by share. The remaining colors make up the rest.
Source and credit
© ACQUIRE Corp. / Square Enix, Octopath Traveler II screenshot: Octopath Traveler II - NOV trailer - EN ESRB video (Steam), shown for design study and commentary. PlayCraft is an unofficial fan project, not affiliated with or endorsed by Square Enix.
Source tier 2 (publisher-released) · screenshot: Steam store page · Steam page
Source details
Fetched 2026-10-21. verified 2026-10-21: pipeline scene-change frame (candidates/v0_0033.png, 239.54s) inspected visually at full resolution (1920x1080 native) and confirmed as a genuine, settled, fully legible battle frame, turn ribbon, all four party blocks with BP dots, and all three shield/weakness badges are sharp; no trailer typography or transition effect overlays the frame
no published policy found (checked 2026-10-21); fair-use study use, takedown honored within 48h
Rights holders: see Copyright & takedown.