game-visual-hierarchy

Spielbildschirm-Visuelle-Hierarchie

Kernidee

Die Aufmerksamkeit eines Spielers in jedem Moment ist begrenzt. Alles, was „auffällig“ ist – heller, dunkler, bunter, dichter, größer, in Bewegung – zieht aus demselben Budget. Hierarchie bedeutet, dieses Budget aufzuteilen: Je kritischer eine Information für das Gameplay ist und je schneller der Spieler darauf reagieren muss, desto mehr und exklusivere Aufmerksamkeit erhält sie; alle anderen Elemente treten zurück.

Der entscheidende Schritt ist, die untere Ebene einzuschränken, nicht die obere anzuheben. Wenn nur die wichtigen Dinge hell gemacht werden, werden auch die anderen Assets heller, und am Ende schreit alles. Ein effektiver Ansatz ist, der untersten Leinwand einen engen Bereich zuzuweisen und Platz für die oberen Ebenen zu lassen.

Die Methode ist abgeleitet aus Riot's Blog 2014: Defining the Rift's Visual Style. Welche Teile aus dem Original stammen, welche Ableitungen dieses Skills sind und welche Messdaten vorliegen, siehe references/rift-case-study.md; andere Quellen siehe references/sources.md.

0. Finde zuerst die eigenen Projektstandards

Suche zuerst im Projekt nach:

• Kunstrichtung und Farbstandards, Palettendateien, QA-Screenshot-Aufzeichnungen, bereits in Rezensionen dokumentierte Probleme;
• Geräte- und Exportbeschränkungen, z.B. Bildwiederholraten-Limit von LED-Displays oder Helligkeitssteuerung;
• Entscheidungsprotokolle: Was wurde getan, was abgelehnt.

Übernimm deren Terminologie und Farbräume, verwende ihre Zahlen als Akzeptanzkriterien. Trenne Annahmen und bestätigte Fakten in Code-Kommentaren. Bei Konflikten zwischen den Standards und den Prinzipien hier weise darauf hin – ändere nichts eigenmächtig um.

1. Beginne mit den Entscheidungen, die der Spieler treffen muss

Frage zuerst: Was muss der Spieler in diesem Moment erkennen? – Wo bin ich; wohin kann ich gehen; wer ist Feind, wer Freund; was wird mich gleich treffen; was kann ich jetzt tun; was war das gerade für ein Ergebnis. Was gelesen wird, muss wahr sein: Was begehbar, verletzend oder wirkungsreich aussieht, muss es im Gameplay sein.

• Sortiere nach zwei Kriterien. Dringlichkeit: Wie groß ist der Preis für Übersehen, wie schnell muss reagiert werden; der Spieler kann nur ausweichen, unterbrechen, umpositionieren – das, worauf er nicht reagieren kann, sollte nicht wie eine Warnung aussehen. Dauerhaftigkeit: Konstant oder augenblicklich. Ganz vorne stehen normalerweise Signale, die „augenblicklich und tödlich“ sind.
• Fixationspunkt: Markiere, wo der Spieler gerade hinschaut (Charakter, Fadenkreuz, Cursor). In der Nähe des Fixationspunkts können Signale durch Farbe und Form unterschieden werden; Notfälle weit weg brauchen Bewegung, Fläche oder globale Änderungen am Bildschirmrand.
• Phasen: Erkundung vs. Kampf, Browsen/Zielauswahl/Abrechnung – jede Phase erhält eine eigene Sortierung; wenn der Spieler in eine Phase eintritt, werden die irrelevanten Ebenen aktiv abgesenkt.
• Ebenen nach Funktion, nicht nach Asset: Klippenkanten, einsammelbare Gegenstände sind Spielinformationen und gehören zur oberen Kante der Umgebungsebene; dekorative Partikel gehören zur Umgebungsebene, auch wenn sie technisch „Effekte“ sind.
• Reihenfolge der Darstellung ≠ Auffälligkeitspriorität: Geschosse in Tower-Defense sind über Feinden gezeichnet, aber ihre Anzahl ist hoch, der Informationsgehalt pro Stück gering – sie müssen klein und kurz sein.

