Interface de conversation personnalisée

L'éditeur de widgets permet de concevoir l'apparence des boutons et des arrière-plans de vos conversations. Vous n'avez pas besoin d'ajouter de texte à l'un des widgets de l'éditeur pour créer des modaux personnalisés. Tous les boutons et widgets de blocs de texte extraient le texte et le dialogue de votre banque de conversations.

Grâce à l'éditeur de widgets, vous pouvez importer les éléments suivants :

• Images

• Boîtes de dialogue préconçues

• Fichiers de polices

Un exemple intéressant de création d'une interface personnalisée à l'aide de l'éditeur de widgets est disponible sur la page du tutoriel Modèle d'arcade TMNT.

Pour ouvrir l'éditeur de widgets :

1. Faites un clic droit dans le navigateur de contenu et sélectionnez Interface utilisateur > Blueprint de widget.

2. Sélectionnez la variante de dialogue modal dans la fenêtre Sélection du blueprint de widget.

3. Nommez votre blueprint de widget et double-cliquez sur la vignette du widget pour ouvrir l'éditeur de widgets.

4. La création de boîtes de conversation personnalisées utilise les flux de travail décrits sur la page Éditeur de widgets.

Parmi les widgets que vous utiliserez probablement avec l'appareil de conversation figurent :

• Panneau Zone de dessin - Il s’agit d’un panneau permettant de placer tous les widgets avec contrôle d'alignement, entre autres.

• Block de texte UEFN pour ConversationModalDialogViewModel - Pour le texte du titre de la conversation.

• Block de texte UEFN pour ConversationModalDialogViewModel - Pour le texte du corps de la conversation.

• Bouton UEFN pour ConversationModalDialogViewModel - Pour tous les boutons/choix de texte.

Valeurs de liaison

Les valeurs de liaison font référence au texte saisi dans le graphique de conversation. Tout le texte saisi dans les nœuds de conversation est ajouté aux widgets pendant le jeu lorsque les widgets sont correctement liés aux widgets dans le modèle d'affichage.

La liaison des valeurs de texte pour la boîte de conversation personnalisée commence par le panneau Hiérarchie dans l'éditeur de widgets.

1. Sélectionnez un widget dans le panneau Hiérarchie. Vous pouvez commencer en haut de la hiérarchie et descendre jusqu'en bas de la liste.  

2. Cliquez sur Afficher les liaisons dans la barre d'outils inférieure. Le panneau Modèle d'affichage s'ouvre.  

   

3. Sélectionnez l'élément dont vous avez besoin, puis cliquez sur + Ajouter un widget dans le panneau Modèle d'affichage. Cela ajoute automatiquement le widget à la liste des modèles d'affichage.

   

   Des widgets peuvent également être ajoutés au modèle d'affichage en cliquant dans le champ Widget et en sélectionnant le widget dans le menu déroulant.

   

4. Sélectionnez la propriété à lier au widget en cliquant sur l'icône Modifier sur la propriété Texte de l'UEFN et en sélectionnant Texte > Sélectionner.

   

5. Sélectionnez une valeur de texte ou une valeur de bouton dans le menu déroulant CreativeModalDialogueViewmodel. Cela ajoute la valeur sélectionnée au widget. La sélection doit être effectuée en fonction du type de widget dans la hiérarchie.

   

6. Cliquez sur Sélectionner pour terminer la liaison des valeurs aux widgets.

   1. Les valeurs de texte comprennent le texte principal du titre, du corps ou du bouton# :

   2. Le Titre est la valeur définie dans le champ Nom du locuteur de l'appareil Conversation ou la valeur définie en Titre dans l'appareil Boîte de dialogue contextuel.

   3. Le Corps est le texte qui suit et présente généralement au joueur des options de conversation. Il s'agirait des nœuds Speech reliés au nœud Default Entry Point.

   4. Le texte principal du bouton# est le texte qui s'affiche dans les nœuds de réponse, tels qu'ils sont ordonnés dans le graphique de conversation.

   

Les valeurs des boutons doivent être numérotées en fonction du nombre de widgets de boutons utilisés. Les valeurs sont définies dans le même ordre numérique que celui dans lequel les widgets de bouton ont été ajoutés. Les boutons sont les nœuds Response d'un graphique de conversation. Cela lie le texte du bouton à chacun des boutons en conséquence.

Boutons de liaison

Les boutons de liaison font référence au déclenchement d'événements après la sélection d'un bouton. Il peut s'agir d'un événement unique où un PNJ fournit un objet ou d'un échange complexe où le PNJ a des biens à vendre, ce qui déclenche une série d'événements.

Pour programmer les événements déclenchés dans les widgets de bouton personnalisés, vous devez ajouter la logique d'événement au bouton à partir du modèle d'affichage.

1. Cliquez sur Afficher les liaisons dans la barre d’outils inférieure.

   

