Créez des dialogues captivants dans Unity avec Ink !

Sommaire

1. Introduction
2. Afficher et gérer les noms de PNJ
   1. Changer les noms et portraits par ligne de dialogue
   2. Changer la disposition de la fenêtre de dialogue
3. Utilisation des balises dans le fichier Ink
   1. Ajouter des métadonnées avec des balises
   2. Utiliser les balises pour définir le nom du locuteur
   3. Utiliser les balises pour changer les portraits
   4. Utiliser les balises pour changer la disposition de la fenêtre de dialogue
4. Implémentation du système de dialogue dans Unity
   1. Préparer l'interface utilisateur
   2. Créer les animations des portraits
   3. Créer les animations des layouts de la fenêtre de dialogue
   4. Gérer les balises dans le script de gestion du dialogue
   5. Réinitialiser les valeurs par défaut lors du démarrage du dialogue

Afficher et gérer les noms de PNJ dans un système de dialogue avec Unity et Ink

👋 Salut tout le monde ! Je m'appelle Trever, et dans cette vidéo je vais vous montrer une méthode simple mais efficace pour afficher et gérer les noms des PNJ, les portraits et les différentes mises en page d'un système de dialogue intégré dans Unity et utilisant Ink. À la fin de cette vidéo, nous aurons mis en place un système où un portrait et un nom peuvent être facilement modifiés pour chaque ligne de dialogue, et où la disposition de la fenêtre de dialogue peut être modifiée tout aussi facilement. Dans ce cas précis, nous allons faire en sorte que le portrait et le nom apparaissent soit à gauche, soit à droite. Je tiens à préciser que ce tutoriel fait suite à une vidéo précédente dans laquelle nous avons construit un système de dialogue avec des choix. Vous n'avez pas besoin d'avoir vu cette vidéo pour comprendre celle-ci, mais je vais utiliser le système de dialogue que nous avons construit dans la vidéo précédente comme point de départ pour celui-ci. Donc, si vous débutez dans la construction d'un système de dialogue et que vous avez besoin d'un point de départ, je vous recommande vivement de regarder l'autre vidéo d'abord, puis de revenir à celle-ci par la suite. De plus, comme je l'ai mentionné, nous allons utiliser Ink pour écrire notre dialogue, ce qui joue un rôle assez important dans la façon dont nous allons gérer les noms des PNJ, les portraits et les mises en page. Je ne vais pas approfondir la syntaxe Ink dans cette vidéo, mais nous allons garder les choses assez simples. J'ai également une vidéo entière sur la façon d'écrire un dialogue avec Ink que je mettrai dans la description de cette vidéo si vous souhaitez approfondir le sujet. Et bien sûr, le code source de tout ce que nous allons faire peut être trouvé sur GitHub, je mettrai également un lien dans la description de cette vidéo. Maintenant, examinons comment nous allons faire cela dans nos fichiers de dialogue Ink. Nous pouvons utiliser des balises pour ajouter des métadonnées à n'importe quelle ligne de dialogue. Chaque balise est simplement lue dans Unity sous forme de chaîne de caractères. Il nous appartient donc entièrement de décider comment nous voulons les structurer. Une bonne méthode consiste à définir vos balises et paires clé-valeur, où la clé représente une action que nous souhaitons effectuer dans notre code C# pour cette ligne de dialogue, et la valeur représente des données à utiliser pour cette action dans cet exemple. Le symbole dièse indique qu'il s'agit d'une balise. Le locuteur est la clé et Bob est la valeur, séparés par un deux-points. Nous pouvons lire cette balise dans Unity sous forme de chaîne de caractères, puis la parser en paire clé-valeur, et enfin effectuer l'action correspondante à cette clé en utilisant la valeur. Et c'est exactement ce que nous allons faire pour définir le nom à afficher dans notre fenêtre de dialogue. Et de même, nous utiliserons également des balises pour définir le portrait et la mise en page de la fenêtre de dialogue. Sauf que dans ces cas-là, les valeurs vont correspondre au nom d'un état d'animation que nous allons définir dans Unity. Ensuite, lorsque nous lisons cette balise, nous pouvons jouer cette animation, ce qui modifiera le portrait ou la mise en page en conséquence. Pour récapituler, lorsque nous recevons une balise avec la clé "locuteur", nous allons définir le texte du nom à afficher dans la fenêtre de dialogue avec la valeur de la balise. Et lorsque nous recevons une balise avec la clé "portrait" ou "mise en page", nous allons jouer une animation qui modifie le portrait ou la mise en page. Bien sûr, nous n'avons besoin d'utiliser ces balises dans notre dialogue Ink que lorsque nous voulons déclencher un changement, donc nous n'avons pas besoin d'ajouter des balises pour chaque ligne de dialogue.

