gohud — un kit de HUD e interfaz para Godot 4

Novedades: arcade, cómic, Material 3 y un aspecto para niños

Cuatro familias nuevas se suman a la predeterminada, la de ciencia ficción y la medieval — ahora hay catorce aspectos incluidos, cada uno en oscuro y claro. Todos los widgets, ventanas emergentes y piezas del HUD los adoptan sin cambiar tu código: cambia el preajuste y toda la pantalla lo sigue.

La galería de gohud en material_light — botones en píldora, tarjetas rellenas y colores de Material 3 — `material_light`

La galería de gohud en material_dark — las mismas formas de Material 3 sobre la base oscura — `material_dark`

La galería de gohud en kids_light — botones de gelatina gruesos en colores de crayón sobre una página soleada — `kids_light`

La galería de gohud en kids_dark — la misma caja de juguetes sobre una página azul noche — `kids_dark`

La galería de gohud en comic_light — contornos gruesos de tinta y sombras duras sobre una página color crema papel — `comic_light`

La galería de gohud en comic_dark — contornos crema y un primario amarillo sobre una página nocturna — `comic_dark`

La galería de gohud en arcade_light — teclas pintadas con un degradado y un brillo, y un tablero del HUD grueso con marco azul sobre una página azul cielo — `arcade_light`

La galería de gohud en arcade_dark — las mismas teclas vivas sobre una página nocturna — `arcade_dark`

Material 3 — para pantallas de apps

Material 3 Expressive, medido contra los tokens oficiales de M3: botones en píldora con una placa de 40dp dentro del área táctil de 48dp, diálogos y hojas de 28dp, tarjetas rellenas, campos con contorno y el deslizador Expressive. Los componentes de app — barra de navegación, barra superior, FAB, barra de búsqueda, chips, progreso y el selector de fecha — siguen los tokens de componente de M3, y los títulos usan la Roboto incluida. Para tiendas, ajustes, bandejas de entrada y cualquier pantalla que deba sentirse como una app.

Infantil — la caja de juguetes

Pensado para niños: cada tecla, fila y panel es un caramelo de gelatina con un contorno grueso y un labio sólido que se hunde al pulsarlo, y cada tipo de control lleva su propio color de crayón. Las ranuras rápidas son bloques de caramelo, las insignias son pegatinas, el joystick es un arcoíris, las ventanas llevan una cinta de título soleada y un botón de cerrar redondo de caramelo, y todo se aplasta al pulsarlo. Los tamaños y la fuente de tu proyecto se quedan exactamente como estaban.

Cómic — tinta gruesa

Cada cara es una viñeta de cómic: el color de la superficie dentro de un contorno grueso de tinta, con una sombra dura detrás que desaparece al pulsar la cara. Un ajuste activa o desactiva todas las sombras, otros dos fijan el grosor del contorno y el tamaño de la sombra, y una sola llamada hace lo mismo para un único widget. Las ventanas llevan un rótulo de título amarillo.

Arcade — teclas pintadas

Cada tecla va pintada — un degradado, un brillo blanco y un labio que se hunde al pulsarla, dentro de un contorno de tinta azul marino — y lleva la etiqueta en blanco con un contorno de tinta: verde para jugar, azul para lo demás, rojo para borrar. Los tableros son gruesos, un marco de color alrededor de un fondo pálido, y las ventanas llevan un estandarte de título dorado y una tecla de cerrar roja y redonda.

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

Material 3 en detalle → · El aspecto infantil en detalle → · Arcade, widget por widget ↓ · Cómic, widget por widget ↓ · La misma ventana emergente en los catorce aspectos →

Arcade: teclas pintadas y tableros gruesos

El aspecto más nuevo viste cada pantalla como una máquina recreativa. Cada tecla va pintada — un degradado de una parte superior clara a una inferior más intensa, un trazo de brillo blanco y un labio que se hunde al pulsarla, todo dentro de un contorno de tinta azul marino — y su etiqueta es blanca con un contorno de tinta. Cada tablero es grueso: un marco de color con su propio brillo alrededor de un fondo pálido. arcade_light pone tableros blancos sobre una página azul cielo; arcade_dark pone tableros azul marino sobre una página nocturna. Cada imagen de abajo es una pantalla real de gohud — el mismo código, una línea de preajuste.

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

La galería de gohud en arcade_light — teclas pintadas en verde, azul, rojo y lavanda y un tablero del HUD con marco azul sobre una página azul cielo — `arcade_light` · la galería

Una hoja inferior en arcade_light — un tablero grueso con marco que sube desde el borde inferior, con filas de teclas — `GoSheet`

Una marca guía en arcade_light — un globo con marco que señala una tecla — `GoCoachMark`

Un cajón lateral en arcade_dark — un tablero azul marino de filas de navegación sobre la pantalla atenuada — `GoDrawer`

Un popover en arcade_dark — una burbuja con marco anclada a la tecla que la abrió — `GoPopover`

