gohud

HUD

← Widgets

São as coisas pequenas que decidem se fica bom

Capriche o quanto quiser nos painéis grandes — o que salta aos olhos é sempre algo pequeno: uma palavra partida ao meio, um brilho cortado, um slot apertado. Quatro coisas assim foram apontadas em 2026-09-13 e corrigidas nos widgets e nos temas, não na tela da demo, para que toda tela tenha o mesmo resultado.

O que apareceuCausaCorreção
O Done do coach mark virou Don/e Um botão com a quebra de linha ligada subtrai a largura do texto do mínimo dele — aperte e ele quebra dentro de uma palavra GoStyle.fit_words(): uma palavra só nunca quebra; várias palavras quebram, mas a palavra mais longa sempre cabe — avaliado sobre o texto exibido, não sobre a chave de tradução, e reaplicado pelo formulário quando o idioma muda
O brilho de um botão de largura total ficou cortado na vertical, do lado esquerdo Um contêiner de rolagem corta na própria borda, sem exceção. Só o lado direito sobreviveu, graças à calha da barra O GoScroll toma emprestado o respiro do pai para empurrar a borda dele 12dp para fora e o devolve por dentro — o conteúdo não se mexe
Tempo, ícone e contagem empilhados na vertical dentro de um slot Três linhas dentro de 48dp Ícone grande no centro, atalho no canto superior esquerdo, contagem como badge no canto inferior direito, tempo restante como badge sobre o ícone — os painéis dos badges vêm do badge_box() da skin
Uma lista suspensa sem relevo e sem seleção visível O realce do item sob o cursor usava o painel de botão; as marcas de seleção eram o padrão apagado da engine Um painel de realce próprio (tonalização suave do destaque), a mesma arte de marca usada nas caixas de seleção, altura de item dimensionada para o toque
Uma lista suspensa aberta — painel de realce em destaque suave e a marca de seleção do item escolhido
Lista suspensa — painel de realce e marca de seleção
Quatro slots rápidos — atalho no canto superior esquerdo, badge de contagem no canto inferior direito, o primeiro com um badge de tempo restante
Slots — badges nos cantos e tempo restante (sci-fi)

Dê uma descrição aos botões que só têm ícone com GoStyle.icon_button(icon, action, -1, tooltip_key) — a dica para quem usa mouse e o nome de acessibilidade para os leitores de tela saem os dois desse mesmo valor. O gohud desenha a dica por conta própria: o padrão da engine divide o texto em um caractere por linha quando o cálculo de largura dela dá errado (medido com 1dp de largura).

O cartão do coach mark se mantém longe dos elementos fixos

Em paisagem, o cartão era jogado bem na borda de cima ou de baixo — exatamente onde ficam os cabeçalhos e as peças do HUD; na demo, ele pousava sobre o → × do cabeçalho. Agora ele permanece no mesmo nível do alvo, contorna qualquer GoHudAnchor que reserve espaço e recebe por keep_clear outros elementos a evitar. Ele se move a menor distância que livra o obstáculo sem cobrir o alvo, e fica onde está quando a tela é pequena demais para livrar tudo — sobrepor é melhor do que sumir. A profundidade dele — para que se leia como acima da página — vem dos dials da skin (float_shadow_size, float_shadow_lift, float_shadow_alpha; as skins chanfradas usam float_glow_size). 

tour.keep_clear = [header_bar, toolbar]   # elementos fixos que não são âncoras

Telas com mouse e teclado

Um dedo não tem estado de hover. Desenvolva pensando só no celular e dois estados exclusivos do desktop ficam sem conferência — e um deles estava quebrado: o anel de foco do gohud era invisível em um botão primário. O painel é a cor de destaque e o anel também era: 1.00:1, a mesma cor desenhada sobre si mesma. Navegando pelo teclado, não havia como saber onde você estava.

A mesma linha de botões em três estados — normal, sob o cursor do mouse, com foco do teclado
De cima para baixo: normal · sob o cursor · com foco. Botões preenchidos ganham um anel que contrasta com o painel deles.