Implémentation du système de dialogue dans Unity

Maintenant que nous avons une compréhension de ce à quoi ressemble le projet, commençons par ajouter les sections du portrait et du nom au panneau de dialogue de l'interface utilisateur, sous l'objet de jeu "dialog panel", qui est un objet parent de tout ce qui compose la fenêtre de dialogue. Faites un clic droit, allez dans UI et sélectionnez "panel". Nous allons nommer cet objet de jeu "portrait frame". Ensuite, nous allons changer la couleur de l'image en noir et augmenter la valeur alpha à 100. Ensuite, nous allons ancrer la position sur le côté droit du panneau de dialogue. Sous le composant "rect transform", nous pouvons cliquer sur cette case, maintenir la touche "alt" et "shift", puis cliquer. L'option "right middle" ajustera la largeur et la hauteur pour contenir nos portraits. Une largeur et une hauteur de 140 semblent convenables. Ensuite, nous allons également lui donner une exposition de -5 pour lui donner un peu d'espace sur le côté. Ensuite, nous ferons un clic droit sur "portrait frame", nous irons dans "UI" puis sélectionner "image" et nous l'appellerons "portrait image". Nous allons changer la largeur et la hauteur pour qu'elles soient légèrement plus petites que celles du "portrait frame". Ensuite, nous allons faire glisser cet art par défaut dans le slot de "source image" pour "portrait image". Ensuite, créons une bordure pour afficher le nom du locuteur. Nous allons faire un clic droit sur "dialog panel", aller dans "UI" puis sélectionner "panel", et nous l'appellerons "speaker frame". Comme nous l'avons fait avec le portrait, nous allons changer la couleur pour qu'elle soit un peu plus sombre et augmenter également la valeur alpha à 100. Ensuite, nous allons ancrer la position en bas à droite. Nous allons modifier la largeur en 180 et la hauteur en 40. Enfin, à partir de la hiérarchie de la scène, nous allons cliquer sur "speaker frame", puis utiliser le raccourci "Ctrl + D" pour dupliquer. Nous renommons le duplicata en "border" et nous le faisons glisser sur "speaker frame" pour qu'il devienne un enfant. Nous allons changer la couleur de la bordure en noir solide, puis décocher la case "fill center" pour que seule la bordure soit affichée. Ensuite, nous ferons un clic droit sur "speaker frame", puis "UI" et enfin "textMeshPro", et nous l'appellerons "display name text" ou le laisserons avec une valeur par défaut de trois points d'interrogation. Nous allons changer la taille de la police pour qu'elle soit un peu plus petite, à vingt-huit, et nous allons changer l'alignement pour qu'il soit centré. Enfin, dans l'éditeur de scène, nous allons cliquer sur "display name text" et nous assurer de réduire cette boîte jaune et de définir ses limites. Nous devrons également ajuster tout ce qui doit être repositionné sur le panneau de dialogue. Maintenant que nous avons ajouté quelques composants, nous devons simplement ajuster la limite de texte pour notre dialogue, afin qu'il ne chevauche pas le portrait. Et voilà, c'est tout pour les composants de l'interface utilisateur.

