Créez des barres de PV et de bouclier personnalisées dans Unreal Motion Graphics (UMG) à l'aide de matériaux d'interface, de textures d'interface et de divers widgets de la palette pour remplacer l'interface utilisateur (IU) par défaut de Fortnite. Les barres de PV et de bouclier peuvent être ajoutées à une plaque nominative ou placées séparément dans l'ATH.
La conception et le placement des barres de PV et de bouclier sont propres à chaque jeu et prennent en compte le type de jeu (jeu de combat, jeu multijoueur en coopération, jeu de rôle, etc.).
Configurer des instances de matériaux sans modifier les matériaux
Dans cet exemple, vous utiliserez une variété de matériaux créés dans l’UEFN. à savoir une barre de progression en forme de rectangle (boîte) et de cercle. La barre de progression rectangulaire dispose également d'une option permettant de transformer la barre de progression en sections.
Les matériaux ont été configurés à l'aide d'une combinaison de fonctions de matériau disponibles dans UI Material Lab, de paramètres qui sont exposés à l'instance de matériau et de certaines fonctions mathématiques pour que tout fonctionne comme prévu.
Il est recommandé d'utiliser des matériaux pour les widgets. Les matériaux sont mis à jour de manière dynamique en fonction des données de jeu, ce qui permet d'optimiser l'interface et d'ajouter des effets spéciaux. Les textures sont utilisées uniquement dans le cas de conceptions plus complexes difficilement réalisables avec des fonctions mathématiques.
Pour plus d'informations sur l'utilisation de matériaux dans le cadre de la conception et de l’implémentation de votre interface, consultez la rubrique Matériaux utiles pour l'interface. Le tutoriel fournit plus d’informations sur l’utilisation des champs de distance signés (SDF) pour créer des matériaux de barre de progression dynamique dans l’UEFN et dans l’UE.
Une instance de matériau crée des instances d'un matériau avec des paramètres qui peuvent facilement modifier l'apparence de ce matériau sans le recompiler. Pour créer une instance d'un matériau, faites un clic droit sur un matériau, puis sélectionnez Créer une instance de matériau.
Pour plus d'informations sur les instances de matériau, reportez-vous à la section Créer et utiliser des instances de matériau dans la documentation de l’Unreal Engine.
Certains paramètres sont exposés dans l'UEFN. Dans l'exemple de matériau, le paramètre Progression modifie le degré de remplissage de la barre. La plage de valeurs standard est comprise entre 0 et 100 à l'aide du nœud ConstantBiasScale dans M_CircleProgressBar afin de l’adapter à la plage de PV de Fortnite.
Vous pouvez modifier la couleur d'arrière-plan (BGColor) et la couleur du liquide, qui sont des dégradés. Ensuite, prévisualisez vos modifications dans le hublot d'aperçu sur la gauche.
Vous pouvez créer autant d'instances de matériau que vous le souhaitez à des fins diverses. Dans cet exemple, deux matériaux sont utilisés, un pour les PV et un autre pour le bouclier.
Bonnes pratiques en matière de disposition des widgets
Dans UMG uniquement, utilisez le panneau Zone de dessin si vous avez besoin d'une position absolue sur l'écran ou si vous devez modifier avec précision l'emplacement des différents widgets.
Pour les widgets plus petits, utilisez :
Superposition
Zones empilables
Zones de dimensionnement (si vous devez limiter votre widget à une taille spécifique)
Panneau Grille (si vous souhaitez conserver la taille de votre conteneur tout en manipulant la position des widgets enfants)
Une fois les matériaux prêts, créez un blueprint de widget dans le navigateur de contenu, puis double-cliquez sur la vignette du widget pour ouvrir l'éditeur UMG.
Utiliser un panneau Zone de dessin
Dans cet exemple, le panneau Zone de dessin sert à placer les barres de PV et de bouclier dans une position absolue sur l'ATH en ancrant les widgets dans certaines parties de l'écran.
Pour les éléments ATH individuels, il est recommandé d'utiliser une combinaison des widgets suivants :
Superposition : si vous devez superposer un widget sur un autre
Zones empilables : si vous devez disposer vos widgets horizontalement ou verticalement
Zones de dimensionnement - Si vous devez limiter votre widget à une taille spécifique
Panneau Grille - si vous souhaitez conserver la taille de votre conteneur tout en manipulant la position des widgets enfants qu’elle contient
En gardant cela à l'esprit, commencez à disposer les widgets PV et Bouclier.
Créez un conteneur pour l'ensemble de l'interface de l'ATH. Pour cela, utilisez un panneau Zone de dessin comme conteneur pour héberger tous les éléments individuels de l'ATH.
Dans cet exemple, les PV et les boucliers seront ancrés dans la partie inférieure centrale de l'écran.
Imbriquez une zone empilable sous la zone de dessin afin de créer le conteneur des PV et des boucliers. Dans cette conception, ces éléments sont empilés de gauche à droite.
Si vous souhaitez disposer vos widgets dans une zone empilable verticale, modifiez le paramètre Orientation dans le panneau Détails sous Comportement > Orientation.
Renommez vos widgets en les sélectionnant et en appuyant sur la touche F2 lorsque vous les ajoutez à votre Hiérarchie pour une meilleure organisation.
Sélectionnez la zone empilable dans la hiérarchie. Une option Ancres devrait s’afficher dans le panneau Détails. Ouvrez l'option en appuyant sur les touches Maj + Contrôle. Ancrez la zone empilable au centre inférieur de l'ATH en sélectionnant l'option disponible dans la ligne 3, colonne 2.
La zone empilable doit maintenant être ancrée au bas de l'écran. L'icône en forme de fleur indique l'emplacement d'ancrage du widget dans le panneau Zone de dessin.
Déplacez la zone empilable vers le haut afin qu'elle ne soit pas collée au bord inférieur de l'écran. Pour cela, modifiez l'option Position Y.
Les valeurs positives déplacent le widget vers le bas, tandis que les valeurs négatives le déplacent vers le haut.
Cochez la case Size To Content (Adapter à la taille du contenu) pour que le conteneur soit toujours redimensionné en fonction de son contenu.
Configurer la barre des PV et le texte
Maintenant que le conteneur PV et boucliers est prêt, configurez le widget PV et boucliers.
Imbriquez une superposition sous la zone empilable et renommez-la HPOverlay. Le texte des PV se superpose à la barre de PV ronde.
Imbriquez une image sous HPOverlay et renommez-la HPBar. Cela vous permet d'ajouter l'instance de matériau que vous avez créée ci-dessus à votre widget.
Sélectionnez HPBar dans la hiérarchie, puis dans le panneau Détails, sous Pinceau> Image, sélectionnez votre instance de matériau de barre de PV personnalisée.
Pour modifier la taille de l'instance de matériau, vous pouvez personnaliser la propriété Taille de l'image ci-dessous.
Imbriquez un bloc de texte sous HPOverlay et renommez-le HPText. Cela vous permet d'ajouter du texte au-dessus de la barre de PV circulaire.
Sélectionnez le bloc de texte, puis dans le panneau Détails, définissez l’alignement horizontal et vertical sur Centre. Cela garantit que le texte est toujours aligné au centre de HPBar.
Cliquez sur l'image pour l'agrandir.
Modifiez la taille de la police sous Apparence > Police > Taille afin qu'elle s'adapte à la barre des PV.
Cliquez sur l'image pour l'agrandir.
Cliquez sur Compiler. Vous disposez maintenant d'une barre de PV et du texte correspondant.
Configurer la barre de bouclier et le texte
Pour configurer la barre et le texte de bouclier, répétez les étapes ci-dessus. Cette fois-ci, ajoutez un espace entre la barre de PV et la barre de bouclier. Étant donné que le conteneur HPShieldsContainer est une zone empilable, il dispose automatiquement les widgets enfants horizontalement.
Utilisez un widget Image à l'intérieur de la zone empilable pour ajouter un espace entre vos barres de PV et de bouclier. Configurez le widget Image vide en procédant comme suit :
Imbriquez une image sous la zone empilable.
Définissez les propriétés du pinceau de l'image sur Aucun.
Ainsi, rien n'apparaît dans votre widget, mais le widget Image occupe toujours un espace dans votre disposition. Cela vous permet de gérer facilement l'espacement entre les éléments d'une zone empilable sans avoir besoin de recourir à une marge intérieure.
Configurez le widget Bouclier en procédant de la même façon que pour la barre des PV.
Pour créer la barre de bouclier plus rapidement, dupliquez l'objet HPOverlay en faisant un clic droit sur HPOverlay dans la hiérarchie et en sélectionnant Dupliquer.
Imbriquez l'objet ShieldOverlay sous l'image d'espacement afin qu'il apparaisse à la fin de la zone empilable.
Les deux types de barres apparaissent désormais côte à côte dans votre widget.
Renommez vos variables en ShieldOverlay, ShieldBar et ShieldText comme indiqué dans l'image de la hiérarchie des widgets ci-dessous.
Vous êtes maintenant prêt à créer les liaisons qui ajoutent des fonctionnalités aux barres de progression PV et Bouclier.
Liaisons d’affichage
Ajouter un modèle d’affichage
Un modèle d'affichage vous permet d'ajouter des fonctionnalités d'appareil à un blueprint de widget. Le modèle d'affichage utilise des liaisons d'affichage pour identifier les widgets dans le blueprint et la fonctionnalité d'appareil de graphique pour ce widget.
Le modèle d'affichage Informations de joueur pour le contrôleur d'ATH permet de remplacer certaines parties de votre ATH par un widget personnalisé.
Sélectionnez Fenêtre > Modèles d'affichage pour ouvrir et ajouter un modèle d'affichage à votre widget.
Dans la fenêtre Modèle d'affichage, sélectionnez +Modèle d'affichage. Une fenêtre contextuelle s'ouvre contenant tous les modèles d'affichage actuellement disponibles.
Deux types de modèles d'affichage du contrôleur d'ATH sont disponibles :
Sélectionnez Appareil - Modèle d'affichage de la liste d’informations sur les joueurs de l’équipe/la section sur le contrôleur d'ATH dans les options HUDPlayerInfoListViewModel. Sur la base des informations ci-dessus, vous souhaitez uniquement afficher les informations du joueur en contrôle et celles de son équipe/sa section.
Sélectionnez Appareil - Modèle d'affichage des informations sur les joueurs sur le contrôleur d'ATH. Si vous souhaitez créer des widgets distincts pour le joueur contrôlé et son équipe/sa section, utilisez les propriétés disponibles dans Appareil - Modèle d'affichage des informations sur les joueurs sur le contrôleur d’ATH pour chacun de ces widgets. Vous devrez ensuite créer un widget empilable Section qui lie les modèles d'affichage Liste des informations de joueur d'équipe/de section à leurs modèles d'affichage.
Le modèle d'affichage Informations de joueur d'équipe/de section pour le contrôleur d'ATH contient les mêmes informations que le modèle d'affichage Informations de joueur pour le contrôleur d'ATH, mais il est utilisé différemment en fonction du scénario.
Sélectionnez Modèle d'affichage de la liste d’informations sur les joueurs de l’équipe/la section dans les options HUDPlayerInfoListViewModel. Sur la base des informations ci-dessus, vous souhaitez uniquement afficher les informations du joueur en contrôle et celles de son équipe/sa section.
Vous devez maintenant configurer les liaisons qui lient les données du modèle d'affichage à votre widget.
Configurer les liaisons d'affichage ToText
Sélectionnez Fenêtre > Liaisons d’affichage pour ouvrir la fenêtre Liaisons d’affichage.
Sélectionnez HPText dans votre hiérarchie et sélectionnez Ajouter un widget dans Liaisons d'affichage pour lier HPText et afficher vos PV actuels. Une liaison vide apparaît.
La case de gauche indique la propriété du widget et la case de droite les données que vous souhaitez lier à la propriété du widget. Cliquez sur la case de gauche pour afficher une liste de propriétés du bloc de texte HPText. Sélectionnez la propriété Texte pour transmettre les valeurs de PV à cette propriété.
La zone de droite contient les données que vous souhaitez transmettre à la propriété du widget sélectionné. Cependant, la propriété Texte accepte uniquement les données de type Texte. Étant donné que le nombre de PV de Fortnite est de type Float (c'est-à-dire Double), vous devez le convertir en type Texte approprié. Cliquez sur la case de droite et sélectionnez Fonctions de conversion > En texte (Double).
Une longue liste d'options s'affiche. Les paramètres les plus importants sont généralement placés au sommet de la liste ; les autres paramètres vous permettent de formater la valeur finale transmise à votre propriété Texte.
Cliquez sur l'image pour l'agrandir.
Sélectionnez l'icône de liaison à côté de Valeur, puis sélectionnez votre valeur de PV dans le modèle d'affichage du contrôleur d'ATH.
Cliquez sur le champ vide et sélectionnez HUDPlayerInfoListViewmodel dans la colonne de gauche. Développez ensuite Informations du joueur contrôlé à droite, puis sélectionnez PV.
La propriété PV de type Float (c'est-à-dire Double), est transmise via la fonction de conversion En texte (double). La fonction En texte (Double) convertit la propriété PV en type Texte afin que les PV s'affichent sur le widget. Les PV convertis sont alors transmis à la propriété Texte de votre widget HPText.
Répétez les étapes ci-dessus pour configurer le widget ShieldText. Les mêmes liaisons affichent également les valeurs de bouclier.
Définir le paramètre du matériau
Pour plus de détails sur le fonctionnement de la fonction Définir le paramètre du matériau, reportez-vous à la section Définir le paramètre du matériau dans la documentation d'Unreal Engine.
Vous devez maintenant configurer la barre de progression circulaire. La progression change en fonction des niveaux de PV et de bouclier du joueur.
Configurez une liaison vide sur votre barre de PV circulaire.
Dans la case de gauche, sélectionnez HPBar > Pinceau. Le pinceau contient l'instance de matériau de votre barre de PV circulaire.
Dans la case de droite, sélectionnez Fonctions de conversion > Définir le paramètre scalaire.
Dans Nom du paramètre, saisissez le nom du paramètre qui modifie la progression de votre barre de progression.
Pour rechercher le nom de ce paramètre, ouvrez l'instance de matériau de votre barre de PV et observez les valeurs des paramètres sur la droite.
Le paramètre qui contrôle la barre de progression est nommé Progression. Saisissez ce nom dans le champ Nom du paramètre.
Il est important que le nom de votre paramètre soit le même que celui du paramètre de votre instance de matériau, auquel cas le matériau ne fonctionnera pas dans le jeu.
Sélectionnez l'icône de liaison à côté de Valeur. À l'instar de la propriété ToText, liez la propriété PV du joueur à la Valeur.
Il s'agit du résultat final de la liaison des statistiques de PV et de bouclier dans le modèle d'affichage. Désormais, chaque fois que le nombre de PV du joueur change, la propriété PV est transmise à l'instance de matériau de la barre des PV et le paramètre scalaire Progression est mis à jour.
Répétez cette procédure pour votre barre de bouclier. Au lieu de le lier à la propriété PV, vous devez le lier à la propriété Bouclier.
Vos liaisons PV et Boucliers sont maintenant configurées ! Il est temps d'afficher votre widget sur votre ATH.
Configuration du contrôleur d'ATH
Placez un contrôleur d'ATH dans votre niveau.
Vérifiez ce qui suit dans le panneau Détails de l’appareil :
Afficher l’ATH = Oui
Dans le champ Remplacement du widget d'informations sur le joueur, utilisez le widget contenant les PV et les boucliers personnalisés.
Cliquez sur l'image pour l'agrandir.
Sélectionnez Lancer la session. Le widget PV et boucliers devrait maintenant s’afficher sur votre ATH ! Testez votre interface en subissant des dégâts pour vérifier si vos statistiques sont mises à jour sur l'ATH.
Autres exemples de barres de progression
Le matériau Rectangle se trouve sous Fortnite > Interface > Matériau. Vous pouvez personnaliser la boîte de base pour l'utiliser comme arrière-plan de différentes façons, quel que soit le widget.
Créez une instance de matériau à partir de ce matériau et commencez à l'utiliser avec UMG.
En utilisant les informations de cette rubrique et le matériau que nous vous fournissons, essayez de créer les barres de progression suivantes :
Utiliser une texture comme arrière-plan pour cadrer vos avatar de joueur, nom d'affichage et barre de PV.
Utilisez une combinaison de textures, d'icônes, de matériaux de barre de progression et de matériau Rectangle sous Fortnite > Interface > Matériau pour donner un aspect personnalisé aux barres de progression de base.
Barre de PV et de bouclier sectionnée avec l'avatar du joueur et le nom d'affichage.
