Concevoir un écran titre

Dans les deux prochains tutoriels, vous créerez deux scènes d'interface utilisateur, étape par étape, en utilisant le système d'interface utilisateur du moteur :

  1. Un menu principal.
  2. Une interface utilisateur de jeu avec une barre de santé, une barre d'énergie, des compteurs de bombes et d'argent.

Vous apprendrez comment concevoir efficacement des interfaces utilisateur de jeu (UI) et comment utiliser les nœuds Control de Godot. Cette page se concentre sur la partie visuelle : tout ce que vous faites depuis l'éditeur. Pour apprendre à coder une barre de vie, lisez Contrôler l'interface utilisateur du jeu avec du code.

../../_images/ui_main_menu_design_final_result.png

L'interface graphique que vous allez créer.

Télécharger les fichiers du projet : ui_main_menu_design.zip et extrayez l'archive. Importez le projet start/ dans Godot pour suivre ce tutoriel. Le dossier end/ contient le résultat final. Vous trouverez tous les sprites dans le dossier start/assets/main_menu.

Note

Lisez d'abord Conception d'interfaces avec les nœuds Control pour apprendre comment le système d'interface utilisateur (UI) de Godot marche.

Comment concevoir l'interface utilisateur de votre jeu

Pour concevoir une bonne interface utilisateur, vous devez d'abord créer une maquette grossière : une version simple en dessin. Cette version doit mettre l'accent sur le placement des composants de votre interface, leur taille et l'interaction avec l'utilisateur. À ce stage, vous avez uniquement besoin d'un stylo et de papier. Vous ne devez pas faire des graphiques fantaisistes et finaux maintenant. Ensuite, vous n'avez besoin que de simples placeholder pour vos images (sprites) et vous êtes bon pour plonger dans Godot. Vous devez vous assurer que les joueurs puissent se repérer dans l'interface en utilisant ces placeholders.

../../_images/ui_design_rough.png

Le plan basique de l'interface utilisateur ou la maquette

Les placeholders ne sont pas obligatoirement moche, mais vous devez garder les graphiques simples et concis. Évitez tout effet spécial, animation, et illustration détaillée avant que les joueurs ne testent votre interface utilisateur. Sinon :

  1. Les graphismes peuvent fausser la perception du joueur durant l’expérience et vous passeriez à côté de précieux retours.
  2. Si l'Expérience Utilisateur ne fonctionne pas, vous aurez à refaire des sprites.

Astuce

Essayez toujours de faire fonctionner l'interface avec du texte et des cases simples en premier. Les designers professionnels d'Expérience Utilisateur travaillent souvent avec des contours simples et des cases en niveaux de gris. Lorsque vous enlevez les couleurs et les visuels fantaisistes, il est beaucoup plus facile de dimensionner et de placer correctement les éléments de l'interface utilisateur. Cela vous aide à affiner les bases du design sur lequelles vous allez construire.

Il y a 2 possibilités pour créer votre interface utilisateur dans Godot. Vous pouvez :

  1. Tout construire en une seule scène, et éventuellement sauvegarder certaines branches pour en faire des scènes réutilisables.
  2. Créer des scènes modèles pour les composants réutilisables et créer des composants spécifiques qui héritent de vos scènes de base.

Nous utiliserons la première approche, car la première version de votre interface utilisateur pourrait ne pas fonctionner aussi bien que vous le souhaitez. Vous risquez de jeter des parties de votre interface et de redessiner des composants au fur et à mesure. Lorsque vous êtes sûr que tout fonctionne, il est facile de rendre certaines parties réutilisables, comme vous le verrez ci-dessous.

../../_images/ui_main_menu_placeholder_assets.png

Les fichiers que vous trouverez dans Godot. Les graphismes paraissent plus propre que sur le dessin, mais ce sont quand même des placeholders.

Construire le menu principal

Avant de se plonger dans l'éditeur, nous voulons planifier comment nous imbriquerons les conteneurs basés sur notre maquette.

Décomposez la maquette de l'interface utilisateur

Voici mes trois règles de base pour trouver les bons conteneurs :

  1. Décomposez l'interface utilisateur en cases, de la plus grande qui contient tout, aux plus petites, qui englobent un widget, comme une barre avec son étiquette, un panneau ou un bouton.
  2. S'il y a un espace autour d'une zone, utilisez un MarginContainer.
  3. Si les éléments sont disposés en lignes ou en colonnes, utilisez un HBoxContainer ou un VBoxContainer.

Ces règles sont suffisantes pour nous permettre de démarrer, et fonctionnent bien pour des interfaces simples.

Pour le menu principal, la case la plus grande est la fenêtre du jeu dans sa totalité. Il y a un espace entre les bords de la fenêtre et les premiers composants : cela devrait être un MarginContainer. Ensuite, l'écran est divisé en deux colonnes, nous utiliserons donc un HBoxContainer. Dans la colonne de gauche, nous allons gérer les lignes avec un VBoxContainer. Et dans la colonne de droite, nous centrerons l'illustration avec un CenterContainer.

../../_images/ui_mockup_break_down.png

