Créer la GUI

Maintenant que vous avez acquis les bases, nous allons voir comment construire une interface graphique utilisateur ( ou GUI) avec des composants d’interface réutilisables : une jauge de vie, une jauge d’énergie et des compteurs de bombes et d’émeraudes. A la fin de ce tutoriel, vous aurez une interface graphique utilisateur prête à utiliser avec GDscript ou Visualscript :

../../_images/ui_gui_design_final_result.png

Le résultat final

Vous allez aussi apprendre à :

  1. Créer des composants d’interface utilisateur flexibles
  2. Utiliser l’héritage de scène
  3. Construire une interface complexe

Télécharger les fichiers du projet : :download: :ui_gui_design.zip <files/ui_gui_design.zip> et extraire l’archive. Importer le projet start/ dans Godot pour suivre ce tutoriel. Le dossier end/ contient le résultat final.

Note

Vous pouvez regarder le tutoriel vidéo sur Youtube.

Décomposer l’interface utilisateur

Décomposons l’interface utilisateur finale et prévoyons les conteneurs que nous utiliserons. Comme dans le ui_main_menu_main, elle commence par un MarginContainer. Ensuite, nous pouvons voir jusqu’à trois colonnes :

  1. Les compteurs de vie et d’énergie à gauche
  2. Les barres de vie et d’énergie
  3. Le compteur de bombes et d’émeraudes sur la droite

Mais l’étiquette de la barre et la jauge sont deux parties d’un même élément d’interface utilisateur. Si nous pensons à eux de cette façon, il nous reste deux colonnes :

  1. Les barres de vie et d’énergie à gauche
  2. Le compteur de bombes et d’émeraudes sur la droite

Cela facilite l’imbrication des conteneurs : nous avons des marges autour de la bordure de l’écran en utilisant un MarginContainer, suivi d’un HBoxContainer pour gérer nos deux colonnes. Les deux barres s’empilent l’une sur l’autre à l’intérieur d’un VBoxContainer. Et nous aurons besoin d’un dernier « HBoxContainer » dans la colonne de droite pour placer les compteurs de bombes et de d’émeraudes côte à côte.

../../_images/ui_gui_step_tutorial_containers_structure.png

Nous obtenons une disposition propre de l’interface utilisateur avec seulement 4 conteneurs

Nous aurons besoin de conteneurs supplémentaires à l’intérieur des composants individuels de l’interface utilisateur, mais cela nous donne la structure de la scène principale de l’interface graphique. Avec ce plan en place, nous pouvons passer à Godot et créer notre interface graphique.

Créer les bases de l’IHM

Il y a deux approches possibles pour l’interface graphique : nous pouvons concevoir des éléments dans des scènes séparées et les assembler, ou bien faire un prototype du tout dans une seule scène et décomposer plus tard. Je vous recommande de travailler avec une seule scène car vous pouvez jouer avec l’emplacement et les proportions de votre interface utilisateur plus rapidement de cette façon. Une fois que ça a l’air bon, vous pouvez sauvegarder des sections entières de l’arborescence des nœuds en tant que sous-scènes réutilisables. Nous le ferons dans un instant.

Pour l’instant, commençons avec quelques conteneurs.

Créez une nouvelle scène et ajoutez un MarginContainer. Sélectionnez le nœud et nommez-le GUI.

Nous voulons que notre interface s’ancre en haut de l’écran. Sélectionnez le nœud GUI et cliquez sur le bouton Mise en page en haut de la fenêtre. Sélectionnez l’option Top Wide. Le nœud GUI s’ancre au bord supérieur de son parent, la fenêtre d’affichage par défaut. Il sera automatiquement redimensionné sur l’axe vertical pour faire de la place pour ses composants UI enfants.

Enregistrez la scène sous le nom GUI.tscn. Nous allons y mettre toute l’interface utilisateur graphique.

Avec le MarginContainer sélectionné, dirigez-vous vers l’inspecteur et faites défiler vers le bas jusqu’à la section des constantes personnalisées. Dépliez-le et cliquez sur le champ à côté de chacune des propriétés Margin. Réglez-les tous sur 20 pixels. Ensuite, ajoutez un nœud HBoxContainer. Celui-ci contiendra nos deux barres à gauche et les séparera des deux compteurs à droite.

