Conception d’interfaces avec les nœuds Control

Computer displays, mobile phones, and TV screens come in all shapes and sizes. To ship a game, you’ll need to support different screen ratios and resolutions. It can be hard to build responsive interfaces that adapt to all platforms. Thankfully, Godot comes with robust tools to design and manage a responsive User Interface.

../../_images/godot_editor_ui.png

L’éditeur de Godot est réalisé avec le framework UI du moteur

Ce guide vous permettra de commencer la conception d’interfaces utilisateurs. Vous apprendrez :

  • Les cinq nœuds de contrôle les plus utiles pour construire l’interface de vos jeux
  • Comment travailler avec l’ancrage des éléments de l’interface utilisateur
  • Comment placer et organiser efficacement votre interface utilisateur à l’aide de conteneurs
  • Les cinq conteneurs les plus courants (plus tard, vous pourrez en savoir plus sur les conteneurs dans la page de documentation GUI Containers).

Pour apprendre à contrôler l’interface et à la connecter à d’autres scripts, lisez Construisez votre première interface utilisateur de jeu dans Godot.

Pour concevoir votre interface utilisateur, vous utiliserez les nœuds de contrôle. Ce sont les nœuds avec des icônes vertes dans l’éditeur. Il y en a des douzaines, pour créer des barres de vie ou des applications complexes. L’éditeur de Godot lui-même est construit à l’aide de nœuds de contrôle.

Les nœuds de contrôle ont des propriétés uniques qui leur permettent de bien fonctionner les uns avec les autres. D’autres nœuds visuels, comme Node2D et Sprite n’ont pas ces capacités. Donc, pour vous faciliter la vie, utilisez les nœuds de contrôle autant que possible lors de la création de vos interfaces utilisateur.

Tous les nœuds Control partagent les mêmes propriétés principales :

  1. Ancrage
  2. Rectangle de délimitation
  3. Focus et focus voisin
  4. Drapeaux de taille
  5. Marge
  6. Le thème optionnel de l’interface utilisateur

Une fois que vous aurez compris les bases du nœud Control, il vous faudra moins de temps pour apprendre tous les nœuds qui en dérivent.

Les 5 éléments les plus courants de l’interface utilisateur

Godot propose des douzaines de nœuds Control. Beaucoup d’entre eux sont là pour vous aider à réaliser des plugins pour l’éditeur et des applications.

Pour la plupart des jeux, vous n’aurez besoin que de cinq types d’éléments d’interface utilisateur, et de quelques Containers. Ces cinq nœuds Control sont :

  1. Label : pour afficher du texte
  2. TextureRect : utilisé principalement pour les arrière-plans, ou tout ce qui doit être une image statique
  3. TextureProgress : pour les barres de vie, les barres de chargement, horizontales, verticales ou radiales
  4. NinePatchRect : pour des panneaux redimensionnables
  5. TextureButton : pour créer des boutons
../../_images/five_most_common_nodes.png

Les 5 nœuds Control les plus courants pour la conception de l’interface utilisateur

TextureRect

TextureRect affiche une texture ou une image à l’intérieur d’une interface utilisateur. Il ressemble au nœud Sprite mais il offre plusieurs modes de mise à l’échelle. Définissez la propriété Stretch Mode pour changer son comportement :

  • Scale On Expand (compat) met à l’échelle la texture afin de s’ajuster au rectangle englobant le nœud, seulement si la propriété expand est égale à true; sinon, le comportement est le même que le mode Keep qui est le mode par défaut pour des raisons de rétro-compatibilité.
  • Scale met à l’échelle la texture afin de s’ajuster au rectangle englobant le nœud.
  • Tile permet à la texture de se répéter, mais ne se mettra pas à l’échelle.
  • Keep et Keep Centered force la texture à garder sa taille d’origine, dans le coin supérieur gauche ou au centre du cadre respectivement.
  • Keep Aspect et Keep Aspect Centered met à l’échelle la texture mais la force à garder le rapport hauteur/largeur d’origine, dans le coin supérieur gauche ou au centre du cadre respectivement.
  • Keep Aspect Covered fonctionne comme Keep Aspect Centered mais le côté le plus court s’étend jusqu’au rectangle de délimitation et le côté le plus long est coupé aux limites du nœud.

Comme pour les nœuds Sprite, vous pouvez moduler la couleur du nœud TextureRect. Cliquez sur la propriété Modulate et utilisez le sélecteur de couleur.

../../_images/five_common_nodes_textureframe.png