Ausgangspunkte für Ebenenstapel nach Spieltyp siehe references/layer-stacks.md.

2. Kanäle der Auffälligkeit

Kanal	Eigenschaft
Hell-Dunkel-Kontrast	Stärkster und schnellster Kanal; funktioniert auch in Graustufen – erste Wahl für Hierarchie.
Sättigung	Zweitstärkster; kleine Flächen mit hoher Sättigung wirken auch auffällig.
Farbton & Warm-Kalt	Sehr stark, wenn er sich von der Hauptfarbgruppe des Bildes abhebt, z.B. kühle Farben in einer Lavalandschaft; innerhalb derselben Farbgruppe oder Rot gegen Grün ist unzuverlässig. Wird auch zur semantischen Unterscheidung verwendet.
Detaildichte	Hochfrequente Texturen sind Rauschen, sie verdünnen die Aufmerksamkeit.
Form, Fläche, Silhouette	Formsprache unterscheidet Signalarten; die Silhouette entscheidet, ob etwas von Weitem erkennbar ist.
Bewegung & Erscheinungsweise	Extrem effektiv für das periphere Sehen; plötzliches Auftauchen ist stärker als allmähliches Einblenden. Wenn das höchste Signal durch Bewegung hervorgehoben wird, müssen andere zyklische Animationen gestoppt oder reduziert werden.
Position & Rahmung	Bildschirmrand, Bodenplatte, Umrandung, Basisring. Hauptanwendung bei dauerhaften UI-Elementen.
Gesamtfarbton & Gesamthelligkeit	Wird zuerst wahrgenommen, wenn man aus der Ferne oder nur flüchtig hinschaut; geeignet für globale Statusanzeigen.

Definition von Helligkeit: Ob Unterschiede in Graustufen sichtbar sind, hängt von der wahrgenommenen Helligkeit (L*) ab. HSB's V vermischt „hell“ und „bunt“: Reines Blau hat V=100, aber L* nur 32. Wenn Helligkeit mit Zahlen angegeben wird, muss spezifiziert werden, welche Metrik gemeint ist.

3. Zuweisungsregeln

1. Leinwand am schmalsten, und lasse Platz für die oberen Ebenen in die Richtung, die sie brauchen. Standardmäßig wird an beiden Enden Platz gelassen. Bei Dunklem Spiel und LED-Displays kann die Leinwand am dunklen Ende anliegen; dann können die oberen Ebenen nur in Richtung heller und bunter expandieren und brauchen zusätzlich Umrandung, Silhouette und Bewegung.
2. Die obere Ebene enthält die untere und expandiert darüber hinaus. Die obere Ebene kann die Mitteltöne der Leinwand nutzen; sie wird durch den erweiterten Teil sichtbar: hellere Lichter, tiefere Schatten, buntere Akzente. Innerhalb einer Ebene gibt es Haupt- und Nebenrollen: Der erweiterte Teil wird für die spielrelevanten kleinen Teile (Ausrichtung, Waffe, Schwachstelle, Vorschlagbewegung) verwendet; der Rest wird zu einem detailarmen Ruhebereich.
3. Der stärkste Kanal wird dem Signal der höchsten Priorität aus Abschnitt 1 zugewiesen – als exklusiver Slot. Der exklusive Slot wird aus allen anderen Ebenen entfernt und gehört nur seinem Besitzer. Ein Slot entspricht genau einer Bedeutung – der Spieler muss es lernen; alles, was hier eindringt, ist Fehlalarm. Es muss nicht unbedingt „das Hellste“ sein; es kann ein Farbton, eine Form oder eine Bewegung sein oder je nach Phase zugewiesen werden.
4. Auffälligkeit × Fläche × Dauer × Anzahl = Ein Budget. Das Budget beschränkt die Konkurrenz zum Hauptsignal; das Hauptsignal selbst muss zuerst auf dem Betrachtungsabstand sichtbar sein.
   • Kurz sollen Trefferblitze und Ergebnis-Feedback sein. Warnungen sind umgekehrt: Sie erscheinen vor dem Ereignis, lassen genügend Reaktionszeit und verstärken sich mit der Nähe.
   • Anzahl kann das Bild zerdrücken: Hunderte von Geschossen oder Fließtexten auf dem Bildschirm müssen nach Anzahl begrenzt werden. Großflächige Indikatoren reduzieren die Füllung, lassen nur die Ränder auffällig und nehmen bei Überlappung die Vereinigungsmenge.
   • Dauerhafte UI darf zuerst das Gameplay nicht verdecken (um den Charakter herum, in Bewegungsrichtung, an der nächsten Interaktionsposition), dann erst schmal, klein, randbündig sein. Weltraumgebundene UI wie Lebensleisten, Schadenszahlen zählen zum Budget der Ebene, die sie annotieren.
   • Blitzsicherheit geht vor Hierarchie: „Kurz“ reduziert nicht das Risiko der Lichtempfindlichkeit. Große Flächen mit Blitzen nicht öfter als 3 pro Sekunde, vermeide gesättigtes Rotblitzen.
