A look that feels like a game
We redesigned all the interface that isn’t map: menus, buttons, panels, account screens and the bottom bar. Until now the game worked, but it looked like a dev tool, with gray boxes, buttons that looked like text and lists of nothing but names.
Why
Before our own art arrives we could already fix how the interface looks, and the first impression of someone testing counts for a lot. We reviewed it screen by screen. The flow from the previous phase was right. What was missing was visual identity and hierarchy: knowing at a glance what you can tap, what’s important and what each item is.
How it works
We picked a single direction, “stone and old gold”: dark, worn stone, a thin line of aged gold and parchment-toned text, continuing the frame of the bottom bar. Colors now carry meaning: rarity (common, rare, epic, legendary), element, danger and success.
Everything comes from one theme: window, buttons (gold primary, stone secondary, red danger), tabs, fields, checkboxes, slots with rarity frames, chips, progress bars and counters. No screen invents its own style. The font is Fusion Pixel (OFL license), crisp on any screen and with accents, Cyrillic and Chinese, which already covers the four languages the game will have.
The 52 items, the 27 equipment pieces, the skills and the 5 classes got icons. The Bag became a grid, equipment appears in its rarity frame and the room’s skill row shows the icon with the cooldown on top.
A few screens are new. The title has a night village surrounded by giant mushrooms and the logo, and the login is a card in the center. “Your duo” shows the class emblems and the reactions the pair makes. The Esporário became a banner card, with the pity counter on a bar, and the Agenda became cards, with the Raid countdown highlighted.
About the art: the interface kit, icons, emblems, logo and background were generated by us with an image AI and cleaned up by script. It’s prototype art, and it will be replaced by our own art when it arrives.
Next step
Fix the creation wizard’s dolls, which show up without a face, and make dedicated icons for more skills.
Changes
- 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.