gohud — un kit HUD et UI pour Godot 4

Nouveau : arcade, bande dessinée, Material 3 et une apparence pour les enfants

Quatre nouvelles familles rejoignent par défaut, science-fiction et médiéval — quatorze apparences intégrées désormais, chacune en sombre et en clair. Chaque widget, pop-up et élément de HUD les adopte sans changer une ligne de votre code : changez de préréglage et tout l'écran suit.

La galerie gohud en material_light — boutons en pilule, cartes pleines et couleurs Material 3 — `material_light`

La galerie gohud en material_dark — les mêmes formes Material 3 sur la base sombre — `material_dark`

La galerie gohud en kids_light — de gros boutons en gelée aux couleurs de crayon sur une page ensoleillée — `kids_light`

La galerie gohud en kids_dark — le même coffre à jouets sur une page bleu nuit — `kids_dark`

La galerie gohud en comic_light — d'épais contours à l'encre et des ombres franches sur une page crème papier — `comic_light`

La galerie gohud en comic_dark — des contours crème et un primaire jaune sur une page de nuit — `comic_dark`

La galerie gohud en arcade_light — des touches peintes avec un dégradé et un reflet, et un épais panneau de HUD encadré de bleu sur une page bleu ciel — `arcade_light`

La galerie gohud en arcade_dark — les mêmes touches vives sur une page de nuit — `arcade_dark`

Material 3 — pour les écrans d'application

Material 3 Expressive, mesuré d'après les tokens M3 officiels : boutons en pilule avec une plaque de 40dp dans la cible tactile de 48dp, boîtes de dialogue et feuilles de 28dp, cartes pleines, champs à contour et le curseur Expressive. Les composants d'application — barre de navigation, barre d'app, FAB, barre de recherche, chips, progression et sélecteur de date — suivent les tokens de composant M3, et les titres sont composés en Roboto, fournie avec le kit. Pour les boutiques, les réglages, les boîtes de réception et tout écran qui doit ressembler à une application.

Enfants — le coffre à jouets

Conçu pour les enfants : chaque touche, rangée et panneau est un bonbon en gelée avec un contour épais et un rebord plein qui s'enfonce à l'appui, chaque type de commande dans sa propre couleur de crayon. Les emplacements rapides sont des blocs de bonbon, les badges des autocollants, le joystick un arc-en-ciel ; les fenêtres reçoivent un ruban de titre ensoleillé et un bouton de fermeture rond en bonbon, et chaque appui écrase la gelée. Les tailles et la police de votre projet restent exactement les mêmes.

Bande dessinée — encre épaisse

Chaque face est une case de bande dessinée : la couleur de surface dans un épais contour d'encre, avec une ombre franche derrière qui disparaît à l'appui. Un réglage active ou désactive toutes les ombres, deux autres fixent l'épaisseur du contour et la taille de l'ombre, et un seul appel fait de même pour un seul widget. Les fenêtres reçoivent un cartouche de titre jaune.

Arcade — touches peintes

Chaque touche est peinte — un dégradé, un reflet blanc et un rebord qui s'enfonce à l'appui, dans un contour d'encre bleu marine — et porte un libellé blanc cerné d'encre : vert pour jouer, bleu pour le reste, rouge pour supprimer. Les panneaux sont épais, un cadre coloré autour d'un fond pâle, et les fenêtres reçoivent un bandeau de titre doré et une touche de fermeture ronde et rouge.

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 en détail → · Enfants en détail → · L'arcade, widget par widget ↓ · La bande dessinée, widget par widget ↓ · Le même pop-up dans les quatorze apparences →

Arcade : touches peintes et panneaux épais

La plus récente des apparences habille chaque écran comme une borne d'arcade. Chaque touche est peinte — un dégradé d'un haut clair vers un bas plus soutenu, un trait de reflet blanc et un rebord qui s'enfonce à l'appui, le tout dans un contour d'encre bleu marine — et son libellé est blanc cerné d'encre. Chaque panneau est épais : un cadre coloré avec son propre reflet autour d'un fond pâle. arcade_light pose des panneaux blancs sur une page bleu ciel ; arcade_dark des panneaux bleu marine sur une page de nuit. Chaque image ci-dessous est un véritable écran gohud — le même code, une ligne de préréglage.

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

La galerie gohud en arcade_light — des touches peintes en vert, bleu, rouge et lavande et un panneau de HUD encadré de bleu sur une page bleu ciel — `arcade_light` · la galerie

Une feuille inférieure en arcade_light — un épais panneau encadré qui monte du bord inférieur, avec des rangées de touches — `GoSheet`

Un repère de guidage en arcade_light — une bulle encadrée qui désigne une touche — `GoCoachMark`

Un tiroir latéral en arcade_dark — un panneau bleu marine de rangées de navigation sur l'écran assombri — `GoDrawer`

Un popover en arcade_dark — une bulle encadrée ancrée à la touche qui l'a ouverte — `GoPopover`

Une alerte en arcade_dark — un bandeau doré Level up!, une touche de fermeture rouge et une touche Great verte sur un panneau bleu marine encadré de bleu — `GoDialogs.alert()`

