Industrial Arena HUD Recipe

Use when an industrial/mechanical combat setting suits the requested game. This is a Spark/GameUI recipe inspired by the concrete theme discipline of the reference arena; it does not require UrhoX widgets or prescribe their API. Preserve an existing game's design when it already has one.

Palette and shape

Keep these as named project constants so all controls share the same decisions:

Role	Example RGBA	Use
Surface	10, 25, 29, 238	Dark teal panels that retain scene context
Text	245, 247, 242, 255	Primary readouts
Muted	165, 189, 186, 255	Secondary hints, not critical state
Action	255, 180, 72, 255	Weapon/ammo and primary restart action
Friendly	115, 221, 210, 255	Player/status accents
Threat	246, 85, 77, 255	Enemy/damage/failure; pair with shape/text

Use crisp panel edges, a thin colored top/bottom rule and restrained padding. A broad dark plate plus one accent rule is enough to establish the family; avoid giving every label a heavy border/glow. Optional offset shadows can use a separate non-interactive background plate when no matching GameUI shadow API is exposed. Do not invent a Theme.ExtendTheme or decoration API from UrhoX.

For example, these color declarations use GameUI's existing color/brush types:

using System.Drawing;

// Color.FromArgb takes alpha first.
static readonly Color HudSurface = Color.FromArgb(238, 10, 25, 29);
static readonly Color HudAction = Color.FromArgb(255, 255, 180, 72);
static readonly Color HudFriendly = Color.FromArgb(255, 115, 221, 210);
static readonly Color HudThreat = Color.FromArgb(255, 246, 85, 77);

Use new SolidColorBrush(...) with Panel Background or Label TextColor. Implement a reusable panel/header/readout factory with the actual project's Panel, Label and fluent-layout API; inspect ui-layout-api for alignment, flow and lifecycle. Store fonts as project font families using ui-custom-font; choose available Chinese glyph coverage when Chinese text is shown.

Layout

Build three visual weights rather than equal-sized widgets everywhere:

1. Mission/score/wave: compact top edge group; separate the number from its caption.
2. Health and weapon/ammo: high-contrast lower-edge groups, close enough to peripheral vision without covering nearby enemies.
3. Controls/reload hint: quiet secondary text. Debug controls and diagnostics do not need prime HUD space.

Start with a shared spacing scale (for example 8/16/24 design units), consistent rule thickness and two to three text sizes. Pick actual font sizes using UIFontSizing; the example scale is spacing, not physical pixels. Use viewport-safe layout and rearrange/simplify groups at narrow widths. Avoid resolving text overflow by shrinking every label or manually truncating strings.

Reserve the center for the player's action and aim. A radar may be useful for a large arena; add it only if it answers a gameplay question. Keep its enemy/friendly color semantics consistent with the scene and avoid making it the brightest object on screen.

State and interaction

• Hit: a brief red cue or bar animation, plus an observable health change; keep aiming readable.
• Reload: switch the weapon group to an explicit progress/status rather than silently disabling fire.
• Defeat: a restrained full-screen tint/dim behind a central result panel, a clear title, final score and a single visually dominant restart button. A 0.2-0.4 second transition is a starting artistic choice, not a framework contract.
• Restart: route button and shortcut to the same reset. Hide the result overlay, clear projectile/temporary effect state and restore round HUD/input. Prevent the restart click from propagating into an attack.

Inspect normal play, low health, empty ammo/reload, longest score/mission strings and defeat at the intended smallest window. Click the restart button through Runtime MCP using its actual rectangle and inspect the next frame/state. Rectangles diagnose layout; only the rendered view shows contrast, clutter and typography.