Cara de juego
Rediseñamos toda la interfaz que no es mapa: menús, botones, paneles, pantallas de cuenta y la barra de abajo. Hasta aquí el juego funcionaba, pero parecía una herramienta de desarrollo, con cajas grises, botones que parecían texto y listas solo de nombres.
Por qué
Antes del arte propio ya se podía resolver la cara de la interfaz, y la primera impresión de quien prueba pesa. Hicimos una revisión pantalla por pantalla. El flujo de la fase anterior estaba bien; lo que faltaba era identidad visual y jerarquía: saber de un vistazo qué se puede tocar, qué es importante y qué es cada ítem.
Cómo funciona
Escogimos una sola dirección, “piedra y oro viejo”: piedra oscura y gastada, filete de oro envejecido y texto en tono de pergamino, continuando el marco de la barra de abajo. Los colores ganaron significado: rareza (común, raro, épico, legendario), elemento, peligro y éxito.
Todo sale de un tema único: ventana, botones (principal dorado, secundario de piedra, peligro rojo), pestañas, campos, casillas de verificación, slots con marco de rareza, chips, barras de progreso y contadores. Ninguna pantalla inventa un estilo propio. La fuente es Fusion Pixel (licencia OFL), nítida en cualquier pantalla y con acentos, cirílico y chino, lo que ya cubre los cuatro idiomas que va a tener el juego.
Los 52 ítems, las 27 piezas de equipamiento, las skills y las 5 clases ganaron ícono. La Mochila se volvió una cuadrícula, el equipamiento aparece en el marco de la rareza y la fila de skills de la sala muestra el ícono con la recarga encima.
Algunas pantallas son nuevas. El título tiene una villa nocturna rodeada de hongos gigantes y el logo, y el login es una tarjeta al centro. “Tu dupla” muestra los emblemas de las clases y las reacciones que hace la pareja. El Esporário se volvió una tarjeta de banner, con la garantía en una barra, y la Agenda se volvió tarjetas, con la cuenta regresiva de la Incursión destacada.
Sobre el arte: el kit de la interfaz, los íconos, los emblemas, el logo y el fondo los generamos nosotros con una IA de imágenes y los limpiamos con script. Es arte de prototipo, y se va a cambiar por el arte propio cuando llegue.
Próximo paso
Corregir los muñecos del asistente de creación, que aparecen sin rostro, y íconos propios para más skills.
Cambios
- 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.