Créez une interface utilisateur dynamique avec des matériaux évolutifs qui se mettent à jour en fonction des événements et des données de jeu. Pour rendre votre interface utilisateur dynamique, vous devez utiliser une combinaison de matériaux d'interface utilisateur, de liaisons d'affichage et de trois des fonctions de conversion Définir le paramètre du matériau (Définir le paramètre de texture, Définir le paramètre scalaire et Définir le paramètre de vecteur).
Dans l'Unreal Editor pour Fortnite (UEFN), vous disposez d'un matériau de base avec un certain nombre de paramètres. Utilisez l'appareil Traqueur pour suivre les éliminations dans un widget de barre de progression, comme exemple de matériau qui se met à jour dynamiquement en fonction du nombre d'éliminations d'ennemis dans le jeu.
Créer une instance de matériau
Pour en savoir plus sur les instances de matériau, consultez la rubrique Créer et utiliser des instances de matériau dans la documentation de l'Unreal Engine.
Toutes les ressources utilisées pour créer ces instances de matériau sont disponibles dans l'UEFN. Pour savoir comment créer le matériau de cet exemple, consultez la rubrique Matériau de mesure dans la section des tutoriels sur les matériaux.
Créez une instance de matériau de M_Tracker, puis nommez-la MI_TrackerExample.
Dans la nouvelle instance de matériau, modifiez IconScaleX et IconScaleY en fonction de vos préférences. Les matériaux de cet exemple ont été définis sur 0,7 chacun.
Vous pouvez personnaliser la couleur de progression des éliminations qui remplit le widget en fonction de votre progression. Laissez les cases TrackerProgress, Icon et IconColor décochées. Nous y reviendrons plus tard avec l'appareil Traqueur.
Les icônes se trouvent dans le dossier Fortnite dans Textures > Icônes.
Configurer le widget Traqueur
Vous allez créer un widget Traqueur personnalisé dans UMG que vous pourrez référencer dans l'appareil Traqueur et dont vous pourrez suivre les éliminations des joueurs dans l'interface utilisateur d'élimination personnalisée.
Faites un clic droit dans le navigateur de contenu et sélectionnez Interface utilisateur > Blueprint de widget > Widget utilisateur.
Créez un widget Traqueur simple qui affiche le matériau Traqueur et un titre de traqueur, comme dans l'exemple ci-dessous.
Faites glisser une superposition dans le graphique du widget. Toutes les parties qui composent le widget sont ainsi superposées. Cette superposition vous permet également de déterminer où ce widget apparaît sur l'écran.
Imbriquez une zone empilable à l'intérieur de la superposition afin de pouvoir disposer le matériau Traqueur et le titre de gauche à droite.
Imbriquez une superposition à l'intérieur de la zone empilable afin de pouvoir créer un matériau Traqueur pour superposer la zone empilable avec un arrière-plan sombre simple.
À l'intérieur de la superposition, imbriquez deux widgets Image. Appuyez sur F2 pour les renommer TrackerBackground et TrackerMaterial.
Sélectionnez TrackMaterial pour ouvrir les options correspondantes dans le panneau Détails. Dans le panneau Détails, sélectionnez Pinceau > Image et recherchez le matériau MI_TrackerExample que vous avez créé.
Définissez la taille de l'image ci-dessous sur X=96,0, Y=96,0. Cette taille doit être suffisante pour voir correctement l'image dans le jeu.
Maintenant que vous avez configuré le matériau Traqueur, vous devez créer l'arrière-plan du matériau afin que le matériau Traqueur soit plus lisible.
Sélectionnez TrackerBacking, puis dans la hiérarchie et dans le panneau Détails, sélectionnez Pinceau > Dessiner en tant que > Zone arrondie.
Définissez l'option Teinte ci-dessus sur une couleur neutre pour une meilleure lisibilité. Dans cet exemple, la teinte a été définie sur 3A3A3AFF dans le champ sRVB hexadécimal.
Définissez les options Alignement horizontal et Alignement vertical sur Remplissage. Vous vous assurez ainsi que l'arrière-plan du matériau remplit le conteneur qui contient le matériau Traqueur.
Vous disposez désormais d'un arrière-plan pour votre TrackerMaterial, qui est facilement lisible sur n'importe quelle scène dans le jeu.
Configurer le texte du traqueur
Une fois le matériau Traqueur référencé dans le widget Traqueur, vous allez configurer un texte qui informe le joueur des éléments qui sont suivis dans l'interface utilisateur.
Imbriquez un bloc de texte dans la zone empilable qui contient la superposition. Renommez le bloc de texte TrackerTitle.
Sélectionnez TrackerTitle dans la hiérarchie puis, dans le panneau Détails, définissez Alignement vertical sur Aligner verticalement au centre. De cette façon, le texte est toujours aligné au centre du matériau Traqueur.
Apportez quelques modifications stylistiques à la police en réduisant la taille, en ajoutant un contour ou en modifiant le style pour l'adapter à votre thème.
Dans cet exemple, les modifications suivantes ont été effectuées : Taille de la police = 24 Police de caractères = Gras Contour = Rouge foncé
Vous pouvez personnaliser tous les paramètres liés à la police dans la catégorie Apparence.
Une fois tous les aspects de conception finale terminés, le TrackerMaterial et le TrackerTitle doivent être configurés.
Pour ajouter de l'espace entre les deux éléments, ajoutez une marge intérieure à droite de la superposition contenant le matériau Traqueur :
Sélectionnez la superposition.
Dans le panneau Détails, développez Marge intérieure.
Modifiez le paramètre Marge intérieure droite en sélectionnant 16 px.
Un espace est ajouté entre l'image et le texte.
Pour modifier facilement l'espacement entre plusieurs objets, vous pouvez insérer un widget Image dans la zone empilable qui contient ces objets, définir la taille de l'image X sur l'espace souhaité, puis la définir sur Dessiner en tant que Aucun. Ainsi, l'image n'apparaît pas, mais elle occupe toujours de l'espace dans votre zone empilable.
Cela facilite la gestion de l'espacement entre les objets et évite de rechercher les marges intérieures dans chaque widget.
Configurer les paramètres du matériau défini
Vous devez maintenant lier les valeurs de l'appareil Traqueur aux paramètres de matériau dans le widget Traqueur.
Ajouter un modèle d’affichage
Ajoutez le modèle d'affichage Traqueur au widget en sélectionnant Fenêtre > Modèle d'affichage dans le menu principal.
Dans votre fenêtre Modèle d'affichage, sélectionnez +Modèle d'affichage.
Dans la fenêtre contextuelle, sélectionnez Appareil - Modèle d'affichage du traqueur.
Dans la barre de menus, sélectionnez Fenêtre > Liaisons d'affichage pour ouvrir le panneau Liaisons d'affichage.
Vous pouvez à présent lier les données du traqueur pour manipuler votre widget.
Définir le paramètre scalaire
Un paramètre scalaire prend une valeur Int ou Float. Par exemple, la barre de progression se remplit avec le TrackerMaterial en fonction du nombre d'éliminations dans le traqueur.
Le matériau est configuré pour convertir le nombre d'éliminations de l'appareil Traqueur afin de remplir le TrackerMaterial. Il vous suffit de lier ces données au paramètre de matériau de progression dans MI_TrackerExample.
Progression de 3,0 ou de 8,0 dans MI_TrackerExample. C'est très pratique !
Sélectionnez le widget TrackerMaterial, puis cliquez sur +Ajouter un widget dans la fenêtre Liaisons d'affichage.
Dans le champ de gauche, sélectionnez TrackerMaterial > Pinceau.
Dans le champ de droite (contenant les données que vous souhaitez lier au pinceau du TrackerMaterial), sélectionnez Fonctions de conversion > Définir le paramètre scalaire.
La fonction appelée Définir le paramètre scalaire est exécutée sur le paramètre Pinceau. Étant donné que votre pinceau possède actuellement MI_TrackerExample, il recherche un paramètre scalaire que vous spécifiez et lui transmet une valeur.
Saisissez TrackerProgress dans le champ Nom du paramètre ; cela entraîne le remplissage du matériau en fonction de la progression du traqueur.
Il est important de ne pas faire d'erreurs ; dans le cas contraire, le paramètre ne trouvera pas le bon paramètre sur votre matériau. Si vous avez oublié le nom de votre paramètre, ouvrez l'instance de matériau et recherchez les paramètres sur la droite.
Sélectionnez l'icône de lien en regard de Valeur, puis sélectionnez MVVM_UEFN_Tracker > Valeur dans le menu déroulant. Cela permet de lier la progression actuelle du traqueur.
La progression actuelle du traqueur alimente désormais directement votre matériau ! Le matériau Traqueur se remplit lentement lorsque le joueur assigné au traqueur obtient une élimination.
Définir le paramètre de vecteur
Un paramètre de vecteur prend une valeur Vector4. Les vecteurs sont généralement utilisés pour les couleurs (RVBA, c'est-à-dire les quatre vecteurs) ; vous allez utiliser Vector4 pour changer la couleur de votre icône en fonction des configurations dans l'appareil.
Pour en savoir plus sur les vecteurs, consultez la rubrique Expressions vectorielles de matériau dans la documentation de l'Unreal Engine.
Sélectionnez le TrackerMaterial dans la hiérarchie, puis ouvrez la fenêtre Liaisons d'affichage et sélectionnez +Ajouter un widget.
Sélectionnez TrackerMaterial > Propriétés du pinceau dans le champ vide de gauche.
Sélectionnez Fonctions de conversion > Définir le paramètre de vecteur dans le champ vide de droite.
Comme nous l'avons expliqué ci-dessus, cette liaison obtient le pinceau du TrackerMaterial (en l'occurrence, il s'agit de MI_TrackerExample) et définit un paramètre de vecteur que vous spécifiez sur cette instance de matériau. Vous pouvez définir la couleur de l'icône pour suivre les options définies par l'appareil Traqueur.
Saisissez IconColor dans le champ Nom du paramètre.
Sélectionnez l'icône de lien en regard de Valeur, puis sélectionnez MVVM_UEFN_Tracker > Couleur. Vous définissez ainsi la valeur sur la propriété Couleur de l'icône du modèle d'affichage Traqueur.
Quelle que soit la couleur de l'icône définie sur l'appareil Traqueur, elle est transmise à votre matériau. Si vous souhaitez disposer d'une icône orange, il vous suffit de la placer sur l'appareil, qui la colorise pour vous. Le matériau utilisé dans cet exemple est déjà prévu pour cela.
Définir la Texture Paramètre
Un paramètre de texture prend une valeur Texture2D. Les textures sont généralement utilisées pour les images ou les icônes ; nous allons donc les utiliser pour modifier notre icône en fonction des éléments configurés sur l'appareil.
Pour en savoir plus sur les textures, consultez la rubrique Textures dans la documentation de l'Unreal Engine.
Sélectionnez le TrackerMaterial dans la hiérarchie, puis dans la fenêtre Liaisons d'affichage sélectionnez +Ajouter un widget.
Dans le champ vide de gauche, sélectionnez MVVM_UEFN_Tracker > Pinceau.
Dans le champ vide de droite, sélectionnez Fonctions de conversion > Définir le paramètre de texture.
Saisissez Icône dans le champ Nom du paramètre.
Évitez les erreurs lors de la saisie du nom du paramètre. Si vous oubliez le nom du paramètre, vous pouvez consulter MI_TrackerExample pour obtenir la liste des paramètres pouvant être définis.
Sélectionnez l'icône de lien en regard du champ Valeur et sélectionnez MVVM_UEFN_Tracker > Icône dans le menu déroulant. Vous liez ainsi la valeur à la propriété Icône du modèle d'affichage Traqueur.
Le paramètre de texture est défini. Désormais, quelle que soit l'icône définie sur votre appareil Traqueur, elle est transmise au widget.
Lier le texte du traqueur au nom du traqueur
Vous devez maintenant lier le titre du traqueur que vous avez créé au même paramètre dans l'appareil Traqueur.
Sélectionnez TrackerTitle dans la hiérarchie, puis ouvrez la fenêtre Liaisons d'affichage et sélectionnez +Ajouter un widget.
Dans le champ vide de gauche, sélectionnez TrackerTitle > Texte dans le menu déroulant.
Dans le champ vide de droite, sélectionnez MVVM_UEFN_Tracker > Nom dans le menu déroulant.
Cette liaison transmet le titre de votre traqueur au bloc de texte.
Configurer l'appareil Traqueur
Vous allez maintenant référencer le widget que vous avez créé dans UMG dans l'appareil Traqueur. Cette opération permet d'afficher l'interface utilisateur d'éliminations dans l'ATH.
Ajoutez un traqueur à votre projet.
Donnez un nom au titre du traqueur. Ce nom s'affiche dans le texte TrackerTitle de votre widget.
Ajoutez votre widget au champ Widget ATH.
Remplacez les champs d'icône de quête par n'importe quelle icône que vous souhaitez afficher sur votre traqueur. Cela remplace l'icône Alien par défaut sur MI_TrackerExample.
Sélectionnez une couleur dans Couleur de l'icône. L'icône que vous avez définie ci-dessus adopte la couleur sélectionnée.
Poursuivez la configuration des autres paramètres pour ajouter le traqueur à votre joueur.
Résultat final
Voilà ! Le widget Traqueur personnalisé apparaît en haut à gauche. Que vous éliminiez des zombies ou d'autres joueurs, le widget se remplit progressivement. C'est ainsi que vous liez les données de jeu à vos propres widgets personnalisés à l'aide de la fonction Définir le paramètre du matériau.
