Mobile HUD-Informationshierarchie: Was im Kampf, in der Lobby und in Modals angezeigt werden sollte

HUD-Fehler sind selten „wir haben die Lebensanzeige vergessen“ – sie sind zu viele gleichpriorisierte Elemente auf einem Bildschirm: Lobby-Tabs während des Kampfs, ein antippbarer Shop über einer Zwischensequenz oder ein darunterliegendes HUD, das noch Taps abfängt, während ein Modal geöffnet ist. Design-Mocks sind oft Einzelbilder und markieren nie „Währung im Kampf ausblenden“ – du brauchst eine Zustand × Ebene-Spezifikation, damit Engineering Sichtbarkeit, Input-Blockierung und Zeichenreihenfolge umsetzen kann.

Im Folgenden wird Unity UGUI (Prefab, Canvas.sortingOrder, Graphic-Raycasts) als Hauptwortlaut verwendet. Godot: CanvasLayer layer + Control mouse_filter; Cocos: Node-Zeichenreihenfolge + BlockInputEvents / Vollbild-Blocker – gleiche Kriterien und Tabellen. Details zu Safe Area, Floating Text und Canvas-Reihenfolge: Safe Area, schwebende Schadenszahlen. Geräte, alle Sprachen und Release-Builds: Pre-Ship-Checkliste Punkte 1, 2 und 5.

Fehlerkriterien (eines davon = nicht bestanden): während Modal / Zwischensequenz / Zahlungsabläufen ist das darunterliegende HUD weiterhin interaktiv (es sei denn, die Spezifikation sagt „halber Bildschirm weiter bedienbar“); im Kampf blockiert eine nicht schließbare Nicht-Kampf-Promo den Spielbereich; die gleiche Information wird zweimal angezeigt (z. B. Münzen in der oberen Leiste plus große Münz-UI im Kampf) ohne Produktnotiz; Bedienelemente aus dem vorherigen Zustand bleiben erhalten (sichtbar oder weiterhin Raycast-blockierend); bei mehrsprachigen Stress-Locales schneidet das kampfminimale Layout langen Text weiterhin ab (DE/ES usw.).

---

Erst Zustände definieren, dann Bedienelemente

Spielzustand (Beispiele)	HUD-Ziel	Normalerweise anzeigen	Normalerweise ausblenden / reduzieren
Lobby / Home	Navigation + Ressourcen + Events	Obere Währung, untere Tabs, Event-Einstieg	Kampffähigkeiten, Fadenkreuz
Kampf / im Level	Aktionen + Überlebensinfos	Gesundheit, Fähigkeiten, Pause	Lobby-Tabs, Vollbild-Event-Banner
Zwischensequenz / CG	Kein Input oder nur Überspringen	Überspringen-Button	Fast das gesamte HUD (oder nur Überspringen)
Modal (Shop, Einstellungen)	Fokus auf Dialog	Steuerelemente im Modal	Darunterliegendes HUD Raycasts aus oder gesamte Ebene ausgeblendet
Zahlung / Compliance	Ablauf abschließen	Bedingungen, Bestätigen	In-Game-Promo-Overlays

Stimme das Zustands-Enum mit Design + Engineering ab (z. B. GameUIState.Lobby | Combat | Cinematic | Modal). UI-Wurzeln abonnieren die Zustandsmaschine (Unity-Prefab-Gruppen / Godot-Szenenzweige / Cocos-Prefabs) – vermeide verstreute SetActive / visible in jedem Button-Skript.

---

Ebenen und Sortierreihenfolge (engine-neutrale Spezifikation)

Dokumentiere von unten nach oben (höhere Zahl = weiter vorne):

Ebene	Inhalt	Input
L0	Vollbild-Hintergrund / Szenen-UI-Durchschein	Keiner
L1	Kampf-HUD (Gesundheit, Joystick-Platzhalter)	Ja
L2	Schwebender Kampftext / Tipps	Keine Raycasts (schwebende Schadenszahlen)
L3	System-Toast / Laufschrift	Normalerweise keiner
L4	Modal / Vollbild-Dialog	Ja; blockiert L1–L3-Taps
L5	Netzwerkabbruch, erzwungenes Update	Ja; blockiert alles

Unity: sortingOrder / mehrere Canvases; Godot: CanvasLayer layer; Cocos: Geschwisterreihenfolge unter einem Canvas oder geschichtetes Canvas + Maske. Wenn ein Modal geöffnet wird, hebe L4 an und deaktiviere L1-Raycasts / mouse_filter / BlockInput – nicht nur „darüber gezeichnet, aber Taps gehen durch.“

