gohud — um kit de HUD e UI para o Godot 4

Novidades: arcade, quadrinhos, Material 3 e um visual para crianças

Quatro famílias novas se juntam à padrão, à sci-fi e à medieval — agora são catorze visuais embutidos, cada um em versão escura e clara. Todo widget, popup e peça do HUD os adota sem nenhuma mudança no seu código: troque o preset e a tela inteira acompanha.

A galeria do gohud em material_light — botões em pílula, cartões preenchidos e cores do Material 3 — `material_light`

A galeria do gohud em material_dark — as mesmas formas do Material 3 na base escura — `material_dark`

A galeria do gohud em kids_light — botões de gelatina gorduchos em cores de giz de cera sobre uma página ensolarada — `kids_light`

A galeria do gohud em kids_dark — a mesma caixa de brinquedos sobre uma página azul-noite — `kids_dark`

A galeria do gohud em comic_light — contornos grossos de tinta e sombras duras sobre uma página creme de papel — `comic_light`

A galeria do gohud em comic_dark — contornos creme e um primário amarelo sobre uma página noturna — `comic_dark`

A galeria do gohud em arcade_light — teclas pintadas com um degradê e um brilho, e um painel de HUD grosso com moldura azul sobre uma página azul-céu — `arcade_light`

A galeria do gohud em arcade_dark — as mesmas teclas vivas sobre uma página noturna — `arcade_dark`

Material 3 — para telas de apps

Material 3 Expressive, medido contra os tokens oficiais do M3: botões em pílula com uma placa de 40dp dentro da área de toque de 48dp, diálogos e folhas de 28dp, cartões preenchidos, campos com contorno e o controle deslizante Expressive. Os componentes de app — barra de navegação, barra superior, FAB, barra de busca, chips, progresso e o seletor de data — seguem os tokens de componente do M3, e os títulos usam a Roboto que acompanha o pacote. Para lojas, configurações, caixas de entrada e qualquer tela que deva parecer um app.

Infantil — a caixa de brinquedos

Feito para crianças: cada tecla, linha e painel é uma bala de gelatina com um contorno grosso e uma borda sólida que afunda ao ser pressionada, e cada tipo de controle tem sua própria cor de giz de cera. Os slots rápidos são blocos de bala, os emblemas são adesivos, o joystick é um arco-íris, as janelas ganham uma faixa de título ensolarada e um botão de fechar redondo de bala, e tudo se amassa ao ser tocado. Os tamanhos e a fonte do seu projeto continuam exatamente como eram.

Quadrinhos — tinta forte

Cada face é um quadro de história em quadrinhos: a cor da superfície dentro de um contorno grosso de tinta, com uma sombra dura atrás que some quando a face é pressionada. Uma configuração liga ou desliga todas as sombras, outras duas definem a largura do contorno e o tamanho da sombra, e uma única chamada faz o mesmo para um só widget. As janelas ganham uma legenda de título amarela.

Arcade — teclas pintadas

Cada tecla é pintada — um degradê, um brilho branco e uma borda que afunda ao ser pressionada, dentro de um contorno de tinta azul-marinho — e tem o rótulo em branco com contorno de tinta: verde para jogar, azul para o resto, vermelho para apagar. Os painéis são grossos, uma moldura colorida em volta de um fundo claro, e as janelas ganham uma faixa de título dourada e uma tecla de fechar vermelha e redonda.

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # ou MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # ou &"kids_dark"
GoUi.use_preset(&"comic_light")                  # ou &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # ou &"arcade_dark"

Material 3 em detalhe → · O visual infantil em detalhe → · Arcade, widget por widget ↓ · Quadrinhos, widget por widget ↓ · O mesmo popup nos catorze visuais →

Arcade: teclas pintadas e painéis grossos

O visual mais novo veste cada tela como um fliperama. Cada tecla é pintada — um degradê do topo claro à base mais intensa, um traço de brilho branco e uma borda que afunda ao ser pressionada, tudo dentro de um contorno de tinta azul-marinho — e seu rótulo é branco com contorno de tinta. Cada painel é grosso: uma moldura colorida com brilho próprio em volta de um fundo claro. arcade_light põe painéis brancos sobre uma página azul-céu; arcade_dark põe painéis azul-marinho sobre uma página noturna. Cada imagem abaixo é uma tela real do gohud — o mesmo código, uma linha de preset.

GoUi.use_preset(&"arcade_light")   # ou &"arcade_dark"