Une snackbar en arcade_light — un panneau blanc encadré de brun le long du bord inférieur, avec une action Undo — `GoSnackbar`

Chaque touche, peinte

Des boutons en arcade_light — Jouer en vert, Détails en bleu, une touche blanche à contour, Supprimer en corail, Supprimer définitivement en rouge, une touche compacte lavande et une touche grise désactivée, chacune peinte avec un dégradé, un reflet et un rebord dans un contour bleu marine — `GoStyle.button()`

Des onglets en arcade_light — l'onglet choisi est une touche peinte en bleu, les autres des touches lavande — `GoStyle.tabs()`

Un contrôle segmenté en arcade_light — des touches peintes séparées, la choisie bleue et enfoncée — Touches segmentées

Des interrupteurs et des cases à cocher en arcade_light — un rail vert brillant quand il est activé, lavande quand il est désactivé, et une case verte cochée — Interrupteurs et cases à cocher

Des cartes en arcade_light — des fonds pâles dans d'épais cadres bleus avec un reflet et un rebord — `GoStyle.card()`

Un formulaire en arcade_light — un champ blanc en creux, un interrupteur et une touche Enregistrer verte — `GoForm`

Une grille de choix en arcade_light — des capuchons de touche, le choisi cerclé d'or sur une teinte verte — `GoStyle.choice_grid()`

Une grille d'emplacements en arcade_light — un inventaire de capuchons de touche brillants avec des compteurs de pile — `GoSlotGrid`

Des rangées de liste en arcade_light — chaque rangée est un capuchon de touche pâle avec une icône — Rangées de liste

Un sélecteur de date en arcade_light — des jours en capuchons de touche, le jour choisi une touche peinte — `GoDatePicker`

Un curseur en arcade_light — un tube bleu brillant dans une rainure d'encre et un bouton rond en capuchon de touche — `GoStyle.slider()`

Un groupe de boutons radio en arcade_light — des capuchons de touche ronds, le choisi avec un point bleu — `GoStyle.radio_group()`

Des puces de filtre en arcade_light — des puces en capuchon de touche, la choisie teintée de bleu avec une coche, et des puces amovibles avec une croix — `GoStyle.filter_chip()`

Une barre de recherche en arcade_light — un champ blanc en creux dans un contour d'encre, avec une icône de recherche et une icône de filtre — `GoSearchBar`

Un assistant pas à pas en arcade_light — chaque étape est un capuchon de touche pâle, et l'étape ouverte montre sa touche Next verte — `GoStepper`

Un tableau de classement en arcade_light — une rangée sur deux est un capuchon de touche en relief — `GoTable`

Une barre de navigation inférieure en arcade_light — l'icône de l'onglet choisi sur une pastille bleue en capuchon de touche, et un badge de compteur rouge — `GoNavBar`

Un sélecteur d'heure en arcade_light — l'heure et les minutes sur de grands capuchons de touche, et des touches AM et PM au-dessus d'un cadran d'horloge — `GoTimePicker`

Une saisie de code en arcade_light — huit cases en capuchon de touche, celle en cours de saisie cerclée d'or — `GoCodeInput`

Un sélecteur à molette en arcade_light — la quantité choisie sur une bande en capuchon de touche, les autres s'estompant au-dessus et en dessous — `GoWheelPicker`

La nuit : `arcade_dark`

Sur une page sombre, l'encre devient la page elle-même, bien plus profonde, et les peintures restent tout aussi vives.

Des boutons en arcade_dark — les mêmes peintures vives sur une page de nuit — `GoStyle.button()` la nuit

Des barres de HUD en arcade_dark — des tubes HP rouge, MP bleu et XP vert dans des rainures en creux — `GoBar`

Des cartes de HUD en arcade_dark — un fond bleu marine dans un épais cadre bleu au-dessus du jeu — `GoStyle.hud_panel()`

Des emplacements rapides en arcade_dark — des capuchons de touche avec un compteur de pile, et un emplacement en recharge cerclé d'or — `GoSlot`

Un joystick virtuel en arcade_dark — un socle brillant dans un anneau d'encre, avec quatre flèches et un bouton en capuchon de touche — `GoJoystick`

Des alertes en arcade_dark — de petits panneaux encadrés de jaune, de vert, de rouge et de bleu — Alertes

Des boutons d'action flottants en arcade_dark — des touches peintes en or avec un reflet — `GoFab`

Un calendrier de récompenses en arcade_dark — des jours en capuchons de touche, aujourd'hui cerclé d'or — `GoRewardCalendar`

Un contrôle segmenté en arcade_dark — la touche Day choisie peinte en bleu, Week et Month en lavande, tous les libellés blancs — Touches segmentées

Une vue à onglets en arcade_dark — des touches d'onglet peintes au-dessus de rangées d'éléments en capuchons de touche bleu marine — `GoTabView`

Une liste défilante en arcade_dark — des rangées d'éléments sur des capuchons de touche bleu marine et une rangée de puces de filtre, la choisie en bleu — `GoScroll`