Una alerta en arcade_dark — un estandarte dorado Level up!, una tecla de cerrar roja y una tecla Great verde sobre un tablero azul marino con marco azul — `GoDialogs.alert()`

Una snackbar en arcade_light — un tablero blanco con marco marrón a lo largo del borde inferior, con una acción Undo — `GoSnackbar`

Cada tecla, pintada

Botones en arcade_light — Jugar en verde, Detalles en azul, una tecla blanca con contorno, Borrar en coral, Borrar para siempre en rojo, una tecla compacta lavanda y una tecla gris desactivada, cada una pintada con un degradado, un brillo y un labio dentro de un contorno azul marino — `GoStyle.button()`

Pestañas en arcade_light — la pestaña elegida es una tecla pintada de azul, las demás son teclas lavanda — `GoStyle.tabs()`

Un control segmentado en arcade_light — teclas pintadas separadas, la elegida azul y hundida — Teclas segmentadas

Interruptores y casillas en arcade_light — un riel verde con brillo cuando está activado, lavanda cuando está desactivado, y una casilla verde con marca — Interruptores y casillas

Tarjetas en arcade_light — fondos pálidos dentro de marcos azules gruesos con un brillo y un labio — `GoStyle.card()`

Un formulario en arcade_light — un campo blanco hundido, un interruptor y una tecla Guardar verde — `GoForm`

Una cuadrícula de opciones en arcade_light — capuchones de tecla, el elegido bordeado de dorado sobre un tinte verde — `GoStyle.choice_grid()`

Una cuadrícula de ranuras en arcade_light — un inventario de capuchones de tecla con brillo y contadores de pila — `GoSlotGrid`

Filas de lista en arcade_light — cada fila es un capuchón de tecla pálido con un icono — Filas de lista

Un selector de fecha en arcade_light — días en capuchones de tecla, el día elegido es una tecla pintada — `GoDatePicker`

Un deslizador en arcade_light — un tubo azul con brillo en un surco de tinta y un pomo redondo de capuchón de tecla — `GoStyle.slider()`

Un grupo de opciones en arcade_light — capuchones de tecla redondos, el elegido con un punto azul — `GoStyle.radio_group()`

Chips de filtro en arcade_light — chips de capuchón de tecla, el elegido teñido de azul con una marca, y chips removibles con una cruz — `GoStyle.filter_chip()`

Una barra de búsqueda en arcade_light — un campo blanco hundido dentro de un contorno de tinta, con un icono de búsqueda y otro de filtro — `GoSearchBar`

Un asistente por pasos en arcade_light — cada paso es un capuchón de tecla pálido, y el paso abierto muestra su tecla Next verde — `GoStepper`

Una tabla de clasificación en arcade_light — una de cada dos filas es un capuchón de tecla en relieve — `GoTable`

Una barra de navegación inferior en arcade_light — el icono de la pestaña elegida sobre una píldora azul de capuchón de tecla y una insignia roja con contador — `GoNavBar`

Un selector de hora en arcade_light — la hora y los minutos en capuchones de tecla grandes, y teclas AM y PM sobre una esfera de reloj — `GoTimePicker`

Una entrada de código en arcade_light — ocho celdas de capuchón de tecla, la que se está escribiendo bordeada de dorado — `GoCodeInput`

Un selector de rueda en arcade_light — la cantidad elegida sobre una franja de capuchón de tecla, las demás desvaneciéndose arriba y abajo — `GoWheelPicker`

De noche: `arcade_dark`

Sobre una página oscura la tinta pasa a ser la propia página, mucho más profunda, y las pinturas siguen igual de vivas.

Botones en arcade_dark — las mismas pinturas vivas sobre una página nocturna — `GoStyle.button()` de noche

Barras del HUD en arcade_dark — tubos rojo de HP, azul de MP y verde de XP en surcos hundidos — `GoBar`

Tarjetas del HUD en arcade_dark — un fondo azul marino dentro de un marco azul grueso sobre el juego — `GoStyle.hud_panel()`

Ranuras rápidas en arcade_dark — capuchones de tecla con un contador de pila, y una ranura en recarga bordeada de dorado — `GoSlot`

Un joystick virtual en arcade_dark — una base con brillo dentro de un anillo de tinta, con cuatro flechas y un pomo de capuchón de tecla — `GoJoystick`

Alertas en arcade_dark — pequeños tableros con marco amarillo, verde, rojo y azul — Alertas

Botones de acción flotantes en arcade_dark — teclas pintadas de dorado con un brillo — `GoFab`

Un calendario de recompensas en arcade_dark — días en capuchones de tecla, el de hoy bordeado de dorado — `GoRewardCalendar`

Un control segmentado en arcade_dark — la tecla Day elegida pintada de azul, Week y Month en lavanda, todas las etiquetas blancas — Teclas segmentadas

Una vista de pestañas en arcade_dark — teclas de pestaña pintadas sobre filas de elementos que son capuchones de tecla azul marino — `GoTabView`