2. Sélectionnez un bouton à la fois dans le panneau Hiérarchie de l’éditeur de widgets. La sélection du widget dans le panneau Hiérarchie place automatiquement le widget de bouton sélectionné dans le champ Widget.

3. Cliquez sur + Ajouter un widget. Le widget est à nouveau ajouté à la liste.

   

4. Sélectionnez le champ fléché et choisissez Une façon de visualiser le modèle.

   

5. Sélectionnez le bouton et choisissez la valeur En cas de clic. Assurez-vous de cliquer sur Événement dans la fenêtre de sélection, et non sur Sélectionner.

6. Sélectionnez la valeur de Response dans le modèle d’affichage.

7. Choisissez la valeur Response que vous souhaitez assigner au bouton dans la ligne ci-dessous. La liaison résultante devrait être similaire à ce qui suit :

   

Vous pouvez également configurer vos boutons pour qu'ils soient masqués/affichés en fonction des valeurs qui leur sont assignées :

1. Sélectionnez le bouton dans la hiérarchie et ajoutez un widget au bouton.

2. Choisissez la valeur de Visibilité.

3. Recherchez le Bouton # Visibilité correspondant sur le côté droit de la liaison et sélectionnez-le. La liaison résultante devrait être similaire à ce qui suit :

   

4. Désormais, le bouton ne sera visible que s'il y a une réponse à sélectionner.

Cliquez sur le GIF pour l'agrandir.

Sans la liaison Visibilité, le texte disparaîtrait du champ de réponse et laisserait une case de sélection vide pour les joueurs :

Cliquez sur le GIF pour l'agrandir. Texte > Sélectionner

Matériaux de liaison

Les matériaux peuvent être utilisés dans UMG pour remplir le widget Image. Les matériaux utilisés avec UMG doivent être au format de matériau d'interface utilisateur pour que le widget reconnaisse le fichier de matériau et l'utilise avec le widget Image. Pour en savoir plus sur les matériaux d'interface utilisateur, consultez la documentation Matériaux d'interface utilisateur.

Les matériaux peuvent être utilisés pour remplir la matrice Matériau de conversation. Vous pouvez créer des matériaux personnalisés avec des fichiers importés qui peuvent être convertis en textures dans le graphique de matériau. Les types de fichiers suivants ne constituent pas une liste exhaustive des types de fichiers pris en charge, mais il s'agit des formats standard utilisés pour l'importation de ressources d'image raster :

• .png

• .webp

• .jpg

Dans l'appareil Conversation, ajoutez vos matériaux à la matrice Matériau de conversation. Le nœud Set Material doit alors figurer dans le graphique de conversation. Les matériaux sont référencés à partir du graphique dans les liaisons.

Pour lier un matériau à un appareil de conversation, procédez comme suit :

1. Dans l'éditeur de widgets d'interface utilisateur, cliquez sur le widget Image dans le panneau Hiérarchie.

   

2. Cliquez sur Liaisons d'affichage pour ouvrir le panneau correspondant. Le panneau s'ouvre avec une ligne de liaison pour le widget Image.

   

3. Cliquez sur le bouton +Ajouter un widget pour ajouter le widget Image au panneau Liaisons d'affichage.

   

4. Cliquez sur l'icône Modifier sur le widget Image dans le champ de gauche pour ouvrir les options du widget.

   

5. Sélectionnez Widget Image > Pinceau > Sélectionner. Les liaisons de pinceau sélectionnables sont ajoutées au champ de droite.

   

6. Cliquez sur l'icône Modifier dans le champ de droite pour ouvrir les options de liaison.

   

7. Sélectionnez Fonction de conversion > Créer un pinceau d'image à partir du matériau > Sélectionner. Vous disposez alors d'options supplémentaires pour identifier le matériau que vous souhaitez utiliser pour ce widget.

   

8. Dans le créneau Matériau, sélectionnez l'icône de liaison, puis dans le menu, choisissez Modèle d'affichage de fenêtre modale du mode Créatif > Matériau Art 01 > Sélectionner.

   

9. Dans le créneau Taille de l'image, saisissez la même taille que celle que vous avez spécifiée dans l'option Taille de l'image du widget Image dans le panneau Détails.

   

Le résultat final est un matériau qui identifie le personnage interlocuteur.

Créer des animations d'interface utilisateur de conversation

Vous pouvez également utiliser le matériau de conversation dans une animation d'interface utilisateur. Définissez le paramètre Type de conversation sur Boîte ou Personnalisé dans l'appareil de conversation. Dans le graphique de matériau, le matériau de conversation peut être référencé à partir de l'appareil de conversation lorsque vous utilisez le nœud Play Conversation Animation.

Pour lier ce nœud de conversation à votre widget d'interface utilisateur, vous devez utiliser la valeur Progression dans le modèle d'affichage pour établir un lien vers l'animation d'interface utilisateur que vous créez dans Sequencer.  Pour savoir comment animer votre matériau, consultez le document Animer l'interface utilisateur.