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, une bombe et des compteurs d’argent

Vous allez apprendre comment concevoir une interface utilisateur (UI) efficace et comment utiliser les nœuds de contrôle de Godot. Cette page se focalise sur la partie visuelle : tout ce qui est fait 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 : :téléchargement:`ui_main_menu_design.zip <files/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.

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 du 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 (UX) n’est pas bien, vous aurez à refaire des sprites

Astuce

Essayez toujours de faire une interface fonctionnel avec avant tout, de simples carrés et de textes. Il est facile de remplacer les textures plus tard. Les professionnels de conception d’expérience d’utilisateur travaillent souvent avec un plan et des carrés en nuance de gris. Lorsque vous prenez des couleurs et des visuels non fantaisiste, il vous sera plus facile de placer les éléments de l’interface utilisateur. Cela va vous aider à affiner le design principal que vous construirez plus tard.

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 graphiques paraissent plus propre que sur le dessin, mais ce sont quand même des placeholders

Construire le menu principal

Avant de passer à 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 amoncellement 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 amoncellement 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 adaptibles.

Prépare la scène du Menu Principal

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 sauvegarder la scène. La racine de votre interface utilisateur doit être le conteneur ou l’élément le plus à l’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 utilisateur. Appuyez sur Meta+S pour enregistrer la scène sur le disque. Nommez-la MainMenu.

Sélectionnez à nouveau 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 le Viewport, ouvrez le menu Layout et sélectionnez la dernière option, Full Rect.

Ajoutez les sprites de l’interface

Sélectionnez 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 d’une illustration pour le menu principal

Cliquez sur le bouton Add Node ou appuyez sur les touches Meta+A de votre clavier. Commencez par taper TextureRect pour trouver le nœud correspondant et appuyer sur entrer. Avec le nouveau nœud sélectionné, appuyez cinq fois sur les touches Meta+D pour créer cinq autres instances de TextureRect.

Cliquez sur chacun des nœuds pour le 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 dans le slot de texture.

../../_images/ui_texturerect_load_texture.png

Le navigateur de fichier vous permet de trouver et de charger les textures

Repeat the operation for all TextureRect nodes. You should have the logo, the illustration, the three menu options and the version note, each as a separate node. Then, double click on each of the nodes in the Scene tab to rename them. Nothing has been placed in containers yet so this should look messy.

../../_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 une certaine 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 divisés 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 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 celui-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 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é
  2. Il n’y a pas d’espace entre le logo et les autres élements 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 Meta+A 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 étendre le conteneur 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. Le conteneur s’étend à présent pour prendre tout l’espace vertical disponible en respectant les élément Logo et Version.

Pour centrer les nœuds dans le VBoxContainer, changez la propriété Alignement pour Center en haut de l’inspecteur.

../../_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 Afficher. Cliquez sur la sous-catégorie Fenêtre. Sur le côté droit de la fenêtre, vous trouverez une section Étirement. Les trois paramètres, Mode, Aspect et Rétrécissement, contrôlent la taille de l’écran. Pour plus d’informations, voir Multiple resolutions.