gohud

HUD

← Widgets

Los detalles pequeños deciden si se ve bien

Pule los paneles grandes cuanto quieras — lo que llama la atención siempre es algo pequeño: una palabra partida en dos, un resplandor cortado, una ranura apretada. El 2026-09-13 se señalaron cuatro cosas así y se corrigieron en los widgets y los temas, no en la pantalla de la demo, para que todas las pantallas obtengan el mismo resultado.

Qué se veíaCausaSolución
El Done de la marca guía se convertía en Don/e Un botón con el ajuste de línea activado resta el ancho de su texto de su mínimo — apriétalo y se parte dentro de una palabra GoStyle.fit_words(): una sola palabra nunca se parte; varias palabras se ajustan por líneas, pero la palabra más larga siempre cabe — se juzga sobre el texto mostrado, no sobre la clave de traducción, y el formulario lo vuelve a aplicar cuando cambia el idioma
El resplandor de un botón a todo lo ancho quedaba cortado en vertical por la izquierda Un contenedor de desplazamiento recorta en su borde, sin excepciones. Solo sobrevivía el lado derecho, gracias al canal de la barra GoScroll toma prestado el relleno del padre para empujar su borde 12dp hacia fuera y lo devuelve por dentro — el contenido no se mueve
El tiempo, el icono y la cantidad se apilaban en vertical dentro de una ranura Tres filas dentro de 48dp Icono grande en el centro, atajo arriba a la izquierda, cantidad como insignia abajo a la derecha, tiempo restante como insignia sobre el icono — los paneles de insignia vienen del badge_box() del skin
Un desplegable plano sin selección visible El resaltado de los elementos usaba el panel de botón; las marcas de radio eran las tenues predeterminadas del motor Un panel de resaltado propio (tinte de acento suave), el mismo gráfico de radio que las casillas, y altura de elemento dimensionada para el tacto
Un desplegable abierto — panel de resaltado de acento suave y la marca de radio del elemento elegido
Desplegable — panel de resaltado y marca de radio
Cuatro ranuras rápidas — atajo arriba a la izquierda, insignia de cantidad abajo a la derecha, la primera con una insignia de tiempo restante
Ranuras — insignias de esquina y tiempo restante (ciencia ficción)

Dale a los botones de solo icono una descripción con GoStyle.icon_button(icon, action, -1, tooltip_key) — el tooltip para quien usa ratón y el nombre accesible para los lectores de pantalla salen ambos de ese único valor. gohud dibuja el tooltip por su cuenta: el del motor parte el texto a un carácter por línea cuando su cálculo de ancho falla (medido a 1dp de ancho).

La tarjeta de la marca guía se aparta de los elementos fijos

En horizontal, la tarjeta se enviaba antes al borde superior o inferior — justo donde viven los encabezados y las piezas del HUD; en la demo se posaba sobre el → × del encabezado. Ahora se mantiene al nivel de su objetivo, rodea cualquier GoHudAnchor que reserve espacio, y admite otros elementos a esquivar mediante keep_clear. Se mueve la distancia más corta que libra el obstáculo sin tapar el objetivo, y se queda donde está cuando la pantalla es demasiado pequeña para librarlo todo — solaparse es mejor que desaparecer. Su profundidad — para que se lea como algo por encima de la página — viene de los dials del skin (float_shadow_size, float_shadow_lift, float_shadow_alpha; los skins achaflanados usan float_glow_size). 

tour.keep_clear = [header_bar, toolbar]   # elementos fijos que no son anclas

Pantallas con ratón y teclado

Un dedo no tiene estado de hover. Si desarrollas solo pensando en móvil, dos estados exclusivos de escritorio quedan sin verificar — y uno de ellos estaba roto: el anillo de foco de gohud era invisible sobre un botón primario. El panel es del color de acento y el anillo también lo era: 1.00:1, el mismo color dibujado sobre sí mismo. Al moverte con el teclado, no había forma de saber dónde estabas.

La misma fila de botones en tres estados — normal, hover de ratón, foco de teclado
De arriba abajo: normal · hover · foco. Los botones rellenos reciben un anillo que contrasta con su panel.