A galeria do gohud em arcade_light — teclas pintadas de verde, azul, vermelho e lavanda e um painel de HUD com moldura azul sobre uma página azul-céu — `arcade_light` · a galeria

Uma folha inferior em arcade_light — um painel grosso emoldurado subindo da borda inferior, com linhas de teclas — `GoSheet`

Um coach mark em arcade_light — um balão emoldurado apontando para uma tecla — `GoCoachMark`

Uma gaveta lateral em arcade_dark — um painel azul-marinho de linhas de navegação sobre a tela escurecida — `GoDrawer`

Um popover em arcade_dark — um balão emoldurado ancorado à tecla que o abriu — `GoPopover`

Um alerta em arcade_dark — uma faixa dourada Level up!, uma tecla de fechar vermelha e uma tecla Great verde sobre um painel azul-marinho com moldura azul — `GoDialogs.alert()`

Uma snackbar em arcade_light — um painel branco com moldura marrom ao longo da borda inferior, com uma ação Undo — `GoSnackbar`

Cada tecla, pintada

Botões em arcade_light — Jogar em verde, Detalhes em azul, uma tecla branca com contorno, Apagar em coral, Apagar para sempre em vermelho, uma tecla compacta lavanda e uma tecla cinza desativada, cada uma pintada com um degradê, um brilho e uma borda dentro de um contorno azul-marinho — `GoStyle.button()`

Abas em arcade_light — a aba escolhida é uma tecla pintada de azul, as outras são teclas lavanda — `GoStyle.tabs()`

Um controle segmentado em arcade_light — teclas pintadas separadas, a escolhida azul e afundada — Teclas segmentadas

Interruptores e caixas de seleção em arcade_light — um trilho verde brilhante quando ligado, lavanda quando desligado, e uma caixa verde com visto — Interruptores e caixas de seleção

Cartões em arcade_light — fundos claros dentro de molduras azuis grossas com um brilho e uma borda — `GoStyle.card()`

Um formulário em arcade_light — um campo branco afundado, um interruptor e uma tecla Salvar verde — `GoForm`

Uma grade de opções em arcade_light — teclas, a escolhida contornada de dourado sobre um tom verde — `GoStyle.choice_grid()`

Uma grade de slots em arcade_light — um inventário de teclas brilhantes com contagem de pilha — `GoSlotGrid`

Linhas de lista em arcade_light — cada linha é uma tecla clara com um ícone — Linhas de lista

Um seletor de data em arcade_light — dias em forma de tecla, o dia escolhido uma tecla pintada — `GoDatePicker`

Um controle deslizante em arcade_light — um tubo azul brilhante num sulco de tinta e um botão redondo em forma de tecla — `GoStyle.slider()`

Um grupo de opções em arcade_light — teclas redondas, a escolhida com um ponto azul — `GoStyle.radio_group()`

Chips de filtro em arcade_light — chips em forma de tecla, o escolhido tingido de azul com um visto, e chips removíveis com um X — `GoStyle.filter_chip()`

Uma barra de pesquisa em arcade_light — um campo branco afundado num contorno de tinta, com um ícone de pesquisa e um de filtro — `GoSearchBar`

Um stepper em arcade_light — cada etapa é uma tecla clara, e a etapa aberta mostra sua tecla Next verde — `GoStepper`

Uma tabela de classificação em arcade_light — uma linha sim, outra não, é uma tecla em relevo — `GoTable`

Uma barra de navegação inferior em arcade_light — o ícone da aba escolhida numa pílula azul em forma de tecla e um selo vermelho de contagem — `GoNavBar`

Um seletor de hora em arcade_light — a hora e os minutos em teclas grandes, e teclas AM e PM sobre um mostrador de relógio — `GoTimePicker`

Uma entrada de código em arcade_light — oito células em forma de tecla, a que está sendo digitada contornada de dourado — `GoCodeInput`

Um seletor de roda em arcade_light — a quantidade escolhida numa faixa em forma de tecla, as outras esmaecendo acima e abaixo — `GoWheelPicker`

À noite: `arcade_dark`

Numa página escura a tinta passa a ser a própria página, bem mais profunda, e as cores pintadas continuam igualmente vivas.

Botões em arcade_dark — as mesmas cores vivas sobre uma página noturna — `GoStyle.button()` à noite

Barras do HUD em arcade_dark — tubos vermelho de HP, azul de MP e verde de XP em sulcos afundados — `GoBar`