Des interrupteurs et des cases à cocher en arcade_dark — un rail vert brillant quand il est activé, lavande quand il est désactivé — Interrupteurs et cases à cocher

Des puces de rareté en arcade_dark — de petites plaques peintes, de Common à Cursed — `GoStyle.chip()`

Une grille d'emplacements en arcade_dark — un inventaire de capuchons de touche bleu marine avec des icônes blanches et des compteurs de pile — `GoSlotGrid`

Un curseur de plage en arcade_dark — un segment bleu entre deux boutons brillants dans une rainure sombre — `GoRangeSlider`

Une pagination en arcade_dark — la page en cours est une touche peinte en vert — `GoPagination`

Des badges en arcade_dark — des plaques corail cernées d'encre sur les icônes — `GoBadge`

Comment fonctionne l'apparence arcade

La face

Chaque touche et chaque panneau est un GoStyleBoxArcade : un contour d'encre, un corps en dégradé, un rebord et un reflet, dessinés dans le propre rectangle du contrôle — une touche garde sa taille d'un état à l'autre, et un appui ne fait que l'enfoncer.

Des libellés lisibles

Un libellé blanc cerné d'encre se lit sur toute peinture dont le contour le détache — les WCAG comptent le contour comme faisant partie de la lettre. Chaque peinture est ajustée jusqu'à ce que son libellé dépasse 4,6:1 à chaque hauteur du dégradé.

Fenêtres

Le titre d'une fenêtre repose sur un bandeau doré, en lettres blanches cernées d'encre, à côté d'une touche de fermeture ronde et rouge. Boîtes de dialogue, feuilles, tiroirs et popovers sont d'épais panneaux encadrés.

Une touche peut prendre sa propre couleur — une touche de boutique orange dans un menu de pause :

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

L'arcade en détail → · Le même pop-up dans les quatorze apparences →

Bande dessinée : encre épaisse et ombre franche

L'apparence bande dessinée dessine chaque face comme une case de bande dessinée — la couleur de surface dans un épais contour d'encre, avec une ombre franche et pleine projetée vers le bas et la droite. comic_light encre en noir sur une page crème papier avec un primaire cobalt ; comic_dark encre en crème sur une page de nuit avec un primaire jaune. Chaque image ci-dessous est un véritable écran gohud — le même code, une ligne de préréglage.

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

La galerie gohud en comic_light — touches, rangées et barres encrées avec des ombres franches sur une page crème papier — `comic_light` · la galerie

La galerie gohud en comic_dark — une encre crème et un primaire jaune sur une page de nuit — `comic_dark` · la galerie

Une feuille inférieure en comic_light — un panneau encré qui monte du bord inférieur, avec des rangées encrées — `GoSheet`

Un repère guidé en comic_light — une bulle encrée qui pointe vers un bouton — `GoCoachMark`

Un tiroir latéral en comic_dark — un panneau encré de rangées de navigation sur l'écran assombri — `GoDrawer`

Un popover en comic_dark — une bulle encrée ancrée au bouton qui l'a ouverte — `GoPopover`

Boutons, interrupteurs, onglets, curseurs, cartes, formulaires, tableaux, sélecteurs et chips portent tous l'encre — inutile de les styler un par un. Appuyez sur une touche et son ombre disparaît : la face s'enfonce à sa place, comme un tampon. Les faces désactivées perdent leur ombre et pâlissent, si bien que ce qui peut être pressé se distingue de ce qui ne le peut pas.

Boutons en comic_light — touches principale, secondaire, à contour, danger, compacte, nue et désactivée, chacune dans un épais contour noir avec une ombre franche — `GoStyle.button()` — tous les types

Interrupteurs et cases à cocher en comic_light — un rail et un bouton encrés, des cases encrées avec une coche — Interrupteurs et cases à cocher

Boutons radio en comic_light — des anneaux encrés, celui choisi avec un point plein — Boutons radio

Onglets en comic_light — l'onglet choisi est un panneau encré, les autres reposent sur un soulignement d'encre — `GoStyle.tabs()`

Un contrôle segmenté en comic_light — des cellules encrées, celle choisie remplie — Pilules segmentées

Un curseur en comic_light — une rainure encrée, un fin remplissage d'accent et une poignée encrée — `GoStyle.slider()`

Listes déroulantes en comic_light — des touches encrées avec un chevron — Listes déroulantes

Une carte en comic_light — un panneau blanc dans un épais contour avec une ombre franche — `GoStyle.card()`

Un formulaire en comic_light — un champ encré avec une indication, un interrupteur et une touche Enregistrer encrée — `GoForm`

Rangées de liste en comic_light — chaque rangée est une bande encrée avec une icône, un sous-titre ou un libellé de danger — Rangées de liste

Un tableau en comic_light — un en-tête au-dessus d'un filet d'encre, et chaque ligne de score est une bande encrée — `GoTable`

Un sélecteur de date en comic_light — des cases de jour encrées, le jour choisi rempli — `GoDatePicker`

Un sélecteur d'heure en comic_light — des cases d'heure et de minute encrées, des touches AM et PM et un cadran d'horloge — `GoTimePicker`