TextureRect modulé par la couleur rouge

TextureButton

TextureButton est comme TextureRect, sauf qu’il a cinq emplacements de texture: un pour chacun des états du bouton. La plupart du temps, vous utiliserez les textures Normal, Pressed et Hover. La texture Focused est utile si votre interface réagit à la saisie clavier. Le sixième emplacement d’image, Click Mask, vous permet de définir la zone cliquable à l’aide d’une image en noir et blanc de 2 bits.

Dans la section Bouton de base, vous trouverez quelques cases à cocher qui modifient le comportement du bouton. Lorsque l’option Toggle Mode est activée, le bouton bascule entre l’état actif et l’état normal lorsque vous appuyez dessus. Disabled le désactive par défaut, auquel cas il utilisera la texture Disabled. TextureButton partage quelques propriétés avec le cadre de texture : il a une propriété modulate, pour changer sa couleur, et les modes Resize et Stretch pour changer son comportement d’échelle.

../../_images/five_common_nodes_texturebutton.png

Un TextureButton et ses 5 emplacements à texture

TextureProgress

TextureProgress empile jusqu’à 3 sprites pour créer une barre de progression. Les textures Under et Over prennent en sandwich la texture Progress, qui affiche la valeur de la barre.

La propriété Mode contrôle la direction dans laquelle la barre se développe : horizontalement, verticalement ou radialement. Si vous la réglez sur radial, les propriétés Initial Angle et Fill Degrees vous permettent de limiter la plage de valeurs de la jauge.

To animate the bar, you’ll want to look at the Range section. Set the Min and Max properties to define the range of the gauge. For instance, to represent a character’s life, you’ll want to set Min to 0, and Max to the character’s maximum life. Change the Value property to update the bar. If you leave the Min and Max values to the default of 0 and 100, and set the Value property to 40, 40% of the Progress texture will show up, and 60% of it will stay hidden.

../../_images/five_common_nodes_textureprogress.png

Barre TextureProgress, remplie aux deux tiers

Label

Un Label affiche du texte à l’écran. Vous trouverez toutes ses propriétés dans la section Label, dans l’Inspecteur. Ecrivez le texte dans la propriété Text, et cochez Autowrap si vous voulez qu’il respecte la taille de la zone de texte. Si la fonction Autowrap est désactivée, vous ne pourrez pas mettre à l’échelle le nœud. Vous pouvez aligner le texte horizontalement et verticalement avec Align et Valign respectivement.

../../_images/five_common_nodes_label.png

Image d’un Label

NinePatchRect

NinePatchRect prend une texture divisée en 3 lignes et 3 colonnes. La tuile du centre et celles des côtés se dupliquent lorsque vous mettez à l’échelle la texture, celles des coins ne sont jamais dupliquées. Il est utile pour créer des panneaux, des boîtes de dialogue et des arrière-plans flexible pour votre interface utilisateur.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect mis à l’échelle avec la propriété min_size

Il existe deux méthodes de travail pour créer des interfaces utilisateur réactives

Il existe deux méthodes de travail pour construire des interfaces évolutives et flexibles dans Godot :

  1. Vous avez de nombreux nœuds conteneurs à votre disposition qui mettent à l’échelle et placent des éléments de l’interface utilisateur pour vous. Ils prennent le contrôle de leurs enfants.
  2. De l’autre côté, vous avez le menu de mise en page. Il vous aide à ancrer, placer et redimensionner un élément d’interface utilisateur dans son parent.

Les deux approches ne sont pas toujours compatibles. Puisqu’un conteneur contrôle ses enfants, vous ne pouvez pas utiliser le menu de mise en page sur eux. Chaque conteneur ayant un effet spécifique, vous aurez peut-être besoin d’en emboîter plusieurs pour obtenir une interface fonctionnelle. Avec l’approche de mise en page, vous travaillez sur l’enfant à partir du bas vers le haut. Étant donné que vous n’insérez pas de conteneurs supplémentaires dans la scène, vous obtiendrez des hiérarchies plus nettes, mais il sera plus difficile de disposer les éléments en rangée, en colonne, grille, etc.

En créant des interfaces utilisateur pour vos jeux et outils, vous développerez une l’intuition pour ce qui est le plus approprié dans chaque situation.

Placer précisément les éléments de l’interface utilisateur à l’aide d’ancrages

Les nœuds de contrôles ont une position et une taille, mais ils ont également des ancrages et des marges. Les ancrages définissent l’origine, ou le point de référence, pour les cotés Gauche, Haut, Droit et Bas du nœud. Modifier n’importe lequel valeur des 4 ancrages pour modifier le point de référence des marges.