Cartões de HUD em arcade_dark — um fundo azul-marinho numa moldura azul grossa sobre o jogo — `GoStyle.hud_panel()`

Slots rápidos em arcade_dark — teclas com contagem de pilha, e um slot em recarga contornado de dourado — `GoSlot`

Um joystick virtual em arcade_dark — uma base brilhante num anel de tinta, com quatro setas e um botão em forma de tecla — `GoJoystick`

Alertas em arcade_dark — pequenos painéis emoldurados em amarelo, verde, vermelho e azul — Alertas

Botões de ação flutuantes em arcade_dark — teclas pintadas de dourado com um brilho — `GoFab`

Um calendário de recompensas em arcade_dark — dias em forma de tecla, o de hoje contornado de dourado — `GoRewardCalendar`

Um controle segmentado em arcade_dark — a tecla Day escolhida pintada de azul, Week e Month em lavanda, todos os rótulos brancos — Teclas segmentadas

Uma visualização em abas em arcade_dark — teclas de aba pintadas sobre linhas de itens que são teclas azul-marinho — `GoTabView`

Uma lista rolável em arcade_dark — linhas de itens em teclas azul-marinho e uma fileira de chips de filtro, o escolhido em azul — `GoScroll`

Interruptores e caixas de seleção em arcade_dark — um trilho verde brilhante quando ligado, lavanda quando desligado — Interruptores e caixas de seleção

Chips de raridade em arcade_dark — pequenas placas pintadas, de Common a Cursed — `GoStyle.chip()`

Uma grade de slots em arcade_dark — um inventário de teclas azul-marinho com ícones brancos e contagem de pilha — `GoSlotGrid`

Um controle deslizante de intervalo em arcade_dark — um trecho azul entre dois botões brilhantes num sulco escuro — `GoRangeSlider`

Paginação em arcade_dark — a página atual é uma tecla pintada de verde — `GoPagination`

Selos em arcade_dark — placas coral com contorno de tinta sobre os ícones — `GoBadge`

Como o visual arcade funciona

A face

Cada tecla e cada painel é um GoStyleBoxArcade: um contorno de tinta, um corpo em degradê, uma borda e um brilho, desenhados dentro do próprio retângulo do controle — uma tecla mantém o tamanho de um estado para outro, e ao ser pressionada apenas afunda.

Rótulos que se leem

Um rótulo branco com contorno de tinta se lê sobre qualquer cor da qual o contorno o destaca — a WCAG conta o contorno como parte da letra. Cada cor é ajustada até que seu rótulo passe de 4,6:1 em qualquer altura do degradê.

Janelas

O título de uma janela fica sobre uma faixa dourada, em letras brancas contornadas de tinta, ao lado de uma tecla de fechar vermelha e redonda. Diálogos, folhas, gavetas e popovers são painéis grossos emoldurados.

Uma tecla pode ter a sua própria cor — uma tecla de loja laranja num menu de pausa:

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

O visual arcade em detalhe → · O mesmo popup nos catorze visuais →

Quadrinhos: tinta forte e uma sombra dura

O visual de quadrinhos desenha cada face como um quadro de história em quadrinhos — a cor da superfície dentro de um contorno grosso de tinta, com uma sombra dura e sólida projetada para baixo e para a direita. comic_light entinta em preto sobre uma página creme de papel com um primário cobalto; comic_dark entinta em creme sobre uma página noturna com um primário amarelo. Cada imagem abaixo é uma tela real do gohud — o mesmo código, uma linha de preset.

GoUi.use_preset(&"comic_light")   # ou &"comic_dark"

A galeria do gohud em comic_light — teclas, linhas e barras entintadas com sombras duras sobre uma página creme de papel — `comic_light` · a galeria

A galeria do gohud em comic_dark — tinta creme e um primário amarelo sobre uma página noturna — `comic_dark` · a galeria

Uma folha inferior em comic_light — um painel entintado subindo da borda inferior, com linhas entintadas — `GoSheet`

Um coach mark em comic_light — um balão entintado apontando para um botão — `GoCoachMark`

Uma gaveta lateral em comic_dark — um painel entintado de linhas de navegação sobre a tela escurecida — `GoDrawer`

Um popover em comic_dark — um balão entintado ancorado ao botão que o abriu — `GoPopover`

Botões, interruptores, abas, controles deslizantes, cartões, formulários, tabelas, seletores e chips usam a tinta — você não precisa estilizá-los um por um. Pressione uma tecla e a sombra dela some: a face afunda no lugar, como um carimbo. Faces desativadas perdem a sombra e esmaecem, então o que pode ser pressionado se destaca do que não pode.

