一张像游戏的脸
我们重新设计了所有不属于地图的界面:菜单、按钮、面板、账号画面和底部栏。到现在为止,游戏能用,但看起来像个开发工具,灰色的框、看起来像文字的按钮,还有只有名字的列表。
为什么
在有自己的美术之前,界面的样子已经可以先解决,而且测试的人的第一印象很重要。我们一个画面一个画面地过了一遍。上一阶段的流程是对的,缺的是视觉身份和层次:一眼就能看出什么可以点、什么重要、每一项是什么。
怎么运作
我们只选了一个方向,“石头和旧金”:深色、磨损的石头,一道做旧的金边,羊皮纸色调的文字,延续底部栏的边框。颜色有了含义:稀有度(普通、稀有、史诗、传说)、元素、危险和成功。
一切都来自同一个主题:窗口、按钮(主要的是金色,次要的是石头色,危险的是红色)、标签页、输入框、复选框、带稀有度边框的栏位、chip、进度条和计数器。没有哪个画面自己另搞一套样式。字体是 Fusion Pixel(OFL 许可),在任何屏幕上都清晰,带重音符号、西里尔字母和中文,已经覆盖了游戏将有的四种语言。
52 个物品、27 件装备、技能和 5 个职业都有了图标。背包变成了网格,装备显示在稀有度边框里,房间里的技能栏显示图标,冷却叠在上面。
有几个画面是新的。标题画面是一座被巨型蘑菇环绕的夜晚村庄,加上 logo,登录是中间的一张卡片。“你的搭档”显示职业的徽章和这一对能触发的反应。孢子园变成了卡池卡片,保底显示在一个进度条上,日程变成了卡片,团队突袭的倒计时放在最显眼的位置。
关于美术:界面套件、图标、徽章、logo 和背景是我们用图像 AI 生成、再用脚本清理的。这是原型美术,等自己的美术到了就会替换。
下一步
修好创建向导里的角色模型,它们现在没有脸,还要给更多技能做自己的图标。
变更
- 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.