144 lines
7.6 KiB
Markdown
144 lines
7.6 KiB
Markdown
|
|
# HUD.md — Дизайн интерфейса игры
|
|||
|
|
|
|||
|
|
> **Канон-роль:** правила HUD/UI для всех сцен. Pixel-art минимализм с одним акцентом. Не перегружать экран.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ФИЛОСОФИЯ
|
|||
|
|
|
|||
|
|
Игра — нарративный быт-сим про подростка. HUD должен:
|
|||
|
|
1. **Не загромождать pixel-art** — он должен дышать.
|
|||
|
|
2. **Показывать чувствительные к времени данные** — дата/время критичны (фарм привязан к датам в каноне).
|
|||
|
|
3. **Уйти в стиль школьной тетрадки + Шиндовс-окна** — отсылка к атмосфере 2020 и игровому миру.
|
|||
|
|
4. **Pathologic-2 правило:** статы появляются ТОЛЬКО при пороге (усталость > 70% → икона; деньги > 0 → виджет; погода → только на улице).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## РАСКЛАДКА HUD
|
|||
|
|
|
|||
|
|
### Постоянные элементы (всегда видны)
|
|||
|
|
- **Верхний левый угол:** дата + день недели + время.
|
|||
|
|
- Формат: `21 АВГ 2020 · ПТ · 10:30`
|
|||
|
|
- Шрифт: pixel-font моноширинный.
|
|||
|
|
- Цвет: белый, modulate 0.85.
|
|||
|
|
|
|||
|
|
### Контекстные элементы
|
|||
|
|
- **Верхний правый угол:** активный квест.
|
|||
|
|
- Формат: `◆ Распакуй подарок от бати`
|
|||
|
|
- Цвет: жёлтый Steam-inventory **#F0B419**.
|
|||
|
|
- Меняется при смене состояния акта.
|
|||
|
|
|
|||
|
|
- **Под квестом (если деньги > 0):** валюты.
|
|||
|
|
- Формат: `₽ 4 250 | $ 12.40 | € 0.00`
|
|||
|
|
- Криптовалюты — НЕ в HUD, только в FSM Panel.
|
|||
|
|
- Цвет: белый, modulate 0.75.
|
|||
|
|
|
|||
|
|
- **Нижний правый (только на улице):** погода + температура.
|
|||
|
|
- Формат: `☁ +18°C, мокрый асфальт`
|
|||
|
|
- Цвет: белый, modulate 0.7.
|
|||
|
|
|
|||
|
|
- **Нижний левый (только при пороге):** статы.
|
|||
|
|
- Усталость > 70%: 🌙 + жёлтый текст «УСТАЛ»
|
|||
|
|
- Голод > 70%: 🍴 + жёлтый текст «ГОЛОДЕН»
|
|||
|
|
- Скука > 70%: 💭 + жёлтый текст «СКУЧНО»
|
|||
|
|
- Деньги критически мало (< 100₽): ❗ + красный текст
|
|||
|
|
- По умолчанию — невидимы (как Pathologic 2).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ
|
|||
|
|
|
|||
|
|
### Prompt (при наведении на интерактив)
|
|||
|
|
- **Центр экрана**, чуть ниже середины: `[ЛКМ] открыть коробку`
|
|||
|
|
- Жёлтый акцент **#F0B419**, modulate 0.9.
|
|||
|
|
|
|||
|
|
### Subtitle / Dialog
|
|||
|
|
- **Нижняя 1/3 экрана**: панель в стиле **Шиндовс-9 окна** (засев бренда).
|
|||
|
|
- Серый фон (#2A2A2E, 80% opacity).
|
|||
|
|
- Тонкая рамка 1px тёмно-серая.
|
|||
|
|
- Заголовок (имя говорящего) — жёлтый акцент.
|
|||
|
|
- Текст реплики — белый.
|
|||
|
|
- Подсказка справа внизу — серая «ЛКМ или ПРОБЕЛ — дальше».
|
|||
|
|
|
|||
|
|
### Полнокран. оверлей (записки, документы)
|
|||
|
|
- Затемнённый фон 75% чёрного.
|
|||
|
|
- Центральная панель ~420×180 px в стиле бумажки/листа A5.
|
|||
|
|
- Текст центрирован, моноширинный шрифт.
|
|||
|
|
- Заголовок «Записка» / «Файл» / «SMS» — жёлтый акцент.
|
|||
|
|
- Подсказка снизу: «ЛКМ — закрыть».
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## КВЕСТ-МАРКЕРЫ (диегетика)
|
|||
|
|
|
|||
|
|
В отличие от стрелок на экране, **квесты в основном через телефон героя**:
|
|||
|
|
- Клавиша **T** открывает Тегерлам (с 1 сен 2020).
|
|||
|
|
- В Тегерламе — каналы и личные диалоги.
|
|||
|
|
- Иконка непрочитанного сообщения внизу экрана (как в реале) — мигает при новом TG.
|
|||
|
|
|
|||
|
|
**Текущий квест-маркер в HUD** — это только подсказка «следующий шаг», не GPS-стрелка.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ЦВЕТОВАЯ ПАЛИТРА HUD
|
|||
|
|
|
|||
|
|
| Элемент | Цвет | Hex |
|
|||
|
|
|---|---|---|
|
|||
|
|
| **Акцент (Steam-inventory жёлтый)** | (0.94, 0.71, 0.1) | **#F0B419** |
|
|||
|
|
| Основной текст | (0.92, 0.92, 0.92) | #EBEBEB |
|
|||
|
|
| Вторичный текст | (0.65, 0.65, 0.65) | #A6A6A6 |
|
|||
|
|
| Фон панели | (0.16, 0.16, 0.18) | #2A2A2E |
|
|||
|
|
| Рамка панели | (0.4, 0.4, 0.42) | #66666B |
|
|||
|
|
| Алерт (мало денег / критстат) | (0.85, 0.16, 0.16) | #D92929 |
|
|||
|
|
| Успех (дроп получен) | (0.27, 0.83, 0.27) | #45D445 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ШРИФТЫ
|
|||
|
|
|
|||
|
|
- **Основной:** pixel-font моноширинный с **кириллицей**.
|
|||
|
|
- Кандидаты: «Press Start 2P» (моно, но без кириллицы из коробки — нужно расширение), «PixelMplus», «PressStart2P-vaOO» (с кириллицей), своя сборка через BMFont.
|
|||
|
|
- **TBD:** найти бесплатный CC0 pixel-font с кириллицей или собрать свой через bitmap font tools.
|
|||
|
|
- **Размер кегля при 640×360 viewport:**
|
|||
|
|
- HUD-элементы: 8-10 px.
|
|||
|
|
- Subtitle: 10-12 px.
|
|||
|
|
- Note overlay: 10-14 px (зависит от длины).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## АНИМАЦИИ HUD
|
|||
|
|
|
|||
|
|
- **Появление prompt при наведении:** fade-in 100ms.
|
|||
|
|
- **Исчезновение prompt:** fade-out 80ms.
|
|||
|
|
- **Появление subtitle:** slide-up + fade 200ms.
|
|||
|
|
- **Смена квеста:** старый текст fade-out, новый fade-in с 400ms задержкой.
|
|||
|
|
- **Алерт «мало денег»:** мигание modulate 1.0 → 0.4 → 1.0, цикл 800ms, **остановить когда деньги > 100**.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## РЕФЕРЕНСЫ-ИГРЫ
|
|||
|
|
|
|||
|
|
- **Pathologic 2:** статы только при пороге, никаких постоянных шкал.
|
|||
|
|
- **Disco Elysium:** портрет + 2 бара (здоровье + мораль) внизу, мысли всплывают сферами над головой.
|
|||
|
|
- **OMORI / Yume Nikki:** HUD скрыт в overworld, появляется через меню.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ЧТО НЕ ДЕЛАТЬ
|
|||
|
|
|
|||
|
|
- **Никакой мини-карты** на экране постоянно.
|
|||
|
|
- **Никаких пост. таймеров** кд-механик в шапке.
|
|||
|
|
- **Никаких криптокурсов** на HUD (они в FSM Panel).
|
|||
|
|
- **Никаких лишних иконок** в углах (батарея ноутбука, FPS-каунтер для альфа-теста — выключить в финале).
|
|||
|
|
- **Не сделать UI слишком «современным»** — он должен ощущаться как часть Шиндовс-9 / TG из 2020, не Material Design.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## TBD
|
|||
|
|
|
|||
|
|
- Точный pixel-font с кириллицей (или сборка своего).
|
|||
|
|
- Анимация открытия TG-канала / SMS — нужна mockup-сцена.
|
|||
|
|
- Mockup экрана покупки в стеме (Акт 9 пролога) — стилизация под реальный Steam UI 2020.
|
|||
|
|
- Иконки для статов (🌙/🍴/💭) — нужно сделать pixel-art версии (CC0).
|
|||
|
|
- Жадная гамма (если нужно делиться режимом — high-contrast / colorblind-friendly).
|