- Remove tracked kallast_terrain.npy (HIGH — binary in git) - Amend D-086: stance + interaction icons delivered, not deferred - Create ticket #818 for icon_tint.gdshader (client team) - Fix gas giant profile table: suppress gravity/land%/hydrosphere - Fix atmosphere_color: null when atmosphere is none - Fix gas_giant_ringed display as gas_giant in profile table - Re-scaffold + regenerate Ran system with fixes .import sidecars: not applicable — gitignored by design (client/**/*.import). Godot auto-generates on first run. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
155 lines
8.2 KiB
Markdown
155 lines
8.2 KiB
Markdown
---
|
||
title: "Implant HUD Icon Set — v0.1"
|
||
description: "Design specification for the implant HUD icon vocabulary: stance indicators, status badges, interaction prompts, and inventory item silhouettes"
|
||
type: design
|
||
status: active
|
||
ticket: "#795"
|
||
decision_refs: [D-086]
|
||
author: "Araminta"
|
||
created: 2026-04-05
|
||
updated: 2026-04-05
|
||
---
|
||
|
||
# Implant HUD Icon Set — v0.1
|
||
|
||
**Ticket:** #795
|
||
**Author:** Araminta (Visual Designer)
|
||
**Date:** 2026-04-05
|
||
**Status:** Active — unblocks #787 (minimap + stance label implant conversion)
|
||
**Decision reference:** D-086 (insert icon system)
|
||
|
||
---
|
||
|
||
## 1. Authoring Constraints (D-086)
|
||
|
||
All icons in this set follow D-086 authoring constraints without exception:
|
||
|
||
| Constraint | Value |
|
||
|------------|-------|
|
||
| Format | Custom SVG (no icon font) |
|
||
| Stroke weight | `1px` base (scaled to `2px` for `lattice_augmented` via shader parameter) |
|
||
| Chrome color | `#c8d0e0` (design reference — runtime-replaceable via ShaderMaterial) |
|
||
| Anchor points | Minimal — prefer `L` (lines), `polyline`, `polygon`, `rect`, `circle`. Avoid `Q`/`C` curves. |
|
||
| Fill | `none` on all paths except explicit solid elements (battery terminal caps, etc.) |
|
||
| Terminations | `stroke-linecap="round"`, `stroke-linejoin="round"` — clean joins, not decorative |
|
||
| Calibration | Icons must read cleanly at their target display size. Reference: Phosphor Light (MIT) — not for use, as legibility benchmark only |
|
||
| Godot import | SVGs import via AtlasTexture. Runtime color swap via ShaderMaterial — do not bake color into shape variants |
|
||
|
||
---
|
||
|
||
## 2. Icon Inventory
|
||
|
||
### 2.1 Stance Indicators
|
||
|
||
**Location:** `client/assets/icons/`
|
||
**Size:** 20×20px viewBox
|
||
**Used in:** Insert HUD lower-left stance indicator, implant component library
|
||
|
||
These icons appear alongside the text label (`WALK`, `CAREFUL`, etc.) per the insert HUD wireframe. They reinforce the label visually and support conversion to icon-first display in #787.
|
||
|
||
| File | Stance | Design differentiator |
|
||
|------|--------|-----------------------|
|
||
| `icon_stance_walk.svg` | WALK | Upright figure, bilateral stride. Arms in natural walk swing (forward/back asymmetry). |
|
||
| `icon_stance_careful.svg` | CAREFUL | Upright figure, arms spread laterally (environmental check posture). Legs closer together (deliberate foot placement). |
|
||
| `icon_stance_sprint.svg` | SPRINT | Head and torso shifted forward (lean). Arms in pump position. Wide asymmetric leg stride. |
|
||
| `icon_stance_crouch.svg` | CROUCH | Head lowered. Torso bent at waist. Knees bent via polyline angles. Compressed vertical range. |
|
||
|
||
**Recognition at 20px:** Stance icons are always displayed with the text label in v0.1. The icons reinforce the text; they do not replace it. Pattern recognition builds over ~10 minutes of play (same threshold as the radial menu, D-058).
|
||
|
||
### 2.2 Status Badges
|
||
|
||
**Location:** `client/assets/icons/`
|
||
**Size:** 20×20px viewBox
|
||
**Used in:** Insert HUD chrome band (top row), perception mode indicator
|
||
|
||
| File | Badge | Design |
|
||
|------|-------|--------|
|
||
| `icon_status_health.svg` | HEALTH | Medical cross — two overlapping rects forming a plus symbol. Geometric, no curves. |
|
||
| `icon_status_perception.svg` | PERCEPTION MODE | Diamond eye — four-sided polygon outline with centered circle pupil. Diamond shape reinforces insert lattice aesthetic. |
|
||
|
||
**Perception mode variants:** Mode-specific icons (thermal, camera feed, etc.) are deferred until #315 fully specs the perception modes. The `icon_status_perception.svg` is a generic "perception layer active" indicator only.
|
||
|
||
### 2.3 Interaction Prompt Icons
|
||
|
||
**Location:** `client/assets/icons/`
|
||
**Size:** 16×16px viewBox
|
||
**Used in:** Entity hover interaction verb display (insert layer, z-6)
|
||
|
||
These appear when the cursor enters an entity's interaction radius. They supplement the verb text (e.g., `Talk`). Per the HUD wireframe, the verb text is primary — icons are secondary affordance.
|
||
|
||
| File | Action | Design |
|
||
|------|--------|--------|
|
||
| `icon_action_talk.svg` | TALK | Speech bubble — rectangular body, triangle callout at bottom-left, two content lines. |
|
||
| `icon_action_observe.svg` | OBSERVE | Diamond eye (shares vocabulary with `icon_status_perception.svg`). |
|
||
| `icon_action_follow.svg` | FOLLOW | Arrow right — shaft and arrowhead. Directional / movement. |
|
||
| `icon_action_examine.svg` | EXAMINE | Magnifying glass — lens circle with diagonal handle. The circle is a geometric primitive. |
|
||
|
||
**Extending verb coverage:** Additional verbs (`Confront`, `Wait`, etc.) will need icons as the verb list expands. Follow the diamond-eye vocabulary for perception verbs; arrow vocabulary for movement; speech bubble vocabulary for social verbs.
|
||
|
||
### 2.4 Inventory Item Silhouettes
|
||
|
||
**Location:** `client/assets/icons/`
|
||
**Size:** 40×40px viewBox
|
||
**Used in:** Insert HUD inventory band (lower-right, per insert-hud-wireframe-v01.md §7)
|
||
|
||
D-086 amendment (2026-04-05): inventory icons are no longer character-specific. [D-117] eliminated the smuggler/detective frame; [D-122] removed named characters. These icons apply to any character who can carry physical items.
|
||
|
||
| File | Item | Design |
|
||
|------|------|--------|
|
||
| `icon_item_manifest.svg` | Manifest (document) | Pentagon-body document with folded top-right corner. Three text-content lines inside. |
|
||
| `icon_item_access_token.svg` | Access token (hex tag) | Flat-top hexagon with punch-hole circle near top. Two interior encoding lines. |
|
||
| `icon_item_comm_log.svg` | Personal comm log (device) | Rectangular handheld body with screen inset, antenna stub, signal lines (polylines), control button. |
|
||
|
||
---
|
||
|
||
## 3. Visual Grammar Integration
|
||
|
||
### 3.1 Color behavior
|
||
|
||
The `#c8d0e0` chrome color is the design reference only. At runtime:
|
||
- Default: `#c8d0e0` (insert chrome — unchanged)
|
||
- `lattice_augmented` profile: stroke scales to 2px; color may shift to a brighter white
|
||
- `insert_active == false`: icons reduce to 30–50% opacity (per element, per insert HUD wireframe §9.2)
|
||
- Entity icons (if using D-033 relationship colors): color swapped via ShaderMaterial parameter
|
||
|
||
Saturation rule (D-044): insert chrome must never compete with entity D-033 colors. Icons in `#c8d0e0` are intentionally de-saturated. Do not use warmer or more saturated colors in any icon variant.
|
||
|
||
### 3.2 Godot import setup
|
||
|
||
```gdscript
|
||
# Load SVG as ImageTexture (Godot 4 native SVG import)
|
||
# In .import settings: set scale to match display target size
|
||
# Runtime color replacement:
|
||
var icon_material = ShaderMaterial.new()
|
||
icon_material.shader = preload("res://shaders/icon_tint.gdshader")
|
||
icon_material.set_shader_parameter("tint_color", Color("#c8d0e0"))
|
||
icon_node.material = icon_material
|
||
```
|
||
|
||
The `icon_tint.gdshader` (to be authored by client team, ticket #818) multiplies the SVG's existing color by the `tint_color` parameter. Must handle both stroke-based icons (most) and fill-based icons (health cross). Since all SVGs use `#c8d0e0` as their base color, the default parameter leaves them unchanged; swapping the parameter recolors them at runtime.
|
||
|
||
### 3.3 Sizing at non-native resolutions
|
||
|
||
All icons have explicit `width` and `height` attributes matching their viewBox. Godot's SVG importer respects these. For 2x displays, import at 2x scale — do not stretch from 1x. The 1px stroke renders correctly at integer multiples.
|
||
|
||
---
|
||
|
||
## 4. What This Document Does Not Cover
|
||
|
||
- **Perception mode variant icons** (thermal, camera, etc.) — awaiting #315 full spec
|
||
- **Minimap POI icons** — the insert HUD uses geometric primitives (diamonds, dots, squares) rendered as primitives, not SVG imports (per insert-hud-wireframe-v01.md §4)
|
||
- **Cursor state icons** — specified in D-056, cursor states are handled by the cursor rendering system
|
||
- **World radial menu icons** — the four spokes (Observe, Insert, Comms, Wait) in D-058 need a follow-on ticket
|
||
|
||
---
|
||
|
||
## 5. Calibration Notes
|
||
|
||
Test all icons at their native display size (20×20px or 16×16px) at 100% scale before approving implementation. The Phosphor Light benchmark:
|
||
|
||
> *If a custom icon doesn't read as cleanly as a Phosphor Light equivalent at 16px, simplify it.*
|
||
|
||
The stance icons are the most complex. If any stance icon reads poorly at 20px on a real display, simplify to fewer line segments. The text label remains available as the primary affordance.
|
||
|
||
Inventory icons at 40×40 have more room and should read clearly without simplification.
|