Un stepper en comic_light — des rangées d'étapes encrées, l'étape terminée cochée et l'étape à venir pâlie — `GoStepper`

Chips de filtre et de saisie en comic_light — des pilules encrées, le filtre choisi teinté avec une coche — Chips de filtre

Une barre de navigation en comic_light — un filet d'encre en haut, l'onglet actif dans une pilule encrée et un badge sur Alertes — `GoNavBar`

Un groupe de saisie en comic_light — un champ et sa touche Envoyer soudés en une seule forme encrée — `GoInputGroup`

Un bouton scindé en comic_light — une action et une flèche de menu en deux moitiés encrées — `GoSplitButton`

La pagination en comic_light — la page actuelle est une touche encrée avec une ombre franche — `GoPagination`

La nuit : `comic_dark`

Sur une page sombre, un contour noir disparaîtrait ; comic_dark le dessine donc en crème et projette une ombre légère teintée de la même encre. Les éléments du HUD — emplacements rapides, barres, joystick et calendrier de récompenses — suivent les mêmes règles.

Boutons en comic_dark — des contours crème, un primaire jaune et de légères ombres franches sur une page de nuit — `GoStyle.button()` la nuit

Emplacements rapides en comic_dark — des blocs encrés avec un compteur de pile et un temps de recharge, les emplacements allumés cerclés de jaune — `GoSlot`

Barres de HUD en comic_dark — HP, MP et XP dans des rainures encrées de crème — `GoBar`

Un joystick virtuel en comic_dark — un anneau crème et un bouton qui projette une ombre — `GoJoystick`

Alertes en comic_dark — des panneaux info, succès, avertissement et danger à l'encre crème — Alertes

Une grille d'emplacements en comic_dark — un inventaire de blocs encrés — `GoSlotGrid`

Un calendrier de récompenses en comic_dark — des cases de jour encrées, les jours réclamés cochés et aujourd'hui cerclé de jaune — `GoRewardCalendar`

Chips de rareté en comic_dark — des pilules encrées, chacune teintée de sa propre couleur — Chips

Un curseur de plage en comic_dark — deux poignées encrées sur une rainure encrée — `GoRangeSlider`

Une barre de recherche en comic_dark — une barre encrée avec des icônes de recherche et de filtre — `GoSearchBar`

Boutons d'action flottants en comic_dark — des touches jaunes à l'encre crème avec des ombres franches — `GoFab`

Comment fonctionne l'apparence bande dessinée

Un StyleBox pour chaque face

Chaque face est un GoStyleBoxComic : un remplissage, un contour et une ombre, dessinés à l'intérieur du rectangle même du contrôle. Il lit les tailles du contour et de l'ombre dans GoConfig à chaque dessin, si bien qu'un seul réglage change tout l'écran d'un coup.

Pressé veut dire à plat

Une touche pressée perd son ombre et se pose à sa place. Le survol garde l'ombre ; le focus ajoute un anneau d'encre intérieur qui ne couvre jamais le contour ; les faces désactivées perdent l'ombre et pâlissent.

Le skin encre le reste

GoSkinComic encre ce que dessine le code : emplacements rapides, chips, badges, avatars, notifications, la barre de navigation, le FAB, les cases de date et le joystick, dont le bouton projette une ombre.

Les fenêtres reçoivent un cartouche

Le titre d'une fenêtre repose sur un cartouche jaune, comme le récitatif d'une bande dessinée, à côté d'un bouton de fermeture rond et encré. Dialogues, feuilles, tiroirs et popovers sont des panneaux encrés opaques.

Lisible de jour comme de nuit

Les deux palettes passent les mêmes contrôles de contraste WCAG que tous les autres préréglages, touches pressées et désactivées comprises. Quand la couleur d'un cartouche serait trop proche de celle de la page, son contour reprend la couleur de la page.

Aucun changement de mise en page

Le contour et l'ombre tiennent dans chaque contrôle et les marges internes restent celles du thème, si bien qu'un écran mis en page dans une autre apparence garde sa disposition — et la police de votre projet.

Trois réglages et un appel

Trois réglages de GoConfig changent toutes les faces bande dessinée à la fois. Rien n'est reconstruit — l'écran se redessine dès que vous les modifiez.

GoUi.config.comic_border_width = 2.0   # le contour (dp) — 3 par défaut
GoUi.config.comic_shadow_size = 6.0    # l'ombre (dp) — 4 par défaut
GoUi.config.comic_shadow = false       # aucune ombre nulle part

Un widget peut faire bande à part, quels que soient les réglages. Passez true en dernier argument pour inclure tout ce qu'il contient.

GoStyle.comic_shadow(skip_button, false)     # ce bouton reste à plat
GoStyle.comic_shadow(card, true, true)       # cette carte et tout ce qu'elle contient gardent leur ombre
GoStyle.comic_border(title, 5.0)             # un contour plus épais sur celui-ci