Implémentation du système de dialogue dans Unity

Maintenant que nous avons une compréhension de ce à quoi ressemble le projet, commençons par ajouter les sections du portrait et du nom au panneau de dialogue de l'interface utilisateur, sous l'objet de jeu "dialog panel", qui est un objet parent de tout ce qui compose la fenêtre de dialogue. Faites un clic droit, allez dans UI et sélectionnez "panel". Nous allons nommer cet objet de jeu "portrait frame". Ensuite, nous allons changer la couleur de l'image en noir et augmenter la valeur alpha à 100. Ensuite, nous allons ancrer la position sur le côté droit du panneau de dialogue. Sous le composant "rect transform", nous pouvons cliquer sur cette case, maintenir la touche "alt" et "shift", puis cliquer. L'option "right middle" ajustera la largeur et la hauteur pour contenir nos portraits. Une largeur et une hauteur de 140 semblent convenables. Ensuite, nous allons également lui donner une exposition de -5 pour lui donner un peu d'espace sur le côté. Ensuite, nous ferons un clic droit sur "portrait frame", nous irons dans "UI" puis sélectionner "image" et nous l'appellerons "portrait image". Nous allons changer la largeur et la hauteur pour qu'elles soient légèrement plus petites que celles du "portrait frame". Ensuite, nous allons faire glisser cet art par défaut dans le slot de "source image" pour "portrait image". Ensuite, créons une bordure pour afficher le nom du locuteur. Nous allons faire un clic droit sur "dialog panel", aller dans "UI" puis sélectionner "panel", et nous l'appellerons "speaker frame". Comme nous l'avons fait avec le portrait, nous allons changer la couleur pour qu'elle soit un peu plus sombre et augmenter également la valeur alpha à 100. Ensuite, nous allons ancrer la position en bas à droite. Nous allons modifier la largeur en 180 et la hauteur en 40. Enfin, à partir de la hiérarchie de la scène, nous allons cliquer sur "speaker frame", puis utiliser le raccourci "Ctrl + D" pour dupliquer. Nous renommons le duplicata en "border" et nous le faisons glisser sur "speaker frame" pour qu'il devienne un enfant. Nous allons changer la couleur de la bordure en noir solide, puis décocher la case "fill center" pour que seule la bordure soit affichée. Ensuite, nous ferons un clic droit sur "speaker frame", puis "UI" et enfin "textMeshPro", et nous l'appellerons "display name text" ou le laisserons avec une valeur par défaut de trois points d'interrogation. Nous allons changer la taille de la police pour qu'elle soit un peu plus petite, à vingt-huit, et nous allons changer l'alignement pour qu'il soit centré. Enfin, dans l'éditeur de scène, nous allons cliquer sur "display name text" et nous assurer de réduire cette boîte jaune et de définir ses limites. Nous devrons également ajuster tout ce qui doit être repositionné sur le panneau de dialogue. Maintenant que nous avons ajouté quelques composants, nous devons simplement ajuster la limite de texte pour notre dialogue, afin qu'il ne chevauche pas le portrait. Et voilà, c'est tout pour les composants de l'interface utilisateur.

Dans Unity, nous avons déjà préparé un projet avec deux PNJ. Lorsque vous vous approchez de l'un d'entre eux, vous pouvez appuyer sur un bouton pour afficher un dialogue. Le dialogue lui-même est écrit dans des fichiers Ink qui sont attachés aux PNJ à l'aide d'un script de déclenchement de dialogue. Lorsqu'un PNJ est abordé, il transmet ce fichier Ink à une classe singleton appelée "dialog manager". Le gestionnaire de dialogue est responsable de la lecture du fichier Ink, puis de la définition du dialogue, du texte et des choix en fonction de chaque ligne de dialogue.

Pour ce tutoriel, le gestionnaire de dialogue est l'endroit où nous allons gérer l'analyse et le routage des balises Ink, ce que j'expliquerai plus en détail une fois que nous en arriverons là. J'ai également créé quelques ressources graphiques à l'avance pour les portraits, que vous pourrez trouver dans le répertoire "art" du projet.

