UI de jogo, movida por um único recurso

Como fica dentro de um jogo

Os presets medieval e sci-fi — fichas de personagem, inventários e missões; formulários, grades e prompt cards; painéis angulares e controles de toque. Trocar de preset é uma linha de código.

Todos os seis presets e como trocá-los →

O que ele tira das suas mãos

O que mais custa tempo em UI de jogo não é o formato de um botão — é tudo aquilo que se desencontra de um aparelho para outro. O gohud resolve esse desencontro em um só lugar.

Mude o visual — cores e forma

Um Theme só consegue reestilizar aquilo que a engine desenha. Cantos arredondados são os únicos cantos que o StyleBoxFlat tem, e o joystick, os slots rápidos e o coach mark são desenhados por código — então um tema sozinho nunca muda a forma deles. Por isso o gohud traz presets: um tema, uma skin e um conjunto de ícones escolhidos como uma unidade só.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # tema, skin e ícones de uma vez

Essas quatro são a mesma tela de galeria. Não há uma linha de código de diferença — só o nome do preset. Cantos dos botões, formato dos interruptores, linhas de lista e bordas dos campos mudam todos juntos.

Coleção medieval

O medieval_dark combina ferro e couro com ouro envelhecido; o medieval_light usa pergaminho e tinta. As molduras de menu levam um rebite e um pequeno ornamento de canto, enquanto o HUD sempre visível fica discreto; 16 ícones gravados redesenham os nomes de itens, e só títulos e subtítulos usam a fonte Cinzel que acompanha o pacote.

As duas capturas são examples/medieval/medieval.tscn, montadas com os widgets padrão. O guia medieval e como criar o seu próprio reino →

A mesma tela no celular e no desktop

As capturas da galeria são de um celular em retrato. Abaixo está o mesmo código a 1280×800 — o conteúdo para em uma largura legível (480dp) e se centraliza, enquanto o HUD continua nos cantos. O formulário contorna as peças flutuantes do HUD, mas não se move quando já está livre delas: empurrar mesmo assim jogaria o conteúdo para fora do centro em uma tela larga.

A mesma folha, outro visual

Escolha um em Configurações do Projeto → gohud → Theme → Preset ou defina GoConfig.preset. Preencher theme, skin ou icons explicitamente vence o preset, então você pode pegar um preset e sobrescrever só um deles.

Skins — onde um Theme não alcança

Uma skin é dona do joystick, das faces dos slots rápidos, do anel do coach mark, dos chips, dos esqueletos de carregamento, dos alertas, dos divisores e dos títulos de seção. Crie uma subclasse e sobrescreva só o que quiser mudar.

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box

As três serializam dentro de um recurso Theme — é isso que permite a um tema mudar a forma, não só a cor. GoSkinSciFi e GoSkinMedieval são as subclasses que já vêm prontas.

Widgets

As peças, em uma tabela só. Cada uma em detalhe →

Esperando, avisando, contando

Formulários e listas

Formas que os jogos realmente usam

Por cima da tela

A legibilidade é medida, não avaliada no olho

"Bonito" é gosto; "legível" dá para medir. Um texto cinza fraco fica bem em um bom monitor e some em um celular sob a luz do dia — escolher no olho garante que isso vai acontecer mais cedo ou mais tarde.

python3 addons/gohud/tools/check_contrast.py

Todo par de cores e o rótulo de cada estado de botão sobre o painel em que ele está são medidos contra a WCAG, nos seis temas. Cores translúcidas são primeiro compostas sobre o fundo real — medi-las direto relata uma razão melhor do que a tela mostra.

Por isso as cores de texto são derivadas, não escolhidas: o gerador toma a entrada da paleta como ponto de partida e empurra a luminosidade dela até passar do limite em toda superfície onde ela pode cair. Mude a paleta e o contraste acompanha. As regras e as armadilhas por trás delas →