Una lista desplazable en arcade_dark — filas de elementos sobre capuchones de tecla azul marino y una fila de chips de filtro, el elegido en azul — `GoScroll`

Interruptores y casillas en arcade_dark — un riel verde con brillo cuando está activado, lavanda cuando está desactivado — Interruptores y casillas

Chips de rareza en arcade_dark — pequeñas placas pintadas, de Common a Cursed — `GoStyle.chip()`

Una cuadrícula de ranuras en arcade_dark — un inventario de capuchones de tecla azul marino con iconos blancos y contadores de pila — `GoSlotGrid`

Un deslizador de rango en arcade_dark — un tramo azul entre dos pomos con brillo en un surco oscuro — `GoRangeSlider`

Paginación en arcade_dark — la página actual es una tecla pintada de verde — `GoPagination`

Insignias en arcade_dark — placas coral con contorno de tinta sobre los iconos — `GoBadge`

Cómo funciona el aspecto arcade

La cara

Cada tecla y cada tablero es un GoStyleBoxArcade: un contorno de tinta, un cuerpo en degradado, un labio y un brillo, dibujados dentro del propio rectángulo del control — una tecla conserva su tamaño de un estado a otro, y al pulsarla solo se hunde.

Etiquetas que se leen

Una etiqueta blanca con un contorno de tinta se lee sobre cualquier pintura de la que el contorno la separa — la WCAG cuenta el contorno como parte de la letra. Cada pintura se ajusta hasta que su etiqueta supera 4,6:1 en cualquier altura del degradado.

Ventanas

El título de una ventana va sobre un estandarte dorado en letras blancas con contorno de tinta, junto a una tecla de cerrar roja y redonda. Los diálogos, las hojas, los cajones y los popovers son tableros gruesos con marco.

Una tecla puede llevar su propio color — una tecla de tienda naranja en un menú de pausa:

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

El aspecto arcade en detalle → · La misma ventana emergente en los catorce aspectos →

Cómic: tinta gruesa y una sombra dura

El aspecto cómic dibuja cada cara como una viñeta de cómic — el color de la superficie dentro de un contorno grueso de tinta, con una sombra dura y sólida proyectada hacia abajo y a la derecha. comic_light entinta en negro sobre una página color crema papel con un primario cobalto; comic_dark entinta en crema sobre una página nocturna con un primario amarillo. Cada imagen de abajo es una pantalla real de gohud — el mismo código, una línea de preajuste.

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

La galería de gohud en comic_light — teclas, filas y barras entintadas con sombras duras sobre una página color crema papel — `comic_light` · la galería

La galería de gohud en comic_dark — tinta crema y un primario amarillo sobre una página nocturna — `comic_dark` · la galería

Una hoja inferior en comic_light — un panel entintado que sube desde el borde inferior, con filas entintadas — `GoSheet`

Una marca guía en comic_light — un globo entintado que señala un botón — `GoCoachMark`

Un cajón lateral en comic_dark — un panel entintado de filas de navegación sobre la pantalla atenuada — `GoDrawer`

Un popover en comic_dark — una burbuja entintada anclada al botón que la abrió — `GoPopover`

Botones, interruptores, pestañas, deslizadores, tarjetas, formularios, tablas, selectores y chips llevan todos la tinta — no tienes que estilizarlos uno por uno. Pulsa una tecla y su sombra desaparece: la cara se hunde en su sitio, como un sello. Las caras desactivadas pierden la sombra y se atenúan, así que lo que se puede pulsar destaca sobre lo que no.

Botones en comic_light — teclas primaria, secundaria, con contorno, de peligro, compacta, sin fondo y desactivada, cada una con un contorno negro grueso y una sombra dura — `GoStyle.button()` — todos los tipos

Interruptores y casillas en comic_light — un riel y una perilla entintados, casillas entintadas con una marca — Interruptores y casillas

Botones de opción en comic_light — anillos entintados, el elegido con un punto relleno — Botones de opción

Pestañas en comic_light — la pestaña elegida es un panel entintado, las demás descansan sobre un subrayado de tinta — `GoStyle.tabs()`

Un control segmentado en comic_light — celdas entintadas, la elegida rellena — Píldoras segmentadas

Un deslizador en comic_light — un surco entintado, un relleno fino de acento y un tirador entintado — `GoStyle.slider()`

Desplegables en comic_light — teclas entintadas con un chevrón — Desplegables

Una tarjeta en comic_light — un panel blanco con un contorno grueso y una sombra dura — `GoStyle.card()`

Un formulario en comic_light — un campo entintado con una pista, un interruptor y una tecla Guardar entintada — `GoForm`

Filas de lista en comic_light — cada fila es una franja entintada con un icono, un subtítulo o una etiqueta de peligro — Filas de lista

Una tabla en comic_light — un encabezado sobre una raya de tinta, y cada fila de puntuación es una franja entintada — `GoTable`

Un selector de fecha en comic_light — celdas de día entintadas, el día elegido relleno — `GoDatePicker`