5. Vergleiche lokal. Betrachte das Element und den tatsächlichen, ungünstigsten Hintergrund, mit dem es in Kontakt kommt. Elemente, die über helle und dunkle Hintergründe gehen, erhalten eine zweilagige Umrandung (einen hellen und einen dunklen Rand).
6. Reihenfolge der Fehlerbehebung: Erst reduzieren, dann Kanal wechseln, erst zuletzt verstärken. Zuerst die übergriffigen unteren Ebenen zurücknehmen; dann überlege, ob das Signal in einen anderen Kanal (Farbton, Form, Erscheinungsweise, Position) wechseln kann, den die untere Ebene nicht belegt; zuletzt die obere Ebene stärken. Nach dem Absenken der unteren Ebene erneut prüfen: Was ursprünglich durch „dunkler als der Hintergrund“ getrennt war, kann sich jetzt angleichen.
7. Hüte dich vor Eskalationsinflation. Max-Level, hohe Seltenheit durch Silhouette, Teile, Animation ausdrücken – im gleichen Bereich bleiben.

4. Umgebung: Zurücktreten und leiten

• Zurücktreten durch Vereinfachung, nicht durch Weichzeichnung: Große Formen und Hell-Dunkel statt feiner, kontrastreicher Texturen. Einfach das Bild zu weichzeichnen senkt zwar die Messwerte, aber das Material wird unkenntlich. Übliche Änderungen sind: Sättigung reduzieren, Boden-Texturkontrast senken, Umgebungslichtquellen reduzieren – oft muss der Charakter nicht zuerst angefasst werden.
• Leiten: Begehbare Flächen sind ebener und ruhiger, haben einen stabilen Helligkeitsunterschied zu den Grenzen; die Grenzen sind dunkler und dichter. Es ist ein leiser Hinweis, kein Pfeil.
• Auch innerhalb der Umgebung gibt es Schichten: Spielrelevantes Terrain (Klippenkanten, einsammelbare Gegenstände) liegt am oberen Rand des Bereichs, reine Dekoration in der Mitte. Umgebungslichtquellen konkurrieren mit exklusiven Slots – sie müssen verkleinert, abgedunkelt oder spielerisch bedeutsam gemacht werden.

5. Einheitlichkeit und technische Spuren

• Alle Assets kehren zur selben Vision zurück, Maßstab passend zum Charakter. Je größer der Stilunterschied zwischen Charakteren, desto neutraler muss die Umgebung sein. Bei der Bewertung eines neuen Assets setze es neben den extremen Charakteren des Lineups.
• Stilistische Wiedererkennbarkeit kann aus bewussten Formkontrasten (weich vs. spitz) stammen, kombiniert mit einem kontrollierten Verhältnis von Realitätsreferenz zu Fantasieelementen.
• Harte Polygonkanten, Nähte, sich wiederholende Kacheln, Flimmern, übermäßig realistische grobe Texturen ziehen Aufmerksamkeit auf sich, vermitteln aber keine Informationen – sie müssen versteckt oder in einen bewussten Stil umgewandelt werden. Gitter, Pixelblöcke, Umrandungen – wenn sie bewusst beibehalten werden, gelten sie als Struktur und nicht als Mangel.