Botões em comic_light — teclas primária, secundária, com contorno, de perigo, compacta, simples e desativada, cada uma com um contorno preto grosso e uma sombra dura — `GoStyle.button()` — todos os tipos

Interruptores e caixas de seleção em comic_light — um trilho e um botão entintados, caixas entintadas com um visto — Interruptores e caixas de seleção

Botões de opção em comic_light — anéis entintados, o escolhido com um ponto preenchido — Botões de opção

Abas em comic_light — a aba escolhida é um painel entintado, as outras ficam sobre um sublinhado de tinta — `GoStyle.tabs()`

Um controle segmentado em comic_light — células entintadas, a escolhida preenchida — Pílulas segmentadas

Um controle deslizante em comic_light — um sulco entintado, um preenchimento fino de destaque e uma alça entintada — `GoStyle.slider()`

Seletores suspensos em comic_light — teclas entintadas com uma setinha — Seletores suspensos

Um cartão em comic_light — um painel branco com um contorno grosso e uma sombra dura — `GoStyle.card()`

Um formulário em comic_light — um campo entintado com uma dica, um interruptor e uma tecla Salvar entintada — `GoForm`

Linhas de lista em comic_light — cada linha é uma faixa entintada com um ícone, um subtítulo ou um rótulo de perigo — Linhas de lista

Uma tabela em comic_light — um cabeçalho sobre um traço de tinta, e cada linha de pontuação é uma faixa entintada — `GoTable`

Um seletor de data em comic_light — células de dia entintadas, o dia escolhido preenchido — `GoDatePicker`

Um seletor de hora em comic_light — caixas de hora e minuto entintadas, teclas AM e PM e um mostrador de relógio — `GoTimePicker`

Um stepper em comic_light — linhas de etapas entintadas, a etapa concluída marcada e a próxima esmaecida — `GoStepper`

Chips de filtro e de entrada em comic_light — pílulas entintadas, o filtro escolhido tingido e com um visto — Chips de filtro

Uma barra de navegação em comic_light — um traço de tinta no topo, a aba atual em uma pílula entintada e um emblema em Alertas — `GoNavBar`

Um grupo de entrada em comic_light — um campo e sua tecla Enviar soldados em uma única forma entintada — `GoInputGroup`

Um botão dividido em comic_light — uma ação e uma seta de menu como duas metades entintadas — `GoSplitButton`

Paginação em comic_light — a página atual é uma tecla entintada com uma sombra dura — `GoPagination`

À noite: `comic_dark`

Em uma página escura um contorno preto sumiria, então o comic_dark o desenha em creme e projeta uma sombra suave tingida com a mesma tinta. As peças do HUD — slots rápidos, barras, o joystick e o calendário de recompensas — seguem as mesmas regras.

Botões em comic_dark — contornos creme, um primário amarelo e sombras duras suaves sobre uma página noturna — `GoStyle.button()` à noite

Slots rápidos em comic_dark — blocos entintados com contagem de pilha e recarga, os slots acesos contornados de amarelo — `GoSlot`

Barras do HUD em comic_dark — HP, MP e XP em sulcos entintados de creme — `GoBar`

Um joystick virtual em comic_dark — um anel creme e um botão que projeta uma sombra — `GoJoystick`

Alertas em comic_dark — painéis de informação, sucesso, aviso e perigo em tinta creme — Alertas

Uma grade de slots em comic_dark — um inventário de blocos entintados — `GoSlotGrid`

Um calendário de recompensas em comic_dark — células de dia entintadas, os dias resgatados marcados e o de hoje contornado de amarelo — `GoRewardCalendar`

Chips de raridade em comic_dark — pílulas entintadas, cada uma tingida com sua própria cor — Chips

Um controle deslizante de intervalo em comic_dark — duas alças entintadas sobre um sulco entintado — `GoRangeSlider`

Uma barra de busca em comic_dark — uma barra entintada com ícones de busca e de filtro — `GoSearchBar`

Botões de ação flutuantes em comic_dark — teclas amarelas em tinta creme com sombras duras — `GoFab`

Como o visual de quadrinhos funciona

Um StyleBox para cada face

Cada face é um GoStyleBoxComic: um preenchimento, um contorno e uma sombra, desenhados dentro do próprio retângulo do controle. Ele lê os tamanhos do contorno e da sombra do GoConfig toda vez que desenha, então uma única configuração muda a tela inteira de uma vez.