---

Informationspriorität (Kampfbeispiel)

Wenn der Kampf auf kleinen Bildschirmen nur N lesbare Blöcke behalten kann, Standard-Obergrenzen:

Priorität	Block	Degradationsstrategie
P0	Gesundheit / fehlschlagbedingungsbezogen	Nicht ausblenden
P0	Pause / Kampf verlassen	Nicht ausblenden
P1	Fähigkeiten / primäre Aktionen	Zu weniger Buttons zusammenführen
P2	Kurzer Zieltext	Icon + Langdruck-Detail
P3	Währung, Event-Einstieg	Im Kampf standardmäßig ausgeblendet oder im Pausenmenü
P3	Chat-Einstieg	Zu Icon einklappen

Degradationen müssen in mehrsprachigen Stress-Locales (DE/ES usw.) lesbar bleiben – keine nur-englischen Schrumpftests.

---

Abnahme (5 Schritte)

1. Zustände auflisten – Aus dem Hauptablauf Übergänge aufzählen (Level betreten, Shop öffnen, CG, Wiederverbindung).
2. Screenshot pro Zustand – Editor-Play und Geräte-Release jeweils (Pre-Ship-Punkte 1 und 5); verifiziere, dass Nodes mit SetActive(false) / visible=false weiterhin Input blockieren.
3. Modal-Stichprobe – Bei geöffnetem Shop / Einstellungen / Zahlung müssen Taps auf ehemalige HUD-Buttons nichts bewirken (Vollbild-transparenter Raycast oder BlockInput-Maske).

4. Mit Safe Area kreuzen – Kampf-P0-Steuerelemente innerhalb des Safe Insets (Safe Area).
5. Versionierte Assets committen – Zustandstabelle steuert Sichtbarkeit (Unity ScriptableObject / Godot Resource / Cocos-Konfiguration) – keine nur szenenbasierten temporären Ausblendungen.

---

Was Design hinzufügen sollte

Liefergegenstand	Zweck
Wireframes pro Zustand (mindestens Lobby / Kampf / Modal)	Engineering konfiguriert Sichtbarkeit
Kampf-„darf ausblenden“-Liste auf dem Mock	Vermeiden, jedes Element auf einem Frame zu zeichnen
Modal-Spezifikation: abgedunkelter Hintergrund, Tap-Through erlaubt?	Legt Raycast-Richtlinie fest
Promo- / Event-Ebene Z-Reihenfolge	Mit L4/L5 abstimmen

Designer müssen nicht die Zustandsmaschine schreiben – Tabellen + Anmerkungen reduzieren Rätselraten.

---

Fix-Routing

Symptom	Wahrscheinliche Ursache	Aktion	Verantwortlich
Kampf nach Dialog weiterhin antippbar	Darunterliegende Raycasts aktiv	Graphic-Raycast auf Modal-Ebene deaktivieren / Vollbild-Maske	Engineering
Vollbild-Event im Kampf	Keine Zustandstabelle	P3 im Kampf ausblenden; Design-Freigabe	Engineering + Design
HUD nach Zwischensequenz übrig	Kein Cinematic-Zustands-Hook	Zustandsmaschine blendet HUD einheitlich aus	Engineering
Zwei Währungsanzeigen	Lobby-Leiste im Kampf nicht aus	Obere Leiste im Kampf ausblenden oder Datenquelle zusammenführen	Engineering + Design
Lange Locale schneidet im kampfminimalen Layout ab	DE/ES nicht getestet	Locale-Overflow-Pfad	Design + Engineering

---

FAQ

Zwei Canvases für Lobby und Kampf?
In Ordnung – oder ein Canvas mit Gruppen. Was zählt, ist Zustandssichtbarkeit + Raycasts, nicht die Canvas-Anzahl.

Halbbildschirm-Shop – ist das ein Modal?
Ja. Spezifiziere, ob das Darunterliegende antippbar ist und ob die Kampflogik pausiert.

Konflikte mit „weniger ist mehr“-UX?
Die Hierarchietabelle ist eine Produktregel, nicht Ästhetik; P3 kann für Events über Zustandsmaschinen-Flags wieder geöffnet werden.

World-Space-Überkopf-Leisten in 3D?
Sie sind Kampfinformationen, verwaltet mit L1; World-Space-Sortierregeln stimmen mit schwebende Schadenszahlen und Safe Area überein.