Files
SurvivorCore/docs/design-language.md
Samuel LisonandClaude Opus 4.8 5ab855fa1b feat(ui): inventory, hotbar & tabbed menu UI (#7, #9, #3)
Server-authoritative slots+weight inventory, a 9-slot hotbar (keys 1-9),
equipment slots, and a restyleable tabbed menu (functional Inventory +
Character Sheet; Codex/Achievements/Quests scaffolded), built the engine's
way: authored ScreenGui templates + attribute-discovering binders, with a
zero-setup fallback.

- Drag-and-drop is driven by a per-frame cursor poll (immune to the grid
  ScrollingFrame that swallows InputChanged) with GUI-inset-corrected drop
  hit-testing so releases land on the actual slot.
- Menu key defaults to Tab; the engine frees it by disabling the CoreGui
  player roster (ReclaimCoreKeys) and moves the chat to bottom-left so it
  clears the top-left HUD (Chat config). Toggle ignores focused TextBoxes.
- Consumables apply onConsume via the stat-effects layer + fire item:use;
  gather yields flow into the inventory; pickups auto-pin to the hotbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 17:06:54 +10:00

80 lines
4.4 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# SurvivorCore — Design Language
The look we hold to across this project. SurvivorCore is a **generic engine**, so everything
here is **tasteful, neutral, and game-agnostic** — never tied to one game's theme. Owners
re-skin freely; these are the engine's clean defaults and the rules any shipped art follows.
> If you're generating art or building UI, read this first and match it.
## Principles
- **Free, swappable defaults.** Assets in this repo are free to use, so the engine ships free
**default** art (e.g. the HUD stat icons) — every piece overridable per stat (config / admin
plugin) or via the `Assets` registry. No look is hard-coded; where no art resolves, the fallback
is plain colors + text. (Game-specific *design* — items, recipes, lore — still never ships in the
engine; see [CONTRIBUTING](../CONTRIBUTING.md).)
- **Owner-editable.** UI is real, restyleable Instances driven by attributes — never hard-coded
layouts the owner can't change.
- **Tasteful, not flashy.** Clean, modern, readable. Flat surfaces, soft translucency, restraint.
Legibility beats decoration.
- **Consistent.** One panel style, one icon style, one type scale everywhere.
## UI / HUD style
- **Panels:** dark translucent. Background `RGB(20, 23, 30)` at **0.25 transparency**, `UICorner`
radius **10**, a subtle `UIStroke` `RGB(210, 220, 245)` at **0.85 transparency**, `UIPadding`
~10 (top/bottom) / ~14 (sides). Auto-size where content varies.
- **Type:** `GothamMedium` for labels/values (`GothamBold` for emphasis like the toggle glyph).
Sizes ~1213. Text `RGB(245, 245, 245)`; secondary/title text `RGB(210, 220, 245)`.
- **Bars:** dark track `RGB(28, 32, 42)`, rounded, with a colored `Fill`. The engine drives only
`Fill` size + color and the `Value`/`Icon`; everything else is the owner's styling.
- **Warning state:** fill turns `RGB(200, 40, 40)` near the dangerous end of a stat.
### Stat palette (default fill colors)
| Stat | RGB | Stat | RGB |
|---|---|---|---|
| Health | 232, 70, 70 | Fatigue | 160, 100, 220 |
| Energy | 90, 205, 120 | Blood | 180, 40, 40 |
| Hunger | 220, 140, 40 | Poison | 120, 180, 60 |
| Thirst | 60, 160, 230 | (warn) | 200, 40, 40 |
## Icon style
Flat, minimal, **two-tone** glyphs — modern and crisp, legible at ~20 px in a HUD. The same style
covers **item icons** (the inventory/hotbar render at ~4864 px) — keep the family consistent so
stat icons and item icons read as one set.
- **Form:** a single clear glyph, centered, **filling ~7080% of the frame** (minimal margin so
it stays large when downscaled). Consistent visual weight across the set.
- **Shading:** a soft saturated fill, a slightly darker outline, and one subtle highlight — no
gradients-heavy rendering, no text, no drop shadows, no borders.
- **Palette:** lean on each stat's color above so the icon reads even without its bar.
- **Background:** **transparent** (post-processed — see pipeline). Generate on plain white, then
key it out.
- **Set consistency:** same line weight, lighting direction, corner rounding, and margin for
every icon so they sit together as a family.
## Icon generation pipeline (3D AI Studio · Gemini 3 Pro)
1. **Generate:** `POST https://api.3daistudio.com/v1/images/gemini/3/pro/generate/`
(`Authorization: Bearer <key>`), body `{ prompt, output_format:"png", aspect_ratio:"1:1",
resolution:"1K", num_images:1 }`. Async — poll `GET /v1/generation-request/<task_id>/status/`
until `status:"FINISHED"`, then wait for `results[0].asset` to populate (it lags FINISHED by a
few seconds) and download that URL.
2. **Review (required):** look at every result and **iterate the prompt** until it matches this
doc — never ship the first draft uncritically.
3. **Post-process:** key out the white background → transparent (RGBA), trim to the glyph's
bounding box, then pad to a uniform square so the set is visually consistent.
4. **Upload to Roblox** → asset id, and register: `Assets.register("StatIcons", "<Stat>", id)`
(the HUD's `Icon` slots resolve from category `StatIcons`, key = stat / counter name). Item
icons follow the same flow under `Assets.register("ItemIcons", "<itemId>", id)` (or the item
def's inline `icon` field) — see [inventory.md](inventory.md).
The API key lives **outside the repo** at `~/.config/survivorcore/3daistudio.key` (read at call
time, never printed or committed).
---
Related: [Survival Stats + HUD](survival-stats.md) · [Architecture](architecture.md).