Os botões preenchidos (GoPrimaryButton, GoDangerSolidButton) usam um anel que contrasta com o próprio painel — escuro em um tema escuro, branco em um claro, um colchete de mira escuro no sci-fi. O verificador de contraste mede o anel de foco contra o painel em que ele está, então a regra sobrevive a uma troca de paleta (a WCAG 2.4.11 pede 3:1 nos indicadores de foco).

Os widgets do HUD

GoHudAnchor — nove pontos

Respeita a área segura e as margens das bordas. Dê a ele um landscape_spot e ele se move em paisagem — controles que ficam embaixo e ao centro em retrato podem ir para o canto inferior direito.

Por que ele existe. Escritos na mão para cada peça do HUD, âncoras e deslocamentos se desencontram: uma barra de vida acaba embaixo do recorte da câmera em um aparelho com notch, e um botão de controle cai sobre a barra de gestos em paisagem. Essa aritmética vive em um lugar só.

Mantendo o conteúdo fora de baixo do HUD

Quando uma tela rolável divide o display com um HUD, o conteúdo desliza por baixo dele e os dois conjuntos de texto se sobrepõem até que nenhum possa ser lido. Aconteceu duas vezes neste add-on: o texto de exemplo de um campo espremido entre os slots rápidos, e a alavanca de um interruptor de configurações pousando sobre a barra de vida. 

form.avoid_hud = true                  # se afasta de todo GoHudAnchor visível
joystick_anchor.reserve_space = false  # …menos os que só aparecem sob o dedo

Cada retângulo é contornado na direção que custa menos área. Uma barra no canto superior direito é contornada para baixo em um celular em retrato (13% da altura) e para o lado em paisagem (21% da largura) — desviar dela na vertical em paisagem custaria 27% da tela. O terreno já cedido é descontado antes de o próximo retângulo ser medido.

As peças do HUD também colidem entre si

Os nove pontos dividem a tela; eles não garantem que as peças não se encontrem. Um snackbar largo no topo ao centro caiu em cheio sobre a barra de vida no canto superior direito, escondendo o valor — não dava para ler quanta vida restava. 

notice_anchor.avoid_peers = true      # se acomoda abaixo do HUD fixo
notice_anchor.reserve_space = false   # e não empurra a página enquanto está visível

Ele se desvia apenas na vertical — mover-se também para os lados faria um aviso centralizado aparecer em um lugar diferente a cada vez. E ele só desvia de peças que não estão se desviando também: se os dois cedem, os dois trocam de lugar para sempre.

GoBar — vida, mana, experiência

var hp := GoBar.new()
hp.label_text = "HP"
hp.ink = GoUi.color(GoTheme.DANGER_FILL)   # o token só de preenchimento
hp.set_values(320, 500)                     # "320 / 500"

As mudanças são suavizadas em 0,18s — uma barra de vida que salta não conta o quanto o golpe doeu. O reduce_motion a torna instantânea. Números grandes são abreviados para 12.3k para que a largura da barra não fique tremendo conforme os dígitos entram e saem.

GoSlot — um slot rápido

Ícone, quantidade, cooldown e atalho em uma única face. Pendurar badges em um círculo pequeno faz cada slot ter uma largura diferente e a fileira fica bamba.

O tamanho visível e o tamanho de toque são diferentes. Slots colados têm caixas de toque de 48dp que se sobrepõem; a sobreposição vai para o slot cujo centro está mais perto — conte a eles uns sobre os outros através de touch_peers.

O keyboard_focus vem desligado por padrão, para que uma fileira de oito slots não fique entre quem usa teclado e todos os controles de configuração na ordem do Tab. Ligue-o quando teclado ou controle forem a única forma de entrada.

GoJoystick — stick virtual

ModoComportamento
FIXEDSempre no mesmo lugar — fácil de achar sem olhar
FOLLOWAparece onde o polegar encosta
RELATIVEContinua seguindo o polegar depois de aparecer — confortável para deslocamentos longos

O Vector2 vindo de moved tem comprimento de 0 a 1, então dá para multiplicá-lo direto por uma velocidade; ele não varia com o tamanho da tela nem com o DPI.

GoIconButton — parece pequeno, recebe toque grande

Só é seguro enquanto os irmãos dele ignoram o toque. Se a área ampliada cobrir o botão seguinte, esse botão para de responder. Botões de ícone lado a lado precisam de touch_peers.