Kunstrichtung — Pour Decisions

Das Bild besteht zu etwa 80 % aus simulierten Pixeln. Das Kunstbudget wird nur für Folgendes ausgegeben: Materialpalette, Leuchten/Nachbearbeitung, UI, Symbole, Steam-Capsule-Grafik. Harte Regel: Keine generativen KI-Bilder (würde Steam-Offenlegung auslösen); externes Material nur aus der Whitelist (docs/research/03_assets_legal.md) und in docs/art/ASSET_LICENSES.md eintragen. Unsere Stärken: Shader, prozedurales Zeichnen, Farbmathematik. Schwäche: handgezeichnete Illustrationen → alle Entscheidungen tendieren zu „mit Code berechnen“.

Erweiterte Informationen (nur bei Bedarf lesen):

references/material-palette.md — 14 Material-Rampen, HEX, Rauschen und Leuchtparameter (Startwerte)
references/urp-postfx.md — URP-Volume-Rezepte, CRT-Shader-Spezifikation, Pixel-Perfect-Einstellungen
references/ui-juice.md — Balatro-UI-Analyse, Score-Animation-Timing, Easing-Werte
references/steam-capsule.md — Capsule-Spezifikationen, Valve-Regeln, Vorgehen ohne Illustrator

1. Farbtheorie (in dieser Reihenfolge entscheiden)

1.1 Value (Helligkeit) vor Hue

Design mit Graustufen: Nach Umwandlung in Graustufen (luma = 0.299R + 0.587G + 0.114B, oder OKLab L) müssen Hintergrund, Materialien und UI noch Schichten bilden. Was sich in Graustufen nicht trennen lässt, kann auch durch Farbänderung nicht gerettet werden.

Helligkeitsschichten dieses Spiels (Ziel-L, OKLab 0–1):

Schicht	L-Bereich	Inhalt
Hintergrund/Becherinnenwand	0.12–0.22	Dunkel, geringe Sättigung, kühl-violett
Inerte Materialien (Stein, Sand, Schießpulver, Samen)	0.30–0.65	Mittlere Helligkeit, mittlere bis niedrige Sättigung
Fluide (Wasser, Öl, Säure)	0.35–0.75	Mittlere Helligkeit, Erkennung durch Dynamik und Transparenz
Reaktion/Leuchten (Feuer, Lava, Funken, Score-Partikel)	0.75–1.0 + HDR	Am hellsten und gesättigtsten im gesamten Bild
UI-Zahlen/Buttons	0.85–1.0	Auf eigenem Panel, getrennt durch Panel-Hintergrundfarbe

Regel: Der Fokus muss das hellste und gesättigtste Element sein. Fokus = Position der aktuellen Reaktion + Score-Zahlen. Nichts anderes darf heller sein.

1.2 Hue Shifting (Farbtonverschiebung)

Eine Rampe (dunkel→hell) ändert nicht nur die Helligkeit: Helle Bereiche verschieben sich zu warmen Farben (Gelb), dunkle zu kalten (Blau/Violett). 10–20° pro Schritt, 20° als Obergrenze (Slynyrd Pixelblog 1).
Verwende nicht „Schwarz hinzufügen“ für Schatten oder „Weiß hinzufügen“ für Lichter → wird schmutzig und grau (Pillow/Muddy).
Sättigungskurve: Mitte am höchsten, Enden fallen ab, aber nicht auf 0 oder 100 %; dunkle Farben können gesättigter sein als helle. Vermeide gleichzeitige hohe Sättigung + hohe Helligkeit (grell), diese Position bleibt für leuchtende Materialien reserviert.

1.3 Sättigungshierarchie

Sättigung ist der zweite Aufmerksamkeitsmagnet. Drei Stufen:
1. Hoch: Leuchtende Materialien, Score-Effekte, Mult-Zahlen.
2. Mittel: Hauptfarben allgemeiner Materialien, interaktive UI.
3. Niedrig: Hintergrund, Becherglas, Panels, nicht-interaktiver Text.
Hintergrundsättigung ≤ 25 % (HSV S). Das Gesamtbild „größtenteils niedrige Sättigung, wenige hohe Sättigungen“ erzeugt erst einen Fokus.

1.4 Begrenzte Palette (Limited Palette)

