Personnalisation de GUI

Oh, magnifique GUI !

Ce tutoriel concerne le skinning avancé d'une interface utilisateur. La plupart des jeux n'ont généralement pas besoin de cela, car ils s'appuient simplement sur des nœuds de type Label, TextureRect, TextureButton et TextureProgress.

Cependant, de nombreux types de jeux nécessitent souvent des interfaces utilisateur complexes, comme les MMO, les RPG traditionnels, les simulateurs, les jeux de stratégie, etc. Ces types d'interface sont également courants dans certains jeux qui incluent des éditeurs pour créer du contenu, ou des interfaces pour la connectivité réseau.

L'interface utilisateur de Godot utilise ces types de contrôle avec le thème par défaut, mais ils peuvent être personnalisés pour ressembler à peu près à n'importe quel type d'interface utilisateur.

Thème

L'interface graphique est personnalisée via la ressource Theme. Le thème contient toutes les informations nécessaires pour modifier l'intégralité du style visuel de tous les contrôles. Les options de thème sont nommées, il n'est donc pas évident de savoir quel nom change quoi (en particulier à partir du code), mais plusieurs outils sont fournis. L'endroit ultime pour voir quelle est chaque option de thème pour chaque contrôle, qui sera toujours plus à jour que toute documentation, est le fichier scene/resources/default_theme/default_theme.cpp. Le reste de ce document explique les différents outils utilisés pour personnaliser le thème.

Un thème peut être appliqué à n'importe quel control de la scène. Par conséquent, tous les controls enfants et petits-enfants utiliseront également ce même thème (à moins qu'un autre thème ne soit spécifié plus bas dans l'arbre). Si une valeur n'est pas trouvée dans un thème, elle sera recherchée dans les thèmes plus haut dans la hiérarchie, vers la racine. Si rien n'a été trouvé, le thème par défaut est utilisé. Ce système permet une superposition flexible de thèmes dans des interfaces utilisateur complexes.

Attention

Don't use the custom theme option in the Project Settings, as there are known bugs with theme propagation. Instead, apply your theme to the root Control node's Theme property. It will propagate to instanced scenes automatically. To get correct theming in the editor for instanced scenes, you can apply the theme resource to the instanced scene's root node as well.

Options de thèmes

Chaque type d'option dans un thème peut être :

  • Une constante entière : Une seule constante numérique. Généralement utilisé pour définir l'espacement entre les composants ou l'alignement.
  • Une Couleur : Une seule couleur, avec ou sans transparence. Les couleurs sont généralement appliquées aux polices et aux icônes.
  • Une texture : Une seule image. Les textures ne sont pas souvent utilisées, mais lorsqu'elles le sont, elles représentent des poignées à sélectionner ou des icônes dans un contrôle complexe (comme une boîte de dialogue de fichier).
  • Une Police : Chaque control qui utilise du texte peut se voir attribuer les polices utilisées pour dessiner les chaînes de caractères.
  • Un StyleBox : Stylebox est une ressource qui définit comment dessiner un panneau de différentes tailles (plus d'informations à ce sujet plus tard).

Chaque option est associée à :

  • Un nom (le nom de l'option)
  • Un Control (le nom du control)

Un exemple d'utilisation :

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

In the example above, a new theme is created. The "font_color" option is changed and then applied to a label. Therefore, the label's text (and all children and grandchildren labels) will be red.

Il est possible de surcharger ces options sans utiliser directement le thème, et seulement pour un control spécifique, en utilisant l'API de surchargement dans Control.add_color_override() :

var label = Label.new()
label.add_color_override("font_color", Color.red)
var label = new Label();
label.AddColorOverride("fontColor", new Color(1.0f, 0.0f, 0.0f));

In the inline help of Godot (in the Script tab), you can check which theme options are overridable, or check the Control class reference.

Personnalisation d'un contrôle

Si seuls quelques contrôles doivent être personnalisés, il n'est souvent pas nécessaire de créer un nouveau thème. Les contrôles offrent leurs propres options de thème sous forme propriétés d'un type spécial. Lorsqu'elles sont cochées, le remplacement aura lieu :

../../_images/themecheck.png

Comme on peut le voir dans l'image ci-dessus, les options du thème ont de petites cases à cocher. Si elles sont cochées, elles peuvent être utilisées pour remplacer la valeur du thème juste pour ce control.

Création d'un thème

La façon la plus simple de créer un thème est d'éditer une ressource thème. Créez un Theme à partir du menu des ressources ; l'éditeur apparaîtra immédiatement. Après cela, enregistrez-le (par exemple, avec le nom mytheme.theme) :

../../_images/sb2.png

Cela créera un thème vide qui pourra être chargé et assigné aux controls par la suite.

Exemple : thème d'un bouton

Téléchargez ces assets (skin_assets.zip) et ajoutez les à votre projet. Ouvrez l'éditeur de thème, cliquez sur "Modifier le thème" ("Edit Theme" en anglais) et sélectionner "Ajouter des objets de classe" ("Add Class Items") :

../../_images/themeci.png

Un menu apparaîtra alors vous demendant le type de contrôle à créer. Sélectionnez "Bouton" ("Button") :

../../_images/themeci2.png

Immédiatement, toutes les options de thème du bouton apparaissent dans l'éditeur de propriétés, où elles peuvent être éditées :

../../_images/themeci3.png

From Styles, open the "Normal" drop-down menu next to where it probably says "null" and create a "New StyleBoxTexture", then edit it. A texture stylebox contains a texture and the size of the margins that will not stretch when the texture is stretched. This is called nine-patch or "3x3" stretching:

../../_images/sb1.png

Répétez les étapes et ajoutez les autres assets. Il n'y a pas de survol ou d'image désactivée dans les fichiers d'exemple, donc utilisez la même stylebox que dans la version normale. Définissez la police fournie comme police de bouton et changez la couleur de la police en noir. Bientôt, votre bouton aura un aspect différent et rétro :

../../_images/sb2.png

Enregistrez ce thème dans le fichier .theme. Allez dans l'éditeur 2D et créez quelques boutons :

../../_images/skinbuttons1.png

Maintenant, allez au nœud racine de la scène et localisez la propriété "theme", remplacez-la par le thème qui vient d'être créé. Ça devrait ressembler à cela :

../../_images/skinbuttons2.png

Félicitations ! Vous avez créé un thème GUI réutilisable !