Nous voulons empiler les barres verticalement à l’intérieur du HBoxContainer. Pour ce faire, ajoutez un VBoxContainer``comme enfant du ``HBoxContainer et donnez-lui le nom de « Bars ». Sélectionnez à nouveau le parent HBoxContainer et cette fois, ajoutez comme enfant un autre HBoxContainer. Celui-ci contiendra les compteurs, alors appelez-le « Counters ». Avec ces quatre conteneurs, nous avons la base de notre scène GUI.

../../_images/ui_gui_containers_structure_in_godot.png

Vous devriez avoir 4 conteneurs ressemblant à ceci

Note

Nous pouvons travailler de cette façon car nous avons d’abord décomposé la conception de notre interface utilisateur puis nous avons pris quelques instants pour réfléchir aux conteneurs que nous allons utiliser. Quand vous suivez un tutoriel comme celui-ci, cela peut sembler bizarre, mais lorsque vous travaillerez sur de vrais jeux, vous verrez qu’il s’agit d’une méthode de travail efficace.

Créez la base des barres

Chaque barre est divisée en deux sous-éléments qui s’alignent horizontalement : Le texte de la santé à gauche et la jauge à droite. Une fois de plus, le HBoxContainer est l’outil parfait pour le travail. Sélectionnez le nœud Bars et ajoutez un nouveau HBoxContainer à l’intérieur. Donnez-lui le nom de « Bar ».

Le label nécessite au moins trois nœuds : Un NinePatchRect pour le fond, sur lequel nous ajouterons une texture à gauche, soit HP ou``EP``, et un Label à droite pour la valeur. Nous pouvons emboîter les nœuds « Control » comme nous le souhaitons. Nous pouvons utiliser le NinePatchRect comme parent pour les deux autres éléments car il les englobe. En général, il est préférable d’utiliser des conteneurs à la place, car leur rôle est d’aider à organiser les composants de l’interface utilisateur. Nous aurons besoin d’un MarginContainer plus tard de toute façon pour ajouter de l’espace entre la durée de vie et la jauge. Sélectionnez Bar, ajoutez un MarginContainer et donnez-lui le nom de « Count ». A l’intérieur, ajoutez trois nœuds :

  1. Un NinePatchRect nommé Background
  2. Un TextureRect nommé Title
  3. Et un Label nommé Number

Pour ajouter les nœuds en tant que frères, sélectionnez toujours le nœud Count en premier.

../../_images/ui_gui_step_tutorial_bar_template_1.png

Votre arbre de scène devrait ressembler à ceci. Nous sommes prêts à ajouter des textures

Notre scène est encore vide. Il est temps d’ajouter des textures. Pour charger les textures, dirigez-vous vers le dock FileSystem à gauche de la fenêtre. Naviguez jusqu’au dossier res://assets/GUI.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

Vous devriez vous la liste de texture que vous allez pouvoir utiliser pour votre interface.

Sélectionnez Background dans le dock Scène. Dans l’inspecteur, vous devriez voir une propriété Texture. Dans l’onglet Système de fichiers, cliquez et faites glisser label_HP_bg.png sur l’emplacement Texture. Il reste écrasé. Le conteneur MarginContainer parent forcera sa taille à 0 jusqu’à ce que nous forcions les éléments à l’intérieur du conteneur à avoir une taille minimale. Sélectionnez le nœud Background. Dans l’inspecteur, faites défiler vers le bas jusqu’à la section Rect. Réglez Min Size à (100, 40). Vous devriez voir le Background redimensionné avec ses conteneurs parents.

