jpmschweitzer/settled-reach
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
jpmschweitzer
2026-03-22 16:28:00 +01:00
co-authored by Claude Opus 4.6
parent a435163fd0
commit 93260ed696
13 changed files with 2638 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/character-creation-screen-wireframe.md
+141
View File
@@ -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.
docs/design/wireframes/character-creation/accessories-tab.json
+449
View File
@@ -0,0 +1,449 @@
{
"name": "Character Creation — Accessories Tab",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"cam-toggle": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 620, "top": 68, "width": 88, "height": 28,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"cam-toggle-label": {
"type": "Text",
"parent": "cam-toggle",
"left": 632, "top": 73,
"text": "Frontal",
"fontColor": "#c8d8f0", "fontSize": 11
},
"btn-rot-left": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 270, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-left-label": {
"type": "Text",
"parent": "btn-rot-left",
"left": 288, "top": 597,
"text": "[Q] <",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-rot-right": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 390, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-right-label": {
"type": "Text",
"parent": "btn-rot-right",
"left": 408, "top": 597,
"text": "> [E]",
"fontColor": "#c8d8f0", "fontSize": 13
},
"right-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"tab-body": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 64, "width": 60, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-body-label": {
"type": "Text",
"parent": "tab-body",
"left": 750, "top": 71,
"text": "Body",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-head": {
"type": "Rectangle",
"parent": "right-panel",
"left": 802, "top": 64, "width": 58, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-head-label": {
"type": "Text",
"parent": "tab-head",
"left": 812, "top": 71,
"text": "Head",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-hair": {
"type": "Rectangle",
"parent": "right-panel",
"left": 862, "top": 64, "width": 52, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-hair-label": {
"type": "Text",
"parent": "tab-hair",
"left": 872, "top": 71,
"text": "Hair",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-clothing": {
"type": "Rectangle",
"parent": "right-panel",
"left": 916, "top": 64, "width": 76, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-clothing-label": {
"type": "Text",
"parent": "tab-clothing",
"left": 922, "top": 71,
"text": "Clothing",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-accessories": {
"type": "Rectangle",
"parent": "right-panel",
"left": 994, "top": 64, "width": 94, "height": 30,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 0, 0]
},
"tab-accessories-label": {
"type": "Text",
"parent": "tab-accessories",
"left": 1000, "top": 71,
"text": "Accessories",
"fontColor": "#c8d8f0", "fontSize": 11
},
"tab-content": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 94, "width": 380, "height": 562,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"search-bar": {
"type": "Rectangle",
"parent": "tab-content",
"left": 752, "top": 102, "width": 356, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"search-placeholder": {
"type": "Text",
"parent": "search-bar",
"left": 762, "top": 109,
"text": "Search...",
"fontColor": "#555568", "fontSize": 12
},
"slot-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 146,
"text": "SLOT",
"fontColor": "#c8d0e0", "fontSize": 12
},
"slot-hat": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 164, "width": 64, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"slot-hat-label": {
"type": "Text",
"parent": "slot-hat",
"left": 772, "top": 170,
"text": "Hat",
"fontColor": "#c8d8f0", "fontSize": 11
},
"slot-goggles": {
"type": "Rectangle",
"parent": "tab-content",
"left": 826, "top": 164, "width": 76, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-goggles-label": {
"type": "Text",
"parent": "slot-goggles",
"left": 834, "top": 170,
"text": "Goggles",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-mask": {
"type": "Rectangle",
"parent": "tab-content",
"left": 908, "top": 164, "width": 64, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-mask-label": {
"type": "Text",
"parent": "slot-mask",
"left": 920, "top": 170,
"text": "Mask",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-backpack": {
"type": "Rectangle",
"parent": "tab-content",
"left": 978, "top": 164, "width": 80, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-backpack-label": {
"type": "Text",
"parent": "slot-backpack",
"left": 984, "top": 170,
"text": "Backpack",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-belt": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 198, "width": 60, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-belt-label": {
"type": "Text",
"parent": "slot-belt",
"left": 768, "top": 204,
"text": "Belt",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-wrist-l": {
"type": "Rectangle",
"parent": "tab-content",
"left": 822, "top": 198, "width": 72, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-wrist-l-label": {
"type": "Text",
"parent": "slot-wrist-l",
"left": 830, "top": 204,
"text": "Wrist L",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-wrist-r": {
"type": "Rectangle",
"parent": "tab-content",
"left": 900, "top": 198, "width": 72, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-wrist-r-label": {
"type": "Text",
"parent": "slot-wrist-r",
"left": 908, "top": 204,
"text": "Wrist R",
"fontColor": "#c8d0e0", "fontSize": 11
},
"items-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 240,
"text": "HATS",
"fontColor": "#c8d0e0", "fontSize": 12
},
"item-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 258, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-1-label": {
"type": "Text",
"parent": "item-1",
"left": 784, "top": 328,
"text": "None",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 258, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"item-2-label": {
"type": "Text",
"parent": "item-2",
"left": 900, "top": 328,
"text": "Cap",
"fontColor": "#c8d8f0", "fontSize": 10
},
"item-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 258, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-3-label": {
"type": "Text",
"parent": "item-3",
"left": 1006, "top": 328,
"text": "Beanie",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 356, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-4-label": {
"type": "Text",
"parent": "item-4",
"left": 784, "top": 426,
"text": "Helmet",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-5": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 356, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-5-label": {
"type": "Text",
"parent": "item-5",
"left": 896, "top": 426,
"text": "Hood",
"fontColor": "#c8d0e0", "fontSize": 10
},
"color-dock": {
"type": "Rectangle",
"parent": "tab-content",
"left": 740, "top": 568, "width": 380, "height": 88,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"color-dock-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 576,
"text": "ITEM COLOR — Cap",
"fontColor": "#c8d0e0", "fontSize": 11
},
"color-primary-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 596,
"text": "Primary",
"fontColor": "#555568", "fontSize": 10
},
"color-primary-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 756, "top": 610, "width": 140, "height": 32,
"fillColor": "#6a4040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"color-secondary-label": {
"type": "Text",
"parent": "color-dock",
"left": 916, "top": 596,
"text": "Secondary",
"fontColor": "#555568", "fontSize": 10
},
"color-secondary-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 916, "top": 610, "width": 140, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/accessories-tab.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

