docs(design): add character creation screen wireframes (#685)

6 wireframe views (Body, Head, Hair, Clothing, Accessories, Color Picker) as Frame0 JSON source + PNG exports, plus summary spec document. Layout: 60% preview pane with [Q]/[E] rotation, 35% tabbed panel with search bar, scrollable grid, and docked color controls per tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 16:28:00 +01:00
parent a435163fd0
commit 93260ed696
13 changed files with 2638 additions and 0 deletions
@@ -0,0 +1,141 @@
+---
+title: "Character Creation Screen Wireframe"
+description: "UI layout specification for the character creation screen — wireframe deliverable for ticket #685"
+type: design
+status: active
+sprint: 28
+ticket: 685
+created: 2026-03-19
+---
+
+# Character Creation Screen Wireframe
+
+**Ticket:** #685
+**Designed by:** Jeroen (project lead)
+**Tool:** Frame0
+**Downstream:** #694 (client: character creation screen), #705 (character editor Godot tool)
+
+---
+
+## Wireframe Files
+
+All source JSON and exported PNGs in `docs/design/wireframes/character-creation/`:
+
+| File | Description |
+|------|-------------|
+| `main-layout.json/.png` | Body tab (default view on open) |
+| `head-tab.json/.png` | Head template + eyebrows tab |
+| `hair-tab.json/.png` | Hair style + facial hair tab |
+| `clothing-tab.json/.png` | Clothing slot selector tab |
+| `accessories-tab.json/.png` | Accessories slot selector tab |
+| `color-picker.json/.png` | Color picker modal (opens on swatch click) |
+
+---
+
+## Screen Layout
+
+### Preview pane (left, ~60% of screen)
+- Live 3D compositor in SubViewport (D-149, D-146)
+- Default camera: **frontal (-5°)** for editor (D-158), toggle to dramatic (-30°)
+- Default facing: **South** (face-forward)
+- **[Q] / [E]** rotate buttons — incremental cardinal rotation (D-155)
+- Always LOD Tier 0, no degradation
+
+### Tab panel (right, ~35% of screen)
+5 tabs: **Body**, **Head**, **Hair**, **Clothing**, **Accessories**
+
+Each tab follows the same layout pattern:
+1. **Search bar** (top, fixed) — scoped to current tab contents
+2. **Scrollable content grid** (middle) — item/option thumbnails
+3. **Color dock** (bottom, fixed, non-scrolling) — context-sensitive color controls
+
+### Footer (full width, bottom)
+- **[ESC] Back** — return to main menu
+- **[R] Randomise** — randomize all slots
+- **[ENTER] Start** — confirm character and begin game
+
+---
+
+## Tab Contents
+
+### Body
+- **Skin tone dock** (bottom): 9 preset swatches (D-165 does not apply — skin tones are separate from clothing colors)
+- **Body type grid**: 11 options (D-159) organized as:
+  - Female row: Thin, Average, Muscular, Heavy, Teen
+  - Male row: Thin, Average, Muscular, Heavy, Teen
+  - Other row: Child
+
+### Head
+- **Head template grid**: Trellis-generated unique heads (D-163), scrollable. Starts with 4 Quaternius starters.
+- **Eyebrow selector**: Thick, Thin, Arched, None
+- **Skin tone dock** (bottom): same 9 swatches as Body tab (shared state)
+
+### Hair
+- **Hair style grid**: Short A, Short B, Medium A, Medium B, Long A, Bald (and more via scroll)
+- **Facial hair selector**: None, Stubble, Beard, Moustache
+- **Hair color dock** (bottom): Primary swatch + Highlight swatch (auto-derives from primary if unset)
+
+### Clothing
+- **Slot selector** (fixed): Torso, Legs, Feet, Hands — click to filter the grid below
+- **Item grid**: Shows items for the selected slot (Coveralls, Jacket, Shirt, etc.)
+- **Item color dock** (bottom): Primary / Secondary / Accent swatches. Secondary and Accent auto-derive if unset.
+
+### Accessories
+- **Slot selector** (fixed): Hat, Goggles, Mask, Backpack, Belt, Wrist L, Wrist R
+- **Item grid**: Shows items for the selected slot
+- **Item color dock** (bottom): Primary / Secondary swatches
+
+---
+
+## Color Picker Modal
+
+Opens when any color swatch in a dock is clicked. Overlays the tab panel.
+
+- **54-swatch palette** (6 rows × 9 columns, D-165):
+  1. Reds (H=0° S=35%)
+  2. Greens (H=150° S=28%)
+  3. Blues (H=215° S=35%)
+  4. Purples (H=275° S=28%)
+  5. Browns (H=28° S=35%)
+  6. Neutral grays (#000000 → #ffffff, even steps)
+- **Hex input field** with Apply button for custom colors
+- **Recent custom colors**: 9 slots, persisted at game (save) level
+- **Cancel / OK** buttons
+
+---
+
+## Keyboard Navigation
+
+Full keyboard/controller support required (existing `character_select.gd` is keyboard-friendly):
+
+- **Tab / Shift+Tab**: cycle between tabs
+- **Arrow keys**: navigate within grids
+- **Enter**: select item / confirm
+- **Q / E**: rotate character in preview
+- **R**: randomize
+- **ESC**: back to main menu
+
+---
+
+## Design Decisions Referenced
+
+| Decision | Summary |
+|----------|---------|
+| D-146 | Tile-scale preview with heavy zoom (compatible with 3D via SubViewport) |
+| D-149 | 3D characters rendered live |
+| D-153 | Player not visually distinct from NPCs |
+| D-155 | Cardinal rotation only in editor |
+| D-157 | Game start = alarm clock / fade from black (editor is separate context) |
+| D-158 | Frontal camera default for editor |
+| D-159 | 11 body types (5 types × 2 genders + 1 child) |
+| D-163 | Trellis-generated unique heads |
+| D-165 | Color picker palette (5×9 muted hues + 1×9 neutral gray) |
+
+---
+
+## Notes for Implementation (#694)
+
+- Held items (held_l, held_r) are **not** in the character creator — those are play-time decisions. Wrist slots replace them.
+- The color picker modal should preview changes live on the 3D model before OK is pressed.
+- Search filters items by name within the active tab only.
+- The skin tone dock appears on both Body and Head tabs and shares state — changing it on one updates the other.