Un selector de hora en comic_light — casillas de hora y minuto entintadas, teclas AM y PM y una esfera de reloj — `GoTimePicker`

Un stepper en comic_light — filas de pasos entintadas, el paso completado marcado y el siguiente atenuado — `GoStepper`

Chips de filtro y de entrada en comic_light — píldoras entintadas, el filtro elegido teñido y con una marca — Chips de filtro

Una barra de navegación en comic_light — una raya de tinta arriba, la pestaña actual en una píldora entintada y una insignia en Alertas — `GoNavBar`

Un grupo de entrada en comic_light — un campo y su tecla Enviar soldados en una sola forma entintada — `GoInputGroup`

Un botón dividido en comic_light — una acción y una flecha de menú como dos mitades entintadas — `GoSplitButton`

La paginación en comic_light — la página actual es una tecla entintada con una sombra dura — `GoPagination`

De noche: `comic_dark`

Sobre una página oscura un contorno negro desaparecería, así que comic_dark lo dibuja en crema y proyecta una sombra tenue teñida con la misma tinta. Las piezas del HUD — ranuras rápidas, barras, el joystick y el calendario de recompensas — siguen las mismas reglas.

Botones en comic_dark — contornos crema, un primario amarillo y sombras duras tenues sobre una página nocturna — `GoStyle.button()` de noche

Ranuras rápidas en comic_dark — bloques entintados con un contador de pila y un tiempo de recarga, las ranuras encendidas bordeadas de amarillo — `GoSlot`

Barras del HUD en comic_dark — HP, MP y XP en surcos entintados en crema — `GoBar`

Un joystick virtual en comic_dark — un anillo crema y una perilla que proyecta una sombra — `GoJoystick`

Alertas en comic_dark — paneles de información, éxito, advertencia y peligro en tinta crema — Alertas

Una cuadrícula de ranuras en comic_dark — un inventario de bloques entintados — `GoSlotGrid`

Un calendario de recompensas en comic_dark — celdas de día entintadas, los días reclamados marcados y el de hoy bordeado de amarillo — `GoRewardCalendar`

Chips de rareza en comic_dark — píldoras entintadas, cada una teñida con su propio color — Chips

Un deslizador de rango en comic_dark — dos tiradores entintados sobre un surco entintado — `GoRangeSlider`

Una barra de búsqueda en comic_dark — una barra entintada con iconos de búsqueda y de filtro — `GoSearchBar`

Botones de acción flotantes en comic_dark — teclas amarillas en tinta crema con sombras duras — `GoFab`

Cómo funciona el aspecto cómic

Un StyleBox para cada cara

Cada cara es un GoStyleBoxComic: un relleno, un contorno y una sombra, dibujados dentro del propio rectángulo del control. Lee los tamaños del contorno y de la sombra de GoConfig cada vez que dibuja, así que un solo ajuste cambia toda la pantalla de una vez.

Pulsado significa plano

Una tecla pulsada pierde su sombra y baja a su sitio. Al pasar el cursor la sombra se mantiene; el foco añade un anillo de tinta interior que nunca tapa el contorno; las caras desactivadas pierden la sombra y se atenúan.

El skin entinta el resto

GoSkinComic entinta lo que dibuja el código: ranuras rápidas, chips, insignias, avatares, avisos, la barra de navegación, el FAB, las celdas de fecha y el joystick, cuya perilla proyecta una sombra.

Las ventanas llevan un rótulo

El título de una ventana va sobre un rótulo amarillo, como el cartucho del narrador en un cómic, junto a un botón de cerrar redondo y entintado. Los diálogos, hojas, cajones y popovers son paneles entintados opacos.

Legible de día y de noche

Ambas paletas pasan las mismas pruebas de contraste WCAG que todos los demás preajustes, incluidas las teclas pulsadas y desactivadas. Cuando el color de un rótulo quedaría demasiado cerca del de la página, su contorno pasa a usar el color de la página.

Sin cambios de diseño

El contorno y la sombra caben dentro de cada control y el relleno interior se queda como lo dejó el tema, así que una pantalla maquetada con otro aspecto conserva su disposición — y la fuente de tu proyecto.

Tres ajustes y una llamada

Tres ajustes de GoConfig cambian todas las caras cómic a la vez. No se reconstruye nada — la pantalla se vuelve a dibujar en cuanto los cambias.

GoUi.config.comic_border_width = 2.0   # el contorno (dp) — 3 por defecto
GoUi.config.comic_shadow_size = 6.0    # la sombra (dp) — 4 por defecto
GoUi.config.comic_shadow = false       # sin sombras en ningún sitio

Un widget puede ir por libre, digan lo que digan los ajustes. Pasa true como último argumento para incluir todo lo que contiene.

GoStyle.comic_shadow(skip_button, false)     # este botón queda plano
GoStyle.comic_shadow(card, true, true)       # esta tarjeta y todo lo que contiene conservan su sombra
GoStyle.comic_border(title, 5.0)             # un contorno más grueso en este