Verwende eine einzige Hauptpalette, aus der alle Materialien, UI und Symbole ihre Farben beziehen. Vorteil: Konsistenz stellt sich automatisch her, KI-Agenten wählen nicht willkürlich Farben.
Startpunkt: Resurrect 64 (lospec.com/palette-list/resurrect-64), 64 Farben, Rampen mit bereits durchgeführtem Hue Shift, dunkle Bereiche tendieren zu Violett, geeignet für dunklen Hintergrund + Leuchten. Alternativen: Endesga 32, Apollo (46 Farben), AAP-64. Die Farbwerte der Palette sind nicht urheberrechtlich geschützt. Die Quelle kann auf der Lospec-Seite notiert werden, ist aber nicht zwingend erforderlich (Annahme, geringes Risiko).
Eigener Erstellungsprozess (falls erforderlich):
1. Wähle eine helle Mittelfarbe (S, B am wichtigsten, H beliebig).
2. Erweitere auf 5–9 Schritte in beide Richtungen: B von dunkel nach hell (Schritte werden kleiner, je näher an 100 %), S in der Mitte am höchsten, H +10~20° pro Schritt (in Richtung Hell-Warm).
3. Rotiere die gesamte Rampe um H 45°, um andere Farbfamilien zu erzeugen.
4. Kopiere den mittleren Teil und entsättige ihn → neutrale Graurampe (für UI/Hintergrund).
5. Alle Farbwerte in Game/Assets/Art/Palette/palette.png (1px pro Farbe) + C# PaletteSO, Code referenziert nur den Index, schreibt kein HEX fest.
Erlaubte Ausnahme: HDR-Leuchtwerte (>1.0) dürfen nur durch Multiplikation der Palettenfarbe mit der Intensität erzeugt werden, keine neuen Farben.

2. Lesbarkeitsregeln

Graustufentest: Jede Farbänderung als Screenshot in Graustufen umwandeln und prüfen (QA-Liste Punkt 1).
Benachbarte Materialien müssen sich in Value oder Hue deutlich unterscheiden: ΔL (OKLab) ≥ 0,08 oder Δhue ≥ 40°. Besonders behandeln für leicht verwechselbare Kombinationen:
- Feuer vs. Lava vs. Sand (alle warm) → Feuer am hellsten und dynamisch, Lava dunkelrot mit hellen Linien und langsam, Sand nicht leuchtend und mittlere Helligkeit.
- Säure vs. Pflanze (beide grün) → Säure gelb-grün + leichtes Leuchten + Blasen, Pflanze dunkel-blau-grün, nicht leuchtend.
- Dampf vs. Rauch → Dampf weiß, kühl, steigt schnell auf; Rauch grau-violett, dunkler, breitet sich langsam aus.
Farbenblindheit: Darf nicht nur auf Rot/Grün-Unterscheidung basieren. Jedes Material hat ein weiteres, nicht-farbliches Merkmal (Dynamik, Texturrauschtyp, Leuchten, Transparenz). Mit Coblis oder Shader-Simulation von Deuteranopie prüfen.
UI vom Spielbildschirm trennen: Der Simulationsbereich enthält nur Materialpixel; UI befindet sich auf Panels außerhalb des Bechers, die Panels haben neutrale, niedrig gesättigte Farben + 1px Rand. UI verwendet keine Materialfarbe als Hintergrund (vermeide „Ist das Sand?“). Score-Zahlen dürfen in den Simulationsbereich schweben, müssen aber einen Rand/Schatten haben und innerhalb von 0,6 Sekunden wieder verschwinden.
Einzigartiger Fokus: Es gibt immer nur eine Gruppe von Elementen, die „um Aufmerksamkeit ringt“. Bei vielen Reaktionen den Glow sekundärer Partikel reduzieren (siehe §4 Glow Budget).
Silhouette: Die Formen von Bechern, Buttons und Symbolen müssen in einer rein schwarzen Silhouette erkennbar sein.

3. Pixelkunst-Grundlagen