Los botones rellenos (GoPrimaryButton, GoDangerSolidButton) usan un anillo que contrasta con su propio panel — oscuro en un tema oscuro, blanco en uno claro, un corchete de puntería oscuro en ciencia ficción. El verificador de contraste mide el anillo de foco contra el panel en el que se apoya, así que la regla sobrevive a un cambio de paleta (la WCAG 2.4.11 pide 3:1 en los indicadores de foco).

Los widgets del HUD

GoHudAnchor — nueve puntos

Respeta el área segura y los márgenes de borde. Dale un landscape_spot y se moverá en horizontal — los controles que en vertical van abajo al centro pueden pasar abajo a la derecha.

Por qué existe. Escritos a mano pieza por pieza, los anclajes y los desplazamientos se desajustan: una barra de vida acaba debajo del recorte de la cámara en un dispositivo con muesca, y un botón de control cae sobre la barra de gestos en horizontal. Esa aritmética vive en un único lugar.

Mantener el contenido fuera de debajo del HUD

Cuando una pantalla desplazable comparte la vista con un HUD, el contenido se desliza por debajo de él y los dos conjuntos de texto se solapan hasta que no se puede leer ninguno. Pasó dos veces en este add-on: el texto de sugerencia de un campo se colaba entre las ranuras rápidas, y el mando de un interruptor de ajustes caía sobre la barra de vida. 

form.avoid_hud = true                  # se aparta de todo GoHudAnchor visible
joystick_anchor.reserve_space = false  # …salvo los que solo aparecen bajo un dedo

Cada rectángulo se esquiva en la dirección que menos área cuesta. Una barra arriba a la derecha se rodea hacia abajo en un teléfono vertical (13% de la altura) y hacia los lados en horizontal (21% del ancho) — esquivarla en vertical estando en horizontal costaría el 27% de la pantalla. El terreno ya cedido se resta antes de medir el siguiente rectángulo.

Las piezas del HUD también chocan entre sí

Los nueve puntos reparten la pantalla; no garantizan que las piezas no se toquen. Un snackbar ancho arriba al centro caía justo encima de la barra de vida de arriba a la derecha, ocultando el valor — no se podía leer cuánta vida quedaba. 

notice_anchor.avoid_peers = true      # se coloca debajo del HUD fijo
notice_anchor.reserve_space = false   # y no empuja la página mientras está visible

Se aparta solo en vertical — moverse también hacia los lados haría que un aviso centrado apareciera en un sitio distinto cada vez. Y solo esquiva las piezas que no se están apartando ellas mismas: si ambas ceden, las dos se intercambian el sitio eternamente.

GoBar — vida, maná, experiencia

var hp := GoBar.new()
hp.label_text = "HP"
hp.ink = GoUi.color(GoTheme.DANGER_FILL)   # el token solo de relleno
hp.set_values(320, 500)                     # "320 / 500"

Los cambios se suavizan durante 0,18 s — una barra de vida que salta no te dice con cuánta fuerza te han golpeado. reduce_motion lo hace instantáneo. Los números grandes se abrevian a 12.3k para que el ancho de la barra no tiemble según entran y salen dígitos.

GoSlot — una ranura rápida

Icono, cantidad, enfriamiento y atajo en una sola cara. Colgar insignias de un círculo pequeño hace que cada ranura tenga un ancho distinto y la fila se tambalee.

El tamaño visible y el tamaño táctil son distintos. Las ranuras apretadas tienen cajas táctiles de 48dp que se solapan; el solape va a la ranura cuyo centro esté más cerca — háblales unas de otras mediante touch_peers.

keyboard_focus está desactivado por omisión, para que una fila de ocho ranuras no se interponga entre quien usa teclado y todos los controles de ajustes en el orden de tabulación. Actívalo cuando el teclado o el mando sean la única entrada.

GoJoystick — stick virtual

ModoComportamiento
FIXEDSiempre en el mismo sitio — fácil de encontrar sin mirar
FOLLOWAparece donde cae el pulgar
RELATIVESigue al pulgar después de aparecer — cómodo para desplazamientos largos

El Vector2 de moved tiene una longitud de 0 a 1, así que puedes multiplicarlo directamente por una velocidad; no varía con el tamaño de pantalla ni con el DPI.

GoIconButton — se ve pequeño, se pulsa grande

Solo es seguro mientras sus hermanos ignoren la entrada. Si el área ampliada cubre el botón siguiente, ese botón deja de responder. Los botones de icono uno al lado del otro necesitan touch_peers.