Crea tu propio cómic. tools/new_theme.py inked --from comic_light copia la paleta; cambia los colores del papel, la tinta y el primario y ejecuta tools/make_theme.py inked. La tinta, la sombra y el skin vienen incluidos.

El aspecto cómic en detalle → · La misma ventana emergente en los catorce aspectos →

Cómo se ve dentro de un juego

Los preajustes medieval y de ciencia ficción — hojas de personaje, inventarios y misiones; formularios, cuadrículas y tarjetas de pregunta; paneles angulares y controles táctiles. Cambiar de preajuste es una línea de código.

Tema medieval de gohud — una hoja de personaje con barras de vida, maná y resistencia, un zurrón de ranuras rápidas y un diario de misiones en marcos de oro forjado — **Medieval** — personaje, inventario y misiones

Tema medieval de gohud — un panel de entrada con campo de nombre, interruptor, casillas y deslizador de volumen, una cuadrícula de fichas y una tarjeta de pregunta de invitación al grupo con Aceptar y Rechazar — **Medieval** — formularios, cuadrículas y tarjetas de pregunta

Tema de ciencia ficción de gohud — un panel de controles táctiles achaflanado con joystick hexagonal, un selector Fijo / Seguimiento / Relativo y botones de acción redondos — **Ciencia ficción** — paneles angulares y controles táctiles

Los catorce preajustes y cómo cambiar entre ellos →

De qué se encarga por ti

Lo que más tiempo cuesta en la interfaz de un juego no es la forma de un botón: es todo lo que se desajusta de un dispositivo a otro. gohud resuelve ese desajuste en un único lugar.

Cada medida es un token

Los espaciados, las esquinas y los tamaños de texto se invocan por nombre, no se escriben como números. Cambia el tema y toda la pantalla se mueve con él.

Tamaño visible ≠ tamaño pulsable

Un botón de cerrar se ve de 36dp, pero su área táctil es de 48dp. Donde se solapan ranuras apretadas, gana la pulsación aquella cuyo centro está más cerca.

Muescas y teclados

Las piezas del HUD se quedan dentro del área segura, y un campo de entrada sube por encima del teclado virtual cuando este aparece.

Atrás cierra una sola cosa

Escape y el botón Atrás de Android cierran solo la superficie superior. Las ventanas apiladas no desaparecen todas juntas.

Los avisos nunca roban la entrada

Pulsa a través de un snackbar y el botón que está debajo la recibe. Tampoco toma el foco.

Los iconos se piden por nombre

Los widgets solo conocen GoIconSet.CLOSE. Cambia el juego de iconos y todos los dibujos cambian sin tocar una línea de código. Iconos →

Catorce aspectos, una línea

GoUi.use_preset() cambia a la vez el tema, el skin y los iconos — esquinas redondeadas, ciencia ficción achaflanada, marcos medievales forjados, los componentes de app de Material 3, los caramelos de gelatina infantiles, la tinta de cómic o la pintura arcade.

Legible por medición

Todos los temas se verifican contra la WCAG, incluidos los estados de los botones y los paneles de HUD translúcidos sobre blanco puro y negro puro.

Todo funciona sin activar el plugin. Activarlo añade un autoload GoRuntime que sigue el tamaño de la ventana, la escala dp y la altura del teclado, además de ajustes de proyecto para el recurso de configuración y el preajuste — comodidades, no requisitos.

Instalar gohud

Dos caminos. Que lo haga tu agente de IA, o suelta la carpeta en tu proyecto — no hay nada más que configurar.

Instalación

Inicio rápido

Cinco líneas ponen una pantalla con tema en el display. El recorrido completo está en la página de instalación.

Inicio rápido

Cambia el aspecto — colores y forma

Un Theme solo puede reestilizar lo que dibuja el motor. Las esquinas redondeadas son las únicas que tiene StyleBoxFlat, y el joystick, las ranuras rápidas y la marca guía los dibuja el código — así que un tema por sí solo jamás puede cambiar su forma. Por eso gohud incluye preajustes: un tema, un skin y un juego de iconos elegidos como una sola unidad.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # tema, skin e iconos a la vez