Créez votre propre bande dessinée. tools/new_theme.py inked --from comic_light copie la palette ; changez les couleurs du papier, de l'encre et du primaire, puis lancez tools/make_theme.py inked. L'encre, l'ombre et le skin suivent.

Bande dessinée en détail → · Le même pop-up dans les quatorze apparences →

Ce que ça donne dans un jeu

Les préréglages médiéval et science-fiction — fiches de personnage, inventaires et quêtes ; formulaires, grilles et cartes d'invite ; panneaux anguleux et commandes tactiles. Changer de préréglage tient en une ligne de code.

Thème médiéval de gohud — une fiche de personnage avec barres de vie, de mana et d'endurance, une besace d'emplacements rapides et un journal de quêtes dans des cadres d'or forgé — **Médiéval** — personnage, inventaire et quêtes

Thème médiéval de gohud — un panneau de saisie avec champ de nom, interrupteur, cases à cocher et curseur de volume, une grille de tuiles, et une carte d'invite d'invitation de groupe avec Accepter et Refuser — **Médiéval** — formulaires, grilles et cartes d'invite

Thème science-fiction de gohud — un panneau de commandes tactiles chanfreiné avec joystick hexagonal, un sélecteur Fixe / Suiveur / Relatif et des boutons d'action ronds — **Science-fiction** — panneaux anguleux et commandes tactiles

Les quatorze préréglages et comment en changer →

Ce qu'il vous enlève des mains

Ce qui coûte le plus de temps dans une UI de jeu, ce n'est pas la forme d'un bouton — c'est tout ce qui diverge d'un appareil à l'autre. gohud traite cette dérive en un seul endroit.

Chaque mesure est un token

Les espacements, les coins et les tailles de texte sont appelés par leur nom, pas écrits en chiffres. Changez de thème et tout l'écran suit.

Taille visible ≠ taille pressable

Un bouton de fermeture paraît faire 36 dp alors que sa cible tactile en fait 48. Là où des emplacements serrés se chevauchent, c'est celui dont le centre est le plus proche qui reçoit l'appui.

Encoches et claviers

Les éléments du HUD restent dans la zone sûre, et un champ de saisie remonte au-dessus du clavier virtuel quand celui-ci apparaît.

Retour ne ferme qu'une chose

Échap et le bouton Retour d'Android ne ferment que la surface la plus haute. Des fenêtres empilées ne disparaissent pas d'un seul coup.

Les snackbars ne captent jamais la saisie

Appuyez à travers un snackbar et c'est le bouton en dessous qui reçoit l'appui. Le focus n'est pas pris non plus.

Les icônes se demandent par leur nom

Les widgets ne connaissent que GoIconSet.CLOSE. Changez de jeu et tous les dessins changent sans toucher une ligne de code. Icônes →

Quatorze apparences, une ligne

GoUi.use_preset() change d'un coup le thème, le skin et les icônes — cadres arrondis, chanfreinés science-fiction, forgés médiévaux, composants d'application Material 3, bonbons en gelée pour enfants, encre de bande dessinée ou peinture d'arcade.

Lisibilité mesurée

Chaque thème est vérifié au regard des WCAG, y compris les états des boutons et les panneaux de HUD translucides sur blanc pur et noir pur.

Tout fonctionne sans activer le plugin. L'activer ajoute un autoload GoRuntime qui suit la taille de la fenêtre, l'échelle dp et la hauteur du clavier, ainsi que des paramètres de projet pour la ressource de configuration et le préréglage — des commodités, pas des obligations.

Installer gohud

Deux chemins. Laissez votre agent IA le faire, ou déposez le dossier dans votre projet — il n'y a rien d'autre à configurer.

Installation

Démarrage rapide

Cinq lignes affichent un écran thématisé. Le parcours complet est sur la page d'installation.

Démarrage rapide

Changer l'apparence — les couleurs et les formes

Un Theme ne peut restyler que ce que le moteur dessine. Les coins arrondis sont les seuls coins dont dispose StyleBoxFlat, et le joystick, les emplacements rapides et le repère guidé sont dessinés par du code — un thème seul ne peut donc jamais changer leur forme. gohud livre pour cela des préréglages : un thème, un skin et un jeu d'icônes choisis d'un seul tenant.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # thème, skin et icônes d'un seul coup