docs/design/wireframes/character-creation/clothing-tab.json
+428
View File
@@ -0,0 +1,428 @@
{
"name": "Character Creation — Clothing Tab",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"cam-toggle": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 620, "top": 68, "width": 88, "height": 28,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"cam-toggle-label": {
"type": "Text",
"parent": "cam-toggle",
"left": 632, "top": 73,
"text": "Frontal",
"fontColor": "#c8d8f0", "fontSize": 11
},
"btn-rot-left": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 270, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-left-label": {
"type": "Text",
"parent": "btn-rot-left",
"left": 288, "top": 597,
"text": "[Q] <",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-rot-right": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 390, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-right-label": {
"type": "Text",
"parent": "btn-rot-right",
"left": 408, "top": 597,
"text": "> [E]",
"fontColor": "#c8d8f0", "fontSize": 13
},
"right-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"tab-body": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 64, "width": 60, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-body-label": {
"type": "Text",
"parent": "tab-body",
"left": 750, "top": 71,
"text": "Body",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-head": {
"type": "Rectangle",
"parent": "right-panel",
"left": 802, "top": 64, "width": 58, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-head-label": {
"type": "Text",
"parent": "tab-head",
"left": 812, "top": 71,
"text": "Head",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-hair": {
"type": "Rectangle",
"parent": "right-panel",
"left": 862, "top": 64, "width": 52, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-hair-label": {
"type": "Text",
"parent": "tab-hair",
"left": 872, "top": 71,
"text": "Hair",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-clothing": {
"type": "Rectangle",
"parent": "right-panel",
"left": 916, "top": 64, "width": 76, "height": 30,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 0, 0]
},
"tab-clothing-label": {
"type": "Text",
"parent": "tab-clothing",
"left": 922, "top": 71,
"text": "Clothing",
"fontColor": "#c8d8f0", "fontSize": 11
},
"tab-accessories": {
"type": "Rectangle",
"parent": "right-panel",
"left": 994, "top": 64, "width": 94, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-accessories-label": {
"type": "Text",
"parent": "tab-accessories",
"left": 1000, "top": 71,
"text": "Accessories",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-content": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 94, "width": 380, "height": 562,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"search-bar": {
"type": "Rectangle",
"parent": "tab-content",
"left": 752, "top": 102, "width": 356, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"search-placeholder": {
"type": "Text",
"parent": "search-bar",
"left": 762, "top": 109,
"text": "Search...",
"fontColor": "#555568", "fontSize": 12
},
"slot-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 146,
"text": "SLOT",
"fontColor": "#c8d0e0", "fontSize": 12
},
"slot-torso": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 164, "width": 80, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"slot-torso-label": {
"type": "Text",
"parent": "slot-torso",
"left": 768, "top": 170,
"text": "Torso",
"fontColor": "#c8d8f0", "fontSize": 11
},
"slot-legs": {
"type": "Rectangle",
"parent": "tab-content",
"left": 844, "top": 164, "width": 80, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-legs-label": {
"type": "Text",
"parent": "slot-legs",
"left": 862, "top": 170,
"text": "Legs",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-feet": {
"type": "Rectangle",
"parent": "tab-content",
"left": 932, "top": 164, "width": 80, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-feet-label": {
"type": "Text",
"parent": "slot-feet",
"left": 954, "top": 170,
"text": "Feet",
"fontColor": "#c8d0e0", "fontSize": 11
},
"slot-hands": {
"type": "Rectangle",
"parent": "tab-content",
"left": 1020, "top": 164, "width": 80, "height": 28,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"slot-hands-label": {
"type": "Text",
"parent": "slot-hands",
"left": 1036, "top": 170,
"text": "Hands",
"fontColor": "#c8d0e0", "fontSize": 11
},
"items-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 206,
"text": "TORSO",
"fontColor": "#c8d0e0", "fontSize": 12
},
"item-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 224, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"item-1-label": {
"type": "Text",
"parent": "item-1",
"left": 770, "top": 294,
"text": "Coveralls",
"fontColor": "#c8d8f0", "fontSize": 10
},
"item-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 224, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-2-label": {
"type": "Text",
"parent": "item-2",
"left": 892, "top": 294,
"text": "Jacket",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 224, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-3-label": {
"type": "Text",
"parent": "item-3",
"left": 1008, "top": 294,
"text": "Shirt",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 322, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-4-label": {
"type": "Text",
"parent": "item-4",
"left": 774, "top": 392,
"text": "Tank Top",
"fontColor": "#c8d0e0", "fontSize": 10
},
"item-5": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 322, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"item-5-label": {
"type": "Text",
"parent": "item-5",
"left": 898, "top": 392,
"text": "None",
"fontColor": "#c8d0e0", "fontSize": 10
},
"color-dock": {
"type": "Rectangle",
"parent": "tab-content",
"left": 740, "top": 548, "width": 380, "height": 108,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"color-dock-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 554,
"text": "ITEM COLOR — Coveralls",
"fontColor": "#c8d0e0", "fontSize": 11
},
"color-primary-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 574,
"text": "Primary",
"fontColor": "#555568", "fontSize": 10
},
"color-primary-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 756, "top": 588, "width": 100, "height": 32,
"fillColor": "#4a6080", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"color-secondary-label": {
"type": "Text",
"parent": "color-dock",
"left": 868, "top": 574,
"text": "Secondary",
"fontColor": "#555568", "fontSize": 10
},
"color-secondary-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 868, "top": 588, "width": 100, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"color-accent-label": {
"type": "Text",
"parent": "color-dock",
"left": 980, "top": 574,
"text": "Accent",
"fontColor": "#555568", "fontSize": 10
},
"color-accent-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 980, "top": 588, "width": 100, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"color-auto-hint": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 630,
"text": "Click swatch to pick color. Secondary/Accent auto-derive if unset.",
"fontColor": "#555568", "fontSize": 9
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/clothing-tab.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