Pressionado quer dizer plano

Uma tecla pressionada perde a sombra e desce para o seu lugar. O hover mantém a sombra; o foco acrescenta um anel de tinta interno que nunca cobre o contorno; faces desativadas perdem a sombra e esmaecem.

A skin entinta o resto

O GoSkinComic entinta o que o código desenha: slots rápidos, chips, emblemas, avatares, avisos, a barra de navegação, o FAB, as células de data e o joystick, cujo botão projeta uma sombra.

Janelas ganham uma legenda

O título de uma janela fica sobre uma legenda amarela, como o recordatório de uma história em quadrinhos, ao lado de um botão de fechar redondo e entintado. Diálogos, folhas, gavetas e popovers são painéis entintados opacos.

Legível de dia e de noite

As duas paletas passam nas mesmas verificações de contraste WCAG que todos os outros presets, incluindo teclas pressionadas e desativadas. Quando a cor de uma legenda ficaria próxima demais da página, o contorno dela passa a usar a cor da página.

Nenhuma mudança de layout

O contorno e a sombra cabem dentro de cada controle e o padding fica como o tema definiu, então uma tela montada em outro visual mantém o layout — e a fonte do seu projeto.

Três configurações e uma chamada

Três configurações do GoConfig mudam todas as faces de quadrinhos de uma vez. Nada é reconstruído — a tela é redesenhada assim que você as altera.

GoUi.config.comic_border_width = 2.0   # o contorno (dp) — 3 por padrão
GoUi.config.comic_shadow_size = 6.0    # a sombra (dp) — 4 por padrão
GoUi.config.comic_shadow = false       # nenhuma sombra em lugar nenhum

Um widget pode seguir seu próprio caminho, não importa o que digam as configurações. Passe true como último argumento para incluir tudo o que está dentro dele.

GoStyle.comic_shadow(skip_button, false)     # este botão fica plano
GoStyle.comic_shadow(card, true, true)       # este cartão e tudo dentro dele mantêm a sombra
GoStyle.comic_border(title, 5.0)             # um contorno mais grosso neste aqui

Crie seus próprios quadrinhos. tools/new_theme.py inked --from comic_light copia a paleta; mude as cores do papel, da tinta e do primário e rode tools/make_theme.py inked. A tinta, a sombra e a skin vêm junto.

O visual de quadrinhos em detalhe → · O mesmo popup nos catorze visuais →

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.

tema medieval do gohud — uma ficha de personagem com barras de vida, mana e estamina, uma bolsa de slots rápidos e um diário de missões em molduras de ouro forjado — **Medieval** — personagem, inventário e missões

tema medieval do gohud — um painel de entrada com campo de nome, interruptor, caixas de seleção e controle deslizante de volume, uma grade de blocos e um prompt card de convite para o grupo com Aceitar e Recusar — **Medieval** — formulários, grades e prompt cards

tema sci-fi do gohud — um painel de controles de toque com cantos chanfrados, joystick hexagonal, um seletor Fixo / Seguir / Relativo e botões de ação redondos — **Sci-fi** — painéis angulares e controles de toque

Todos os catorze 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.

Toda medida é um token

Espaçamentos, cantos e tamanhos de texto são chamados pelo nome, não escritos como números. Troque o tema e a tela inteira acompanha.

Tamanho visível ≠ tamanho de toque

Um botão de fechar aparenta 36dp, mas sua área de toque tem 48dp. Onde slots apertados se sobrepõem, o toque vai para aquele cujo centro está mais perto.

Notches e teclados

As peças do HUD ficam dentro da área segura, e um campo de entrada sobe acima do teclado virtual quando ele aparece.

Voltar fecha uma coisa só

Escape e o Voltar do Android fecham apenas a superfície mais acima. Janelas empilhadas não somem todas juntas.

Avisos nunca roubam o toque

Toque através de um snackbar e o botão embaixo dele recebe o toque. O foco também não é tomado.

Ícones são pedidos pelo nome

Os widgets só conhecem GoIconSet.CLOSE. Troque o conjunto e todos os desenhos mudam sem tocar em uma linha de código. Ícones →

Catorze visuais, uma linha

GoUi.use_preset() troca tema, skin e ícones de uma vez — molduras arredondadas, chanfradas sci-fi, forjadas medievais, os componentes de app do Material 3, as balas de gelatina infantis, a tinta dos quadrinhos ou a pintura arcade.

Legível por medição