Preajuste	Aspecto
`default_dark`	El gohud original — esquinas redondeadas, acento azul suave
`default_light`	Las mismas formas sobre una paleta clara
`scifi_dark`	Esquinas achaflanadas, bordes de neón cian y resplandor, joystick hexagonal, corchetes de puntería
`scifi_light`	Las mismas formas angulares en una paleta de plano técnico
`medieval_dark`	Hierro y cuero oscuros, marcos de oro antiguo, remaches, iconos grabados, títulos en Cinzel
`medieval_light`	Pergamino, tinta y bronce con los mismos marcos forjados
`material_light` Nuevo	Material 3 para pantallas de apps — botones en píldora, diálogos de 28dp, tarjetas rellenas, la barra de navegación, el FAB y la barra de búsqueda de una app, Roboto
`material_dark` Nuevo	Las mismas formas de Material 3 sobre la base oscura
`kids_light` Nuevo	La caja de juguetes para niños — teclas de caramelo de gelatina con un contorno grueso y un labio que se hunde al pulsarlas, colores de crayón, una página soleada
`kids_dark` Nuevo	La misma caja de juguetes sobre una página azul noche
`comic_light` Nuevo	Viñetas de cómic — un contorno grueso de tinta y una sombra dura en cada cara, paneles blancos sobre una página color crema papel; la sombra, su tamaño y el grosor del contorno son ajustes
`comic_dark` Nuevo	La misma tinta sobre una página nocturna — contornos crema y un primario amarillo
`arcade_light` Nuevo	Una máquina recreativa — cada tecla pintada con un degradado, un brillo y un labio, con la etiqueta en blanco y un contorno de tinta; tableros gruesos con marco sobre una página azul cielo y un estandarte de título dorado en las ventanas
`arcade_dark` Nuevo	Las mismas teclas vivas sobre tableros azul marino y una página nocturna

La galería de gohud con el preajuste default_dark — esquinas redondeadas, acento azul — `default_dark` — esquinas redondeadas, acento azul suave

Preajuste default_light — las mismas formas sobre una paleta clara — `default_light` — mismas formas, paleta clara

Preajuste scifi_dark — esquinas achaflanadas y neón cian — `scifi_dark` — esquinas achaflanadas, neón cian

Preajuste scifi_light — las mismas formas angulares en una paleta de plano técnico — `scifi_light` — mismas formas angulares, paleta de plano técnico

Esas cuatro son la misma pantalla de la galería. No cambia ni una línea de código — solo el nombre del preajuste. Las esquinas de los botones, la forma de los interruptores, las filas de lista y los bordes de los campos se mueven juntos.

Colección medieval

medieval_dark combina hierro y cuero con oro antiguo; medieval_light usa pergamino y tinta. Los marcos de menú llevan un remache y un pequeño ornamento en la esquina, mientras que el HUD siempre visible se mantiene discreto; 16 iconos grabados redibujan los nombres de objeto, y solo los títulos y subtítulos usan la fuente Cinzel incluida.

medieval_dark — hoja de personaje, zurrón de ranuras rápidas y diario de misiones — `medieval_dark` — hierro y cuero

medieval_light — las mismas pantallas de personaje, zurrón y misiones sobre pergamino — `medieval_light` — pergamino y tinta

Ambas capturas son examples/medieval/medieval.tscn, construido con los widgets estándar. La guía medieval y cómo crear tu propio reino →

La misma pantalla en un teléfono y en un escritorio

Las capturas de la galería son un teléfono en vertical. Abajo está el mismo código a 1280×800 — el contenido se detiene en un ancho legible (480dp) y se centra, mientras el HUD se queda en las esquinas. El formulario rodea las piezas flotantes del HUD, pero no se mueve cuando ya está despejado de ellas: empujarlo de todos modos dejaría el contenido descentrado en una pantalla ancha.

default_dark a 1280x800 — contenido centrado, HUD en las esquinas — `default_dark` · 1280×800

scifi_dark a 1280x800 — la misma disposición con paneles achaflanados y neón — `scifi_dark` · 1280×800

La misma hoja, otro aspecto

Una hoja inferior en default_dark — Predeterminado — tarjeta redondeada, fila de búsqueda y pie fijos

Una hoja inferior en scifi_dark — borde de acento de neón en la parte superior — Ciencia ficción — borde de acento superior, esquinas cortadas, resplandor

Elige uno en Ajustes del proyecto → gohud → Theme → Preset, o asigna GoConfig.preset. Rellenar theme, skin o icons de forma explícita tiene prioridad sobre el preajuste, así que puedes tomar un preajuste y sobrescribir solo uno de ellos.

Un tema nuevo es un solo archivo JSON. new_theme.py kingdom --from medieval_dark escribe una paleta que detalla cada valor heredado; make_theme.py kingdom genera el tema, sus recursos gráficos de control y los dials de su skin, y el preajuste aparece en el selector. Cada ajuste y cada dial →

Skins — allí donde un Theme no llega

Un skin gobierna el joystick, las caras de las ranuras rápidas, el anillo de la marca guía, los chips, los esqueletos, las alertas, los separadores y los encabezados de sección. Créale una subclase y sobrescribe solo lo que quieras cambiar.

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

Clase	Formas que puede crear
`GoStyleBoxCut`	Esquinas cortadas en diagonal (chaflán), un borde de acento engrosado, un resplandor exterior
`GoStyleBoxBracket`	Solo marcas en las esquinas, sin encerrar el contenido
`GoStyleBoxMedieval`	Un marco forjado con remaches, grabado en las esquinas, un realce biselado y grano de material
`GoStyleBoxJelly`	Un caramelo de gelatina — un contorno grueso, un labio sólido que se hunde al pulsarlo, un cuerpo más claro arriba y un brillo blanco
`GoStyleBoxComic`	Una viñeta de cómic — un contorno grueso de tinta y una sombra proyectada dura, ambos dimensionados por `GoConfig` mientras el juego se ejecuta
`GoStyleBoxArcade`	Una tecla o un tablero arcade — un cuerpo en degradado, un brillo blanco, un labio que se hunde al pulsarlo y un contorno de tinta; un tablero añade un marco de color grueso alrededor de un fondo pálido