Préréglage	Apparence
`default_dark`	Le gohud d'origine — coins arrondis, accent bleu doux
`default_light`	Les mêmes formes sur une palette claire
`scifi_dark`	Coins chanfreinés, arêtes néon cyan et halo, joystick hexagonal, crochets de visée
`scifi_light`	Les mêmes formes anguleuses dans une palette claire de plan technique
`medieval_dark`	Fer sombre et cuir, cadres d'or ancien, rivets, icônes gravées, titres en Cinzel
`medieval_light`	Parchemin, encre et bronze avec les mêmes cadres forgés
`material_light` Nouveau	Material 3 pour les écrans d'application — boutons en pilule, dialogues de 28dp, cartes pleines, la barre de navigation, le FAB et la barre de recherche d'une app, Roboto
`material_dark` Nouveau	Les mêmes formes Material 3 sur la base sombre
`kids_light` Nouveau	Le coffre à jouets des enfants — des touches en bonbon gélifié avec un contour épais et un rebord qui s'enfonce à l'appui, des couleurs de crayon, une page ensoleillée
`kids_dark` Nouveau	Le même coffre à jouets sur une page bleu nuit
`comic_light` Nouveau	Des cases de bande dessinée — un épais contour d'encre et une ombre franche sur chaque face, des panneaux blancs sur une page crème papier ; l'ombre, sa taille et l'épaisseur du contour sont des réglages
`comic_dark` Nouveau	La même encre sur une page de nuit — des contours crème et un primaire jaune
`arcade_light` Nouveau	Une borne d'arcade — chaque touche peinte avec un dégradé, un reflet et un rebord, son libellé blanc cerné d'encre ; d'épais panneaux encadrés sur une page bleu ciel, un bandeau de titre doré sur les fenêtres
`arcade_dark` Nouveau	Les mêmes touches vives sur des panneaux bleu marine et une page de nuit

La galerie gohud avec le préréglage default_dark — coins arrondis, accent bleu — `default_dark` — coins arrondis, accent bleu doux

Préréglage default_light — les mêmes formes sur une palette claire — `default_light` — mêmes formes, palette claire

Préréglage scifi_dark — coins chanfreinés et néon cyan — `scifi_dark` — coins chanfreinés, néon cyan

Préréglage scifi_light — les mêmes formes anguleuses dans une palette de plan technique — `scifi_light` — mêmes formes anguleuses, palette de plan technique

Ces quatre captures montrent le même écran de galerie. Pas une ligne de code ne diffère — seulement le nom du préréglage. Coins des boutons, formes des interrupteurs, rangées de liste et bordures des champs de saisie bougent ensemble.

Collection médiévale

medieval_dark associe le fer et le cuir à l'or ancien ; medieval_light emploie le parchemin et l'encre. Les cadres de menu portent un rivet et un petit ornement d'angle tandis que le HUD, toujours visible, reste discret ; 16 icônes gravées redessinent les noms d'objets, et seuls les titres et sous-titres utilisent la police Cinzel fournie.

medieval_dark — fiche de personnage, besace d'emplacements rapides et journal de quêtes — `medieval_dark` — fer et cuir

medieval_light — les mêmes écrans de personnage, de besace et de quêtes sur parchemin — `medieval_light` — parchemin et encre

Les deux captures viennent de examples/medieval/medieval.tscn, construit à partir des widgets standard. Le guide médiéval et comment créer votre propre royaume →

Le même écran sur téléphone et sur ordinateur

Les captures de la galerie sont prises sur un téléphone en portrait. Ci-dessous, le même code en 1280×800 — le contenu s'arrête à une largeur lisible (480 dp) et se centre, tandis que le HUD reste dans les coins. Le formulaire contourne les éléments de HUD flottants, mais ne bouge pas lorsqu'il en est déjà à l'écart : le décaler quand même décentrerait le contenu sur un écran large.

default_dark en 1280x800 — contenu centré, HUD dans les coins — `default_dark` · 1280×800

scifi_dark en 1280x800 — même mise en page avec panneaux chanfreinés et néon — `scifi_dark` · 1280×800

La même feuille, une autre apparence

Une feuille inférieure en default_dark — Par défaut — carte arrondie, rangée de recherche et pied de page fixes

Une feuille inférieure en scifi_dark — arête d'accent néon le long du haut — Science-fiction — arête d'accent en haut, coins coupés, halo

Choisissez-en un dans Paramètres du projet → gohud → Theme → Preset, ou renseignez GoConfig.preset. Remplir explicitement theme, skin ou icons l'emporte sur le préréglage : vous pouvez donc partir d'un préréglage et n'en redéfinir qu'un seul.

Un nouveau thème tient dans un fichier JSON. new_theme.py kingdom --from medieval_dark écrit une palette qui détaille chaque valeur héritée ; make_theme.py kingdom construit le thème, ses illustrations de contrôles et les molettes de son skin, et le préréglage apparaît dans le sélecteur. Chaque réglage et chaque molette →

Les skins — là où un Theme n'atteint pas

Un skin possède le joystick, la face des emplacements rapides, l'anneau du repère guidé, les puces, les squelettes de chargement, les alertes, les séparateurs et les en-têtes de section. Dérivez-le et ne redéfinissez que ce que vous voulez changer.

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	Formes qu'elle peut produire
`GoStyleBoxCut`	Coins coupés en diagonale (chanfrein), une arête d'accent épaissie, un halo extérieur
`GoStyleBoxBracket`	Des marques d'angle seules, sans enfermer le contenu
`GoStyleBoxMedieval`	Un cadre forgé avec rivets, gravure d'angle, un reflet biseauté et le grain du matériau
`GoStyleBoxJelly`	Un bonbon en gelée — un contour épais, un rebord plein qui s'enfonce à l'appui, un corps plus clair en haut et un reflet blanc
`GoStyleBoxComic`	Une case de bande dessinée — un épais contour d'encre et une ombre portée franche, tous deux dimensionnés par `GoConfig` pendant que le jeu tourne
`GoStyleBoxArcade`	Une touche ou un panneau d'arcade — un corps en dégradé, un reflet blanc, un rebord qui s'enfonce à l'appui et un contour d'encre ; un panneau ajoute un épais cadre coloré autour d'un fond pâle