6. Anpassung nach Projekt

• Dunkel / Horror: „Hell“ ist ein knapper Kanal. Mehrere Signale werden zu hellen Punkten im Schwarzen – sie müssen sich durch Form, Höhe oder Dynamik unterscheiden; platziere kritische Informationen nicht nur in der dunkelsten Stufe.
• Heller Cartoon-Stil: Wenn die beiden Enden durch den Stil belegt sind, weiche die Leinwand in den Mittelbereich aus oder verwende dunkle Umrandungen, um Charaktere zu trennen.
• 3D / Realistisch / Dynamisches Licht: Die endgültige Helligkeit wird durch Material, Beleuchtung und Kamera gemeinsam bestimmt. Schätze zuerst die Beleuchtung ab, um den Bereich festzulegen, und messe am Bild nach der Nachbearbeitung. Siehe references/3d-lighting.md.
• Pixelkunst, begrenzte Palette, LED-Displays, kleine Bildschirme: Siehe references/limited-palette.md.
• Farbsehschwäche: Die Hierarchie basiert hauptsächlich auf Hell-Dunkel; semantische Farben werden durch Formen und Symbole ergänzt. Wenn exklusive Farbton-Slots verwendet werden, prüfe mit Simulationen für Rot-Grün-Blindheit.

7. Prüfmethoden

Zuerst logisch ableiten, dann messen. Verwende die obigen Regeln und das Fachwissen zu diesem Spieltyp, um eine Einschätzung zu treffen: Wie fällt das Licht ab, welche Gerätebeschränkungen gibt es, wann trifft der Spieler seine Entscheidungen. Messungen dienen nur dazu, spezifische Fragen zu beantworten – lass dich nicht von Rastern und Zahlenwerten vom logischen Denken abbringen.

• Überprüfe zuerst die Beweise: Ist der Screenshot älter als die aktuelle Version, gibt es Debug-Overlays, waren Beleuchtung und Nachbearbeitung beim Aufnehmen aktiviert? Vorgehensweise siehe references/evidence-and-measurement.md.

• Betrachte den schlechtesten Fall: Den überladensten Moment, den Moment der kritischen Entscheidung des Spielers. Bei augenblicklichen Signalen betrachte den ersten Frame der Aktion, nicht den Frame mit voller Helligkeit. Zustandsänderungen werden durch Vergleich zweier Frames von derselben Kameraposition gemessen.

• Drei schnelle Tests: Bleibt die Hierarchie in Graustufen erhalten; wohin fällt der Blick nach dem Weichzeichnen; ist die Pose und Ausrichtung noch erkennbar, wenn eine Ebene einfarbig eingefärbt wird?

• Prüfe kritisches Signal Kanal für Kanal: Vergleiche das Signal mit der höchsten Priorität und seinen tatsächlich angrenzenden Konkurrenten für jeden Kanal aus Abschnitt 2 einzeln.

• Messen: Die Skripte sv_profile.py im Skill-Verzeichnis melden pro Ebene Fläche, Bereich von Sättigung und Helligkeit, wahrgenommene Helligkeit, Detaildichte, Zugehörigkeit zum exklusiven Slot und lokalen Kontrast. Sie unterstützen den projektbezogenen Farbraum, Zwei-Frame-Vergleich und Mehrfach-Frame-GIFs. palette_check.py prüft die geschichtete Palette vor dem Malen. Siehe Parameter mit -h, Lesearten in der obigen Referenzdatei. Ausgabe in ein temporäres Verzeichnis schreiben, nicht in das Projekt.

  python <skill-directory>/scripts/sv_profile.py shot.png -o <temp-dir> -r "!environment:0,0,1,1" -r "player:0.42,0.40,0.50,0.55" -r "hud:0,0.88,1,1"
  

