Лицо игры
Мы перерисовали весь интерфейс, который не карта: меню, кнопки, панели, экраны аккаунта и нижнюю панель. До сих пор игра работала, но выглядела как инструмент разработчика: серые коробки, кнопки, похожие на текст, и списки из одних названий.
Зачем
До собственной графики уже можно было решить, как выглядит интерфейс, а первое впечатление тестера много значит. Мы прошлись по каждому экрану. Поток с предыдущего этапа был правильным, не хватало визуальной идентичности и иерархии: понимать с первого взгляда, что можно нажать, что важно и что это за предмет.
Как это работает
Мы выбрали одно направление, «камень и старое золото»: тёмный потёртый камень, тонкая линия состаренного золота и текст цвета пергамента, продолжая рамку нижней панели. У цветов появился смысл: редкость (обычный, редкий, эпический, легендарный), стихия, опасность и успех.
Всё берётся из единой темы: окно, кнопки (основная золотая, второстепенная каменная, опасная красная), вкладки, поля, чекбоксы, слоты с рамкой редкости, чипы, полосы прогресса и счётчики. Ни один экран не придумывает свой стиль. Шрифт Fusion Pixel (лицензия OFL), чёткий на любом экране, с диакритикой, кириллицей и китайским, что уже покрывает четыре языка, которые будут в игре.
У 52 предметов, 27 частей экипировки, скиллов и 5 классов появились иконки. Bolsa стала сеткой, экипировка отображается в рамке редкости, а ряд скиллов в комнате показывает иконку с перезарядкой сверху.
Некоторые экраны новые. На титульном экране ночная деревня, окружённая гигантскими грибами, и логотип, а логин это карточка по центру. «Sua dupla» показывает эмблемы классов и реакции, которые делает пара. Гача стала карточкой баннера, с гарантией в виде полосы, а Agenda стала карточками, с отсчётом Рейда на первом плане.
Про графику: набор интерфейса, иконки, эмблемы, логотип и фон мы сгенерировали сами с помощью ИИ для изображений и почистили скриптом. Это графика для прототипа, и она будет заменена собственной, когда та придёт.
Следующий шаг
Исправить кукол в мастере создания, которые отображаются без лица, и сделать собственные иконки для большего числа скиллов.
Изменения
- UI theme: stone and aged gold, pixel font, procedural frames
Step 1 of docs/redesign-ui.md: one global theme so every existing screen stops looking like the default Godot theme, with no new image assets. - Fusion Pixel 12px proportional (zh_hans: Latin, Cyrillic, CJK; OFL-1.1, TakWolf) in assets/fonts, rendered without antialiasing or hinting on a 12 px grid; registered in CREDITS.md. - client/ui/ui_theme.gd (UiTheme): color tokens from section 2 and a Theme built from tiny pixel-painted 9-slice StyleBoxes (window frame with gold corner brackets, buttons primary/secondary/danger/ghost in 4 states, tabs that connect to the content, fields with error state, drawn checkbox and switch, thin gold scrollbars, HP/MP/XP/Gold/Job bars, popups, spin box, rarity slots, chips, bubble, toast). apply() merges it into the default theme from main.gd so it reaches controls inside CanvasLayers; the server never loads it. - UIPanel uses theme variations instead of per-node overrides; old helpers keep working (legacy colors map to Muted/Value/OkLabel/..., FONT_TITLE maps to Header). New helpers: primary, secondary, danger, ghost, icon_button, chip, progress, list_row (whole row tappable), slot, stepper, styled. The old text-only list_row is now text_row. - UiRoot modals, toasts, status chips and the menu grid use the theme and center themselves; hints become a speech bubble above the bar, right of center, with a tail pointing at the bar. - Local font-size themes removed from account, chat, trade, party box and HUD so everything uses the pixel font sizes. - tools/ui_shots: --lang and a components/modal/menu showcase; tests/test_ui_theme.gd checks variations and font coverage.
- UI kit art in the theme, title screen and account/gacha/agenda redesign
UiTheme now layers the pixel-art kit (assets/ui/kit/) over the procedural frames, which stay as the fallback when the art is missing (server, tests without import). Kit pieces render 1:1 (one art pixel = one layout pixel): corners are kept whole and edges/centre come from one clean pixel of the art, stretched, so nothing distorts and Godot's TILE mode seams never show. Covers windows (plain and titled with the title plate), stone/gold/danger buttons with hover/pressed/disabled, a big gold "PrimaryHero", tabs, inputs with focus glow and error tint, checkboxes, rarity slots, chips, toasts and tooltips, the divider, the vertical scrollbar and 16 px meters. New variations: WindowTitled, PrimaryHero, CloseButton, CardButton, CardGold, Tag, Badge, Display, OnGold, Meter*. Screens: - Title: full-screen title art (TitleBackdrop, cover, nearest), logo, big Jogar, Treino and Opções, server status chip, version caption; dev modes behind a "Dev" toggle. Opções opens the options panel. - Login, register, home, create character/team: centred card over the same art, labels above fields, per-field errors, visible checkboxes, links as ghost buttons, one primary action. - Sua dupla: class cards with emblem, role and element tags, gold frame and 1/2 badge for the pair, reaction strip with element tags, two doll cards with name and Random, single "Começar". - Gacha: banner card with a silhouette placeholder, stars, pity meter, Puxar 1/10 with the essence cost in a chip, rates behind an "i" modal, results revealed as rarity-framed cards. - Agenda: Incursão card with a big countdown, 2x2 legend cards with status badges, dungeon week strip, keys as chips. - Menu hub and modals use the titled kit window and the X art. tools/screenshot.gd gains --title and seeds essence plus a 10-pull for gacha prints; ui_shots uses the title backdrop.
- Content icons in every panel and the HUD skill row
Add Icons (client/ui/icons.gd): cached loaders for item, gear base, skill and class emblem art, never null (Kenney slot/bag icons or a drawn "?" square when a file is missing). Skill icons are picked from the resolved element and kind (aoe, slow, heal, shield, physical scaling), with an optional "icon" override in data/skills.json (meteor uses the volcano). Panels now show the art instead of plain text: the bag is a slot grid with quantities and a side drawer, gear and food rows carry rarity-framed icons, the character sheet shows equipped pieces in 44 px slots around the doll, the skill tree and the 6-slot room bar have skill icons, and market, storage, trade, cooking (dish + inline ingredient icons) and smith rows use the new UIPanel.thing_row/thumb/mini_icon helpers. The floating HUD skill row draws the icon, dimmed when unusable, with the cooldown overlay, key number, level and a thin element stripe. Server gear views for storage, trade and market now include base and upgrade so the client can pick the piece icon and localize the name. tests/test_icons.gd checks every item, gear base and class has art and pins the skill icon choice.
- chore(art): Gemini-generated UI kit, icons, emblems and title art
79 item and gear icons, 16 skill icons, 5 class emblems, the logo, the title background and the UI kit pieces (window, close, buttons in all states, tabs, slots per rarity, checkbox, inputs, progress bars, scrollbar, divider, chip), keyed out of magenta and reduced by script. Internal prototype art, registered in CREDITS.md; not for publishing.