Les six se sérialisent dans une ressource Theme — c'est ce qui permet à un thème de changer la forme, et pas seulement la couleur. GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic et GoSkinArcade sont les sous-classes fournies.

Des emplacements rapides, un joystick et une puce dessinés par chaque skin fourni — par défaut, enfants, Material, médiéval et science-fiction — Ce que dessine un skin — par défaut, enfants, Material, médiéval, science-fiction

Des emplacements rapides, un joystick et une puce dessinés par le skin bande dessinée — contours encrés et ombres franches — …et le skin bande dessinée

Des emplacements rapides, un joystick et une puce dessinés par le skin arcade — des capuchons de touche brillants et un socle à quatre flèches — …et le skin arcade

GoStyle.box() renvoie toujours un StyleBoxFlat, parce que le code appelant le reçoit et ajuste bg_color ou corner_radius. Utilisez GoStyle.surface() lorsqu'une forme personnalisée doit survivre.

Widgets

Les pièces, en un tableau. Chacune en détail → · Chaque widget en image → · Pop-ups et boîtes de dialogue, le guide complet →

Classe	Base	Rôle
`GoSurface`	Control	Coque de carte flottante — placement au centre, en bas ou ancré, en-tête et pied fixes, corps défilant, redimensionnement par glissement
`GoSheet`	CanvasLayer	Des pages qui montent depuis le bas, sur leur propre calque afin de passer au-dessus du HUD
`GoDialogs`	Node	Confirmations et alertes que vous `await` ; `destructive` pour les actions irréversibles
`GoForm`	MarginContainer	Formulaires à largeur plafonnée qui évitent le clavier virtuel et, avec `avoid_hud`, le HUD
`GoScroll`	ScrollContainer	Défilement tactile ; la barre de défilement se loge dans la marge intérieure de la carte
`GoNotice`	PanelContainer	Un snackbar qui ne prend ni la saisie ni le focus
`GoPromptCard`	PanelContainer	Une question qui ne bloque pas le jeu
`GoCoachMark`	Control	Une visite guidée qui désigne de vraies commandes ; appuyer sur la cible fait avancer
`GoHudAnchor`	Control	Épingle les éléments de HUD à l'une des neuf positions de la zone sûre
`GoBar`	Control	Barres de vie, de mana et d'expérience avec des variations amorties
`GoSlot`	Button	Un emplacement rapide — icône, quantité, temps de recharge et raccourci sur une seule face
`GoJoystick`	Control	Stick virtuel en mode fixe, suiveur ou relatif
`GoIconButton`	Button	Paraît petit, s'appuie grand
`GoStyle`	statique	Boutons, rangées de liste, champs de saisie, puces, tableaux, onglets et bien plus, fabriqués d'une seule manière cohérente

Attendre, dire, compter

Classe	Base	Rôle
`GoSnackbar`	Node	le message qui se place tout seul
`GoSpinner`	Control	une attente dont on ne voit pas la fin
`GoBadge`	PanelContainer	la pastille de non-lu, l'étiquette NOUVEAU, le 99+

Formulaires et listes

Classe	Base	Rôle
`GoField`	VBoxContainer	la rangée qui peut être en erreur
`GoInputGroup`	HBoxContainer	une saisie soudée à son bouton
`GoCombobox`	Button	un sélecteur qui cherche
`GoCodeInput`	VBoxContainer	codes promo et codes cadeaux
`GoTable`	VBoxContainer	des en-têtes triables, des rangées sélectionnables
`GoPagination`	HBoxContainer	des pages, ou une rangée « Voir plus »

Les formes que les jeux utilisent vraiment

Classe	Base	Rôle
`GoRewardCalendar`	VBoxContainer	la présence quotidienne
`GoRadar` · `GoDonut`	Control	les statistiques d'un coup d'œil
`GoCarousel`	VBoxContainer	bannières et sélection de personnage
`GoKbd`	HBoxContainer	des indications de touche qui ne mentent pas

Par-dessus l'écran

Classe	Base	Rôle
`GoDrawer`	CanvasLayer	le panneau latéral
`GoPopover`	RefCounted	la carte épinglée
`GoContextMenu`	RefCounted	appui long et clic droit
`GoConsole`	CanvasLayer	la console de développement

Go HUD Skill

gohud embarque une compétence IA : toute l'API, des modèles exécutables et un lanceur d'aperçu. Collez un bloc dans votre agent : il installe gohud et sait s'en servir.

Go HUD Skill

La lisibilité se mesure, elle ne s'estime pas à l'œil

« Joli » relève du goût ; « lisible » se mesure. Un gris pâle paraît très bien sur un bon écran et disparaît sur un téléphone en plein jour — choisir à l'œil finit toujours par y mener.

python3 addons/gohud/tools/check_contrast.py

