Chapter 3: On‑Body UI & Diegetic Indicators

Created by Sarah Choi (prompt writer using ChatGPT)

On‑Body UI & Diegetic Indicators (Lights, Icons)

On‑body UI turns equipment into communicative surfaces. Belts, packs, holsters, plates, and soft goods can host indicators that inform the wearer, squadmates, and the audience about state—power, ammo, med readiness, hazard, access, identity. For character concept artists, building a coherent system of lights, icons, and micro‑interfaces makes gear legible at gameplay distance and reduces the need for floating HUDs. For production, a clear UI grammar yields consistent shader/emissive rules, animation hooks, and damage states that scale across LODs.

First Principles: Function Before Glow

Every indicator must answer who needs to know what, from how far, and in what conditions. Start with the information payload: status (OK/fail), level (low/med/high), mode (safe/armed), role (med/eng/lead), and navigation (grab/press/pull). Design the signal path from the wearer’s hands and eyes outward to teammates and then to spectators. If the read doesn’t change behavior, remove it. Diegetic UI should never compete with mobility or safety.

Read Range Hierarchy

Design for three tiers of perception:

  • Long‑range (15–50 m): silhouette beacons and broad color bars—helmet brow rings, belt loops, backpack spine strips, tabard lanterns in fantasy. These communicate role and alert states.
  • Mid‑range (3–15 m): panel icons, rank placards, battery meters, med crosses, hazard bands; placed on chest, pauldron faces, thigh placards, or pack sides.
  • Close‑range (0–3 m): buttons, toggles, QR‑style labels, tiny LEDs, inspection windows, and haptic pads; positioned on stable panels reachable by the non‑dominant hand. Lock the hierarchy first so you know where to spend emissive budget and texture resolution.

Placement Logic on Belts, Packs, and Holsters

Place interaction UIs on stable and reachable panels. Belt buckles can host mode toggles and small displays if offset from centerline to avoid bending conflicts. Holsters get armed/safe tell‑tales near the throat; color and icon indicate retention state. Packs host power and network status on the upper back edge for teammate checks, with redundant mirrors on the shoulder strap for self‑read. Avoid putting indicators over hinge corridors (elbows, knees, tasset splits) where they will shear or jitter in cloth‑sim.

Iconography & Shape Language

Use a compact, high‑contrast icon set tied to role: cross/plus for medical, hex/cog for engineering, chevrons/triangles for assault, circle/dot for neutral status. Keep line weights thick enough to survive bloom and motion blur. Pair color with shape redundancy (e.g., medic → plus + white/cyan, engineer → hex + amber) to aid color‑blind readability and grayscale capture. Align icons to panel edges or rivet grids; avoid sticker drift across seams.

Color & Emissive Discipline

Assign anchor hues per function (OK → cyan/green; caution → amber; critical → red; identity → white; stealth → off/dim). Emissive bands should be continuous loops (helmet brow, belt ring, pack spine) to prevent aliasing at LOD. Set state rhythms instead of just color: steady for nominal, slow pulse for caution, fast strobe for critical; limit strobe duty cycle to avoid discomfort. Reserve saturated colors for alerts and keep most indicators matte or low‑nits so cinematography can ride exposure without blowing out detail.

Inputs the Hand Can Trust

Buttons, cams, and sliders must be glove‑friendly and distinct by touch. Stagger tiered interactions: Tier‑1 (instant) oversized toggles for lights/comm mute; Tier‑2 guarded cams for power; Tier‑3 keyed locks for dangerous actions. Add tactile affordances: knurling on cams, ridged tabs, recessed safe buttons. Place haptic motors or spring detents under critical toggles and design audible clicks that read through ambient noise.

Directional Grabs and Pull Tabs

Show where hands go with pull‑tab geometry and grab halos—a darker AO trough plus edge brightening from wear. Tabs should be color‑coded to action (open/close, release/arm) and shaped asymmetrically (teardrop, triangle) to prevent wrong‑side pulls under stress. In fantasy, replicate with lacquered rings, tassel knots, or wax seals that fracture on first use; keep the pull direction identical in diagrams.

Power, Cables, and Data

Route cables along strap corridors with retainer loops every 100–150 mm and breakaway couplers near the neck and hips. Provide battery slabs on pack/belt with LED ladders visible to the wearer; mirror a small meter on the wrist or chest. Show port standards with consistent jack shapes (round for power, hex for data) and strain‑relief boots. In fantasy magitech, replace with braided conduits and rune plates; color‑glow follows the same logic.

States, Modes, and Faults

