Uma cara de jogo
Redesenhamos toda a interface que não é mapa: menus, botões, painéis, telas de conta e a barra de baixo. Até aqui o jogo funcionava, mas parecia uma ferramenta de desenvolvimento, com caixas cinza, botões que pareciam texto e listas só de nomes.
Por quê
Antes da arte própria já dava para resolver a cara da interface, e a primeira impressão de quem testa pesa. Fizemos uma revisão tela por tela. O fluxo da fase anterior estava certo, o que faltava era identidade visual e hierarquia: saber de relance o que dá para tocar, o que é importante e o que é cada item.
Como funciona
Escolhemos uma direção só, “pedra e ouro velho”: pedra escura e gasta, filete de ouro envelhecido e texto em tom de pergaminho, continuando a moldura da barra de baixo. As cores ganharam significado: raridade (comum, raro, épico, lendário), elemento, perigo e sucesso.
Tudo sai de um tema único: janela, botões (principal dourado, secundário de pedra, perigo vermelho), abas, campos, caixas de marcar, slots com moldura de raridade, chips, barras de progresso e contadores. Nenhuma tela inventa um estilo próprio. A fonte é a Fusion Pixel (licença OFL), nítida em qualquer tela e com acentos, cirílico e chinês, o que já cobre os quatro idiomas que o jogo vai ter.
Os 52 itens, as 27 peças de equipamento, as skills e as 5 classes ganharam ícone. A Bolsa virou uma grade, o equipamento aparece na moldura da raridade e a fileira de skills da sala mostra o ícone com a recarga por cima.
Algumas telas são novas. O título tem uma vila noturna cercada de cogumelos gigantes e o logo, e o login é um cartão no centro. “Sua dupla” mostra os emblemas das classes e as reações que o par faz. O Esporário virou cartão de banner, com a garantia numa barra, e a Agenda virou cartões, com a contagem da Incursão em destaque.
Sobre a arte: o kit da interface, os ícones, os emblemas, o logo e o fundo foram gerados por nós com uma IA de imagem e limpos por script. É arte de protótipo, e vai ser trocada pela arte própria quando ela chegar.
Próximo passo
Corrigir os bonecos do assistente de criação, que aparecem sem o rosto, e ícones próprios para mais skills.
Mudanças
- 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.