Les dossières affichent différents types d'informations, telles que l'image de l'avatar du joueur, la balise du joueur, les PV, les boucliers, etc., sur l'ATH.
Les dossières remplissent un certain nombre de fonctions, allant de l'aide à l'identification des coéquipiers dans les jeux multijoueurs en coopération à l'identification des faibles statistiques de PV et de bouclier.
Dans l'Unreal Editor pour Fortnite (UEFN), les dossières sont réalisées à l'aide de
Cependant, les textures peuvent être gourmandes en mémoire. Elles peuvent donc rapidement empiéter sur votre budget mémoire et réduire les performances de votre île. Les textures et les nœuds Texture Sample de votre matériau occupent une grande quantité de mémoire.
Les matériaux sont particulièrement adaptés à la création de designs plats et permettent d’ajouter des effets animés à la dossière. Les matériaux sont moins gourmands en mémoire, car ils s'appuient sur le GPU pour exécuter des calculs algébriques simples. Cela vous permet ainsi d'exécuter diverses tâches, notamment créer des formes simples ou animer des interactions complexes dans un matériau.
 |  |
Interface en flat design avec matériaux | Conception d'interface avec textures |
Lorsque vous choisissez d'utiliser des textures, assurez-vous de les utiliser avec parcimonie — il est recommandé d'éviter toutes les textures d’interface de plus de 256 x 256 px.
Les matériaux sont moins gourmands en mémoire, car ils utilisent le GPU pour le rendu.
La méthode que vous choisissez pour vos plaques d'avatar dépend d'un certain nombre de facteurs :
Préférences personnelles pour la conception de l'interface.
Style et design d’interface utilisateur en accord avec le type d’expérience proposée sur votre île.
Quantité de mémoire que vous souhaitez économiser
La conception des dossières d'avatar dans ce tutoriel utilise trois instances de matériau pour la conception de base. Les conceptions de dossière suivantes ont été créées à l'aide du matériau M_UI_Shape_Rectangle pour inclure :
Un Arrière-plan rose translucide
Un conteneur rose qui entoure le texte du nom et l’arrière-plan translucide
Un cercle aqua qui contiendra l’avatar du joueur.
Créez votre propre interface utilisateur avec des matériaux ! Voir la rubrique Créer une interface utilisateur personnalisée avec des instances de matériau.
Configurer un widget personnalisé
Utilisez le flux de travail du widget utilisateur du document Fenêtres contextuelles de l'interface pour :
Créer un widget utilisateur.
Renommez la vignette en Player_Info.
Double-cliquez sur la vignette pour ouvrir l'éditeur de widgets UMG.
L'éditeur de widgets permet de définir l’apparence et le positionnement à l’écran de votre dossière. Vous y ajouterez ensuite un modèle d'affichage pour créer une fonctionnalité de liaison afin de capturer les informations existantes sur les joueurs et de les lier à la conception des dossières.
Dans le graphique d’événement :
Sélectionnez le paramètre Remplir l'écran dans le coin supérieur droit et définissez-le plutôt sur Personnalisé.
Ce paramètre vous permet de modifier vos widgets à une taille spécifiée de manière à ce que votre interface utilisateur soit homogène pendant le jeu.
Pour concevoir l'interface utilisateur de votre ATH personnalisé, commencez par ajouter des panneaux au graphique d'événements.
Dans le panneau Palette, accédez à la section Panneau et faites glisser un panneau Zone de dessin dans le panneau Événement ou directement dans le panneau Hiérarchie. Renommez ensuite le panneau HUD_Canvas.
Le panneau Zone de dessin permet d’ancrer différents éléments d’interface à des emplacements spécifiques à l’écran. Veillez à disposer d’un plan de conception d’interface avant d’ajouter d’autres panneaux à la zone de dessin afin que votre disposition visuelle soit bien reflétée dans le panneau Zone de dessin.
Utilisez le panneau Zone de dessin uniquement lorsque vous devez utiliser des éléments d'interface spécifiques dans le cadre de votre conception. Par exemple, utilisez ce panneau si vous créez un ATH et devez disposer différents widgets enfants à des emplacements spécifiques sur l'écran.
Au lieu de modifier le paramètre Remplir l'écran sur Personnalisé, vous pouvez redimensionner le panneau Zone de dessin sur 1920 x 1080 ou 2560 x 1440, qui sont les proportions d'écran les plus courantes (16:9).
Dans la section Panneau du panneau Palette, imbriquez une zone empilable sous HUD_Canvas dans le panneau Hiérarchie et renommez-la Backplate_StackBox. Il s'agit du conteneur de l'interface utilisateur de la plaque, qui imbriquera les widgets qui composent vos variables d'interface utilisateur.
À mesure que vous ajoutez des variables à la zone empilable, elles s’empilent automatiquement de gauche à droite dans le panneau.
Vous pouvez également utiliser la zone empilable pour empiler vos éléments d'interface de haut en bas.
Dans la section Commun du panneau Palette, imbriquez une image sous Backplate_StackBox et la Hiérarchie. Renommez ensuite l'image Avatar_Image, qui contiendra la bordure de l'avatar.
Dans la section Panneau du panneau Palette, imbriquez une superposition sous Backplate_StackBox et renommez-la Nameplate_Overlay. La fonctionnalité Superposition permet de superposer des widgets les uns sur les autres.
Depuis le panneau Palette, faites glisser et imbriquez deux images sous Nameplate_Overlay.
Renommez les images d'après les matériaux, c'est-à-dire Arrière-plan et Bordure.
Faites glisser et imbriquez un panneau Zone de dimensionnement sous Nameplate_Overlay.
Utilisez la zone de dimensionnement pour définir les propriétés de ses enfants imbriqués. Cela empêche tous les éléments à l'intérieur de la zone de dimensionnement de déborder et de recouvrir d'autres éléments d'interface ou du jeu.
Faites glisser et imbriquez une superposition sous la zone de dimensionnement et renommez-la Text_Overlay.
Sans superposition, il n’est possible de placer qu'un seul widget sous la zone de dimensionnement.
Dans la section Commun du panneau Palette, faites glisser et imbriquez deux blocs de texte sous Text_Overlay. Renommez les blocs de texte Actif et Inactif.
La disposition de l'interface utilisateur est terminée. Vous devez ensuite définir les propriétés du widget pour que la taille des éléments de l'interface utilisateur de la plaque soit relative à la taille de l'écran.
Définir les propriétés du widget
Un panneau conteneur ajuste automatiquement sa taille au plus grand widget qu'il contient. Le panneau parent doit contenir tous ses enfants avant de commencer à modifier ses propriétés. Dans le cas contraire, les proportions de l’élément parent pourraient changer à mesure que des éléments d’interface enfants sont ajoutés à l’onglet Hiérarchie.
Commencez par définir les propriétés du panneau Backplate_StackBox pour décider du placement à l'écran et des limites de la dossière.
Les propriétés suivantes ont été modifiées pour la conception de cette plaque :
Cliquez sur l'image pour l'agrandir.
| Paramètre | Value |
|---|---|
Ancres | Coin inférieur gauche |
Alignement | Doit être défini sur une paire de coordonnées qui fournissent une marge intérieure pour votre widget à partir des arêtes de l'écran. |
Taille par rapport au contenu | True |
Orientation | Horizontal (Tous les widgets enfants s'afficheront de gauche à droite.) |
Distordre X | -20,0 (incline la zone de dimensionnement négativement vers la droite.) |
Maintenez les touches Maj + Ctrl enfoncées et cliquez sur le coin inférieur gauche pour mettre à jour automatiquement la position et l'alignement de votre widget.
Les éléments de disposition de base de la plaque sont en place. Vous pouvez maintenant ajouter les matériaux que vous avez créés et modifier la plaque de nom Blocs de texte.
Ajouter et modifier les ressources de dossière
L'éditeur de widgets dispose de paramètres pour les widgets sélectionnés, permettant d’ajouter des matériaux et du texte, ainsi que de modifier les propriétés de la ressource utilisée dans le paramètre Pinceau.
Il est important de noter l'ordre d'agencement du matériau dans le panneau Hiérarchie. Lorsque vous ajoutez vos ressources, assurez-vous qu'elles s'affichent correctement. Les ressources d'arrière-plan doivent être superposées en bas et les ressources supplémentaires superposées en haut.
Modifier les instances de matériau
Sélectionnez vos widgets dans le panneau Hiérarchie pour commencer à ajouter vos matériaux et votre texte.
Sélectionnez Image d'avatar sous la zone de dimensionnement pour mettre en surbrillance le widget et ouvrir ses propriétés dans le panneau Détails.
Dans le panneau Détails, ajoutez le matériau de bordure de l’avatar au paramètre Pinceau. Ajustez les paramètres Taille de l'image pour adapter le widget Image au matériau.
Cliquez sur l'image pour l'agrandir.
Les matériaux se comportent comme la peinture. Lorsque vous ajoutez un matériau au paramètre Pinceau, le matériau remplit l'espace du widget d'image.
Si vous disposez d'avatars spécifiques pour votre expérience, procédez comme suit :
* Créez une superposition pour placer une image d'avatar sous un matériau de bordure.
* Ajoutez vos images d'avatar importées à une couche d'arrière-plan Image.
* Utilisez le matériau de bordure sur la couche supérieure.
Sélectionnez l'image d'arrière-plan dans le panneau Hiérarchie pour ouvrir les options de superposition dans le panneau Détails.
Dans le panneau Détails, définissez les paramètres Alignement horizontal et Alignement vertical sur Alignement central et ajoutez le matériau d'arrière-plan au paramètre Pinceau. Ajustez les paramètres Taille de l'image pour adapter le widget Image à la couleur du matériau d’arrière-plan.
Cliquez sur l'image pour l'agrandir.
Sélectionnez Image de bordure sous Nameplate_Overlay pour mettre en surbrillance le widget et ouvrir ses propriétés dans le panneau Détails.
Dans le panneau Détails, définissez les paramètres Alignement horizontal et Alignement vertical sur Alignement central et ajoutez le matériau de bordure au paramètre Pinceau. Ajustez les paramètres Taille de l'image pour placer la bordure autour de la couleur d'arrière-plan.
Cliquez sur l'image pour l'agrandir.
La dossière prend un aspect basique et vous êtes maintenant prêt à modifier les blocs de texte.
Modifier la plaque de nom
La plaque nominative affiche les balises de gamer du joueur. La dossière conçue ci-dessus contient à la fois une zone de dimensionnement et des blocs de texte.
En modifiant les propriétés de la zone de dimensionnement, vous pouvez empêcher le texte de s'étendre au-delà de sa limite dans d'autres éléments d'interface ou d'obstruer la vue du joueur.
Sélectionnez la zone de dimensionnement dans la hiérarchie pour ouvrir ses propriétés dans le panneau Détails.
Dans le panneau Détails, définissez les paramètres Alignement horizontal et Alignement vertical sur Alignement central. Cette option centre automatiquement les blocs de texte dans les images de plaque de nom. Définissez les options de remplacement de la largeur et de la hauteur de la zone de dimensionnement sur True, puis définissez la taille souhaitée de Nameplate_Overlay.
La zone verte affiche la bordure de la zone de dimensionnement.
Cliquez sur l'image pour l'agrandir.
Dans le panneau Hiérarchie, faites un clic droit sur la zone de dimensionnement et sélectionnez Encapsuler avec… > Zone de dimensionnement pour les blocs de texte afin d’encapsuler le texte du joueur en fonction des propriétés de la zone de dimensionnement.
La configuration de base de l'interface utilisateur de la plaque nominative est terminée. Tous les éléments enfants adoptent les propriétés de leur parent ; les modifications que vous devez effectuer sur ces widgets sont donc minimes.
Dans le panneau Détails, vous modifierez les blocs de texte actifs et inactifs en définissant l'alignement et la taille de la police, la couleur, le trait et de nombreux autres paramètres.
Assurez-vous que la couleur du texte actif est différente de celle du texte inactif. Dans cet exemple, la police du bloc de texte actif présente les propriétés suivantes : taille de 145, couleur blanche, trait de 6 ; la police du bloc de texte inactif présente les propriétés suivantes : taille de 145, couleur gris-ardoise et trait de 6.
Définissez le paramètre Visibilité de la zone de texte inactive sur Masqué. Ce paramètre empêche le texte de s'afficher jusqu'à ce que la liaison au widget soit déclenchée dans le jeu.
Toutes les pièces sont assemblées, à savoir la plaque nominative et la plaque d'avatar.
Ajouter l'onglet Liaisons d'affichage
Maintenant que la conception de l’interface est terminée, il est temps d’ajouter des liaisons aux zones de texte et à Avatar_Image en fonction des données qu’ils doivent recevoir pendant une session en direct.
Le modèle d'affichage des informations du joueur sur le contrôleur d’ATH permet de remplacer des parties de votre ATH par un widget personnalisé. Pour pouvoir utiliser ce paramètre, vous devez créer un modèle d'affichage de votre plaque.
Texte du 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 HUDPlayerInfoViewModelBase des liaisons d’affichage :
1. Ouvrez la fenêtre Modèles d'affichage en sélectionnant Fenêtre > Modèles d'affichage.
1. Accédez à +Modèle d’affichage et sélectionnez Modèle d’affichage de base des informations du joueur/de l’équipe sur le contrôleur d'ATH.
La liste d'informations sur les joueurs de la section/l’équipe sur le contrôleur d’ATH permet d'afficher les informations du joueur contrôlé sans celles de son équipe ou de sa section.
1. Cliquez sur Sélectionner.
Sélectionnez le Bloc de texte dans la liste Hiérarchie ou cliquez sur la zone Nom du joueur de l'écran Prévisualisation de l’interface.
Dans l’onglet Liaisons d’affichage, cliquez sur + Ajouter le widget Active_Name.
Sélectionnez le champ "PlayerName" actif, puis sélectionnez Texte > Sélectionner.
Dans le champ vide de droite, sélectionnez HUDPlayerInfoViewModel > Informations du joueur contrôlé > Nom du joueur > Sélectionner dans le menu déroulant.
La liaison finale devrait ressembler à ceci :
Répétez les étapes 2 et 3 pour l'élément Inactive_Name.
Pour modifier les paramètres de visibilité du nom inactif, ajoutez un nouveau widget à Inactive_Name. Sélectionnez le premier champ, puis sélectionnez Visibilité > Sélectionner dans le menu déroulant.
Cliquez sur le champ vide de droite, puis sélectionnez Fonctions de conversion > Visibilité (booléen) > Sélectionner.
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 > Informations du joueur contrôlé > Est éliminé > Sélectionner.
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 Active_Name, mais lorsque le joueur est en vie, il reste réduit.
La liaison finale Inactive_Name devrait ressembler à ceci :
Cliquez sur l'image pour l'agrandir.
Cliquez sur Compiler pour envoyer les modifications. Les noms des joueurs sont maintenant définis !
Icône d'avatar du joueur
Choisissez Avatar_Image dans Hiérarchie ou cliquez sur la zone de l'icône du joueur dans l'écran de prévisualisation d’interface.
Cliquez sur + Ajouter le widget Profile_Image.
Accédez à Avatar_Image > Pinceau, puis appuyez sur Sélectionner. Cette liaison examine essentiellement le paramètre Pinceau sélectionné dans le panneau Détails de Avatar_Image.
Cliquez dans le champ vide de droite, puis sélectionnez Fonctions de conversion > Créer un pinceau d'image à partir d’un matériau > Sélectionner.
Définissez les champs vides Taille de l'image sur la taille du matériau de bordure de votre icône dans le widget. Dans cet exemple, le matériau de bordure est de X=50 et Y=45.
La liaison finalisée devrait ressembler à ceci :
Cliquez sur l'image pour l'agrandir.
Cliquez sur Compiler pour enregistrer votre widget.
Vous glisserez ensuite un contrôleur d’ATH dans votre projet et ajouterez votre widget UMG à l’appareil dans le champ Remplacement du widget d’informations sur le joueur.
Testez l'apparence de la plaque nominative d'avatar personnalisée. Elle doit être similaire à l'image suivante.
Cliquez sur l'image pour l'agrandir.