Ensuite, sélectionnez le Title et glissez-déposez label_HP.png dans l’emplacement Texture. Sélectionnez le nœud Number`, cliquez sur le champ à côté de la propriété Text et tapez 10. De cette façon, nous pouvons voir les deux nœuds dans le viewport. Ils devraient s’empiler dans le coin supérieur gauche de leur parent MarginContainer.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Si vous sélectionnez les deux nœuds, vous devriez voir quelque chose comme ceci

Comme ils ont un conteneur comme parent direct, nous ne pouvons pas les déplacer librement : le nœud Count réinitialise toujours leurs ancres, leur taille et leur position. Essayez de déplacer et de redimensionner les nœuds dans la fenêtre d’affichage. Ensuite, sélectionnez l’une des trois textures et appuyez sur Ctrl+Haut ou Ctrl+Bas pour les réorganiser dans le dock Scène. Ils retrouveront leur taille et leur position antérieures.

Les conteneurs parents contrôlent la taille, l’échelle, les marges et les ancres de leurs enfants directs. Pour modifier les nœuds, vous devez les imbriquer à l’intérieur d’un Control standard ou d’un autre élément de l’interface utilisateur. Nous utiliserons Background comme parent pour Title et Number. Sélectionnez Title et Number, puis faites-les glisser-et déposez les sur Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

En utilisant le noeud Background comme parent des deux textures, nous prenons le contrôle du Count MarginContainer

Sélectionnez le Title et dans l’inspecteur, changez sa propriété Stretch Mode pour Keep Centered. Trouvez ensuite la catégorie Rect dans l’inspecteur et changez la propriété Size en (50, 40) pour qu’il ne prenne que la moitié gauche de l’arrière-plan. Ensuite, sélectionnez le nœud Number. Dans la barre d’outil de la fenêtre d’affichage, cliquez sur le menu Layout et cliquez sur Full Rect. Le nœud sera redimensionné pour s’adapter au Background. Rendez-vous dans l’inspecteur et changez sa propriété Align en Right et la propriété VAlign en Center. Le texte doit s’accrocher au centre du bord droit de Background. Redimensionner le nœud horizontalement pour qu’il prenne la moitié droite de``Background`` et qu’il y ait un peu de place avec le bord droit.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Voici à quoi devraient ressembler les boîtes de délimitation des nœuds dans la fenêtre d’affichage. Gardez-les bruts, vous n’avez pas besoin de les placer trop précisément pour l’instant.

Remplacer la police du label

La police du label est trop petite. Nous devons la remplacer. Sélectionner le nœud Number et, dans l’inspecteur, déroulez jusqu’à la classe Control, et trouver la catégorie Custom Font` `. Cliquer sur le champ à coté de la propriété ``Font et cliquer sur New Dynamic Font. Cliquer sur le champ de nouveau et sélectionner Modifier.

Vous allez entrer dans la ressource Dynamic Font. Déplier la catégorie Font et cliquer sur le champ à coté de Font Data. Cliquer sur le bouton Load. Dans l’explorateur de fichiers, naviguer dans le dossier asset/font et double-cliquer sur Comfortaa-Bold.ttf pour l’ouvrir. Vous devriez voir la police se mettre à jour dans la fenêtre d’affichage. Déplier la catégorie des paramètres pour changer la taille de la police. Changer la propriété Size pour une valeur plus grande, comme 24 ou 28.

Nous avons maintenant besoin que la ligne du texte et que le bas du nombre s’alignent avec la texture HP sur la gauche. Pour ce faire, toujours dans la ressource Dynamic Font, vous pouvez ajuster la propriété Bottom sous la catégorie Extra Spacing. Cela ajoute de l’espace sous le texte. Cliquer sur le nœud Number dans l’onglet Scène pour retourner aux propriétés du nœud et changer le VAlign pour Bottom. Pour ajuster la ligne du texte, cliquer sur le champ de police sous la catégorie Custom Font de nouveau et ajuster la propriété Bottom jusqu’à ce que le texte s’aligne avec le nœud Title. J’ai utilisé une valeur de 2 pixels.

../../_images/ui_gui_step_tutorial_number_baseline.png

Avec une valeur pour Bas de 2 pixels, le Nombre s’aligne avec le Titre

Avec cela, nous avons terminé la partie la plus difficile de l’interface utilisateur graphique. Félicitations ! Allons-y maintenant avec des nœuds plus simples.

Ajouter une bar de progresssion

Nous avons besoin d’un dernier élément pour compléter notre barre de vie : la jauge elle-même. Godot est fourni avec un nœud TextureProgress qui comprend tout ce dont nous avons besoin.

Sélectionnez le nœud Bar et ajoutez-y un TextureProgress à l’intérieur. Nommez-le Gauge, dans l’inspecteur, déployez la section Textures. Dirigez-vous vers le dock FileSystem et glissez-déposez la texture lifebar_bg.png` dans l'emplacement ``Under. Faites de même avec l’image lifebar_fill.png et déposez-le sur l’emplacement Progress? Sous la classe Range dans l’inspecteur, changez la propriété Value` à 50 pour voir la jauge se remplir.

