jpmschweitzerandClaude Fable 5
ca255dc16c
Governance: - D-166 amendment (2026-06-12): outside-in build order (geo → econ-on-world → building templates → door boundary contracts → NPC/interiors → gameplay); Phase 5 ramps in parallel once outsides are walkable (gate: T-962) - D-114/D-115/D-117/D-118/D-120 marked superseded by D-166 (inbound anchors fixed) - D-221 amended: milestones retired, cascade-hierarchy gating is canonical - Q-077/Q-068/Q-036 resolved (answered by events); Q-110 (scale anchoring) and Q-111 (live-econ coupling) opened from cascade grounding Ticket tree (147 stray backlog tickets dispositioned): - New parents: T-1036 (post-cascade gameplay parking), T-1037 (maintenance initiative) - Re-homed: 15 → Phase 4 (T-750), 30 → Phase 5 (T-749), 11 → Phase 6 (T-751), 21 → gameplay parking, 28 → maintenance; children follow their epics - Cancelled 12 administrative shells (mirror tickets, emptied pre-cascade umbrellas, v0.2 pivot shell T-603); T-9/T-28 closed done; T-745 in_progress - New grounded tickets T-1038..T-1044: inter-settlement road/rail graph, L3→L4 dispatch threading, river-channel-anchor bug, 64m landform-repeat bug, region seam blending, road-entry octants, drainage re-run fix Docs: - CLAUDE.md cascade paragraph updated to the amended rule - 20 v0.1-era docs/design files marked superseded with pointers; content-structure-canonical retitled (v0.2 label dropped) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
149 lines
6.2 KiB
Markdown
149 lines
6.2 KiB
Markdown
---
|
||
title: "Character Creation Screen Wireframe"
|
||
description: "UI layout specification for the character creation screen — wireframe deliverable for ticket #685"
|
||
type: design
|
||
status: superseded
|
||
sprint: 28
|
||
ticket: 685
|
||
created: 2026-03-19
|
||
superseded_by: "D-166"
|
||
---
|
||
> **SUPERSEDED (2026-06-12, cascade-refocus sweep):** superseded by D-166 (Phase 5 player work; built on the superseded D-115 skills+bookmark scope — the D-146 tile-scale preview decision still stands). Kept as historical record; do not build against it.
|
||
|
||
|
||
# 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 (separate from the D-165 clothing palette)
|
||
- **Body type grid**: 11 options (D-159) organized as:
|
||
- Female row: Thin, Average, Muscular, Heavy, Teen
|
||
- Male row: Thin, Average, Muscular, Heavy, Teen
|
||
- Child (unlabeled row — no gendered framing)
|
||
|
||
### Head
|
||
- **Head template grid**: Trellis-generated unique heads (D-163), scrollable. Starts with 4 Quaternius starters.
|
||
- **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
|
||
- **Eyebrow selector**: Regular, Female, Teen, Thick (matches Source tier asset keys)
|
||
- **Hair color dock** (bottom): Hair primary + Hair highlight (auto) + Eyebrow tint (auto from hair, independent override) + Facial hair tint (auto from hair, independent override — single tint for both beard and moustache)
|
||
|
||
### 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, Earring L, Earring R, Necklace
|
||
- **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-160 | 18 body segments (clothing hides covered segments) |
|
||
| D-165 | Color picker palette (5×9 muted hues + 1×9 neutral gray — clothing colors only, not skin tones) |
|
||
|
||
---
|
||
|
||
## 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.
|
||
- **Compositor coverage:** Changing body type or clothing in the editor must update segment visibility on the `CharacterCompositor`. Clothing items hide the body segments they cover (e.g. torso clothing hides `seg_torso`). The preview must reflect this in real time — switching from a tank top to a jacket should hide the arm segments underneath.
|
||
- **Eyebrow tint** and **facial hair tint** are independent from hair color. Default: auto-derive from hair primary. Player can override to any color via the color picker.
|
||
- Earring L/R and Necklace are jewelry accessory slots — they use `accessory_primary` / `accessory_secondary` color regions like other accessories.
|