Todo tema é conferido contra a WCAG, incluindo os estados dos botões e os painéis de HUD translúcidos sobre branco puro e preto puro.

Tudo funciona sem ativar o plugin. Ativá-lo adiciona um autoload GoRuntime que acompanha o tamanho da janela, a escala de dp e a altura do teclado, além de configurações de projeto para o recurso de configuração e para o preset — conveniências, não requisitos.

Instalar o gohud

Dois caminhos. Deixe o seu agente de IA fazer, ou solte a pasta no seu projeto — não há mais nada para configurar.

Instalação

Início rápido

Cinco linhas colocam um ecrã com tema no visor. O percurso completo está na página de instalação.

Início rápido

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

Preset	Visual
`default_dark`	O gohud original — cantos arredondados, destaque em azul suave
`default_light`	As mesmas formas em uma paleta clara
`scifi_dark`	Cantos chanfrados, bordas e brilho em neon ciano, joystick hexagonal, colchetes de mira
`scifi_light`	As mesmas formas angulares em uma paleta clara de blueprint
`medieval_dark`	Ferro escuro e couro, molduras de ouro envelhecido, rebites, ícones gravados, títulos em Cinzel
`medieval_light`	Pergaminho, tinta e bronze com as mesmas molduras forjadas
`material_light` Novo	Material 3 para telas de apps — botões em pílula, diálogos de 28dp, cartões preenchidos, a barra de navegação, o FAB e a barra de busca de um app, Roboto
`material_dark` Novo	As mesmas formas do Material 3 na base escura
`kids_light` Novo	A caixa de brinquedos para crianças — teclas de bala de gelatina com contorno grosso e uma borda que afunda ao ser pressionada, cores de giz de cera, uma página ensolarada
`kids_dark` Novo	A mesma caixa de brinquedos sobre uma página azul-noite
`comic_light` Novo	Quadros de quadrinhos — um contorno grosso de tinta e uma sombra dura em cada face, painéis brancos sobre uma página creme de papel; a sombra, o tamanho dela e a largura do contorno são configurações
`comic_dark` Novo	A mesma tinta sobre uma página noturna — contornos creme e um primário amarelo
`arcade_light` Novo	Um fliperama — cada tecla pintada com um degradê, um brilho e uma borda, com o rótulo em branco e contorno de tinta; painéis grossos emoldurados sobre uma página azul-céu e uma faixa de título dourada nas janelas
`arcade_dark` Novo	As mesmas teclas vivas sobre painéis azul-marinho e uma página noturna

A galeria do gohud com o preset default_dark — cantos arredondados, destaque azul — `default_dark` — cantos arredondados, destaque em azul suave

preset default_light — as mesmas formas em uma paleta clara — `default_light` — mesmas formas, paleta clara

preset scifi_dark — cantos chanfrados e neon ciano — `scifi_dark` — cantos chanfrados, neon ciano

preset scifi_light — as mesmas formas angulares em uma paleta blueprint — `scifi_light` — mesmas formas angulares, paleta blueprint

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.

medieval_dark — ficha de personagem, bolsa de slots rápidos e diário de missões — `medieval_dark` — ferro e couro

medieval_light — as mesmas telas de personagem, bolsa e missões em pergaminho — `medieval_light` — pergaminho e tinta

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.

default_dark a 1280x800 — conteúdo centralizado, HUD nos cantos — `default_dark` · 1280×800

scifi_dark a 1280x800 — o mesmo layout com painéis chanfrados e neon — `scifi_dark` · 1280×800

A mesma folha, outro visual

Uma folha inferior no default_dark — Padrão — cartão arredondado, linha de busca e rodapé fixos

Uma folha inferior no scifi_dark — borda de destaque em neon ao longo do topo — Sci-fi — borda de destaque no topo, cantos cortados, brilho

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.

Um tema novo é um arquivo JSON. new_theme.py kingdom --from medieval_dark escreve uma paleta com todos os valores herdados escritos por extenso; make_theme.py kingdom monta o tema, a arte dos controles e os dials da skin, e o preset aparece no seletor. Cada configuração e cada dial →

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