Define discrete states for every device: Off → Standby → Active → Fault. Each state changes color, icon, and animation rhythm. Document fault cascades—what happens if a cable is cut, battery drops below threshold, or sensor loses lock—and how the suit signals that state (amber → red, pulsing to solid, tone escalation). Provide manual overrides and safe fallback modes in your callouts so designers can script interactions.

Fantasy Translations

Diegetic UI in non‑tech settings uses light, motion, and texture instead of LCDs. Lantern slits, reflective enamel inlays, alchemical vials as meters, and wind chimes or bead rattles as status tones. A healer’s belt might use etched copper tally plates for doses remaining; a warded scabbard shows glow peeking through runes when the blade is “armed.” Keep the same reach hierarchy and hazard color rules; just swap materials and mechanics.

Readability Under VFX & Motion

Design for rain, dust, fog, and sparks. Large emissive bands should push through atmospherics without sparkling; small LEDs need visor/baffle recesses to avoid starburst. Keep indicator zones low‑noise (matte surrounds, restrained normals). Build shadow lanes under overhangs to stop spec blowouts. For motion blur, prioritize continuous shapes and avoid dotted arrays; if you must use a dot ladder, group into clusters that read as a bar at speed.

Wear & Maintenance Language

Indicators gather fingerprints, scuff rings, and adhesive ghosts from removed labels. Emissive bars collect grime at edges; buttons polish at tops; rubber bumpers gray at corners. Add inspection stamps, calibration seals, and serial plates. Provide service seams near UI clusters with iconography showing tool direction (screw arrows, unlock symbols). In chemical or medical roles, keep surfaces wipe‑friendly and depict UV‑sanitation gloss in shader notes.

Shader, VFX & Audio Notes

Split UI into render layers: albedo for printed icons, emissive for lights, roughness/metal for material read, and FX for bloom/flare. Keep emissive intensity tables per state and provide HDR‑safe values. Add subtle screen‑space dirt masks for close‑ups. For audio, associate soft chimes with med gear, harsher clicks with locks, static crackle with comms; provide one‑shot and loop cues. For haptics, note vibration patterns tied to states (triple buzz on fault).

Rigging & Cloth‑Sim Guidance

Mark UI panels as no‑sim or low‑flex zones; mount them to rigid plates or reinforced soft panels. Provide collision proxies for badges and button islands. Set limited‑slide constraints for modules on elastic bridges (helmet brow rings, belt beacons). For cables, add bone chains with capped slack and snag points; document tether lengths and safety release behavior.

LOD & Streaming Strategy

Author a UI LOD sheet: at distance, collapse icons to single shapes and lights to broad bands; drop text. Maintain at least one emissive loop and one chest/belt icon through LOD2. Bake a grayscale fallback for color‑blind mode that preserves shape semantics. Avoid high‑frequency blinking at low LODs to prevent aliasing.

Accessibility & Safety

Ensure redundancy (color + shape + position) and consider glare and photophobia—allow “low‑nits” stealth skins. Define silent mode for stealth ops with haptic‑only feedback. Provide left‑handed and injury‑mode access to the same functions, mirroring critical buttons to the support side.

Packaging for Production

Deliver: 1) a style guide (icons, colors, emissive intensities, stroke weights), 2) placement maps on belts/packs/holsters with safe zones, 3) state charts (Off/Standby/Active/Fault) with animation rhythms, 4) interaction specs (button sizes, travel, gloved tolerances), 5) cable routing and tether lengths, 6) shader/VFX tables (HDR values, bloom ranges), 7) LOD plan, and 8) accessibility variants (shape‑only decals, stealth skins).

Case Studies

Field Medic Belt (Near‑Future): Offset belt UI with cyan cross icon; tear‑away med placard on chest with steady cyan when stocked, pulsing amber when supplies low; micro‑beacon on shoulder for IFF. Buttons are glove‑sized domes with haptic click. Wear shows disinfectant haze and polished bezels. Survey Pack (Sci‑Fi): Battery slab with LED ladder mirrored on left strap; amber network glyph for mesh link; pack spine ring for visibility in dust. Cable loops along harness; breakaway at shoulder. Pack panel displays mode with shape + color; fault state locks into steady red and mutes beacons. Guild Healer (Fantasy): Bronze belt plate with enamel cross; oil‑lamp brow on hood; reagent vials as visible meters in a chest rack; wax seals over rare‑herb drawers snap when used. Glow is candle or alchemical, not LED—but the hierarchy and placement echo sci‑fi logic.

Closing Thought

On‑body UI is choreography made visible. When lights, icons, and inputs are placed where hands can reach and eyes can parse—at the right scale and intensity for the shot—your characters feel competent, your world feels engineered, and your production has a shared, buildable language.