Avec seulement cinq noeuds Control, notre première barre est prête à être utilisée.

../../_images/ui_gui_step_tutorial_bar_final.png

Nous y voilà, notre barre de vie est prête. Cette dernière partie fut rapide, n’est-ce pas ? C’est grâce à la robustesse de nos conteneurs.

Créer les compteurs de bombes et d’émeraudes

Les compteurs de bombes et d’émeraudes sont comme le nœud Count de la barre. Nous allons donc le dupliquer et l’utiliser comme modèle.

Sous le nœud Bar`, sélectionnez Count et appuyez sur Ctrl D pour le dupliquer. Faites glisser et déposez le nouveau nœud sous le HBoxContainer Counters au bas de l’arbre de scène. Vous devriez le voir se redimensionner automatiquement. Ne vous inquiétez pas pour l’instant, nous allons corriger la taille bientôt.

Renommer le nœud Count2 pour Counter. Contrairement aux barres, nous voulons que le nombre soit sur la gauche, et une icône à la droite. La mise en place est la même : nous avons besoin d’un arrière-plan, un NinePatchFrame, un titre, et les nœuds des nombres. Le nœud Title est un TextureRect, alors c’est ce dont nous avons besoin pour afficher l’icône. Dans l’arbre des scènes, sélectionner le nœud Title, et renommez-le pour Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Voici à quoi devrait ressembler votre arbre de nœuds jusqu’à présent

Avec le noeud Icon sélectionné, dans l’inspecteur, faites défiler vers le haut pour voir l’emplacement Texture. Dirigez-vous vers le dock FileSystem à gauche et sélectionnez bombs_icon.png. Faites-le glisser et déposez-le sur l’emplacement Texture. Dans l’onglet Scène, sélectionnez à la fois le nœud Icon et le nœud Number. Cliquez sur le menu Layout dans la barre d’outils en haut de la fenêtre d’affichage et sélectionnez Full Rect. Les deux nœuds seront mis à jour pour s’adapter à la taille de ``Background`.

../../_images/ui_gui_step_tutorial_counter_design_2.png

Les noeuds s’ancrent à l’arrière-plan en entier, mais leur position est désactivée

Changeons les propriétés d’alignement de Number pour le déplacer vers la gauche et le centre de Background. Sélectionnez le nœud Number`, changez sa propriété Align pour gauche et la propriété VAlign` pour centre. Puis redimensionner un peu son bord gauche pour ajouter un peu de place entre le bord gauche de Background et le texte.

../../_images/ui_gui_step_tutorial_counter_design_3.png

Le nœud Number aligné à gauche et au centre

Pour superposer l’icône et l’arrière-plan, nous avons besoin de quelques ajustements. Tout d’abord, notre arrière-plan est un peu trop grand. C’est parce qu’il se trouve à l’intérieur d’un conteneur de marge(MarginContainer) qui est contrôlé par le nœud le plus haut de l’interface graphique(GUI). Sélectionnez le nœud de l’interface graphique(GUI) en haut de l’arbre de scène et réduisez-le verticalement pour qu’il soit le plus fin possible. Vous verrez que la jauge vous empêche de la rendre trop petite. Un conteneur ne peut pas être plus petit que la taille minimale de ses enfants. Les marges du conteneur comptent également.

