diff --git a/00_aMeta/handrEichung/design_doku-WebUiCanvas.md b/00_aMeta/handrEichung/design_doku-WebUiCanvas.md new file mode 100644 index 0000000..5dd89ad --- /dev/null +++ b/00_aMeta/handrEichung/design_doku-WebUiCanvas.md @@ -0,0 +1,71 @@ +# Design-System: Maschinen-Instanzen (Project X Tribut) + +Dieses Dokument definiert die Erweiterung des Farbschemas aus `game_miner4_design.md` in ein modulares UI- und Grafik-Konzept für Webanwendungen und HTML5-Canvas-Umgebungen. + +## 1. Die Semantische Farb-Hierarchie (Erweitert) + +Wir nutzen die Farben nicht nur zur Dekoration, sondern als Informations-Layer. + +| Farbe | Hex | Verwendung in UI & HUD | +|---------|---------|---------| +| **Deep Void** | `#05070a` | Globaler Background, Layer-Tiefe (negativ) | +| **Terminal Base** | `#0b0e14` | Panel-Backgrounds, aktive Inhaltsbereiche | +| **Tech Cyan** | `#00f2ff` | Primäre UI-Interaktion, aktiver Pfad, Schild-Status | +| **Amber Gold** | `#ffb700` | Warnungen, Missionsziele, Gold-Ressourcen | +| **Critical Red** | `#ff3e3e` | Gegner-Marker, kritische Zustände, Stopp-Buttons | +| **Harvest Green** | `#00ff73` | Erfolg, Auffüllen, freundliche Interaktion | +| **Steel Grey** | `#888899` | Inaktive Elemente, Rahmen, nicht-interaktive Text-Daten | + +## 2. Visuelle Identität (Concept Art & HUD) + +### 2.1 Typografie + +Verwende ausschließlich Monospace-Fonts, um den Terminal-Look zu unterstreichen. + +1. **Font-Familien:** *JetBrains Mono*, *Fira Code* oder *Courier Prime*. +2. **Stil:** Kleinbuchstaben für Beschriftungen, **fettgedruckt** für Statusmeldungen. +3. **Lesbarkeit:** Leichter Zeilenabstand (`1.4em`), dezente Text-Schatten bei Glow-Effekten. + +### 2.2 HUD-Elemente (Canvas) + +1. **Glitch-Effekte:** Kurze, pulsierende farbige Linien (Tech Cyan) am Rand von Canvas-Elementen. +2. **Scan-Lines:** Ein transparenter Overlay-Layer (`rgba(255, 255, 255, 0.03)`) mit horizontalen Scan-Linien über dem gesamten Spielfeld. +3. **Rahmen:** Keine abgerundeten Ecken (oder nur extrem minimale `2px`). Stattdessen eckige Klammern (`[ ]`) an den Ecken aktiver Panels. + +## 3. UI-Komponenten für Webanwendungen + +### 3.1 Buttons & Interaktion + +1. **Normal:** Rand `1px` Steel Grey, Hintergrund transparent, Text Steel Grey. +2. **Hover:** Rand `1px` Tech Cyan, Glow-Effekt (`box-shadow: 0 0 8px #00f2ff`), Text Tech Cyan. +3. **Active:** Hintergrund Tech Cyan, Text Deep Void. + +### 3.2 Panels & Container + +1. Verwende `backdrop-filter: blur(4px)` auf `Terminal Base`. +2. Rahmen immer `1px` hart, keine Schatten, außer für schwebende Overlays. Diese benötigen einen sehr harten, dunklen Schatten. + +## 4. Grafik-Asset-Regeln (Asset Pipeline) + +1. **Minimalismus:** Keine Verläufe (Gradients). Nutze klare Trennung von Primärfarben. +2. **Vektor-Stil:** Alle Icons sollten als scharfe SVGs ohne weiche Kanten umgesetzt werden. +3. **Lichtquellen:** Wenn Lichteffekte benötigt werden, nutze einen harten Glow (kein sanftes Auslaufen). + +## 5. Umsetzung in HTML/JS (CSS-Variablen Beispiel) + +```css +:root { + --bg-deep: #05070a; + --bg-panel: #0b0e14; + --accent-cyan: #00f2ff; + --accent-amber: #ffb700; + --accent-red: #ff3e3e; + --text-dim: #888899; +} + +.panel { + background-color: var(--bg-panel); + border: 1px solid var(--text-dim); + font-family: 'JetBrains Mono', monospace; + color: var(--text-dim); +} diff --git a/00_aMeta/handrEichung/game_miner4_design.md b/00_aMeta/handrEichung/game_miner4_design.md new file mode 100644 index 0000000..9940771 --- /dev/null +++ b/00_aMeta/handrEichung/game_miner4_design.md @@ -0,0 +1,103 @@ +# REVERSE GAME DESIGN DOCUMENT (GDD) + +**Projekt:** Maschinen-Instanzen – Asteroiden-Sektor (Project X Tribut) + +**Version:** 1.0.0 +**Genre:** Hard-Sci-Fi / Retro-Shmup (2.5D) +**Setting:** Das „Computer Historyz“-Universum (Sektor: Oortsche Wolke 42) + +## 1. Vision & Kernkonzept + +Ein endloses, horizontales Shoot-'em-up in 2D, das innerhalb einer echten 3D-Umgebung gerendert wird. + +Der Spieler steuert eine kybernetische Ernte-Instanz (Bergbau-Schiff), die am Rand eines gigantischen, planetengroßen Maschinen-Ansaugstutzens operiert. + +Das Spiel kombiniert rasante Arcade-Asteroiden-Zerstörung mit taktischem Power-Routing (Energie-Management) unter harten Hard-Sci-Fi-Rahmenbedingungen. + +## 2. Globale Farbpalette & Ästhetik + +Diese Farbpalette definiert das visuelle Leitbild für alle zukünftigen Spiele in diesem Universum, unabhängig davon, ob sie als Pixel-Art-, Vektor- oder PBR-basierte 3D-Titel umgesetzt werden. + +### 2.1 UI-, HUD- und Terminal-Farben (Window-Maker-Stil) + +Die Benutzeroberfläche basiert auf dem kalten, funktionalen Look klassischer Unix-Terminals, kombiniert mit modernen Glow-Effekten. + +| Farbe | Hex-Code | Semantischer Nutzen | +|---------|---------|---------| +| Deep Void | `#05070a` | Globaler Weltraum-Hintergrund, tiefste Schatten. | +| Terminal Base | `#0d1117` | Hintergrund für Menüs, HUD-Panels und Dialogfenster. | +| Panel Border | `#444c56` | Rahmen von UI-Fenstern, häufig kombiniert mit inneren Highlights für 3D-Bevel-Effekte. | +| Tech Cyan | `#58a6ff` | Primäre Akzentfarbe. Standard-Text, normale Laser, Hologramme, aktiver Schild (HP > 60 %) und UI-Glow. | +| Harvest Green | `#39d353` | Erfolgs-Feedback, gesammelte Ressourcen und Laser-Stufe 2. | +| Amber Gold | `#d29922` | Warnungen, Highscores, wertvolle Materialien, Schild (HP < 60 %) und Laser-Stufe 3. | +| Critical Red | `#f85149` | Lebensgefahr, kritischer Schild (HP < 30 %), Triebwerks-Exhaust und Laser-Stufe 4+. | + +### 2.2 Materialfarben (3D-Modelle und 2D-Sprites) + +Für gerenderte 3D-Objekte und gezeichnete 2D-Sprites gelten folgende Materialdefinitionen: + +| Element | Farbe | 3D-Eigenschaften (PBR) | 2D-Eigenschaften | +|---------|---------|---------|---------| +| Maschinen-Hülle | `#1f6feb` (Blau-Metallic) | Roughness: 0.4, Metalness: 0.8 | Satte dunkle Blautöne mit hartem weißen Specular-Highlight | +| Triebwerke / Rohre | `#21262d` (Dunkelgrau) | Roughness: 0.9, Metalness: 1.0 | Nahezu schwarze Flächen mit hohem Kontrast | +| Eis-Asteroid | `#d0e8ff` (Blass-Eisblau) | Roughness: 0.9, Metalness: 0.1 | Helle Töne, geringe Schattenbildung, weiße Staubpartikel | +| Fels-Asteroid | `#6b4a31` (Braun) | Roughness: 1.0, Metalness: 0.1 | Matte, strukturierte und körnige Oberflächen | +| Eisen-Asteroid | `#888899` (Grau/Silber) | Roughness: 0.3, Metalness: 0.9 | Spiegelnde Oberflächen mit deutlich sichtbaren Glanzlichtern | + +## 3. Gameplay & Mechaniken + +### 3.1 Das Plasma-Blasen-Paradoxon (Movement) + +1. **Lore-Hintergrund:** + Das Schiff erzeugt ein Magnetfeld zum Sammeln von Weltraumstaub. Dadurch entsteht eine künstliche Atmosphäre im Vakuum. + +2. **Mechanik:** + Das Schiff wird aerodynamisch gesteuert. Es fliegt nicht auf festen Schienen, sondern neigt sich beim Steigen und Sinken entlang einer simulierten Roll-/Yaw-Bewegung. + +3. **Feedback:** + Die Plasma-Blase pulsiert visuell. Mit steigender Schildenergie wächst ihre Größe von 0.6× bis 1.5× der Schiffsausdehnung. + +### 3.2 Taktisches Power-Routing (Energie-Management) + +Die zentrale Hard-Sci-Fi-Mechanik basiert auf zwei Ressourcen: + +- **Schild (Defensive)** +- **Laser / Score (Offensive)** + +Der Spieler kann Energie in Echtzeit zwischen beiden Systemen umverteilen. + +1. **Schild laden (Defensive):** + Der Spieler opfert Score beziehungsweise Laserstufen, um den Schild wiederherzustellen. + +2. **Laser pushen (Offensive):** + Energie wird dem Schild entzogen und in die Waffensysteme umgeleitet. + +3. **Visuelle Regel:** + Dieses Risiko-Belohnungs-System muss in jeder Umsetzung über die Farbskala von `Tech Cyan` bis `Critical Red` dargestellt werden. + +### 3.3 Asteroiden-Split-Physik & Materialklassen + +Gegnerische Asteroiden teilen sich beim Zerstören in zwei kleinere und schnellere Fragmente. + +1. **Eis (Level 1-2):** + 1× Basis-HP. Schnell, aber äußerst fragil. + +2. **Gestein (Level 2-4):** + 2× Basis-HP. Standardgegner. + +3. **Eisen (Level 3-5):** + 4× Basis-HP. Massive Brocken mit dreifachem Scorewert. Schwache Laser werden vollständig blockiert. + +### 3.4 Das Cylon-Recovery-System (Game Over / Respawn) + +1. **Mechanik:** + Es existiert kein endgültiger Tod. Beim Verlust der Hülle wird das Speicherabbild gesichert. + +2. **Ablauf:** + Das Spiel pausiert. + + Ein Diagnostik-Terminal meldet: + + ```text + DIAGNOSTICS + Hull Destroyed