Feste Pixel-Skalierung: 1 Simulationszelle = 1 Spielpixel. UI-Pixel-Material mit demselben Maßstab (empfohlene Sim-Auflösung 320×180 oder 384×216, ganzzahlige Vergrößerung auf 1080p/1440p/4K). Mischen verschiedener Maßstäbe verboten.
Keine Mixels: Kein Pixel-Material darf nicht ganzzahlig skaliert oder gedreht werden (Drehung erzeugt Pixel unterschiedlicher Größe). Für UI, die gedreht werden muss (z. B. Kartenwackeln), eine hochauflösende UI-Ebene verwenden oder in einer niedrig aufgelösten Render-Texture drehen und dann ganzzahlig vergrößern.
Rampe: Jedes Material 3–5 Farben (siehe references/material-palette.md). Mehr als 5 Farben sind bei 1px-Partikeln nicht erkennbar.
Richtige Verwendung von Dithering: Nur für (a) großflächige Farbverläufe (Hintergrund, Becherglasreflexionen), (b) Transparenz-Illusionen (Rauch, Dampf mit Checkerboard/Bayer 4×4 Alpha). Kein Dithering bei kleinen Objekten, Symbolen, Text; kein World-Space-Dithering bei dynamischen Partikeln (würde flackern), Dither-Muster an Bildschirm- oder Zellenkoordinaten binden.
Manuelles Anti-Aliasing: Nur bei diagonalen/gebogenen Linien von UI-Symbolen und Logos, mit einer Mischfarbe zwischen Linien- und Hintergrundfarbe 1px einfügen. Kein AA an der Außenkontur zum transparenten Hintergrund (würde bei Hintergrundwechsel schmutzige Ränder erzeugen).
Banding: Parallele, gleich breite Farbbänder entlang von Konturen vermeiden (sieht aus wie Höhenlinien einer Karte).
Pillow Shading verboten: Lichtrichtung ist fest (oben links), Schatten sind nicht „von den Rändern zur Mitte hin heller werdend“.
Schriftarten: Pixel-Schriftarten nur aus der Whitelist (Cubic 11, Fusion Pixel Font, Kenney Fonts); als ganzzahliges Vielfaches der nativen Pixelgröße anzeigen; TMP mit Point-Sampled Bitmap oder hochsampled SDF.

4. Wie man Materialien in einem Falling-Sand-Spiel einfärbt

Beobachtungen aus Referenzwerken (Noita, The Powder Toy, Sandspiel, Sandustry; teilweise Beobachtungsschlussfolgerungen, mit „nicht verifiziert“ gekennzeichnet):

Farbrauschen pro Partikel: Bei der Partikelerzeugung ein Zufalls-Byte speichern (Sandspiels ra), beim Rendern damit innerhalb der Materialrampe eine Farbe auswählen oder die Helligkeit anpassen → Sand, Stein erhalten eine körnige Textur. Das Rauschen wird bei der Erzeugung festgelegt, die Farbe folgt dem Partikel bei Bewegung (nicht jeden Frame neu würfeln, das flackert).
Feste Körper mit Weltkoordinaten-Textur: Noita-Materialien können texture_file angeben, feste Körper sampeln die Textur basierend auf der Weltposition; wenn sie zu fallenden Partikeln werden, behalten sie die aktuelle Farbe (Schlussfolgerung aus Wiki-Eigenschaften, Details nicht verifiziert). Unser Stein/Glas/Eis kann Zellenkoordinaten-Hash verwenden, um aus der Rampe eine stabile Textur zu erzeugen.
Fluide verlassen sich nicht auf Rauschen, sondern auf Bewegung: Wasser/Öl haben eine geringe Rauschamplitude (±3 % L), plus (a) eine hellere Highlight-Zelle an der Oberfläche, (b) feines Flimmern abhängig von Geschwindigkeit/Zeit.
Leuchtende Materialien (Emissive): Noita hat gfx_glow (0–255) und gfx_glow_color. Unser Ansatz: Jede Zelle hat einen emission-Wert, rendert eine HDR-Farbe = Palettenfarbe × (1 + emission × k), die an URP Bloom übergeben wird. Feuer, Lava, Funken, Säure (schwach), glühendes Glas leuchten.
Temperaturfarbe: The Powder Toy hat einen Hitzebildmodus; wir übernehmen nur den Geist − bei hoher Temperatur verschiebt sich die Farbe entlang der Schwarzlichtkurve (dunkelrot→orange→gelb→weiß) in Richtung hell, beim Abkühlen zurück zur ursprünglichen Rampe.
Reaktionsblitz: In dem Frame, in dem eine Reaktion stattfindet, wird die Emission dieser Zelle auf Maximum gesetzt, 2–4 Frames Abklingzeit → der Spieler „sieht“ die Reaktion. Dies ist das wichtigste Feedback für die Lesbarkeit.
Glow Budget: Wenn die Anzahl der gleichzeitig leuchtenden Zellen > N (Start 2.000) ist, wird die Emission jeder Zelle proportional reduziert, um die Gesamthelligkeit stabil zu halten und ein Überbelichten des Bildes zu vermeiden.