• Skizzenrahmen nur für kontrollierte Experimente: Wenn keine Screenshots vorhanden sind, können Farbblöcke für Rahmen verwendet werden, aber ändere nur eine Variable pro Schritt, die Beleuchtung muss ungefähr realistisch sein. Zahlen, die auf selbstgebauten Bildern gemessen werden, dürfen weder als „Ist-Zustand“ verwendet noch zum Nachweis der Konformität eines eigenen Designs herangezogen werden.

• Zahlen sind nur Beweise: Die Schlussfolgerung kehrt immer zur Frage zurück: „Kann der Spieler erkennen, was er erkennen muss?“ Wenn eine Abnahme erforderlich ist, spezifiziere die Metriken für die Spieler-Wiederholungsprüfung.

8. Ausgabe

Die Überprüfung ist standardmäßig schreibgeschützt: Assets, Code und Projektdokumentation werden nicht geändert, Änderungen werden nur als Vorschläge formuliert. Beantworte zuerst direkt die Frage des Benutzers; dieselbe Einschätzung nur einmal geben.

• Screenshot-Überprüfung: Zuerst ein Fazit in einem Satz. Funde nach Auswirkungen auf das Gameplay sortieren: zuerst „Wo bin ich, wo ist der Feind, was wird mich treffen“ und UI-Verdeckung, dann Umgebung vs. Charakter um Aufmerksamkeit, zuletzt Stil und technische Spuren. Jeder Eintrag enthält: Position, Phänomen, verletztes Prinzip, minimalste Änderung.

• Vorher-Nachher-Vergleich: Punkt für Punkt beantworten, ob sich das, „was der Spieler lesen muss“, verbessert oder verschlechtert hat; die Einschätzung zu dieser Screenshot-Gruppe und das, was für die aktuelle Version zu tun ist, getrennt darlegen.

• Reine Textdiagnose: Die wahrscheinlichste Ursache und die Reihenfolge der Fehlersuche angeben, die der Benutzer selbst durchführen kann, sowie konkrete Schritte im Editor; auch mögliche Ursachen außerhalb des Bildes auflisten (Timing, Trefferbox, Kamera, Sound).

• Standards definieren: Zuerst die Sortierung aus Abschnitt 1 abschließen, dann den Bereich jeder Ebene, die Zugehörigkeit zu exklusiven Slots, die Einschränkungen von Fläche, Dauer und Anzahl sowie konforme vs. nicht konforme Beispiele dokumentieren. Die Standards müssen direkt umsetzbar sein:

  • Jede vom Benutzer genannte Elementklasse abdecken;
  • Werte in den Einheiten des Ausführenden als Startwerte angeben (Rasterpunkte, Pixel, Sekunden, Felder in der Engine) und mit „muss getestet werden“ kennzeichnen; keine Zahlen verweigern, nur weil kein Screenshot vorliegt;
  • Die Renderreihenfolge und Steuerungsregeln notieren: Wer überdeckt wen, Stapellimit, wann wird geräumt;
  • Zum Schluss einige rote Linien und die Einführungsreihenfolge auflisten.

  Wenn vorhandene Kunst existiert, aber kein Screenshot geliefert wurde, bitte den Benutzer gleichzeitig um einen Screenshot zur Kalibrierung.

Gemeinsame Regeln:

• Bei unzureichenden Beweisen die Schlussfolgerung reduzieren, nicht nur einen Satz am Ende hinzufügen; keine Zahlen von Dingen extrapolieren, die nicht im Screenshot sind.
• Wenn der Zweck eines Elements unklar ist, zuerst im Projekt nachsehen; wenn nicht zu finden, zwei mögliche Schlussfolgerungen mit Bedingungen angeben und den Benutzer fragen.
• Bei mehreren möglichen Ursachen zuerst eine Diagnose geben, die schnell überprüft werden kann, dann je nach Fall eine Lösung vorschlagen.
• Vor dem Vorschlag einer Lösung prüfen, was im Projekt bereits getan oder abgelehnt wurde. Als Referenz nur den Projektstandard oder konforme Frames des Projekts verwenden, nicht die Zahlen einer Referenz als Norm.
• Den etablierten Kunststil des Projekts nicht eigenmächtig ändern; die Vorteile und Kosten im Vorschlag erläutern.