Las seis se serializan dentro de un recurso Theme — y eso es lo que permite que un tema cambie la forma, no solo el color. GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic y GoSkinArcade son las subclases incluidas.

Ranuras rápidas, un joystick y un chip dibujados por cada skin incluido — predeterminado, infantil, Material, medieval y ciencia ficción — Lo que dibuja un skin — predeterminado, infantil, Material, medieval, ciencia ficción

Ranuras rápidas, un joystick y un chip dibujados por el skin de cómic — contornos entintados y sombras duras — …y el skin de cómic

Ranuras rápidas, un joystick y un chip dibujados por el skin arcade — capuchones de tecla con brillo y una base con cuatro flechas — …y el skin arcade

GoStyle.box() siempre devuelve un StyleBoxFlat, porque el código que lo llama lo recibe y ajusta bg_color o corner_radius. Usa GoStyle.surface() cuando una forma personalizada deba sobrevivir.

Widgets

Las piezas, en una sola tabla. Cada una en detalle → · Todos los widgets, con imagen → · Ventanas emergentes y diálogos, la guía completa →

Clase	Base	Qué hace
`GoSurface`	Control	Contenedor de tarjeta flotante — colocación centrada, inferior o anclada, encabezado y pie fijos, cuerpo desplazable, redimensionado por arrastre
`GoSheet`	CanvasLayer	Páginas que suben desde abajo, en su propia capa para quedar por encima del HUD
`GoDialogs`	Node	Confirmaciones y alertas con `await`; `destructive` para acciones irreversibles
`GoForm`	MarginContainer	Formularios de ancho limitado que esquivan el teclado virtual y, con `avoid_hud`, el HUD
`GoScroll`	ScrollContainer	Desplazamiento táctil; la barra de desplazamiento se mete en el relleno de la tarjeta
`GoNotice`	PanelContainer	Un snackbar que no toma ni la entrada ni el foco
`GoPromptCard`	PanelContainer	Una pregunta que no bloquea el juego
`GoCoachMark`	Control	Un recorrido guiado que señala controles reales; pulsar el objetivo avanza
`GoHudAnchor`	Control	Fija piezas del HUD en uno de nueve puntos del área segura
`GoBar`	Control	Barras de vida, maná y experiencia con cambios suavizados
`GoSlot`	Button	Una ranura rápida — icono, cantidad, enfriamiento y atajo en una sola cara
`GoJoystick`	Control	Stick virtual en modo fijo, de seguimiento o relativo
`GoIconButton`	Button	Se ve pequeño, se pulsa grande
`GoStyle`	static	Botones, filas de lista, campos, chips, tablas, pestañas y más, creados de una única manera coherente

Esperar, avisar, contar

Clase	Base	Qué hace
`GoSnackbar`	Node	el mensaje que se coloca solo
`GoSpinner`	Control	una espera sin final a la vista
`GoBadge`	PanelContainer	el punto de no leído, la etiqueta NUEVO, el 99+

Formularios y listas

Clase	Base	Qué hace
`GoField`	VBoxContainer	la fila que puede estar mal
`GoInputGroup`	HBoxContainer	una entrada soldada a su botón
`GoCombobox`	Button	un selector que busca
`GoCodeInput`	VBoxContainer	códigos de cupón y de regalo
`GoTable`	VBoxContainer	encabezados ordenables, filas seleccionables
`GoPagination`	HBoxContainer	páginas, o una fila Más

Formas que los juegos usan de verdad

Clase	Base	Qué hace
`GoRewardCalendar`	VBoxContainer	asistencia diaria
`GoRadar` · `GoDonut`	Control	estadísticas de un vistazo
`GoCarousel`	VBoxContainer	banners y selección de personaje
`GoKbd`	HBoxContainer	pistas de teclas que no mienten

Por encima de la pantalla

Clase	Base	Qué hace
`GoDrawer`	CanvasLayer	el panel lateral
`GoPopover`	RefCounted	la tarjeta anclada
`GoContextMenu`	RefCounted	pulsación larga y clic derecho
`GoConsole`	CanvasLayer	la consola de desarrollo

Go HUD Skill

gohud trae una skill de IA: toda la API, plantillas listas para ejecutar y un lanzador de vista previa. Pega un bloque en tu agente y él instala gohud y sabe usarlo.

Go HUD Skill

La legibilidad se mide, no se calcula a ojo

"Bonito" es cuestión de gusto; "legible" se puede medir. Un texto gris tenue se ve bien en un buen monitor y desaparece en un teléfono a la luz del día — elegir a ojo lo garantiza tarde o temprano.