Classe	Formas que ela consegue fazer
`GoStyleBoxCut`	Cantos cortados na diagonal (chanfro), uma borda de destaque mais grossa, um brilho externo
`GoStyleBoxBracket`	Só as marcas de canto, sem cercar o conteúdo
`GoStyleBoxMedieval`	Uma moldura forjada com rebites, gravação nos cantos, um realce de bisel e a textura do material
`GoStyleBoxJelly`	Uma bala de gelatina — um contorno grosso, uma borda sólida que afunda ao ser pressionada, um corpo mais claro em cima e um brilho branco
`GoStyleBoxComic`	Um quadro de quadrinhos — um contorno grosso de tinta e uma sombra projetada dura, ambos dimensionados pelo `GoConfig` enquanto o jogo roda
`GoStyleBoxArcade`	Uma tecla ou um painel de arcade — um corpo em degradê, um brilho branco, uma borda que afunda ao ser pressionada e um contorno de tinta; um painel acrescenta uma moldura colorida grossa em volta de um fundo claro

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

Slots rápidos, um joystick e um chip desenhados por cada skin incluída — padrão, infantil, Material, medieval e sci-fi — O que uma skin desenha — padrão, infantil, Material, medieval, sci-fi

Slots rápidos, um joystick e um chip desenhados pela skin de quadrinhos — contornos de tinta e sombras duras — …e a skin de quadrinhos

Slots rápidos, um joystick e um chip desenhados pela skin arcade — teclas brilhantes e uma base com quatro setas — …e a skin arcade

GoStyle.box() sempre devolve um StyleBoxFlat, porque quem chama recebe o objeto e ajusta bg_color ou corner_radius. Use GoStyle.surface() quando uma forma personalizada precisa sobreviver.

Widgets

As peças, em uma tabela só. Cada uma em detalhe → · Todos os widgets, com imagem → · Popups e diálogos, o guia completo →

Classe	Base	O que faz
`GoSurface`	Control	Casca de cartão flutuante — posicionamento ao centro, embaixo ou ancorado, cabeçalho e rodapé fixos, corpo rolável, redimensionamento por arraste
`GoSheet`	CanvasLayer	Páginas que sobem de baixo, em uma camada própria para ficarem acima do HUD
`GoDialogs`	Node	Confirmações e alertas que você aguarda com `await`; `destructive` para ações irreversíveis
`GoForm`	MarginContainer	Formulários com largura máxima que se desviam do teclado virtual e, com `avoid_hud`, do HUD
`GoScroll`	ScrollContainer	Rolagem por toque; a barra de rolagem se encaixa no respiro do cartão
`GoNotice`	PanelContainer	Um snackbar que não toma nem o toque nem o foco
`GoPromptCard`	PanelContainer	Uma pergunta que não bloqueia o jogo
`GoCoachMark`	Control	Um tour guiado que aponta para controles de verdade; tocar no alvo avança
`GoHudAnchor`	Control	Fixa as peças do HUD em um dos nove pontos da área segura
`GoBar`	Control	Barras de vida, mana e experiência com mudanças suavizadas
`GoSlot`	Button	Um slot rápido — ícone, quantidade, cooldown e atalho em uma só face
`GoJoystick`	Control	Stick virtual nos modos fixo, seguir ou relativo
`GoIconButton`	Button	Parece pequeno, recebe toque grande
`GoStyle`	estático	Botões, linhas de lista, campos, chips, tabelas, abas e mais, feitos sempre do mesmo jeito

Esperando, avisando, contando

Classe	Base	O que faz
`GoSnackbar`	Node	a mensagem que se posiciona sozinha
`GoSpinner`	Control	uma espera sem fim à vista
`GoBadge`	PanelContainer	o pontinho de não lido, a etiqueta NOVO, o 99+

Formulários e listas

Classe	Base	O que faz
`GoField`	VBoxContainer	a linha que pode estar errada
`GoInputGroup`	HBoxContainer	uma entrada soldada ao botão dela
`GoCombobox`	Button	um seletor que busca
`GoCodeInput`	VBoxContainer	códigos de cupom e de presente
`GoTable`	VBoxContainer	cabeçalhos ordenáveis, linhas selecionáveis
`GoPagination`	HBoxContainer	páginas, ou uma linha Mais

Formas que os jogos realmente usam

Classe	Base	O que faz
`GoRewardCalendar`	VBoxContainer	presença diária
`GoRadar` · `GoDonut`	Control	atributos de relance
`GoCarousel`	VBoxContainer	banners e seleção de personagem
`GoKbd`	HBoxContainer	dicas de tecla que não mentem

Por cima da tela

Classe	Base	O que faz
`GoDrawer`	CanvasLayer	o painel lateral
`GoPopover`	RefCounted	o cartão ancorado
`GoContextMenu`	RefCounted	toque longo e clique direito
`GoConsole`	CanvasLayer	o console de desenvolvimento