Maintenant que nous avons une compréhension de ce à quoi ressemble le projet, commençons par ajouter les sections du portrait et du nom au panneau de dialogue de l'interface utilisateur, sous l'objet de jeu "dialog panel", qui est un objet parent de tout ce qui compose la fenêtre de dialogue. Faites un clic droit, allez dans UI et sélectionnez "panel". Nous allons nommer cet objet de jeu "portrait frame". Ensuite, nous allons changer la couleur de l'image en noir et augmenter la valeur alpha à 100. Ensuite, nous allons ancrer la position sur le côté droit du panneau de dialogue. Sous le composant "rect transform", nous pouvons cliquer sur cette case, maintenir la touche "alt" et "shift", puis cliquer. L'option "right middle" ajustera la largeur et la hauteur pour contenir nos portraits. Une largeur et une hauteur de 140 semblent convenables. Ensuite, nous allons également lui donner une exposition de -5 pour lui donner un peu d'espace sur le côté. Ensuite, nous ferons un clic droit sur "portrait frame", nous irons dans "UI" puis sélectionner "image" et nous l'appellerons "portrait image". Nous allons changer la largeur et la hauteur pour qu'elles soient légèrement plus petites que celles du "portrait frame". Ensuite, nous allons faire glisser cet art par défaut dans le slot de "source image" pour "portrait image". Ensuite, créons une bordure pour afficher le nom du locuteur. Nous allons faire un clic droit sur "dialog panel", aller dans "UI" puis sélectionner "panel", et nous l'appellerons "speaker frame". Comme nous l'avons fait avec le portrait, nous allons changer la couleur pour qu'elle soit un peu plus sombre et augmenter également la valeur alpha à 100. Ensuite, nous allons ancrer la position en bas à droite. Nous allons modifier la largeur en 180 et la hauteur en 40. Enfin, à partir de la hiérarchie de la scène, nous allons cliquer sur "speaker frame", puis utiliser le raccourci "Ctrl + D" pour dupliquer. Nous renommons le duplicata en "border" et nous le faisons glisser sur "speaker frame" pour qu'il devienne un enfant. Nous allons changer la couleur de la bordure en noir solide, puis décocher la case "fill center" pour que seule la bordure soit affichée. Ensuite, nous ferons un clic droit sur "speaker frame", puis "UI" et enfin "textMeshPro", et nous l'appellerons "display name text". Nous allons lui attribuer une valeur par défaut de trois points d'interrogation, changer la taille de la police pour qu'elle soit un peu plus petite (28), et changer l'alignement pour qu'il soit centré. Enfin, dans l'éditeur de scène, nous allons cliquer sur "display name text" et nous assurer de le rentrer un peu pour définir ses limites. Nous devrons également ajuster tout ce qui doit être repositionné sur le panneau de dialogue. Maintenant que nous avons ajouté ces composants, nous devons ajuster la limite de texte pour notre dialogue afin qu'il ne chevauche pas le portrait. Et voilà, c'est tout pour les composants de l'interface utilisateur.

Maintenant que nous avons préparé l'interface utilisateur, nous allons maintenant créer les animations nécessaires pour les portraits. Nous allons créer un nouveau dossier dans le répertoire "animation" du projet et l'appeler "portraits". Dans ce dossier, nous créerons un nouveau contrôleur d'animation appelé "portrait animator". Nous ouvrirons ensuite cet animateur pour visualiser la fenêtre de l'animateur. Ensuite, nous ferons glisser cet animateur sur le "portrait image" dans la hiérarchie de la scène pour l'ajouter en tant que composant.

Une fois que nous avons l'animation "portrait animator" sélectionnée, nous allons créer des animations pour chaque état possible du portrait. Par exemple, nous aurons une animation pour l'état "neutre", une pour l'état "heureux" et une pour l'état "triste" du portrait. Chacune de ces animations correspondra à un nom de balise que nous utiliserons plus tard dans les fichiers Ink pour indiquer quel état de portrait doit être affiché pour chaque ligne de dialogue. Dans l'animation, nous allons ajouter le sprite correspondant à chaque état du portrait.