Les blocs de construction de l'interface, décomposés selon les trois règles de base.

Astuce

Les conteneurs s'adaptent à la résolution de la fenêtre et au rapport hauteur/largeur. Bien que nous pouvons placer les éléments de l'interface utilisateur à la main, les conteneurs sont plus rapides, plus précis et plus adaptatifs.

Prépare la scène du Menu Principal

Note

Ce tutoriel est basé sur une taille de fenêtre de 1366×768. Pour modifier la taille de base de la fenêtre du projet, ouvrez Projet > Paramètres du projet en haut de l'éditeur puis modifiez Display > Window > Size > Width en 1366 et Display > Window > Size > Height en 768.

Si vous oubliez de modifier la taille de la fenêtre, les ancres et les conteneurs risquent de ne pas se comporter comme prévu.

Créons le menu principal. Nous le construirons en une seule scène. Pour créer une scène vide, cliquez sur le menu Scène -> Nouvelle scène.

Nous devons ajouter un nœud racine avant de pouvoir sauver la scène. La racine de votre interface utilisateur doit être le conteneur ou l'élément le plus extérieur. Dans ce cas, il s'agit d'un MarginContainer. Le MarginContainer est un bon point de départ pour la plupart des interfaces, car vous avez souvent besoin d'espace autour de l'interface. Appuyez sur Ctrl + S (Cmd + S sous macOS) pour sauvegarder la scène sur le disque. Nommez la MainMenu.

Sélectionnez à nouveau le MarginContainer et dirigez-vous vers l'inspecteur pour définir la taille des marges. Faites défiler la classe Control vers le bas, jusqu'à la section Custom Constants. Développez-la. Définissez les marges ainsi :

  • Marge de droite : 120
  • Marge du haut : 80
  • Marge de gauche : 120
  • Marge du bas : 80

Nous voulons que le conteneur s'adapte à la fenêtre. Dans la barre d'outils au-dessus du Viewport, ouvrez le menu Layout et sélectionnez la dernière option, Full Rect.

Ajoutez les sprites de l'interface

Sélectionnez le MarginContainer, et créez les éléments de l'interface utilisateur en tant que nœuds TextureRect. Nous avons besoin :

  1. du titre, ou logo,
  2. de trois options de texte en tant que nœuds individuels,
  3. d'une note de version,
  4. et l'illustration du menu principal.

Cliquez sur le bouton Add Node ou appuyez sur Ctrl + A (Cmd + A sur macOS) sur votre clavier. Commencez à taper TextureRect pour trouver le nœud correspondant et appuyez sur la touche entrée. Avec le nouveau noeud sélectionné, appuyez cinq fois sur Ctrl + D (Cmd + D sous macOS) pour créer cinq instances supplémentaires de TextureRect.

Cliquez sur chacun des nœuds pour les sélectionner. Dans l'inspecteur, trouvez la propriété Texture et cliquez sur [empty] > Load. Un navigateur de fichiers s'ouvre et vous permet de choisir un sprite à charger dans l'emplacement de texture.

../../_images/ui_texturerect_load_texture.png

Le navigateur de fichier vous permet de trouver et de charger des textures.

Répétez l'opération pour tous les nœuds TextureRect. Vous devriez avoir le logo, l'illustration, les trois options de menu et la note de version, chacun ayant son propre nœud. Ensuite, double-cliquez sur chacun des nœuds dans l'Inspecteur pour les renommer. Comme les noeuds ne sont pas placés dans un Container, ils vont se chevaucher.

../../_images/ui_main_menu_6_texturerect_nodes.png

Les six nœuds avec des textures chargées.

Note

Si vous souhaitez prendre en charge la localisation dans votre jeu, utilisez Labels pour les options de menu au lieu de TextureRect.

Ajoutez des conteneurs pour placer automatiquement les éléments de l'interface utilisateur

Notre menu principal a quelque marge autour des bords de l'écran. Il est divisé en deux parties : A gauche, vous avez le logo et les options de menu. A droite, vous avez les personnages. Nous pouvons utiliser l'un des deux conteneurs pour y parvenir : HSplitContainer ou HBoxContainer. Les conteneurs Split divisent la zone en deux : un côté gauche et un côté droit ou un côté supérieur et un côté inférieur. Ils permettent également à l'utilisateur de redimensionner les zones gauche et droite à l'aide d'une barre interactive. D'un autre côté, HBoxContainer se divise en autant de colonnes qu'il y a d'enfants. Bien que vous puissiez désactiver le comportement de redimensionnement de la division du conteneur, je recommande de privilégier les conteneurs Box.

Sélectionnez le MarginContainer et ajoutez un HBoxContainer. Ensuite, nous avons besoin de deux conteneurs comme enfants de notre HBoxContainer : un VBoxContainer pour les options de menu à gauche, et un CenterContainer pour l'illustration à droite.

../../_images/ui_main_menu_containers_step_1.png

Vous devriez avoir quatre conteneurs imbriqués, et les nœuds TextureRect placés à côté de ceux-ci.