Sélectionnez l’icône, cliquez sur le menu Layout et sélectionnez Full Rect pour le recentrer. Nous avons besoin de l’ancrer sur le bord droit de « Background ». Ouvrez à nouveau le menu Layout et sélectionnez Center Right. Déplacez l’icône vers le haut de façon à ce qu’elle soit centrée verticalement avec l’arrière-plan.

../../_images/ui_gui_step_tutorial_counter_design_4.png

L’icône de la bombe s’ancre sur le bord droit de l’arrière-plan. Redimensionner le conteneur Counter pour voir le nœud Icon coller sur le côté droit

Parce que nous avons dupliqué le Counter de la barre Count, la police du noeud Number est désactivée. Sélectionnez à nouveau le noeud Number, dirigez-vous vers la propriété Font et cliquez dessus pour accéder à la ressource DynamicFont. Dans la section Extra Spacing, changez la valeur Bottom à 0 pour réinitialiser la ligne de base de la police. Notre compteur fonctionne maintenant comme prévu.

Pendant que nous y sommes, faisons en sorte que les Counters soient positionnés sur le bord droit de la fenêtre du viewport. Pour ce faire, nous allons régler le conteneur Bars pour qu’il s’étende et prenne tout l’espace horizontal. Sélectionnez le nœud Bars et faites défiler vers le bas jusqu’à la catégorie Size Flags. Dans la catégorie Horizontal, cochez la valeur Expand. Le nœud Bars devrait se redimensionner et pousser le compteur à la droite de l’écran.

../../_images/ui_gui_step_tutorial_counter_design_5.png

Un conteneur extensible prend tout l’espace qu’il peut de son parent, en poussant tout le reste du même coup

Transformer la barre et le compteur en composants d’interface graphique réutilisables

Nous avons une barre et un widget compteur. Cependant, nous en avons besoin de deux exemplaires chacun. Nous aurons peut-être à changer l’apparence de la barre ou la fonctionnalité éventuellement. Ça serait bien si nous aurions une seule scène qui permet de conserver un modèle d’un élément de IU, et des scènes enfants pour travailler sur des variations. Godot nous permet de faire cela avec les scènes héritées.

Sauvegardons le Counter et la Bar en scènes séparées que nous allons réduire à créer la LifeBar, la``EnergyBar``, le``BombCounter``, et le EmeraldCounter. Sélectionner le HBoxContainer Bar. Faites un clic droit dessus et cliquer sur Save Branch as Scene. Sauvergarder la scène en tant que Bar.tscn. Vous devriez voir la branche de nœud se transformer en un seul nœud Bar.

Astuce

Une scène est une arborescence de nœuds. Le nœud le plus haut est la racine de l’arbre, et les enfants au bas de la hiérarchie sont des feuilles. Tout nœud autre que la racine avec un enfant ou plus est une branche. Nous pouvons encapsuler les branches de nœuds dans des scènes séparées, ou les charger et les fusionner à partir d’autres scènes dans la scène active. Cliquez avec le bouton droit de la souris sur n’importe quel nœud du dock Scène et sélectionnez  » Enregistrer la branche comme scène  » ou  » Fusionner à partir de la scène « .

Ensuite, sélectionnez le nœud Counter et faites de même. Clic droit, Save Branch as Scene, et l’enregistrer en tant que Counter.tscn. Une nouvelle icône d’édition de scène apparaît à droite des nœuds dans l’arborescence des scènes. Cliquez sur celui à côté de Bar pour ouvrir la scène correspondante. Redimensionner le nœud Bar pour que sa boîte de délimitation s’adapte à son contenu. Comme nous avons nommé et placé les nœuds Control, nous sommes prêts à hériter de ce modèle et à créer la barre de vie. C’est la même chose pour Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Sans aucun autre changement, votre barre est prête à être utilisé

Utilisez l’héritage de scène pour créer les éléments restants

Nous avons besoin de deux barres qui fonctionnent de la même manière : Elles devraient comporter une étiquette à gauche, avec une certaine valeur, et une jauge horizontale à droite. La seule différence est que l’un a l’étiquette HP et est vert, tandis que l’autre s’appelle EP et est jaune. Godot nous donne un outil puissant pour créer une base commune à réutiliser pour toutes les barres du jeu : des scènes héritées.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Les scènes héritées nous aident à garder la scène de l’interface graphique(GUI) propre. En fin de compte, nous n’aurons que des conteneurs et un nœud pour chaque composant de l’interface utilisateur(UI).