Go HUD Skill

O gohud traz uma skill de IA: toda a API, modelos prontos a correr e um lançador de pré-visualização. Cole um bloco no seu agente e ele instala o gohud e sabe usá-lo.

Go HUD Skill

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 catorze 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 →

Verificações, releases e este site

Um único ponto de entrada roda todas as verificações; cada parte enxerga algo que as outras não veem.

bash addons/gohud/tools/check_all.sh

Verificação	O que ela pega
`run_tests.sh` em quatro tamanhos de tela	Comportamento e layout dos widgets, posições em RTL, foco de teclado, contraste da skin em tempo de execução, todos os presets
`new_project_check.sh`	Dependências escondidas de um projeto hospedeiro; com `--zip`, o release como ele é distribuído, com `--export`, um build Web
`check_contrast.py`	Contraste WCAG de cada arquivo de tema, incluindo estados de botão e painéis translúcidos
`check_generated.py` · `check_scaffold.sh`	Os temas gerados batem com suas paletas; um tema descartável é gerado e passa no contraste
`check_package.py`	A versão lida do package.json, movimentação do changelog e conteúdo do ZIP, em cópias temporárias
`check_site.py`	Os links deste site, as âncoras, o idioma da página, o glossário e as tabelas de dials

Última execução registrada — 2026-09-13, Godot 4.7.2, macOS, renderizador Compatibility. 438 de 438 verificações a 390×844, 844×390, 768×1024 e 1280×800 em um projeto vazio; 438 de 438 de novo com o autoload GoRuntime; uma exportação Web; zero falhas de contraste nos seis temas. Aparelhos Android ou iOS físicos não fizeram parte desta execução.

Versões de release

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # todas as verificações → ZIP → esse ZIP num projeto vazio
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

A versão é a que está escrita em package.json — o empacotamento nunca a incrementa. Para lançar uma versão nova, mude primeiro esse número. Uma execução bem-sucedida ajusta plugin.cfg e GoUi.VERSION a esse valor e, na primeira vez que essa versão é empacotada, move as notas de Unreleased do CHANGELOG.md para uma entrada datada. Empacotar de novo a mesma versão reconstrói o ZIP dela e substitui o anterior. Uma execução que falha não muda nada. O ZIP deixa de fora este site, os testes, as ferramentas e o package.json.

Este site

python3 addons/gohud/tools/make_site.py            # glossário e tabelas de dials das skins, gerados a partir do código
python3 addons/gohud/tools/check_site.py           # links, âncoras, idioma, glossário, tabelas geradas
bash addons/gohud/tools/site_shots.sh /tmp/shots   # capturas de desktop e de celular de todas as páginas

As páginas são HTML puro em www/ — inglês na raiz, coreano em ko/. Um workflow do GitHub Actions publica essa pasta como raiz do site.

UI de jogo, movida por um único recurso

Novidades: arcade, quadrinhos, Material 3 e um visual para crianças

Material 3 — para telas de apps

Infantil — a caixa de brinquedos

Quadrinhos — tinta forte

Arcade — teclas pintadas

Arcade: teclas pintadas e painéis grossos

Cada tecla, pintada

À noite: arcade_dark

Como o visual arcade funciona

A face

Rótulos que se leem

Janelas

Quadrinhos: tinta forte e uma sombra dura

Todo widget, entintado

À noite: comic_dark

Como o visual de quadrinhos funciona

Um StyleBox para cada face

Pressionado quer dizer plano

A skin entinta o resto

Janelas ganham uma legenda

Legível de dia e de noite

Nenhuma mudança de layout

Três configurações e uma chamada

Como fica dentro de um jogo

O que ele tira das suas mãos

Toda medida é um token

Tamanho visível ≠ tamanho de toque

Notches e teclados

Voltar fecha uma coisa só

Avisos nunca roubam o toque

Ícones são pedidos pelo nome

Catorze visuais, uma linha

Legível por medição

Instalar o gohud

Início rápido

Mude o visual — cores e forma

Coleção medieval

A mesma tela no celular e no desktop

A mesma folha, outro visual

Skins — onde um Theme não alcança

Widgets

Esperando, avisando, contando

Formulários e listas

Formas que os jogos realmente usam

Por cima da tela

Go HUD Skill

A legibilidade é medida, não avaliada no olho

Verificações, releases e este site

Versões de release

Este site

À noite: `arcade_dark`

À noite: `comic_dark`