Dans l'arborescence des nœuds, sélectionnez tous les nœuds TextureRect qui doivent aller sur le côté gauche : le logo, les options de menu (Continue, NewGame, Options) et la note de version. Faites un glissé-déposé dans le VBoxContainer. Les nœuds doivent se positionner automatiquement.

../../_images/ui_main_menu_containers_step_2.png

Les conteneurs placent et redimensionnent automatiquement les textures

Nous avons encore deux problème à résoudre :

  1. Les caractères à droite ne sont pas centrés.
  2. Il n'y a pas d'espace entre le logo et les autres éléments de l'UI.

Pour centrer les caractères à droite, sélectionnez d'abord le CenterContainer. Ensuite, dans l'inspecteur, faites défiler vers le bas jusqu'à la catégorie Size Flags et cliquez sur le champ à droite de la propriété Vertical, et cochez Expand en plus de Fill. Faites de même pour la propriété Horizontal. Cela permet au CenterContainer de s'étendre dans tout l'espace disponible tout en respectant son voisin VBoxContainer. Enfin, glissez-déposez le nœud Characters dans le CenterContainer. L'élément Characters se centre automatiquement.

../../_images/ui_main_menu_containers_step_3.png

Le nœud Character se centre dans la moitié droite de l'écran dès que vous le placez à l'intérieur du CenterContainer.

Pour espacer les options du menu et le logo à gauche, nous utiliserons un conteneur final et ses size flags. Sélectionnez le VBoxContainer et appuyez sur Ctrl + A (Cmd + A on macOS) pour ajouter un nouveau nœud dedans. Ajoutez un second VBoxContainer et nommez-le MenuOptions. Sélectionnez les trois options de menu, Continue, NewGame et Options, et faites-les glisser puis déposez les à l'intérieur du nouveau VBoxContainer. La disposition de l'interface utilisateur devrait à peine changer, voire pas du tout.

../../_images/ui_main_menu_containers_step_4.png

Placez le nouveau conteneur entre les deux autres nœuds pour conserver la disposition de l'interface utilisateur.

Maintenant que nous avons regroupé les options de menu ensembles, nous pouvons dire à leur conteneur de s'étendre pour qu'il prenne toute l'espace vertical disponible. Sélectionnez le nœud MenuOptions. Dans l'inspecteur, naviguez jusqu'à la catégorie Size Flags. Cliquez sur le champs à droite de la propriété Vertical et cochez Expand en plus de Fill. Le conteneur s'étend à présent pour prendre tout l'espace vertical disponible en respectant ses voisins, les éléments Logo et Version.

Pour centrer les nœuds dans le VBoxContainer, faites défiler jusqu'en haut de l'inspecteur et changez la propriété Alignement en Center.

../../_images/ui_main_menu_containers_step_5.png

Les options du menu devraient être centrer verticalement dans la colonne de gauche de l'interface utilisateur.

Pour conclure, ajoutons une séparation entre les options du menu. Développez la catégorie Custom Constants sous Size Flags, et cliquez sur le champ à côté du paramètre Separation. Réglez-le à 30. Après avoir pressé Entrée, la propriété Separation devient active et Godot ajoute 30 pixels entre les options du menu.

../../_images/ui_main_menu_design_final_result.png

L'interface finale.

Sans la moindre ligne de code, nous avons un menu principal s'adaptant précisément aux dimensions de l'écran.

Félicitations d'être arrivé jusqu'ici ! Vous pouvez télécharger le menu final ui_main_menu_design.zip pour le comparer avec le vôtre. Dans le prochain tutoriel, vous créerez une interface utilisateur de jeu avec des barres et des compteurs d'objets.

Décomposez la maquette de l'interface utilisateur

Une interface utilisateur dite "Responsive" fait en sorte de s'adapter correctement à tous les types d'écrans. Une télévision et un moniteur d'ordinateur possède des ratios et des tailles différentes. Dans Godot, nous utilisons des conteneurs pour contrôler la position et la taille des éléments constituants notre interface.

L'ordre dans lequel vous imbriquez les éléments est important. Pour vérifier que votre interface s'adapte correctement à différents ratios, sélectionner le nœud racine et appuyez sur Q pour activer le mode de sélection. Sélectionnez le conteneur et maintenez le clic gauche de la souris sur l'un des coins du conteneur pour le redimensionner. Les éléments devraient se déplacer correctement à l'intérieur.

Vous noterez que bien que les conteneurs déplacent les sprites, ils ne les redimensionnent pas. C'est tout à fait normal. Nous voulons que le système d'interface puisse gérer différents ratios d'écrans mais nous avons aussi besoin d'adapter le jeu à des résolutions différentes. Pour cette raison, Godot redimensionne la fenêtre dans son intégralité.

Vous pouvez changer le mode d'échelle dans les paramètres du projet : cliquez sur le menu Projet -> Paramètres du projet. Dans la colonne de gauche de la fenêtre, recherchez la catégorie Display. Cliquez sur la sous-catégorie Window. Sur le côté droit de la fenêtre, vous trouverez une section Stretch. Les trois réglages, Mode, Aspect, et Shrink, contrôlent la taille de l'écran. Pour plus d'informations, voir Résolutions multiples.