Sur une scène héritée, vous pouvez changer n’importe quelle propriété de chaque nœud de l’inspecteur, à part son nom. Si vous modifiez et enregistrez la scène mère, toutes les scènes héritées sont mises à jour pour refléter les changements. Si vous changez une valeur dans la scène héritée, elle remplacera toujours la propriété du parent. C’est utile pour les interfaces utilisateur(UI) car elles nécessitent souvent des variations des mêmes éléments. En général, dans la conception de l’interface utilisateur(UI), les boutons, les panneaux, etc. partagent un style de base et des interactions communes. Nous ne voulons pas le copier manuellement dans toutes les variations.

Une icône de rechargement apparaîtra à côté des propriétés que vous remplacez. Cliquez dessus pour réinitialiser la valeur à la valeur par défaut de la scène parente.

Note

Pensez à l’héritage de scène comme l’arbre des nœuds, ou le mot clé extends dans GDScript. Une scène héritée fait tout comme son parent, mais vous pouvez réécrire les propriétés, les ressources et ajouter des nœuds et des scripts supplémentaires pour étendre ses fonctionnalités.

Hériter de la scène Bar pour construire la barre de vie

Allez dans Scene -> New Inherited Scene pour créer un nouveau type de Bar. Sélectionnez la scène Bar et ouvrez-la. Vous devriez voir un nouvel onglet[unsaved], c’est comme votre Bar, mais avec tous les nœuds excepté la racine qui est en gris. Appuyez sur Meta+S pour sauvegarder la nouvelle scène héritée et nommez-la LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

Vous ne pouvez pas renommer les nœuds grisés. Cela signifie qu’ils ont une scène parente

Renommez d’abord le nœud racine ou le nœud de niveau supérieur en LifeBar. Nous voulons toujours que la racine décrive exactement ce qu’est ce composant de l’interface utilisateur. Le nom différencie cette barre de l”EnergyBar que nous allons créer. Les autres nœuds à l’intérieur de la scène doivent décrire la structure du composant en termes généraux, de sorte qu’il fonctionne avec toutes les scènes héritées. Comme nos nœuds TextureProgress et Number.

Note

Si vous avez déjà fait du design web, c’est le même esprit que de travailler avec CSS : vous créez une classe de base, et ajoutez des variations avec des classes de modificateurs. À partir d’une classe de bouton de base, vous aurez des variations de boutons vert et rouge pour que l’utilisateur accepte et refuse les propositions. La nouvelle classe contient le nom de l’élément parent et un mot-clé supplémentaire pour expliquer comment il le modifie. Lorsque nous créons une scène héritée et changeons le nom du nœud de niveau supérieur, nous faisons la même chose.

Créer la barre d’énergie

Nous avons déjà mis en place le design de la LifeBar avec la scène principale Bar. Nous avons maintenant besoin d”EnergyBar.

Créons une nouvelle scène héritée, sélectionnons à nouveau la scène Bar.tscn et ouvrons-la. Double-cliquez sur le nœud racine Bar et renommez-le en EnergyBar. Sauvegardez la nouvelle scène sous le nom EnergyBar.tscn. Nous devons remplacer la texture HP par une texture EP, et changer les textures sur la jauge.