../../_images/anchor_property.png

La propriété d’ancrage

Comment modifier l’ancrage

Comme toutes les propriétés, vous pouvez modifier les 4 points d’ancrage dans l’Inspecteur, mais il ne s’agit pas de la façon la plus conviviale. Lorsque vous sélectionnez un nœud de contrôle, le menu de mise en page s’affiche au-dessus de la vue, dans la barre d’outils. Il vous donne une liste d’icônes pour paramétrer les 4 ancrages en un seul clic, au lieu d’utiliser les 4 propriétés dans l’Inspecteur. Le menu de mise en page s’affichera seulement lorsque vous sélectionnez un nœud de contrôle.

../../_images/layout_menu.png

Le menu de mise en page dans la vue

Les ancrages sont relatifs à leur conteneur parent

Chaque ancrage est une valeur qui se situe entre 0 et 1. Pour les ancrages du haut et de gauche, une valeur de 0 signifie que, sans aucune marge, les bords du nœud s’aligneront avec les bords de gauche et de haut de son parent. Pour les bords droit et bas, une valeur de 1 signifie qu’ils s’aligneront avec les bords de droite et du bas de son conteneur parent. Dans une autre ordre d’idée, les marges représentent une distance jusqu’au position d’un ancrage en pixels, tandis que les ancrages sont relatifs à la taille de leur conteneur parent.

../../_images/ui_anchor_and_margins.png

Les marges sont relatives à la position de l’ancrage, ce qui est relatif aux ancrages. En pratique, vous allez laisser souvent le conteneur mettre à jour les marges pour vous

Les marges changent avec l’ancrage

Les marges se mettent à jour automatiquement lorsque vous déplacez ou redimensionnez un nœud de contrôle. Elles représentent la distance des bords du nœud de contrôle à son ancrage, qui est relatif au nœud de contrôle parent ou au conteneur. C’est pourquoi vos nœuds de contrôle devraient toujours se trouver à l’intérieur d’un conteneur, comme nous le verrons dans un instant. S’il n’y a pas de parent, les marges seront relatives au rectangle de délimitation du nœud, défini dans la section Rect, dans l’inspecteur.

../../_images/control_node_margin.png

Marges sur un CenterContainer réglé sur l’ancre « Full Rect »

Essayez de changer les ancres ou d’imbriquer vos nœuds de contrôle à l’intérieur des conteneurs : les marges se mettront à jour. Vous aurez rarement besoin d’éditer les marges manuellement. Essayez toujours de trouver un conteneur pour vous aider en premier; Godot est fourni avec des nœuds pour résoudre tous les cas courants pour vous. Besoin d’ajouter de l’espace entre une barre de vie et le bord de l’écran ? Utilisez le MarginContainer. Vous voulez construire un menu vertical ? Utilisez le VBoxContainer. Plus d’informations à ce sujet ci-dessous.

Utilisez les balises de taille pour modifier la façon dont les éléments de l’interface utilisateur remplissent l’espace disponible

Chaque nœud de contrôle a des drapeaux de taille. Ils indiquent aux conteneurs comment les éléments de l’interface utilisateur doivent être mis à l’échelle. Si vous ajoutez le drapeau « Fill » à la propriété Horizontal ou Vertical, la boîte de délimitation du nœud prendra tout l’espace qu’elle peut, mais elle respectera ses noeuds frères et conservera sa taille. S’il y a 3 nœuds TextureRect dans un HBoxContainer, avec les drapeaux « Fill » sur les deux axes, ils occuperont chacun jusqu’à un tiers de l’espace disponible, mais pas plus. Le conteneur va prendre le contrôle du nœud et le redimensionner automatiquement.

../../_images/textureframe_in_box_container_fill.png

3 éléments d’interface utilisateur dans un HBoxContainer, qui s’alignent horizontalement

Le drapeau « Expand » permet à l’élément de l’interface de prendre tout l’espace qu’il peut, et de pousser ses éléments frères. Son rectangle délimitant grandira jusqu’aux bords de son parent, ou jusqu’à ce qu’il soit bloqué par un autre nœud d’interface utilisateur.

../../_images/textureframe_in_box_container_expand.png

Le même exemple que ci-dessus, mais le nœud central a le drapeau de taille « Expand »

Vous aurez besoin d’un peu de pratique pour comprendre les balises de taille, car leur effet peut assez varier en fonction de la façon dont vous configurez votre interface.