Chaque paire de couleurs et le libellé de chaque état de bouton sur le panneau qui le porte sont mesurés au regard des WCAG, dans les quatorze thèmes. Les couleurs translucides sont d'abord composées sur leur fond réel — les mesurer directement annonce un meilleur rapport que ce que l'écran montre.

Les couleurs de texte sont donc dérivées, pas choisies : le générateur part de l'entrée de la palette et pousse sa clarté jusqu'à ce qu'elle franchisse le seuil sur chaque surface où elle peut se poser. Changez la palette et le contraste suit. Les règles et les pièges qui les motivent →

Vérifications, versions et ce site

Un seul point d'entrée lance toutes les vérifications ; chaque partie voit ce que les autres ne voient pas.

bash addons/gohud/tools/check_all.sh

Vérification	Ce qu'elle attrape
`run_tests.sh` sur quatre tailles d'écran	Comportement et mise en page des widgets, positions en RTL, focus clavier, contraste du skin à l'exécution, chaque préréglage
`new_project_check.sh`	Les dépendances cachées envers un projet hôte ; avec `--zip` la version telle qu'elle est livrée, avec `--export` une build Web
`check_contrast.py`	Le contraste WCAG de chaque fichier de thème, états des boutons et panneaux translucides compris
`check_generated.py` · `check_scaffold.sh`	Les thèmes générés correspondent à leurs palettes ; un thème jetable se construit et passe le contrôle de contraste
`check_package.py`	La version reprise de package.json, les déplacements dans le changelog et le contenu du ZIP, sur des copies temporaires
`check_site.py`	Les liens, les ancres, la langue des pages, le glossaire et les tableaux de molettes de ce site

Dernière exécution consignée — 2026-09-13, Godot 4.7.2, macOS, moteur de rendu Compatibility. 438 vérifications sur 438 en 390×844, 844×390, 768×1024 et 1280×800 dans un projet vide ; 438 sur 438 à nouveau avec l'autoload GoRuntime ; un export Web ; zéro échec de contraste sur les six thèmes. Les appareils Android ou iOS physiques ne faisaient pas partie de cette exécution.

Publier des versions

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # toutes les vérifications → ZIP → ce ZIP dans un projet vide
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

La version est celle écrite dans package.json : l'empaquetage ne l'augmente jamais. Pour publier une nouvelle version, changez d'abord ce numéro. Une exécution réussie aligne plugin.cfg et GoUi.VERSION sur cette valeur et, la première fois que cette version est empaquetée, déplace les notes Unreleased de CHANGELOG.md dans une entrée datée. Réempaqueter la même version reconstruit son ZIP et remplace l'ancien. Une exécution qui échoue ne change rien. Le ZIP laisse de côté ce site, les tests, les outils et package.json.

Ce site

python3 addons/gohud/tools/make_site.py            # glossaire et tableaux de molettes de skin, générés depuis les sources
python3 addons/gohud/tools/check_site.py           # liens, ancres, langue, glossaire, tableaux générés
bash addons/gohud/tools/site_shots.sh /tmp/shots   # captures d'écran de chaque page, en version bureau et téléphone

Les pages sont du HTML simple dans www/ — l'anglais à la racine, le coréen dans ko/. Un workflow GitHub Actions publie ce dossier comme racine du site.

Une UI de jeu pilotée par une seule ressource

Nouveau : arcade, bande dessinée, Material 3 et une apparence pour les enfants

Material 3 — pour les écrans d'application

Enfants — le coffre à jouets

Bande dessinée — encre épaisse

Arcade — touches peintes

Arcade : touches peintes et panneaux épais

Chaque touche, peinte

La nuit : arcade_dark

Comment fonctionne l'apparence arcade

La face

Des libellés lisibles

Fenêtres

Bande dessinée : encre épaisse et ombre franche

Chaque widget, encré

La nuit : comic_dark

Comment fonctionne l'apparence bande dessinée

Un StyleBox pour chaque face

Pressé veut dire à plat

Le skin encre le reste

Les fenêtres reçoivent un cartouche

Lisible de jour comme de nuit

Aucun changement de mise en page

Trois réglages et un appel

Ce que ça donne dans un jeu

Ce qu'il vous enlève des mains

Chaque mesure est un token

Taille visible ≠ taille pressable

Encoches et claviers

Retour ne ferme qu'une chose

Les snackbars ne captent jamais la saisie

Les icônes se demandent par leur nom

Quatorze apparences, une ligne

Lisibilité mesurée

Installer gohud

Démarrage rapide

Changer l'apparence — les couleurs et les formes

Collection médiévale

Le même écran sur téléphone et sur ordinateur

La même feuille, une autre apparence

Les skins — là où un Theme n'atteint pas

Widgets

Attendre, dire, compter

Formulaires et listes

Les formes que les jeux utilisent vraiment

Par-dessus l'écran

Go HUD Skill

La lisibilité se mesure, elle ne s'estime pas à l'œil

Vérifications, versions et ce site

Publier des versions

Ce site

La nuit : `arcade_dark`

La nuit : `comic_dark`