Dirigez-vous vers le dock Système de fichiers sur la gauche, sélectionnez le nœud Title dans l’arbre de scène et glissez-déposez le fichier label_EP.png sur l’emplacement de texture. Sélectionnez le noeud Number et changez la propriété Text à une valeur différente, comme 14`.

Vous remarquerez que la texture EP est plus petite que la texture HP. Nous devrions mettre à jour la taille de police de Number pour mieux l’adapter. Une police est une ressource. Tous les nœuds de l’ensemble du projet qui utilisent cette ressource seront affectés par toute propriété que nous modifions. Vous pouvez essayer de changer la taille à une valeur énorme comme 40 et revenir aux scènes LifeBar ou Bar. Vous verrez que la taille du texte a augmenté.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Si nous changeons la ressource de police, tous les nœuds qui l’utilisent seront affectés

Pour changer la taille de police sur ce nœud uniquement, nous devons créer une copie de la ressource de police. Sélectionnez à nouveau le nœud Number et cliquez sur l’icône de la clé à molette et du tournevis en haut à droite de l’inspecteur. Dans le menu déroulant, sélectionnez l’option Rendre les sous-ressources uniques. Godot trouvera toutes les ressources que ce nœud utilise et créera des copies uniques pour nous.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Utilisez cette option pour créer des copies uniques des ressources pour un nœud

Astuce

Lorsque vous dupliquez un nœud de l’arbre de scène, avec Meta+D, il partage ses ressources avec le nœud d’origine. Vous devez utiliser Rendre les sous-ressources uniques avant de pouvoir ajuster les ressources sans affecter le nœud source.

Faites défiler vers le bas jusqu’à la section Custom Font et ouvrez Font. Baissez « Size » à une valeur plus petite comme 20 ou 22. Vous devrez peut-être aussi ajuster la valeur de l’espacement  » Bottom  » pour aligner la ligne de base du texte avec l’étiquette EP à gauche.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

Le widget EP Count, avec une police plus petite que son homologue HP

Maintenant, sélectionnez le noeud TextureProgress. Faites glisser le fichier energy_bar_bg.png sur l’emplacement Under, de même pour energy_bar_fill.png : déposez-le sur l’emplacement de texture Progress.

Vous pouvez redimensionner le nœud verticalement pour que son rectangle de délimitation s’adapte à la jauge. Faites en de même avec le nœud Count jusqu’à ce que sa taille s’aligne avec celle de la barre. Comme la taille minimale de TextureProgress est définie en fonction de ses textures, vous ne pourrez pas réduire la taille du nœud Count en dessous de celle des textures utilisées. C’est aussi la taille du conteneur Bar. Vous pouvez également diminuer sa taille.

Enfin, le conteneur « Background » a une taille minimale qui le rend un peu trop large. Sélectionnez-le et dans la section Rect, changez la propriété Min Size pour 80 pixels. Il devrait se redimensionner automatiquement et les nœuds Title et Number devraient suivre.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Le noeud Count est plus sympa maintenant qu’il est un peu plus petit

Astuce

La taille du nœud « Count » affecte la position de « TextureProgress ». Comme nous alignerons nos barres verticalement, nous ferions mieux d’utiliser la marge gauche du « Counter » pour redimensionner notre label EP. De cette manière, les nœuds « Count » de l” « EnergyBar » et de la « LifeBar » ont une largeur de 100 pixels, de sorte que les deux jauges s’alignent parfaitement.

Préparer les compteurs de bombes et d’émeraudes

Occupons-nous maintenant des compteurs. Allez dans Scène -> Nouvelle scène héritée et sélectionnez Counter.tscn comme base. Renommez le nœud racine en tant que BombCounter`. Sauvegardez la nouvelle scène sous le nom de BombCounter.tscn. C’est tout pour cette scène.

../../_images/ui_gui_step_tutorial_design_counters_1.png

Le compteur de bombes est le même que celui de la scène originale

Allez à nouveau dans Scène -> Nouvelle scène héritée et sélectionnez Counter.tscn une fois de plus. Renommez le nœud racine EmeraldCounter et enregistrez la scène sous EmeraldCounter.tscn. Pour celui-ci, nous avons principalement besoin de remplacer l’icône de la bombe par l’icône de l’émeraude. Dans l’onglet Système de fichiers, faites glisser le fichier emeralds_icon.png sur l’emplacement Texture du nœud Icon . Celui-ci s’ancre déjà sur le bord droit du nœud « Background » afin que nous puissions changer sa position et qu’il se repositionne avec le conteneur « EmeraldCounter ». Déplacez un peu l’icône de l’émeraude vers la droite et vers le bas. Utilisez les touches flèches du clavier pour rectifier sa position. Sauvegardez, et nous en avons fini avec tous les éléments de l’interface utilisateur.

