Dans cette section, vous allez apprendre à créer des superpositions d'interface utilisateur entièrement personnalisées pour vos jeux en recréant l'interface utilisateur de joueur du modèle Arcade Tortues Ninja.
Procédez comme suit :
Ajoutez des liaisons de vue à chaque élément de widget interactif.
Configurez le contrôleur d'ATH de manière à afficher l'IU personnalisée.
Téléchargez gratuitement le paquet de textures UI Material Lab et testez vos propres configurations d'interface utilisateur !
Cliquez sur l'image pour l'agrandir.
C'est parti !
Configurer des widgets personnalisés
Dans votre navigateur de contenu, accédez à : Tout > [NOM de votre projet] > IU > Widgets et ouvrez le blueprint de widget UW_HUD_PlayerInfoBlock.
Sur le côté gauche, l'onglet Hiérarchie fonctionne comme l'organiseur de la fenêtre principale de l'éditeur et affiche les différents composants du widget fini.
Dossière
La partie supérieure est composée de trois images qui correspondent aux couches de l'interface utilisateur. avec les éléments suivants :
Backplate1_Image : le fond gris
Backplate2_Image : le contour orange
Backplate3_Image : le contour blanc
Ensemble, ces images définissent le style du panneau Informations de joueur, en forme de cadre.
Lorsque vous importez des images à utiliser dans votre interface utilisateur, veillez à définir Groupe de textures sur IU et Paramètres de compression sur UserInterface2D (RGBA8).
Nom du joueur
Ce composant est constitué de deux éléments, à savoir Nom du joueur actif et Nom du joueur inactif, qui s'affichent lorsque le joueur est en vie, éliminé ou déconnecté dans le jeu.
Choisissez deux couleurs distinctes qui permettront aux joueurs d'identifier les membres de leur équipe actifs et éliminés.
Pour le nom du joueur actif, définissez l'option Visibilité sur Visible, et pour le nom du joueur inactif, définissez-la sur Masqué. Ces informations ne s'afficheront que sous certaines conditions.
Définissez le paramètre Remplacement de largeur sur 220,0 afin que les noms de joueur les plus longs ne se superposent pas à l'icône d'avatar du joueur.
Icône d'avatar de joueur
Ce composant affiche le portrait du personnage du joueur en fonction de la tenue qu'il a choisie dans le jeu.
Ce composant est lié à une instance de matériau appelée MI_UI_PlayerCard, disponible dans le dossier IU > instances de matériau.
Vous pouvez personnaliser cette instance de matériau à votre guise en modifiant les paramètres dans le panneau Détails. Essayez d'importer votre propre image et d'y ajouter des couleurs de contour.
Dans cet exemple, l'image choisie est une image transparente vide qui sera connectée ultérieurement à la tenue du personnage.
la santé
Ce composant contient les régions qui afficheront les PV et le bouclier du joueur.
Au niveau du parent, vous pouvez voir la zone de dimensionnement qui détermine la taille de la région globale.
Vient ensuite l'image de la plaque de PV, appelée MI_UI_Health_Backplate. Ce matériau d'interface utilisateur est également disponible dans Fortnite > IU > Matériaux. Très personnalisable, ce matériau fournit de nombreuses options pour afficher la barre de PV du joueur dès le début du jeu.
Au-dessus de la plaque se trouve une zone empilable constituée de deux composants : une barre de PV et une barre ombrée, appelées respectivement Health_Image et Health_Shadow.
Health_Image est un matériau d'IU de barre de progression personnalisable. Si vous ouvrez l'instance de matériau, vous pouvez effectuer un zoom avant dessus en modifiant le paramètre Taille de l'aperçu.
Essayez de modifier certains paramètres du panneau Détails pour voir leurs effets sur le matériau.
Les valeurs des paramètres scalaires (état de remplissage de la barre de progression) étant comprises entre 0 et 1, et les valeurs de PV et de bouclier de Fortnite étant généralement comprises entre 0 et 100, il est important de définir le multiplicateur sur 0,01 pour présenter correctement les valeurs de PV et de bouclier aux joueurs.
La barre Health_Shadow est une simple superposition ombrée ajoutée à des fins esthétiques.
le bouclier
Le composant Bouclier est constitué d'un arrière-plan Shields_Container, qui affiche la zone de bouclier vide en gris foncé, et d'une Shields_Image qui contient le matériau d'interface utilisateur de la barre de progression.
Shield_Image utilise une simple instance de matériau de barre de progression, qui est une version simplifiée du matériau Health_Image.
Ajouter l'onglet Liaisons d'affichage
Maintenant que vous avez créé les principaux composants de l'interface utilisateur de votre jeu, vous devez ajouter des liaisons d'affichage qui permettront à chacun des composants de se mettre à jour en fonction des données qu'ils reçoivent d'une session en direct.
Nom du joueur
Procédez comme suit pour que le nom d'un joueur s'affiche dans le champ correct :
Pour ouvrir l'onglet Liaisons d'affichage, cliquez sur Fenêtre > Liaisons d'affichage ou sélectionnez Liaisons d'affichage en bas de l'écran et ancrez-le.
Pour afficher la liste des liaisons d'affichage HUDPlayerInfoViewModel :
1. Sélectionnez Fenêtre > Modèles-vues pour ouvrir la fenêtre Modèles-vues.
1. Accédez à +Modèle-vue et sélectionnez ATH-Modèle-vue de base des informations de joueur.
1. Cliquez sur Appareil - Modèle-vue des informations de joueur pour le contrôleur d'ATH, puis sur Sélectionner.
Sélectionnez NameActive_Text dans la liste Hiérarchie ou cliquez sur la zone Nom du joueur de l'écran Aperçu d'IU.
Cliquez sur + Ajouter le widget NameActive_Text et sélectionnez Texte dans le menu déroulant.
Dans le champ vide de droite, sélectionnez HUDPlayerInfoViewmodel et Nom du joueur dans le menu déroulant disponible.
La liaison finale devrait ressembler à ceci :
Répétez les étapes 1 à 3 pour l'élément NameInactive_Text.
Pour modifier les paramètres de visibilité du nom inactif, ajoutez un nouveau widget à NameInactive_Text et sélectionnez Visibilité dans le menu déroulant.
Cliquez sur le champ vide de droite et sélectionnez Fonctions de conversion > Visibilité (booléen).
Sélectionner cette option a pour effet de faire apparaître trois nouveaux champs. Cliquez sur l'icône Lier située près de Est visible. Dans le menu, sélectionnez HUDPlayerInfoViewModel et Est éliminé.
Définissez Visibilité true sur Test de positionnement impossible (auto uniquement) ci-dessous. Laissez Visibilité false sur Réduit. Lorsque le joueur est éliminé ou déconnecté, le nom remplace le NameActive_Text, mais lorsque le joueur est en vie, il reste réduit.
La liaison NameInactive_Text finale devrait ressembler à ce qui suit :
Pour envoyer les modifications, appuyez sur Compiler. Les noms des joueurs sont maintenant définis.
Icône d'avatar de joueur
Choisissez Profile_Image dans Hiérarchie ou cliquez sur la zone de l'icône du joueur dans l'écran d'aperçu d'IU.
Cliquez sur + Ajouter le widget Profile_Image.
Accédez à Profile_Image > Pinceau et appuyez sur Sélectionner. Cette liaison consiste essentiellement à examiner le paramètre de pinceau sélectionné dans le panneau Détails de Profile_Image.
Cliquez dans le champ vide de droite et sélectionnez Fonctions de conversion > Définir le paramètre de texture.
Saisissez Texture dans le champ Nom du paramètre. Pour trouver le nom de ce champ, ouvrez l'instance de matériau d'avatar de joueur.
Pour les fonctions Définir le paramètre Vecteur/Scalaire/Texture, assurez-vous que les noms des paramètres d'instance de matériau correspondent exactement au champ Nom du paramètre.
Cliquez sur l'icône Lien située près du champ Valeur et sélectionnez HUDPlayerInfoViewModel > Icône Avatar du joueur.
La liaison finalisée devrait ressembler à ceci :
Santé et bouclier
Choisissez Health_Image dans Hiérarchie ou cliquez sur la zone de la barre des PV dans l'écran d'aperçu d'IU.
Cliquez sur + Ajouter le widget Health_Image.
Accédez à Profile_Image > Pinceau et appuyez sur Sélectionner.
Cliquez dans le champ vide de droite et sélectionnez Fonctions de conversion > Définir le paramètre scalaire.
Saisissez Progression dans le champ Nom du paramètre. Pour trouver le nom de ce champ, ouvrez l'instance de matériau d'avatar de joueur.
Cliquez sur l'icône Lier située près de Valeur et sélectionnez HUDPlayerInfoViewModel > PV.
La progression indique les PV restants du joueur en pourcentage et, le multiplicateur étant défini sur 0,1, chaque point de pourcentage fait avancer la barre de progression de 1/100e. Vous pouvez tester cette fonction en modifiant arbitrairement la valeur de pourcentage dans l'instance de matériau pour voir la barre de progression se déplacer.
Pourcentage de PV Cliquez sur l'image pour l'agrandir.
La liaison finalisée devrait ressembler à ceci :
En ce qui concerne la barre Bouclier, répétez les étapes 1 à 6, mais choisissez Bouclier au lieu de PV.
La liaison finalisée pour le bouclier devrait ressembler à ceci :
Appuyez sur Compiler pour envoyer les modifications.
Widget complet
Cette liaison garantit que le widget complet ne s'affiche que lorsqu'un joueur est connecté au jeu.
Choisissez PlayerInfoBlock_Overlay dans la Hiérarchie.
Sélectionnez + Ajouter le widget PlayerInfoBlock_Overlay, puis choisissez Visibilité dans le menu déroulant.
Cliquez sur le champ vide de droite et sélectionnez Fonctions de conversion > Visibilité (booléen). Sélectionner cette option a pour effet de faire apparaître trois nouveaux champs.
Cliquez sur l'icône Lier située près de Est visible. Dans le menu, sélectionnez HUDPlayerInfoViewModel et Est déconnecté.
Définissez Visibilité true sur Réduit et Visibilité false sur Test de positionnement impossible (auto uniquement).
La liaison finale devrait ressembler à ce qui suit. Appuyez sur Compiler pour enregistrer vos modifications.
Voilà ! Vous disposez maintenant d'un widget d'interface utilisateur entièrement configuré qui affichera des informations sur le jeu.
Créer une pile de joueurs
Dans cette section, nous vous expliquons comment créer un widget utilisateur qui affiche les joueurs supplémentaires de la section ainsi que le joueur ayant le contrôle.
Pour commencer, créez un nouveau blueprint de widget en faisant un clic droit dans le navigateur de contenu et en sélectionnant Interface utilisateur > Blueprint de widget.
Sélectionnez Widget utilisateur dans la boîte de dialogue et renommez-le HUDInfoStack.
Double-cliquez sur le widget utilisateur pour ouvrir une nouvelle fenêtre de l'éditeur.
Dans le panneau Palette, faites glisser un élément Superposition dans le panneau Hiérarchie pour commencer.
Faites glisser une zone empilable vers le niveau situé sous la superposition et renommez-la PlayerInfoStack.
Dans le panneau Modèles-vues, appuyez sur +Modèle-vue et sélectionnez une liste de modèles-vues Appareil Contrôleur d'ATH/Liste d'informations de joueurs d'équipe/de section.
Accédez au panneau Détails et cliquez sur +Ajouter une extension du modèle-vue. Cela permet à PlayerInfoStack d'accepter une classe de widget d'entrée.
Si ces options ne sont pas disponibles, essayez de compiler le widget une nouvelle fois.
Pour la classe de widget d'entrée, sélectionnez le PlayerInfoBlock précédemment créé. En dessous, sélectionnez HUDPlayerInfoViewmodel comme Modèle-vue d'entrée.
Dans la section Modèle d'emplacement, vous pouvez ajuster l'espacement entre chaque widget et l'alignement, et prévisualiser l'aspect d'un certain nombre de widgets dans le jeu.
Espacement entre les widgetsCliquez sur le GIF pour l'agrandir.
Dans le panneau Liaisons d'affichage, cliquez sur +Ajouter un widget, puis choisissez HUDInfoStack. Choisissez PlayerInfoStack_Viewmodel_Extension et agrandissez-la pour afficher l'option Définir les objets avant de la sélectionner. Si PlayerInfoStack_Viewmodel_Extension ne figure pas dans la liste, appuyez sur Compiler.
Dans le champ vide de droite, sélectionnez HUDPlayerInfoListViewModel > Matrice d'infos sur les joueurs d'équipe/de section. Cette action transmet la matrice des modèles-vues affichage des informations de joueur à la nouvelle extension créée avec une fonction appelée Définir les éléments.
Appuyez sur Compiler pour enregistrer vos modifications. Vous pouvez désormais les ajouter à votre jeu à l'aide de l'appareil Contrôleur d'ATH.
Si vous souhaitez créer un widget distinct du reste de la section pour le joueur ayant le contrôle :
Créez un nouveau widget pour le joueur ayant le contrôle et configurez les liaisons d'affichage comme vous l'avez fait précédemment à l'aide de l'appareil Contrôleur d'ATH - Modèle-vue des informations de joueur.
Placez ce widget sous le widget parent qui contient la zone empilable.
Créez une liaison pour ce widget. Dans le champ de gauche, sélectionnez Appareil Contrôleur d'ATH - Modèle-vue des informations de joueur. Dans le champ de droite, sélectionnez Appareil Contrôleur d'ATH/Liste d'informations de joueurs d'équipe/de section > Contrôle des informations de joueur.
Configurer l'appareil Contrôleur d'ATH
Recherchez l'appareil Contrôleur d'ATH dans le navigateur de contenu et faites-le glisser dans votre scène.
Dans Options utilisateur, choisissez les éléments qui doivent s'afficher pour le joueur, puis assurez-vous que l'option Afficher l'ATH est définie sur Oui et que l'option Afficher les infos des équipes est définie sur Non.
Faites défiler l'écran vers le bas jusqu'à Remplacement de module des infos joueur et faites glisser le widget HUDInfoStack dans le champ vide. Assurez-vous qu'il s'agit bien du widget de pile nouvellement créé et non du widget d'origine que vous avez créé.
Cliquez sur Enregistrer.
Vous avez terminé ! Votre nouvelle interface utilisateur devrait maintenant apparaître lors du test de votre jeu.
Étape suivante
Vous allez maintenant apprendre à configurer les caméras et les appareils de contrôle pour votre jeu à défilement horizontal.