Une fois que toutes les animations des portraits ont été ajoutées, nous allons maintenant créer les animations pour les différents agencements de la fenêtre de dialogue. Nous allons créer un nouveau dossier dans le répertoire "animation" du projet et l'appeler "layouts". Dans ce dossier, nous créerons un nouveau contrôleur d'animation appelé "layout animator". Ensuite, nous créerons deux animations appelées "right" et "left".

Pour chaque animation de mise en page, nous allons enregistrer les positions des éléments de la fenêtre de dialogue (texte, cadre du portrait, cadre de la fenêtre du locuteur) dans l'éditeur d'animation. Nous enregistrerons ces positions lorsque nous passerons d'une mise en page à l'autre pour chaque ligne de dialogue. Ces positions enregistrées seront utilisées par le script de gestion du dialogue pour animer les éléments de la fenêtre de dialogue en fonction de la mise en page spécifiée par les balises Ink dans les fichiers de dialogue.

Maintenant que nous avons préparé les animations des portraits et des mises en page de la fenêtre de dialogue, nous allons passer à la gestion des balises dans le script de gestion du dialogue. Dans ce script, nous allons analyser les balises présentes dans chaque ligne de dialogue pour déterminer quelles informations doivent être mises à jour dans la fenêtre de dialogue. Pour cela, nous allons ajouter des constantes pour chaque balise que nous voulons gérer (par exemple, "speaker", "portrait", "layout"). Ces constantes seront utilisées dans le switch case pour décider quelle action effectuer en fonction de la balise.

Maintenant que nous avons mis en place la gestion des balises pour les noms de PNJ, les portraits et les mises en page de la fenêtre de dialogue, nous allons passer à la dernière étape de l'implémentation du système de dialogue dans Unity. Lorsque le joueur interagit avec un PNJ et que le dialogue commence, nous devons réinitialiser toutes les valeurs (portrait, nom et mise en page) aux valeurs par défaut pour éviter que les informations d'un PNJ précédent ne soient utilisées par erreur. Nous pouvons le faire en ajoutant un appel à une fonction de réinitialisation dans le script de gestion du dialogue chaque fois que le dialogue commence avec un PNJ. Cette fonction réinitialisera les animations des portraits et des mises en page, ainsi que le texte du nom du PNJ, aux valeurs par défaut.

Et voilà, nous avons maintenant un système de dialogue fonctionnel qui permet d'afficher et de gérer les noms des PNJ, les portraits et les mises en page de la fenêtre de dialogue dans Unity en utilisant Ink. Bien sûr, ce n'est qu'un aperçu des fonctionnalités que vous pouvez ajouter à votre propre système de dialogue, mais j'espère que cela vous donne une idée de la façon dont vous pouvez mettre en place un système similaire dans vos propres projets.

Merci d'avoir suivi ce tutoriel, j'espère qu'il vous a été utile ! Si vous avez des questions, n'hésitez pas à les poser dans les commentaires ci-dessous. Et n'oubliez pas de mettre un pouce levé si vous avez aimé cette vidéo et de vous abonner à la chaîne pour être informé des prochaines vidéos. Bonne journée et à bientôt !

Avantages :

• Explication détaillée étape par étape du processus de mise en place d'un système de dialogue avec Unity et Ink
• Utilisation de balises pour ajouter des métadonnées aux lignes de dialogue et gérer les noms de PNJ, les portraits et les mises en page
• Création d'animations pour les portraits et les mises en page de la fenêtre de dialogue
• Réinitialisation des valeurs par défaut lors du démarrage du dialogue

Inconvénients :

• Nécessite une connaissance préalable de Unity et du langage de script C#
• L'implémentation peut être complexe pour les débutants