docs/design/wireframes/character-creation/color-picker.json
+263
View File
@@ -0,0 +1,263 @@
{
"name": "Character Creation — Color Picker",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"right-panel-dimmed": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#12151a", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"picker-modal": {
"type": "Rectangle",
"parent": "bg",
"left": 750, "top": 100, "width": 360, "height": 520,
"fillColor": "#1a1e24", "strokeColor": "#c8d8f0",
"corners": [8, 8, 8, 8]
},
"picker-title": {
"type": "Text",
"parent": "picker-modal",
"left": 770, "top": 112,
"text": "PICK COLOR — Primary",
"fontColor": "#c8d0e0", "fontSize": 14
},
"preview-swatch": {
"type": "Rectangle",
"parent": "picker-modal",
"left": 1020, "top": 108, "width": 72, "height": 28,
"fillColor": "#4a6080", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"palette-label": {
"type": "Text",
"parent": "picker-modal",
"left": 770, "top": 148,
"text": "PALETTE",
"fontColor": "#555568", "fontSize": 10
},
"p-r1c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 164, "width": 32, "height": 32, "fillColor": "#3d1d1d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 164, "width": 32, "height": 32, "fillColor": "#522727", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 164, "width": 32, "height": 32, "fillColor": "#673131", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 164, "width": 32, "height": 32, "fillColor": "#7f3d3d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 164, "width": 32, "height": 32, "fillColor": "#974848", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 164, "width": 32, "height": 32, "fillColor": "#af5959", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 164, "width": 32, "height": 32, "fillColor": "#bc7575", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 164, "width": 32, "height": 32, "fillColor": "#c99090", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r1c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 164, "width": 32, "height": 32, "fillColor": "#d7acac", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 200, "width": 32, "height": 32, "fillColor": "#213a2d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 200, "width": 32, "height": 32, "fillColor": "#2c4e3d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 200, "width": 32, "height": 32, "fillColor": "#37614c", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 200, "width": 32, "height": 32, "fillColor": "#43785e", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 200, "width": 32, "height": 32, "fillColor": "#508f70", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 200, "width": 32, "height": 32, "fillColor": "#62a684", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 200, "width": 32, "height": 32, "fillColor": "#7cb599", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 200, "width": 32, "height": 32, "fillColor": "#96c4ad", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r2c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 200, "width": 32, "height": 32, "fillColor": "#b0d2c1", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 236, "width": 32, "height": 32, "fillColor": "#1d2b3d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 236, "width": 32, "height": 32, "fillColor": "#273952", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 236, "width": 32, "height": 32, "fillColor": "#314867", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 236, "width": 32, "height": 32, "fillColor": "#3d587f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 236, "width": 32, "height": 32, "fillColor": "#486997", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 236, "width": 32, "height": 32, "fillColor": "#597daf", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 236, "width": 32, "height": 32, "fillColor": "#7593bc", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 236, "width": 32, "height": 32, "fillColor": "#90a8c9", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r3c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 236, "width": 32, "height": 32, "fillColor": "#acbed7", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 272, "width": 32, "height": 32, "fillColor": "#30213a", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 272, "width": 32, "height": 32, "fillColor": "#402c4e", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 272, "width": 32, "height": 32, "fillColor": "#503761", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 272, "width": 32, "height": 32, "fillColor": "#624378", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 272, "width": 32, "height": 32, "fillColor": "#75508f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 272, "width": 32, "height": 32, "fillColor": "#8a62a6", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 272, "width": 32, "height": 32, "fillColor": "#9d7cb5", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 272, "width": 32, "height": 32, "fillColor": "#b196c4", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r4c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 272, "width": 32, "height": 32, "fillColor": "#c4b0d2", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 308, "width": 32, "height": 32, "fillColor": "#3d2c1d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 308, "width": 32, "height": 32, "fillColor": "#523b27", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 308, "width": 32, "height": 32, "fillColor": "#674a31", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 308, "width": 32, "height": 32, "fillColor": "#7f5c3d", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 308, "width": 32, "height": 32, "fillColor": "#976d48", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 308, "width": 32, "height": 32, "fillColor": "#af8159", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 308, "width": 32, "height": 32, "fillColor": "#bc9675", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 308, "width": 32, "height": 32, "fillColor": "#c9ab90", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r5c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 308, "width": 32, "height": 32, "fillColor": "#d7c0ac", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 344, "width": 32, "height": 32, "fillColor": "#000000", "strokeColor": "#555568", "corners": [2,2,2,2] },
"p-r6c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 344, "width": 32, "height": 32, "fillColor": "#1f1f1f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 344, "width": 32, "height": 32, "fillColor": "#3f3f3f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 344, "width": 32, "height": 32, "fillColor": "#5f5f5f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 344, "width": 32, "height": 32, "fillColor": "#7f7f7f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 344, "width": 32, "height": 32, "fillColor": "#9f9f9f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 344, "width": 32, "height": 32, "fillColor": "#bfbfbf", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 344, "width": 32, "height": 32, "fillColor": "#dfdfdf", "strokeColor": "#333340", "corners": [2,2,2,2] },
"p-r6c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 344, "width": 32, "height": 32, "fillColor": "#ffffff", "strokeColor": "#333340", "corners": [2,2,2,2] },
"hex-label": {
"type": "Text",
"parent": "picker-modal",
"left": 770, "top": 392,
"text": "CUSTOM HEX",
"fontColor": "#555568", "fontSize": 10
},
"hex-field": {
"type": "Rectangle",
"parent": "picker-modal",
"left": 770, "top": 408, "width": 160, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"hex-value": {
"type": "Text",
"parent": "hex-field",
"left": 782, "top": 415,
"text": "#4a6080",
"fontColor": "#c8d0e0", "fontSize": 12
},
"hex-apply": {
"type": "Rectangle",
"parent": "picker-modal",
"left": 940, "top": 408, "width": 60, "height": 32,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"hex-apply-label": {
"type": "Text",
"parent": "hex-apply",
"left": 952, "top": 415,
"text": "Apply",
"fontColor": "#c8d8f0", "fontSize": 11
},
"recent-label": {
"type": "Text",
"parent": "picker-modal",
"left": 770, "top": 456,
"text": "RECENT CUSTOM COLORS",
"fontColor": "#555568", "fontSize": 10
},
"rc-1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 472, "width": 32, "height": 32, "fillColor": "#4a6080", "strokeColor": "#333340", "corners": [2,2,2,2] },
"rc-2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 472, "width": 32, "height": 32, "fillColor": "#8b4513", "strokeColor": "#333340", "corners": [2,2,2,2] },
"rc-3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 472, "width": 32, "height": 32, "fillColor": "#2f4f4f", "strokeColor": "#333340", "corners": [2,2,2,2] },
"rc-4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"rc-5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"rc-6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"rc-7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"rc-8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"rc-9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] },
"btn-cancel": {
"type": "Rectangle",
"parent": "picker-modal",
"left": 770, "top": 524, "width": 100, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-cancel-label": {
"type": "Text",
"parent": "btn-cancel",
"left": 794, "top": 532,
"text": "Cancel",
"fontColor": "#c8d8f0", "fontSize": 12
},
"btn-ok": {
"type": "Rectangle",
"parent": "picker-modal",
"left": 990, "top": 524, "width": 100, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-ok-label": {
"type": "Text",
"parent": "btn-ok",
"left": 1024, "top": 532,
"text": "OK",
"fontColor": "#c8d8f0", "fontSize": 12
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/color-picker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

docs/design/wireframes/character-creation/hair-tab.json
+428
View File
@@ -0,0 +1,428 @@
{
"name": "Character Creation — Hair Tab",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"cam-toggle": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 620, "top": 68, "width": 88, "height": 28,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"cam-toggle-label": {
"type": "Text",
"parent": "cam-toggle",
"left": 632, "top": 73,
"text": "Frontal",
"fontColor": "#c8d8f0", "fontSize": 11
},
"btn-rot-left": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 270, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-left-label": {
"type": "Text",
"parent": "btn-rot-left",
"left": 288, "top": 597,
"text": "[Q] <",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-rot-right": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 390, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-right-label": {
"type": "Text",
"parent": "btn-rot-right",
"left": 408, "top": 597,
"text": "> [E]",
"fontColor": "#c8d8f0", "fontSize": 13
},
"right-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"tab-body": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 64, "width": 60, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-body-label": {
"type": "Text",
"parent": "tab-body",
"left": 750, "top": 71,
"text": "Body",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-head": {
"type": "Rectangle",
"parent": "right-panel",
"left": 802, "top": 64, "width": 58, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-head-label": {
"type": "Text",
"parent": "tab-head",
"left": 812, "top": 71,
"text": "Head",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-hair": {
"type": "Rectangle",
"parent": "right-panel",
"left": 862, "top": 64, "width": 52, "height": 30,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 0, 0]
},
"tab-hair-label": {
"type": "Text",
"parent": "tab-hair",
"left": 872, "top": 71,
"text": "Hair",
"fontColor": "#c8d8f0", "fontSize": 11
},
"tab-clothing": {
"type": "Rectangle",
"parent": "right-panel",
"left": 916, "top": 64, "width": 76, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-clothing-label": {
"type": "Text",
"parent": "tab-clothing",
"left": 922, "top": 71,
"text": "Clothing",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-accessories": {
"type": "Rectangle",
"parent": "right-panel",
"left": 994, "top": 64, "width": 94, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-accessories-label": {
"type": "Text",
"parent": "tab-accessories",
"left": 1000, "top": 71,
"text": "Accessories",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-content": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 94, "width": 380, "height": 562,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"search-bar": {
"type": "Rectangle",
"parent": "tab-content",
"left": 752, "top": 102, "width": 356, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"search-placeholder": {
"type": "Text",
"parent": "search-bar",
"left": 762, "top": 109,
"text": "Search...",
"fontColor": "#555568", "fontSize": 12
},
"hair-section-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 146,
"text": "HAIR STYLE",
"fontColor": "#c8d0e0", "fontSize": 12
},
"hair-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 164, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"hair-1-label": {
"type": "Text",
"parent": "hair-1",
"left": 772, "top": 234,
"text": "Short A",
"fontColor": "#c8d8f0", "fontSize": 10
},
"hair-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 164, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"hair-2-label": {
"type": "Text",
"parent": "hair-2",
"left": 884, "top": 234,
"text": "Short B",
"fontColor": "#c8d0e0", "fontSize": 10
},
"hair-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 164, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"hair-3-label": {
"type": "Text",
"parent": "hair-3",
"left": 992, "top": 234,
"text": "Medium A",
"fontColor": "#c8d0e0", "fontSize": 10
},
"hair-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 262, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"hair-4-label": {
"type": "Text",
"parent": "hair-4",
"left": 768, "top": 332,
"text": "Medium B",
"fontColor": "#c8d0e0", "fontSize": 10
},
"hair-5": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 262, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"hair-5-label": {
"type": "Text",
"parent": "hair-5",
"left": 892, "top": 332,
"text": "Long A",
"fontColor": "#c8d0e0", "fontSize": 10
},
"hair-6": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 262, "width": 104, "height": 90,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"hair-6-label": {
"type": "Text",
"parent": "hair-6",
"left": 1008, "top": 332,
"text": "Bald",
"fontColor": "#c8d0e0", "fontSize": 10
},
"facial-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 366,
"text": "FACIAL HAIR",
"fontColor": "#c8d0e0", "fontSize": 12
},
"facial-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 384, "width": 80, "height": 64,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"facial-1-label": {
"type": "Text",
"parent": "facial-1",
"left": 770, "top": 428,
"text": "None",
"fontColor": "#c8d0e0", "fontSize": 10
},
"facial-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 844, "top": 384, "width": 80, "height": 64,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"facial-2-label": {
"type": "Text",
"parent": "facial-2",
"left": 854, "top": 428,
"text": "Stubble",
"fontColor": "#c8d8f0", "fontSize": 10
},
"facial-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 932, "top": 384, "width": 80, "height": 64,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"facial-3-label": {
"type": "Text",
"parent": "facial-3",
"left": 948, "top": 428,
"text": "Beard",
"fontColor": "#c8d0e0", "fontSize": 10
},
"facial-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 1020, "top": 384, "width": 80, "height": 64,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"facial-4-label": {
"type": "Text",
"parent": "facial-4",
"left": 1024, "top": 428,
"text": "Moustache",
"fontColor": "#c8d0e0", "fontSize": 10
},
"color-dock": {
"type": "Rectangle",
"parent": "tab-content",
"left": 740, "top": 568, "width": 380, "height": 88,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"color-dock-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 576,
"text": "HAIR COLOR",
"fontColor": "#c8d0e0", "fontSize": 11
},
"color-primary-label": {
"type": "Text",
"parent": "color-dock",
"left": 756, "top": 596,
"text": "Primary",
"fontColor": "#555568", "fontSize": 10
},
"color-primary-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 756, "top": 610, "width": 140, "height": 32,
"fillColor": "#3a2a1a", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"color-highlight-label": {
"type": "Text",
"parent": "color-dock",
"left": 916, "top": 596,
"text": "Highlight",
"fontColor": "#555568", "fontSize": 10
},
"color-highlight-swatch": {
"type": "Rectangle",
"parent": "color-dock",
"left": 916, "top": 610, "width": 140, "height": 32,
"fillColor": "#5a4a3a", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"color-auto-hint": {
"type": "Text",
"parent": "color-dock",
"left": 1066, "top": 622,
"text": "auto",
"fontColor": "#555568", "fontSize": 10
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/hair-tab.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

docs/design/wireframes/character-creation/head-tab.json
+471
View File
@@ -0,0 +1,471 @@
{
"name": "Character Creation — Head Tab",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"cam-toggle": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 620, "top": 68, "width": 88, "height": 28,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"cam-toggle-label": {
"type": "Text",
"parent": "cam-toggle",
"left": 632, "top": 73,
"text": "Frontal",
"fontColor": "#c8d8f0", "fontSize": 11
},
"btn-rot-left": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 270, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-left-label": {
"type": "Text",
"parent": "btn-rot-left",
"left": 288, "top": 597,
"text": "[Q] <",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-rot-right": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 390, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-right-label": {
"type": "Text",
"parent": "btn-rot-right",
"left": 408, "top": 597,
"text": "> [E]",
"fontColor": "#c8d8f0", "fontSize": 13
},
"right-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"tab-body": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 64, "width": 60, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-body-label": {
"type": "Text",
"parent": "tab-body",
"left": 750, "top": 71,
"text": "Body",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-head": {
"type": "Rectangle",
"parent": "right-panel",
"left": 802, "top": 64, "width": 58, "height": 30,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 0, 0]
},
"tab-head-label": {
"type": "Text",
"parent": "tab-head",
"left": 812, "top": 71,
"text": "Head",
"fontColor": "#c8d8f0", "fontSize": 11
},
"tab-hair": {
"type": "Rectangle",
"parent": "right-panel",
"left": 862, "top": 64, "width": 52, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-hair-label": {
"type": "Text",
"parent": "tab-hair",
"left": 872, "top": 71,
"text": "Hair",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-clothing": {
"type": "Rectangle",
"parent": "right-panel",
"left": 916, "top": 64, "width": 76, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-clothing-label": {
"type": "Text",
"parent": "tab-clothing",
"left": 922, "top": 71,
"text": "Clothing",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-accessories": {
"type": "Rectangle",
"parent": "right-panel",
"left": 994, "top": 64, "width": 94, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-accessories-label": {
"type": "Text",
"parent": "tab-accessories",
"left": 1000, "top": 71,
"text": "Accessories",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-content": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 94, "width": 380, "height": 562,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"search-bar": {
"type": "Rectangle",
"parent": "tab-content",
"left": 752, "top": 102, "width": 356, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"search-placeholder": {
"type": "Text",
"parent": "search-bar",
"left": 762, "top": 109,
"text": "Search...",
"fontColor": "#555568", "fontSize": 12
},
"head-section-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 146,
"text": "HEAD TEMPLATE",
"fontColor": "#c8d0e0", "fontSize": 12
},
"head-hint": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 164,
"text": "Trellis-generated unique heads.",
"fontColor": "#555568", "fontSize": 10
},
"head-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 182, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"head-1-label": {
"type": "Text",
"parent": "head-1",
"left": 776, "top": 266,
"text": "Head A",
"fontColor": "#c8d8f0", "fontSize": 10
},
"head-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 182, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"head-2-label": {
"type": "Text",
"parent": "head-2",
"left": 888, "top": 266,
"text": "Head B",
"fontColor": "#c8d0e0", "fontSize": 10
},
"head-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 182, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"head-3-label": {
"type": "Text",
"parent": "head-3",
"left": 1000, "top": 266,
"text": "Head C",
"fontColor": "#c8d0e0", "fontSize": 10
},
"head-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 294, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"head-4-label": {
"type": "Text",
"parent": "head-4",
"left": 776, "top": 378,
"text": "Head D",
"fontColor": "#c8d0e0", "fontSize": 10
},
"head-5": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 294, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"head-5-label": {
"type": "Text",
"parent": "head-5",
"left": 888, "top": 378,
"text": "Head E",
"fontColor": "#c8d0e0", "fontSize": 10
},
"head-6": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 294, "width": 104, "height": 104,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"head-6-label": {
"type": "Text",
"parent": "head-6",
"left": 1000, "top": 378,
"text": "Head F",
"fontColor": "#c8d0e0", "fontSize": 10
},
"eyebrows-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 414,
"text": "EYEBROWS",
"fontColor": "#c8d0e0", "fontSize": 12
},
"brow-1": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 432, "width": 80, "height": 52,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"brow-1-label": {
"type": "Text",
"parent": "brow-1",
"left": 770, "top": 464,
"text": "Thick",
"fontColor": "#c8d8f0", "fontSize": 10
},
"brow-2": {
"type": "Rectangle",
"parent": "tab-content",
"left": 844, "top": 432, "width": 80, "height": 52,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"brow-2-label": {
"type": "Text",
"parent": "brow-2",
"left": 862, "top": 464,
"text": "Thin",
"fontColor": "#c8d0e0", "fontSize": 10
},
"brow-3": {
"type": "Rectangle",
"parent": "tab-content",
"left": 932, "top": 432, "width": 80, "height": 52,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"brow-3-label": {
"type": "Text",
"parent": "brow-3",
"left": 946, "top": 464,
"text": "Arched",
"fontColor": "#c8d0e0", "fontSize": 10
},
"brow-4": {
"type": "Rectangle",
"parent": "tab-content",
"left": 1020, "top": 432, "width": 80, "height": 52,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"brow-4-label": {
"type": "Text",
"parent": "brow-4",
"left": 1038, "top": 464,
"text": "None",
"fontColor": "#c8d0e0", "fontSize": 10
},
"scroll-hint": {
"type": "Text",
"parent": "tab-content",
"left": 880, "top": 500,
"text": "Scroll for more heads...",
"fontColor": "#555568", "fontSize": 10
},
"skin-dock": {
"type": "Rectangle",
"parent": "tab-content",
"left": 740, "top": 580, "width": 380, "height": 76,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"skin-dock-label": {
"type": "Text",
"parent": "skin-dock",
"left": 756, "top": 588,
"text": "SKIN TONE",
"fontColor": "#c8d0e0", "fontSize": 11
},
"skin-1": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 756, "top": 606, "width": 32, "height": 32,
"fillColor": "#f5d6b8", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"skin-2": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 796, "top": 606, "width": 32, "height": 32,
"fillColor": "#e8c4a0", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-3": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 836, "top": 606, "width": 32, "height": 32,
"fillColor": "#c8a882", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-4": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 876, "top": 606, "width": 32, "height": 32,
"fillColor": "#b08860", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-5": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 916, "top": 606, "width": 32, "height": 32,
"fillColor": "#96724c", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-6": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 956, "top": 606, "width": 32, "height": 32,
"fillColor": "#7c5c3a", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-7": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 996, "top": 606, "width": 32, "height": 32,
"fillColor": "#624830", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-8": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 1036, "top": 606, "width": 32, "height": 32,
"fillColor": "#4a3424", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-9": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 1076, "top": 606, "width": 32, "height": 32,
"fillColor": "#3a2818", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/head-tab.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

docs/design/wireframes/character-creation/main-layout.json
+458
View File
@@ -0,0 +1,458 @@
{
"name": "Character Creation — Body Tab",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 780,
"fillColor": "#1a1e24"
},
"title": {
"type": "Text",
"parent": "bg",
"left": 440, "top": 16,
"text": "CHARACTER CREATION",
"fontColor": "#c8d0e0", "fontSize": 24
},
"preview-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 20, "top": 56, "width": 700, "height": 600,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"preview-label": {
"type": "Text",
"parent": "preview-panel",
"left": 320, "top": 68,
"text": "3D PREVIEW",
"fontColor": "#555568", "fontSize": 14
},
"preview-figure": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 260, "top": 110, "width": 220, "height": 460,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"preview-figure-label": {
"type": "Text",
"parent": "preview-figure",
"left": 320, "top": 330,
"text": "Character\nModel",
"fontColor": "#555568", "fontSize": 14
},
"cam-toggle": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 620, "top": 68, "width": 88, "height": 28,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"cam-toggle-label": {
"type": "Text",
"parent": "cam-toggle",
"left": 632, "top": 73,
"text": "Frontal",
"fontColor": "#c8d8f0", "fontSize": 11
},
"btn-rot-left": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 270, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-left-label": {
"type": "Text",
"parent": "btn-rot-left",
"left": 288, "top": 597,
"text": "[Q] <",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-rot-right": {
"type": "Rectangle",
"parent": "preview-panel",
"left": 390, "top": 590, "width": 80, "height": 36,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-rot-right-label": {
"type": "Text",
"parent": "btn-rot-right",
"left": 408, "top": 597,
"text": "> [E]",
"fontColor": "#c8d8f0", "fontSize": 13
},
"right-panel": {
"type": "Rectangle",
"parent": "bg",
"left": 740, "top": 56, "width": 380, "height": 600,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [8, 8, 8, 8]
},
"tab-body": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 64, "width": 60, "height": 30,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 0, 0]
},
"tab-body-label": {
"type": "Text",
"parent": "tab-body",
"left": 750, "top": 71,
"text": "Body",
"fontColor": "#c8d8f0", "fontSize": 11
},
"tab-head": {
"type": "Rectangle",
"parent": "right-panel",
"left": 802, "top": 64, "width": 58, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-head-label": {
"type": "Text",
"parent": "tab-head",
"left": 812, "top": 71,
"text": "Head",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-hair": {
"type": "Rectangle",
"parent": "right-panel",
"left": 862, "top": 64, "width": 52, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-hair-label": {
"type": "Text",
"parent": "tab-hair",
"left": 872, "top": 71,
"text": "Hair",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-clothing": {
"type": "Rectangle",
"parent": "right-panel",
"left": 916, "top": 64, "width": 76, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-clothing-label": {
"type": "Text",
"parent": "tab-clothing",
"left": 922, "top": 71,
"text": "Clothing",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-accessories": {
"type": "Rectangle",
"parent": "right-panel",
"left": 994, "top": 64, "width": 94, "height": 30,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"tab-accessories-label": {
"type": "Text",
"parent": "tab-accessories",
"left": 1000, "top": 71,
"text": "Accessories",
"fontColor": "#c8d0e0", "fontSize": 11
},
"tab-content": {
"type": "Rectangle",
"parent": "right-panel",
"left": 740, "top": 94, "width": 380, "height": 562,
"fillColor": "#2a3040", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"search-bar": {
"type": "Rectangle",
"parent": "tab-content",
"left": 752, "top": 102, "width": 356, "height": 32,
"fillColor": "#3a4050", "strokeColor": "#555568",
"corners": [4, 4, 4, 4]
},
"search-placeholder": {
"type": "Text",
"parent": "search-bar",
"left": 762, "top": 109,
"text": "Search...",
"fontColor": "#555568", "fontSize": 12
},
"body-section-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 146,
"text": "BODY TYPE",
"fontColor": "#c8d0e0", "fontSize": 12
},
"body-row1-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 166,
"text": "Female",
"fontColor": "#555568", "fontSize": 11
},
"body-thin-f": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 182, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-thin-f-label": {
"type": "Text",
"parent": "body-thin-f",
"left": 786, "top": 272,
"text": "Thin",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-avg-f": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 182, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"body-avg-f-label": {
"type": "Text",
"parent": "body-avg-f",
"left": 890, "top": 272,
"text": "Average",
"fontColor": "#c8d8f0", "fontSize": 10
},
"body-musc-f": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 182, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-musc-f-label": {
"type": "Text",
"parent": "body-musc-f",
"left": 1000, "top": 272,
"text": "Muscular",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-heavy-f": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 300, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-heavy-f-label": {
"type": "Text",
"parent": "body-heavy-f",
"left": 784, "top": 390,
"text": "Heavy",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-teen-f": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 300, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-teen-f-label": {
"type": "Text",
"parent": "body-teen-f",
"left": 898, "top": 390,
"text": "Teen",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-row2-label": {
"type": "Text",
"parent": "tab-content",
"left": 756, "top": 422,
"text": "Male",
"fontColor": "#555568", "fontSize": 11
},
"body-thin-m": {
"type": "Rectangle",
"parent": "tab-content",
"left": 756, "top": 438, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-thin-m-label": {
"type": "Text",
"parent": "body-thin-m",
"left": 786, "top": 528,
"text": "Thin",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-avg-m": {
"type": "Rectangle",
"parent": "tab-content",
"left": 868, "top": 438, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-avg-m-label": {
"type": "Text",
"parent": "body-avg-m",
"left": 890, "top": 528,
"text": "Average",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-musc-m": {
"type": "Rectangle",
"parent": "tab-content",
"left": 980, "top": 438, "width": 104, "height": 110,
"fillColor": "#3a4050", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"body-musc-m-label": {
"type": "Text",
"parent": "body-musc-m",
"left": 1000, "top": 528,
"text": "Muscular",
"fontColor": "#c8d0e0", "fontSize": 10
},
"body-scroll-hint": {
"type": "Text",
"parent": "tab-content",
"left": 880, "top": 556,
"text": "Scroll for more...",
"fontColor": "#555568", "fontSize": 10
},
"skin-dock": {
"type": "Rectangle",
"parent": "tab-content",
"left": 740, "top": 580, "width": 380, "height": 76,
"fillColor": "#1a1e24", "strokeColor": "#333340",
"corners": [0, 0, 8, 8]
},
"skin-dock-label": {
"type": "Text",
"parent": "skin-dock",
"left": 756, "top": 588,
"text": "SKIN TONE",
"fontColor": "#c8d0e0", "fontSize": 11
},
"skin-1": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 756, "top": 606, "width": 32, "height": 32,
"fillColor": "#f5d6b8", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"skin-2": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 796, "top": 606, "width": 32, "height": 32,
"fillColor": "#e8c4a0", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-3": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 836, "top": 606, "width": 32, "height": 32,
"fillColor": "#c8a882", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-4": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 876, "top": 606, "width": 32, "height": 32,
"fillColor": "#b08860", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-5": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 916, "top": 606, "width": 32, "height": 32,
"fillColor": "#96724c", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-6": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 956, "top": 606, "width": 32, "height": 32,
"fillColor": "#7c5c3a", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-7": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 996, "top": 606, "width": 32, "height": 32,
"fillColor": "#624830", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-8": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 1036, "top": 606, "width": 32, "height": 32,
"fillColor": "#4a3424", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"skin-9": {
"type": "Rectangle",
"parent": "skin-dock",
"left": 1076, "top": 606, "width": 32, "height": 32,
"fillColor": "#3a2818", "strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"footer": {
"type": "Rectangle",
"parent": "bg",
"left": 0, "top": 700, "width": 1140, "height": 80,
"fillColor": "#1a1e24"
},
"btn-back": {
"type": "Rectangle",
"parent": "footer",
"left": 20, "top": 720, "width": 120, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-back-label": {
"type": "Text",
"parent": "btn-back",
"left": 36, "top": 730,
"text": "[ESC] Back",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-random": {
"type": "Rectangle",
"parent": "footer",
"left": 290, "top": 720, "width": 160, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-random-label": {
"type": "Text",
"parent": "btn-random",
"left": 310, "top": 730,
"text": "[R] Randomise",
"fontColor": "#c8d8f0", "fontSize": 13
},
"btn-confirm": {
"type": "Rectangle",
"parent": "footer",
"left": 980, "top": 720, "width": 140, "height": 40,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
"corners": [4, 4, 4, 4]
},
"btn-confirm-label": {
"type": "Text",
"parent": "btn-confirm",
"left": 998, "top": 730,
"text": "[ENTER] Start",
"fontColor": "#c8d8f0", "fontSize": 13
}
}
}
docs/design/wireframes/character-creation/main-layout.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB