Créer une vue de section personnalisée

La création d'une vue de section personnalisée s'appuie sur la conception du widget de plaque nominative d'un seul joueur pour créer une vue de section. Le widget Zone empilable transforme la vue du joueur de celle d’un joueur solo à celle d’une section en reproduisant le widget d'informations sur le joueur solo à l'aide du modèle d’affichage.

La zone empilable est un conteneur qui organise les copies des widgets du joueur unique de manière linéaire, soit de gauche à droite, soit de haut en bas, de façon à créer un aspect cohérent pour la section.

Dans cet exemple, la vue de section est empilée de haut en bas.

Widget d'informations sur le joueur

Pour utiliser les informations des membres de l'équipe pendant une partie, il faut configurer le widget Player_Info à l'aide du modèle d'affichage Appareil - Modèle d'affichage des informations sur les joueurs sur le contrôleur d'ATH. Ce paramètre crée des widgets distincts pour le joueur en contrôle et son équipe/sa section, en utilisant les propriétés de l'appareil Modèle d'affichage Informations de joueur pour le contrôleur d'ATH pour chaque widget.

Vous pouvez continuer à utiliser les paramètres de configuration des liaisons des tutoriels Dossière et PV et bouclier pour lier les éléments d'informations du joueur nécessaires.

Sans la configuration appropriée pour le widget Player_Info, des messages d'erreur s'affichent dans le compilateur.

Procédez comme suit pour créer un widget empilable Section qui lie les modèles d'affichage Liste des informations de joueur de l'équipe/de la section à l'icône du joueur, au nom du joueur, aux PV et aux boucliers.

Créer un widget utilisateur

1. Suivez les étapes décrites dans la rubrique Les fenêtres contextuelles de l'interface pour créer un widget utilisateur.

2. Nommez le widget utilisateur Squad_View.

   

3. Double-cliquez sur la vignette du widget utilisateur pour ouvrir l'éditeur d'événements dans Unreal Motion Graphics (UMG).

Utilisez l'éditeur de widgets pour planifier et organiser la conception de votre interface utilisateur pour la vue de section. Après avoir choisi une disposition, vous pouvez ajouter des matériaux pour personnaliser l'aspect de votre interface utilisateur.

Vous devez maintenant avoir deux widgets utilisateur dans votre navigateur de contenu : un appelé Player_Info et un autre appelé Squad_View.

Créer la disposition de la section

Il est recommandé d'intégrer un widget Player_Info unique entièrement fonctionnel dans un widget Squad_View en utilisant une zone empilable comme conteneur. Cela permet d'obtenir une conception cohérente en reproduisant la conception du joueur unique à l'intérieur de la zone empilable et en répétant la conception de haut en bas ou de gauche à droite.

Vous allez maintenant ajouter le widget de joueur unique au modèle d'affichage, puis organiser la disposition dans le graphique d'événements via la zone empilable.

Procédez comme suit :

1. Faites glisser une superposition sous Squad_Info et nommez-la Container_Overlay.

2. Redimensionnez Container_Overlay à 2560 x 1440. qui correspond à la taille optimale pour tous les écrans.

   

3. Imbriquez une zone empilable sous Container_Overlay.

4. Dans le panneau Détails, modifiez les paramètres suivants de la zone empilable :

   1. Marge intérieure = 25

   2. Orientation = Verticale

   

   La zone empilable présente une marge intérieure de 25 px à partir du bord de l'écran.

5. Dans la barre de menus principale, sélectionnez Fenêtre > Modèles d'affichage pour ouvrir le panneau Modèle d'affichage.

   

6. Cliquez sur +Modèle d'affichage, puis sélectionnez Appareil - Liste d’informations sur les joueurs de l’équipe/la section sur le contrôleur d'ATH > Sélectionner. Un modèle d'affichage est ainsi créé pour l'appareil Contrôleur d'ATH.

7. Dans le panneau Détails, cliquez sur +Ajouter une extension de modèle d'affichage. Vous obtenez diverses options qui offrent un moyen de générer dynamiquement le widget d'équipe à l'intérieur du widget Squad_View en fonction du nombre de joueurs dans votre équipe/section.

   

   

   Avant +Ajouter une extension de modèle d’affichage

   Après +Ajouter une extension de modèle d’affichage

8. Dans le paramètre Classe de widget d’entrée, sélectionnez votre widget Player_Info dans le menu déroulant et définissez Modèle d’affichage d’entrée sur ATHPlayerInfoListViewModel.

9. Développez l’option Modèle de créneau et ajustez l’espacement entre chaque widget de joueur. Ajoutez ou supprimez des widgets et modifiez l'alignement. Utilisez ces options pour voir à quoi ressembleront les widgets dans le jeu.

   Si vos éléments d'interface sont trop grands pour l'espace disponible, revenez au widget Player_Info et ajustez la taille de vos widgets Image pour qu'ils s'adaptent au widget Squad_View.

Vous allez maintenant ajouter des liaisons pour rendre l'interface utilisateur fonctionnelle pour les sections.

Liaisons de section

Pour lier les informations d'une section au widget Squad_View, vous devez référencer les informations des membres de l'équipe via des liaisons d'affichage. Les liaisons indiquent au widget quelles informations il doit récupérer auprès des appareils liés et pour quel joueur. Les informations relatives à chaque joueur sont ensuite renseignées dans l'interface utilisateur via l'appareil Contrôleur d'ATH.

1. Sélectionnez la zone empilable dans le panneau Hiérarchie, puis ouvrez les liaisons d'affichage et sélectionnez +Ajouter un widget. La zone empilable est ajoutée en tant que widget au panneau Liaisons d'affichage.

2. Sélectionnez Squad_View > Sélectionner dans le menu déroulant Widget. Vous sélectionnez ainsi le widget de section et tous ses widgets internes à des fins de liaison.

   

3. Dans le champ Squad_View sur la gauche, sélectionnez Squad_View > Zone empilable > Modèle d’affichage de zone empilable > Définir les éléments > Sélectionner. 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.

   Si la fonction Définir les éléments ne s'affiche pas à cette étape, compilez le widget et vérifiez à nouveau.

   

   Si **PlayerInfoStack_Viewmodel_Extension** ne figure pas dans la liste, appuyez sur **Compiler**.

4. Dans le champ vide de droite, sélectionnez Squad_View > HUDPlayerInfoListViewModel > Matrice d’informations sur les joueurs de l’équipe/la section > Sélectionner. 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.

   

5. Cliquez sur Compiler. Votre widget est prêt à être ajouté au contrôleur d'ATH.

Ajoutez votre widget au contrôleur d'ATH et testez votre projet.

Configuration du contrôleur d'ATH

Vous devez modifier certains paramètres essentiels du contrôleur d'ATH. Concrètement, vous devez remplacer ces éléments d'ATH Fortnite par défaut par votre propre conception de widget.

1. Faites glisser un contrôleur d'ATH dans votre projet et laissez l’appareil à l’état sélectionné pour renseigner ses paramètres dans le panneau Détails.

2. Dans le panneau Détails, définissez les options suivantes :

   1. Afficher l'ATH = Oui

   2. Remplacement du widget d'informations sur le joueur = Nom de votre widget

3. Cliquez sur l'icône d’enregistrement pour enregistrer vos modifications.

   

4. Sélectionnez Lancer la session pour tester votre interface personnalisée.

   

Faites un test avec deux joueurs ou plus pour vous assurer que la disposition fonctionne et s'adapte correctement à l'île que vous avez créée.