Les widgets utilisateur sont conçus dans l'éditeur de widgets avec les widgets UMG.
Les widgets utilisateur sont similaires aux textures dans la mesure où ils tracent l'itinéraire entre un widget UMG et les fonctions de l'appareil. Vous devez être capable de lire un widget utilisateur pour mieux comprendre la structure d'une interface utilisateur. Dans l'éditeur de widgets, vous pouvez examiner :
la disposition et la conception de l'interface utilisateur ;
les liaisons de widgets dans les liaisons d'affichage.
Dans le modèle d'interface utilisateur, ouvrez le dossier Contrôleur_d_ATH et double-cliquez sur le widget UW_HCD01 pour en savoir plus sur la manière dont ce widget a été créé et est lié à l'appareil Contrôleur d'ATH.
Disposition des widgets
La disposition des widgets correspond à la phase de conception lors de la création d'une interface utilisateur personnalisée. Dans l'éditeur de widgets, vous pouvez utiliser les widgets UMG du panneau Palette pour créer l'apparence et planifier les fonctionnalités de votre interface utilisateur. L'ordre dans lequel vous utilisez les widgets UMG détermine l'apparence de l'interface utilisateur.
Pour en savoir plus sur les fonctionnalités des widgets UMG, consultez la section Palette du document Éditeur de widgets.
Une fois le widget UW_HCD01 ouvert, observez le panneau Hiérarchie. Le panneau Hiérarchie vous indique quels widgets UMG ont été utilisés et l'ordre dans lequel ils ont été ajoutés au hublot.
Vous pouvez renommer les widgets UMG dans le panneau Hiérarchie après les avoir ajoutés au hublot.
Toutes les conceptions de widgets doivent avoir un widget racine qui fait office d'écran. Un widget de superposition nommé Racine se trouve à la racine de la conception et fait office d'écran. Le hublot est défini sur Remplir l'écran afin que la conception remplisse la zone désignée par le widget racine.
Un panneau de grille est utilisé pour héberger la conception des barres de PV et de bouclier. Les panneaux de grille sont des grilles flexibles qui organisent leurs widgets enfants en lignes et en colonnes.
Vous pouvez personnaliser davantage les lignes et les colonnes, car le panneau de grille ajoute des options à ses widgets enfants qui contrôlent le nombre de lignes et de colonnes, l'espace occupé par les lignes et les colonnes, la couche que le widget occupe dans la conception et une option de mouvement spéciale appelée Déplacement.
L'option Déplacement permet de déplacer le widget enfant sur les axes X et Y sans prendre de place. Autrement dit, seuls les éléments à l'intérieur du conteneur sont décalés, mais le conteneur conserve sa position et l'espace qu'il occupe dans la disposition.
Le widget de superposition, nommé ShieldBarContainer, est le premier widget enfant du panneau de grille. Ce widget se trouve sur la ligne 1, colonne 0 et s'affiche sur un intervalle de ligne 1, intervalle de colonne 0. Les widgets ShieldBarContainer s'affichent sur la couche 1.
Autrement dit, tous les widgets enfants de ShieldContainer s'affichent à l'avant de la conception, car ils sont placés sur la couche 1, mais se trouvent à droite des widgets derrière elle, car ils se trouvent sur la ligne 1. La barre de bouclier s'étend sur 2 lignes (0 et 1), ce qui détermine la longueur de la barre de bouclier.
À l'aide de l'option Déplacement > Y, vous pouvez déplacer le widget ShieldBarContainer de -25,0 unités Slate vers le bas à partir de sa position par défaut afin qu'il recouvre légèrement le conteneur de PV derrière lui.
Le widget de superposition nommé HealthBarContainer est le deuxième widget enfant du panneau de grille. Ce widget se trouve sur la ligne 1, colonne 0 et s'affiche sur un intervalle de ligne 1, intervalle de colonne 0. Les widgets HealthBarContainer s'affichent sur la couche 0.
Ainsi, tous les widgets enfants de HealthBarContainer s'affichent à l'arrière de la conception, car ils se trouvent sur la couche 0. Étant donné que la barre de PV se trouve sur la ligne 0, elle apparaît à gauche de la barre de bouclier. HealthBarContainer s'étend également sur les lignes 0 et 1, ce qui détermine la longueur de la barre de PV.
Vous trouverez ci-dessous la décomposition des widgets UMG qui constituent les barres de bouclier et de PV, ainsi que leur fonction dans la conception globale.
ShieldBarContainer
ShieldBarContainer héberge tous les widgets UMG qui composent la conception de la barre de bouclier. La barre de bouclier comporte les éléments suivants :
| Widget UMG | Nom du widget | Objectif |
|---|---|---|
Image | ShieldBar_backing | Utilisé comme conteneur pour entourer l'ensemble de la conception de la barre de bouclier. Il s'agit d'une instance de matériau nommée MI_HCD01_Backplate. |
Zone empilable | ShieldContent | Organise ses widgets enfants (icône de barre de bouclier et matériau de barre de bouclier) de gauche à droite à l'intérieur du matériau ShieldBar_Backing et de ShieldBarContainer. |
Image | ShieldIcon | Matériau de l'icône de bouclier utilisé comme couche avant. |
Altitude | ShieldBarContainer | Utilisé pour superposer ses widgets enfants dans la deuxième colonne de la zone empilable ShieldContent. Ces widgets constituent le matériau de la barre de bouclier. |
Image | ShieldBarStroke | Utilisé comme conteneur pour entourer la barre de bouclier. Il s'agit d'une instance de matériau nommée MI_HCD01_BarStroke. |
Image | ShieldBar | Le matériau M_ProgressBar_Basic est un matériau bicolore dynamique qui utilise une fonction de matériau pour se déplacer vers la gauche et la droite sur la barre de bouclier, en fonction des informations que le widget reçoit de l'appareil Contrôleur d'ATH. |
HealthBarContainer
HealthContainer héberge tous les widgets UMG qui composent la conception de la barre de PV. La barre de PV comporte les éléments suivants :
| Widget UMG | Nom du widget | Objectif |
|---|---|---|
Zone empilable | Contenu des PV | Organise ses widgets enfants (conception de l'icône de la barre de PV et matériau de la barre de PV) de gauche à droite à l'intérieur de HealthContainer. Cette zone empilable s'étend autour du widget de superposition ShieldContainer et centre la barre de bouclier dans la conception globale de l'interface utilisateur. Cela est dû au fait que la dimension de l'axe X de la zone empilable HealthContent est supérieure à la celle de la zone empilable ShieldContent. |
Image | HPIcon | Matériau de l'icône de PV utilisé comme couche avant. |
Altitude | HPBarContainer | Utilisé pour superposer ses widgets enfants dans la deuxième colonne de la zone empilable HealthContent. Ces widgets constituent le matériau de la barre de PV. |
Image | HPBarStroke | Utilisé comme conteneur pour entourer la barre de PV. Il s'agit d'une instance de matériau nommée MI_HCD01_BarStroke. |
Image | HPBar | Matériau bicolore dynamique qui utilise des fonctions de matériau pour se déplacer vers la gauche et la droite sur la barre de PV, en fonction des informations que le widget reçoit de l'appareil Contrôleur d'ATH. |
Dans l'étape suivante, vous apprendrez à sélectionner un modèle d'affichage pour mettre à jour les matériaux de l'interface utilisateur afin d'afficher l'état des PV et du bouclier actuel du joueur dans le jeu.
Modèle d'affichage
Un modèle d'affichage contrôle les informations de joueur via une liste de fonctions. Ces fonctions permettent de contrôler les informations de joueur via le widget UMG et la fonctionnalité de l'appareil. Les modèles d'affichage constituent un moyen spécifique de lier les widgets UMG aux appareils du mode Créatif.
Les modèles d'affichage écoutent les fonctions exécutées sur l'appareil à l'aide du widget Utilisateur pour remplacer l'interface utilisateur par défaut. Le modèle d'affichage utilise ensuite les fonctions de l'appareil pour mettre à jour l'interface utilisateur via les liaisons d'affichage.
Par exemple, les modèles d'affichage de la barre Bouclier et PV écoutent les fonctions Bouclier et PV du contrôleur d'ATH. Lorsque la fonction du contrôleur d'ATH s'exécute sur le bouclier et les PV du joueur, le modèle d'affichage écoute ces fonctions et transmet les informations via les liaisons d'affichage pour mettre à jour l'interface utilisateur.
Différents modes d'affichage sont disponibles. Dans la liste des modèles d'affichage ci-dessous, notez qu'il existe des modèles d'affichage propres à chaque appareil. Ceux-ci contiennent les fonctions spécifiques de cet appareil.
Les modèles d'affichage suivants contrôlent plusieurs parties de l'interface utilisateur via les fonctions de l'appareil dans les listes de fonctions.
L'appareil Contrôleur d'ATH/Liste d'informations de joueur d'équipe/de section est utilisé avec le widget UW_HCD01. Il utilise les informations du contrôleur d'ATH pour intégrer vos informations à partir du contrôleur d'ATH, car ce modèle est destiné à être joué par un seul joueur : vous !
Pour cet exemple d'interface utilisateur, vos PV et votre bouclier sont contrôlés via ce modèle d'affichage en écoutant les fonctions du contrôleur d'ATH.
Vous allez maintenant apprendre à lier les matériaux PV et Bouclier à la fonctionnalité Contrôleur d'ATH dans les liaisons d'affichage.
Liaisons d'affichage
Les liaisons d'affichage mappent la fonctionnalité du widget UMG sur les fonctions de l'appareil lié et mettent à jour l'interface utilisateur dans l'ATH. Dans le widget UW_HCD01, les matériaux ShieldBar et HPBar sont liés aux fonctions Bouclier et PV du contrôleur d'ATH. Ces fonctions surveillent votre bouclier et vos PV dans le jeu et mettent à jour le matériau de la barre en fonction de la quantité de bouclier et de PV dont vous disposez.
Pour rendre l'interface utilisateur du bouclier et des PV fonctionnelle, commencez par sélectionner un widget UMG et à lier les propriétés du widget à une fonction spécifique de l'appareil. Les liaisons doivent être créées dans le panneau Liaisons d'affichage.
Ajouter un widget UMG
Les widgets d'image (ShieldBar et HPBar) sont d'abord sélectionnés dans le panneau Hiérarchie, puis dans le panneau Liaisons d'affichage. Vous pouvez cliquer sur le bouton +Ajouter un widget pour ouvrir la liste des fonctions du modèle d'affichage. Une fonction est ajoutée au widget pour contrôler les informations de propriété du widget. Dans ce cas, c'est la fonction Pinceau qui permet de contrôler les matériaux ShieldBar et HPBar.
Ajouter une liaison d'appareil
Après avoir déterminé le widget à lier, le type de liaison d'appareil est sélectionné. Notez le champ vide en regard du champ du widget. Cliquez dans ce champ vide pour ouvrir une liste de liaisons d'appareil disponibles. Les options de liaisons l'appareil apparaissent automatiquement sous les champs de liaison du widget et de l'appareil. Ces options déterminent le mode de mise à jour du widget en fonction des informations qu'il reçoit de l'appareil.
Le widget UW_HCD01 utilise un paramètre scalaire défini pour mettre à jour les propriétés du pinceau.
Liaisons d'affichage
| Propriété de pinceau ShieldBar | Propriété de pinceau HealthBar |
|---|---|
 |  |
Panneau Détails
| Matériau du widget ShieldBar | Matériau du widget HealthBar |
|---|---|
 |  |
Dans le widget UW_HCD01, les propriétés de pinceau des widgets image (ShieldBar et HPBar) possèdent des matériaux dynamiques (situés dans le panneau Détails).
Définir les paramètres de l'appareil
Pour que le matériau reflète l'état actuel du bouclier et des PV du joueur, vous devez définir certains paramètres des liaisons d'appareil afin d'envoyer les informations de l'appareil aux widgets UMG.
Dans cet exemple, le widget image et sa fonction Pinceau sont automatiquement ajoutés au paramètre Pinceau du contrôleur d'ATH. Cette liaison détermine la propriété Pinceau du widget image à mettre à jour.
Ensuite, le nom du paramètre spécifie le paramètre à mettre à jour dans le matériau Pinceau. Dans ce cas, le nom est Progression.
Enfin, la valeur de la liaison est déterminée par le modèle d'affichage. Dans le champ Valeur de la liaison, les fonctions HUDPlayerInfoListViewmodel > Contrôle des informations de joueur > Bouclier et PV sont définies.
La fonctionnalité du contrôleur d'ATH met désormais à jour la propriété Pinceau dans le widget image via la fonction de conversion de Paramètre scalaire en examinant la propriété Progression et en lui transmettant la valeur PV et Bouclier.
« Progression » est la valeur qui déplace la barre d'avant en arrière entre les valeurs Début de la progression et Fin de la progression. En d'autres termes, la valeur Progression est comprise entre 0 et 1.
| Groupes de paramètres du matériau ShieldBar | Groupes de paramètres du matériau HealthBar |
|---|---|
 |  |
Si vous démarrez le jeu avec un taux de PV et de bouclier maximum, les dégâts entraînent le déplacement de la barre vers la gauche en fonction des propriétés Progression et Normaliser la progression. Ces propriétés déterminent le degré de déplacement du matériau vers la gauche lorsque le joueur subit des dégâts.
Sur la barre, le matériau se déplace vers la droite lorsque les PV et le bouclier sont restaurés au même rythme qu'ils se détériorent à l'aide des propriétés Progression et Normaliser la progression.
Ouvrez d'autres widgets utilisateur et déterminez si vous pouvez les lire et comprendre l'ordre dans lequel les widgets UMG ont été ajoutés à la hiérarchie, le type de modèle d'affichage sélectionné pour le widget utilisateur ainsi que la manière dont les paramètres du widget UMG et les fonctions de l'appareil sont liés dans les liaisons d'affichage.
Modèle d'affichage Objet équipé
Vous pouvez utiliser ce modèle d'affichage avec l'appareil Contrôleur d'ATH pour suivre les statistiques d'un objet équipé à l'aide de l'emplacement de widget Remplacement de module des infos de l'objet équipé. Tous les exemples d'interface utilisateur utilisent le fusil d'assaut WID_Assault_AutoHigh_Athena_C_Ore_T03 comme objet équipé.
Ouvrez le dossier Appareils > Contrôleur_d_ATH > Widgets, puis double-cliquez sur le widget UW_HCD03_SelectedItem. À partir de ce modèle d'affichage, vous pouvez suivre un certain nombre d'informations et de statistiques sur les armes dans l'interface utilisateur :
Icône d'objet
Nom de l'objet
Icône de munitions
Nombre de munitions
Surplus de munitions
Est une arme de type chargeur