Implementierungshinweise: Simulationsdaten (Material-ID, Zufalls-Byte, Temperatur, Emission) als RGBA8-Texture verpacken und hochladen, Fragment-Shader schlägt in einer Paletten-LUT (256×1 oder materials×ramp kleine Textur) nach, um die Farbe zu bestimmen. CPU berechnet keine Farben.

5. Nachbearbeitung (Unity 6 URP) – Schwerpunkte

Detaillierte Rezepte in references/urp-postfx.md. Kernpunkte:

Kamera HDR aktivieren; Bloom Threshold 1.0–1.1 (nur HDR>1 leuchtende Materialien dürfen überstrahlen, normale Materialien nicht bloomen), Intensity 0.6–1.0 als Startwert, Scatter 0.6–0.75, High Quality Filtering aktivieren (reduziert Flackern).
Tonemapping: Neutral (ACES würde Farbtöne ändern und die Palette verdunkeln). Oder None + eigene Steuerung.
Color Grading LUT: Nur leichte Vereinheitlichung (storyboardartiges „Feueratmosphäre“), verändert nicht die Value-Struktur der Palette; Color Lookup Contribution ≤ 0.5.
CRT/Scanline standardmäßig deaktiviert, Schalter und Intensität im Einstellungsmenü; Steam-Screenshots/Trailer hauptsächlich „aus“, maximal 1 Screenshot mit aktiviertem Effekt.
Pixel Perfect Camera (URP integriert, nicht das alte 2D Pixel Perfect Paket installieren): Grid Snapping = Upscale Render Texture; Bloom nach der Vergrößerungsauflösung durchführen, damit keine blockigen Lichteffekte entstehen.

6. UI-Stil (Balatro-artiger Score-Attack)

Detailliertes Timing in references/ui-juice.md. Zwingend einzuhalten:

Farbe ist die Sprache des Punktestands: Chips = Blau, Mult = Rot, Geld = Gold, ×Mult = Roter Hintergrund mit weißer Schrift. Im gesamten Spiel festgelegt, nicht umwidmen.
Einzeln abwickeln: Reaktionen springen einzeln hervor (+chips / +mult), jede mit Number Pop (scale 1.0→1.3→1.0, Overshoot-Easing), Tonhöhe steigt.
Vibration nach Größenordnung gestaffelt: Je größer der Score, desto größer die Amplitude und desto länger die Dauer; maximal 8px / 1°. Option „Bildschirmvibration reduzieren“ anbieten (Barrierefreiheit).
Zahlen immer lesbar: Dicker Rand (2px dunkle Farbe) + Schatten; große Zahlen vor der wissenschaftlichen Notation mit Tausendertrennzeichen.
Juice darf Informationen nicht überdecken: Partikel und Lichtblitze dürfen chips×mult und Zielscore nicht verdecken.

7. Symbole (16–32px)

Zuerst 16px-Version erstellen, dann auf 32px vergrößern und Details hinzufügen (nicht 32px auf 16px verkleinern).
Ein Symbol = ein Konzept, eine Silhouette; 1px dunkler Rahmen (dunkelste Palettenfarbe), damit es auf jedem Hintergrund funktioniert.
Jedes Symbol maximal 4–5 Farben (Rahmen, Dunkel, Mittel, Hell, Akzent). Lichtquelle immer oben links.
Vial-Symbole (Materialfläschchen): Einheitliche Flaschenform, nur die Flüssigkeitsfarbe und ein kleines Symbol ändern (Flamme, Wassertropfen, Totenkopf…) → Spieler erkennt doppelt durch Farbe + Symbol (farbenblindfreundlich).
Catalyst-Relikte: Form nach Seltenheit unterscheiden (rund / sechseckig / sternförmiger Rahmen), Rahmenfarbe nach Seltenheit (Grau, Blau, Lila, Gold).
Prozedurale Erzeugung: Symbole können mit C# oder Python als „Form + Palettenindex“ gezeichnet und als PNG ausgegeben werden, reproduzierbar und batch-änderbar.
Test: Auf tatsächlichem UI-Hintergrund, bei 100 % Vergrößerung betrachten; bei 50 % Vergrößerung müssen sich je zwei verschiedene Symbole noch unterscheiden lassen.

8. Steam-Capsule-Grafik

Details in references/steam-capsule.md. Schwerpunkte:

Spezifikationen: Header 920×430, Small 462×174, Main 1232×706, Vertical 748×896, Library 600×900, Hero 3840×1240 (kein Text), Logo als transparentes PNG.
Valve-Regeln: Auf der Capsule dürfen nur Spielszenen/Grafik und der Spielname/Logo (und offizieller Untertitel) sein; keine Bewertungen, Auszeichnungen, Rabattangaben, sonstiger Text.
Unser Ansatz (auch ohne Illustrator umsetzbar): Schriftart-getriebenes großes Logo + hochauflösende Simulationsrender (explosiver Reaktionsmoment) + ein klarer Fokuspunkt. Das Logo selbst ist Falling Sand: Die Buchstaben werden durch die Simulation „ausgeschüttet“ oder bestehen aus verschiedenen Materialien.
Zuerst Small Capsule machen (120×45 Vorschau muss Logo noch erkennen lassen), dann zu größeren Formaten übergehen.

9. Workflow-Regeln

Neue Farbe → zuerst in die Palettendatei einfügen, dann referenzieren; PR/Commit-Kommentar listet die neuen Indizes auf.
Jegliches externes Material (Schriftarten, Kenney UI) → in docs/art/ASSET_LICENSES.md eintragen (Dateiname, URL, Autor, Lizenz, Datum).
Alle prozeduralen Grafiken (Symbole, Logo, Capsule) mit Erstellungsskript und Parametern aufbewahren, in Game/Tools/ArtGen/ oder tools/, jederzeit wieder ausführbar.
Unsichere Parameter mit „Startwert“ kennzeichnen, nach Prototyp-Tests in den Referenzen aktualisieren.

10. Pre-Commit-Visual-QA-Checkliste

Quellen

Slynyrd Pixelblog 1 – Color Palettes (Hue Shift ≤20°, Sättigungskurve): https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes
Lospec Palette List: https://lospec.com/palette-list ; Resurrect 64: https://lospec.com/palette-list/resurrect-64 ; Endesga 32: https://lospec.com/palette-list/endesga-32 ; Apollo: https://lospec.com/palette-list/apollo ; AAP-64: https://lospec.com/palette-list/aap-64
Lospec Pixelkunst-Tutorials-Verzeichnis: https://lospec.com/pixel-art-tutorials
GameDev.net – Color Palettes: https://www.gamedev.net/articles/visual-arts/color-palettes-r4964/
Noita Wiki – Ein eigenes Material erstellen (texture_file, gfx_glow): https://noita.wiki.gg/wiki/Modding:_Making_a_custom_material
80.lv – Noita Falling-Sand-Simulation: https://80.lv/articles/noita-a-game-based-on-falling-sand-simulation/
Making Sandspiel (Pro-Partikel ra bestimmt Helligkeit, GPU-Färbung): https://maxbittker.com/making-sandspiel
The Powder Toy Quellcode: https://github.com/The-Powder-Toy/The-Powder-Toy
Unity URP Bloom: https://docs.unity3d.com/Packages/[email protected]/manual/post-processing-bloom.html
Unity URP Pixel Perfect Camera: https://docs.unity3d.com/6000.0/Documentation/Manual/urp/2d-pixelperfect-ref.html
Balatro Feedback-Design-Analyse: https://blakecrosley.com/zh-Hant/guides/design/balatro
Steamworks Store-Grafikmaterial: https://partner.steamgames.com/doc/store/assets/standard
presskit.gg Steam Capsule Art Guide: https://presskit.gg/field-guides/steam-capsule-art-guide
Coblis Farbenblind-Simulator: https://www.color-blindness.com/coblis-color-blindness-simulator/

Waipjy/ClaudeGame

Was ist ClaudeGame?

In Ihrer bevorzugten KI fragen

Dokumentation

Kunstrichtung — Pour Decisions

1. Farbtheorie (in dieser Reihenfolge entscheiden)

1.1 Value (Helligkeit) vor Hue

1.2 Hue Shifting (Farbtonverschiebung)

1.3 Sättigungshierarchie

1.4 Begrenzte Palette (Limited Palette)

2. Lesbarkeitsregeln

3. Pixelkunst-Grundlagen

4. Wie man Materialien in einem Falling-Sand-Spiel einfärbt

5. Nachbearbeitung (Unity 6 URP) – Schwerpunkte

6. UI-Stil (Balatro-artiger Score-Attack)

7. Symbole (16–32px)

8. Steam-Capsule-Grafik

9. Workflow-Regeln

10. Pre-Commit-Visual-QA-Checkliste

Quellen

Individual skills in this repo

Waipjy/ClaudeGame

Verwandte Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me