Arrangez automatiquement les nœuds de contrôle avec les conteneurs

Les conteneurs rangent automatiquement tous les nœuds de contrôle enfants, y compris les autres conteneurs en rangées, colonnes et plus encore. Utilisez-les pour ajouter de l’espace autour de votre interface ou des nœuds centraux dans leurs rectangles de délimitation. Tous les conteneurs intégrés sont mis à jour dans l’éditeur pour que vous puissiez voir l’effet instantanément.

Les conteneurs ont quelques propriétés spéciales pour contrôler la façon dont ils organisent les éléments de l’interface utilisateur. Pour les modifier, naviguez jusqu’à la section personnalisée Constants dans l’inspecteur.

Les 5 conteneurs les plus utiles

Si vous créez des outils, vous pourriez avoir besoin de tous les conteneurs. Mais pour la plupart des jeux, une poignée suffira :

  • MarginContainer, pour ajouter des marges autour d’une partie de l’interface utilisateur
  • CenterContainer, pour centrer ses enfants dans sa boîte de délimitation
  • VboxContainer et HboxContainer, pour organiser les éléments de l’interface utilisateur en lignes ou en colonnes
  • GridContainer, pour disposer les nœuds Control dans un motif en forme de grille

CenterContainer centre tous ses enfants à l’intérieur de son rectangle délimitant. C’est celui que vous utilisez généralement pour les écrans de titre, si vous voulez que les options restent au centre de la fenêtre d’affichage. Comme il centre tout, vous aurez souvent besoin d’un seul conteneur imbriqué à l’intérieur. Si vous utilisez des textures et des boutons à la place, ils s’empileront.

../../_images/five_containers_centercontainer.png

CenterContainer en action. La barre de vie se centre à l’intérieur de son conteneur parent.

Le MarginContainer ajoute une marge de n’importe quel côté des nœuds enfants. Ajoutez un MarginContainer qui englobe l’ensemble de la fenêtre pour ajouter une séparation entre le bord de la fenêtre et l’interface utilisateur. Vous pouvez définir une marge en haut, à gauche, à droite, ou en bas du conteneur. Pas besoin de cocher la case : cliquez sur le champ de valeur correspondant et tapez n’importe quel nombre. Il s’activera automatiquement.

../../_images/five_containers_margincontainer.png

Le MarginContainer ajoute une marge de 40px autour de l’interface utilisateur du jeu

Il y a deux BoxContainers : VBoxContainer et HBoxContainer. Vous ne pouvez pas ajouter le nœud BoxContainer lui-même, car il s’agit d’une classe d’aide, mais vous pouvez utiliser des conteneurs de boîtes verticaux et horizontaux. Ils organisent les nœuds en lignes ou en colonnes. Utilisez-les pour aligner des articles dans une boutique, ou pour construire des grilles complexes avec des lignes et des colonnes de différentes tailles, car vous pouvez les emboîter à votre guise.

../../_images/five_containers_boxcontainer.png

Le HBoxContainer aligne horizontalement les éléments d’interface utilisateur

VBoxContainer organise automatiquement ses enfants dans une colonne. Il les place les un après les autres. Si vous utilisez le paramètre de séparation, il laissera un espace entre ses enfants. HBoxContainer organise les éléments d’interface utilisateur dans une rangée. Il est similaire au VBoxContainer, avec une méthode supplémentaire add_spacer pour ajouter un noeud de contrôle spacer avant son premier enfant ou après son dernier enfant, à partir d’un script.

Le GridContainer vous permet d’organiser les éléments de l’interface utilisateur selon un motif en forme de grille. Vous ne pouvez contrôler que le nombre de colonnes qu’il a, et il fixera le nombre de lignes par lui-même, en se basant sur le nombre de ses enfants. Si vous avez neuf enfants et trois colonnes, vous aurez 9÷3 = 3 lignes. Ajoutez trois enfants de plus et vous aurez quatre rangées. En d’autres termes, il créera de nouvelles lignes au fur et à mesure que vous ajouterez des textures et des boutons. Comme les conteneurs box, il a deux propriétés pour définir la séparation verticale et horizontale entre les lignes et les colonnes respectivement.

../../_images/five_containers_gridcontainer.png

Un GridContainer avec 2 colonnes. Il dimensionne chaque colonne automatiquement.

Le système d’interface utilisateur de Godot est complexe et a beaucoup plus à offrir. Pour apprendre à concevoir une interface plus avancée, rendez-vous dans la section GUI section de la documentation.