Une UI de jeu pilotée par une seule ressource

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.

Les six 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.

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

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.

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.

La même feuille, une autre apparence

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.

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

Les trois 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 et GoSkinMedieval sont les sous-classes fournies.

Widgets

Les pièces, en un tableau. Chacune en détail →

Attendre, dire, compter

Formulaires et listes

Les formes que les jeux utilisent vraiment

Par-dessus l'écran

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