python3 addons/gohud/tools/check_contrast.py

Cada par de colores y la etiqueta de cada estado de botón sobre el panel en el que se apoya se mide contra la WCAG, en los catorce temas. Los colores translúcidos se componen primero sobre su fondo real — medirlos directamente da una relación mejor que la que muestra la pantalla.

Por eso los colores de texto se derivan, no se eligen: el generador toma la entrada de la paleta como punto de partida y empuja su luminosidad hasta superar el umbral en toda superficie sobre la que pueda caer. Cambia la paleta y el contraste la sigue. Las reglas y las trampas que hay detrás →

Verificaciones, versiones y este sitio

Un único punto de entrada ejecuta todas las verificaciones; cada parte ve algo que las demás no pueden ver.

bash addons/gohud/tools/check_all.sh

Verificación	Qué detecta
`run_tests.sh` en cuatro tamaños de pantalla	Comportamiento y disposición de los widgets, posiciones en RTL, foco de teclado, contraste del skin en ejecución, todos los preajustes
`new_project_check.sh`	Dependencias ocultas del proyecto anfitrión; con `--zip` la versión tal como se distribuye, con `--export` una compilación Web
`check_contrast.py`	Contraste WCAG de cada archivo de tema, estados de botón y paneles translúcidos incluidos
`check_generated.py` · `check_scaffold.sh`	Los temas generados coinciden con sus paletas; un tema desechable se genera y supera el contraste
`check_package.py`	La versión tomada de package.json, movimientos del registro de cambios y contenido del ZIP, en copias temporales
`check_site.py`	Los enlaces, anclas, idioma de página, glosario y tablas de dials de este sitio

Última ejecución registrada — 2026-09-13, Godot 4.7.2, macOS, renderizador Compatibility. 438 de 438 verificaciones a 390×844, 844×390, 768×1024 y 1280×800 en un proyecto vacío; otra vez 438 de 438 con el autoload GoRuntime; una exportación Web; cero fallos de contraste en los seis temas. Los dispositivos físicos Android o iOS no formaron parte de esta ejecución.

Publicar versiones

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # todas las comprobaciones → ZIP → ese ZIP en un proyecto vacío
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

La versión es la que figura en package.json: el empaquetado nunca la sube. Para publicar una versión nueva, cambia primero ese número. Una ejecución correcta ajusta plugin.cfg y GoUi.VERSION a ese valor y, la primera vez que se empaqueta esa versión, mueve las notas de Unreleased de CHANGELOG.md a una entrada con fecha. Empaquetar de nuevo la misma versión reconstruye su ZIP y reemplaza el anterior. Una ejecución fallida no cambia nada. El ZIP deja fuera este sitio web, las pruebas, las herramientas y package.json.

Este sitio

python3 addons/gohud/tools/make_site.py            # glosario y tablas de dials del skin, generados desde el código
python3 addons/gohud/tools/check_site.py           # enlaces, anclas, idioma, glosario, tablas generadas
bash addons/gohud/tools/site_shots.sh /tmp/shots   # capturas de escritorio y de teléfono de cada página

Las páginas son HTML plano en www/ — el inglés en la raíz, el coreano en ko/. Un flujo de trabajo de GitHub Actions publica esa carpeta como raíz del sitio.

La interfaz del juego, gobernada por un solo recurso

Novedades: arcade, cómic, Material 3 y un aspecto para niños

Material 3 — para pantallas de apps

Infantil — la caja de juguetes

Cómic — tinta gruesa

Arcade — teclas pintadas

Arcade: teclas pintadas y tableros gruesos

Cada tecla, pintada

De noche: arcade_dark

Cómo funciona el aspecto arcade

La cara

Etiquetas que se leen

Ventanas

Cómic: tinta gruesa y una sombra dura

Cada widget, entintado

De noche: comic_dark

Cómo funciona el aspecto cómic

Un StyleBox para cada cara

Pulsado significa plano

El skin entinta el resto

Las ventanas llevan un rótulo

Legible de día y de noche

Sin cambios de diseño

Tres ajustes y una llamada

Cómo se ve dentro de un juego

De qué se encarga por ti

Cada medida es un token

Tamaño visible ≠ tamaño pulsable

Muescas y teclados

Atrás cierra una sola cosa

Los avisos nunca roban la entrada

Los iconos se piden por nombre

Catorce aspectos, una línea

Legible por medición

Instalar gohud

Inicio rápido

Cambia el aspecto — colores y forma

Colección medieval

La misma pantalla en un teléfono y en un escritorio

La misma hoja, otro aspecto

Skins — allí donde un Theme no llega

Widgets

Esperar, avisar, contar

Formularios y listas

Formas que los juegos usan de verdad

Por encima de la pantalla

Go HUD Skill

La legibilidad se mide, no se calcula a ojo

Verificaciones, versiones y este sitio

Publicar versiones

Este sitio

De noche: `arcade_dark`

De noche: `comic_dark`