../../_images/ui_gui_step_tutorial_design_counters_2.png

Le compteur d’émeraudes devrait ressembler à ceci

Ajouter les composants de l’interface utilisateur à l’interface graphique finale

Il est temps d’ajouter tous les éléments de l’interface utilisateur à la scène principale de l’interface graphique. Ouvrez à nouveau la scène GUI.tscn et supprimez les nœuds Bar et Counter. Dans le dock FileSystem, trouvez LifeBar.tscn et faites-la glisser et déposez-la sur le conteneur Bars dans l’arbre de scène. Faites de même pour EnergyBar. Vous devriez les voir s’aligner verticalement.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

La barre de vie et la barre d’énergie sont automatiquement alignées

Maintenant, faites glissez et déposez les scènes BombCounter.tscn``et ``EmeraldCounter.tscn``sur le nœud ``Counters. Ils se redimensionneront automatiquement.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

Les nœuds se redimensionnent pour prendre tout l’espace vertical disponible

Pour que EmeraldCounter et BombCounter utilisent la taille que nous avons définie dans Counter.tscn, nous devons changer Size Flags du conteneur Counters. Sélectionnez le nœud Counters et déroulez la section Size Flags dans l’Inspecteur. Décochez la case Fill pour la propriété Vertical et cochez Shrink Center pour que le conteneur soit centré à l’intérieur de HBoxContainer.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

Maintenant, les compteurs ont une bonne taille

Astuce

Changer la propriété Min Size du conteneur Counters pour contrôler la hauteur du fond des compteurs.

Nous avons un petit problème avec le label EP sur la barre d’énergie : Les 2 barres doivent être alignées verticalement. Cliquez sur l’icône à côté du nœud EnergyBar pour ouvrir sa scène. Sélectionnez le nœud Count et faites défiler vers le bas jusqu’à la section Custom Constants. Mettre Margin Left à 20. Dans la section Rect, réglez Min Size à 100, la même valeur que sur la barre de vie. Count devrait maintenant avoir une marge à gauche. Si vous sauvegardez et retournez à la scène de l’interface graphique, elle sera alignée verticalement avec LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

Les 2 barres sont parfaitement aligné

Note

Nous aurions pu implémenter EnergyBar de cette façon plus tôt. Mais cela vous montre que vous pouvez retourner à n’importe quelle scène à tout moment, l’ajuster et voir les changements se répercuter tout le long du projet !

Placez l’interface graphique sur la maquette du jeu

Pour conclure le tutoriel, nous allons insérer l’interface graphique sur la scène de la maquette du jeu.

Dirigez-vous vers le dock « FileSystem » et ouvrez LevelMockup.tscn.

Glissez-déposez la scène GUI.tscn juste en dessous du nœud bg et au-dessus de Characters. L’interface graphique sera mise à l’échelle pour s’adapter à l’ensemble de la fenêtre d’affichage. Allez dans le menu Layout et sélectionnez l’option Center Top pour qu’elle s’ancre au bord supérieur de la fenêtre de jeu. Ensuite, redimensionnez l’interface graphique pour la rendre aussi petite que possible verticalement. Maintenant vous pouvez voir à quoi ressemble l’interface dans le contexte du jeu.

Félicitation, vous avez atteint la fin de ce long tutoriel. Vous pouvez retrouver le projet final ici: ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

Le résultat final

Note

Une note finale sur le design « Responsive ». Si vous redimensionnez l’interface graphique, vous verrez les nœuds se déplacer, mais les textures et le texte ne se redimensionneront pas. L’interface graphique a également une taille minimale, basée sur les textures qu’elle contient. Dans les jeux, nous n’avons pas besoin d’une interface aussi flexible que celle d’un site web. Vous ne voudriez presque jamais utiliser à la fois les modes paysage et portrait. C’est l’un ou l’autre. En mode paysage, les rapports les plus courants vont de 4:3 à 16:9. Ils sont proches l’un de l’autre. C’est pourquoi il suffit que les éléments de l’interface graphique ne se déplacent horizontalement que lorsque nous changeons la taille de la fenêtre.