Le matériau Jauge est parfaitement adapté à une utilisation dans l'interface utilisateur. Vous pouvez référencer ce matériau dans un widget d'image UMG pour suivre vos PV, vos éliminations ou votre collection d'objets et de devises dans le jeu. Suivez ce tutoriel pour créer votre propre matériau de jauge et l'utiliser dans une conception d'IU personnalisée.
Ce matériau permet de remplacer l'apparence par défaut de Fortnite par le matériau personnalisé que vous créez pour suivre les PV et les boucliers du joueur, ou d'autres types de statistiques relatives au joueur.
Ce matériau utilise des icônes. L'Unreal Editor pour Fortnite (UEFN) est livré nativement avec de nombreuses icônes. Les icônes se trouvent dans les dossiers Fortnite Textures > Icônes.
Créer un matériau
Tous les matériaux sont créés dans le navigateur de contenu. Pour organiser votre projet, créez un dossier pour héberger tous vos matériaux.
Faites un clic droit dans le navigateur de contenu pour ouvrir le menu contextuel.
Sélectionnez Matériau dans le menu contextuel.
Nommez votre matériau M_Meter.
Double-cliquez sur la vignette du matériau pour ouvrir l'éditeur de matériau.
Pour créer le matériau de jauge, vous devez télécharger le pack UI Material Lab depuis Fab.
Pour en savoir plus sur les nœuds de matériau et leur fonctionnement, consultez la rubrique Nœuds et paramètres de matériau.
Nœuds de matériau
Voici une liste des nœuds de matériau utilisés dans ce tutoriel et leur objectif dans le produit final. Pour ignorer cette explication et commencer à créer le matériau, cliquez ici.
| Nœud de matériau | Objectif |
|---|---|
Ajoute une couleur à l'icône et au remplissage de progression. | |
Permet d'ajouter un masque d'arrière-plan sous l'icône. Également utilisé comme barre de progression pour masquer l'arrière-plan en fonction de la progression. | |
Permet d'ajouter une texture au matériau de l'interface utilisateur. | |
Permet de superposer l'icône colorée sur une couleur d'arrière-plan, et de créer le masque de l'icône sur l'arrière-plan. | |
Génère les coordonnées de texture UV de l'icône sous la forme d'une valeur vectorielle à deux canaux. | |
Material Function > UI Scale | Les fonctions de texture sont une sous-catégorie du nœud Material Function. Ce nœud fournit un moyen de mettre à l'échelle les UV de l'icône. |
Material Function > UI SDF Circle | Permet de masquer la barre de progression derrière l'icône et de déterminer la quantité de remplissage du cercle avec la couleur d'arrière-plan. En règle générale, cette fonction de matériau est utilisée pour dessiner un cercle dans le matériau. Il est possible de la remplacer par d'autres fonctions de matériau SDF Shape (par exemple, UI SDF Box) de UI Material Lab pour générer une forme différente. |
Permet de changer l'échelle des axes X et Y de l'icône de manière uniforme, où 2 paramètres scalaires sont ajoutés. 1 pour la mise à l'échelle du l'axe X de l'icône et un autre pour l'axe Y de l'icône ; reliez-les à MF_UI_Scale. | |
Les UV de l'icône sont limités entre 0 et 1 pour éviter tout effet d'enveloppe ou de mosaïque sur l'icône. | |
Permet de créer une plage de 0 à 10 pour le paramètre scalaire Progression sur l'appareil Traqueur. ConstantBiasScale prend la valeur définie du paramètre et déduit la valeur de biais, puis la multiplie par la valeur d'échelle. | |
Un nœud Multiply prend deux entrées et les multiplie, puis renvoie le résultat. Dans cet exemple, les canaux RVB d'une texture sont multipliés par un nœud Vector3 pour coloriser l'arrière-plan. De plus, LinearGradient est multiplié par un Vector3 pour coloriser l'icône. | |
Step | Crée un seuil pour les coordonnées X et Y. Le seuil crée un conteneur pour le matériau d'arrière-plan dans l'interface utilisateur. Les nœuds Step convertissent les valeurs supérieures à un seuil en 1 et celles inférieures au seuil en 0. Cela génère le masque d'une barre de progression où il existe une séparation claire entre une zone remplie et une zone vide. |
Prend les valeurs UGradient du dégradé linéaire et les arrondit à l'entier suivant, puis renvoie le résultat. Cela vous permet de créer facilement un arrière-plan uni de base. | |
Constant | Permet d'ajouter une valeur à un attribut de matériau. |
Préparer le nœud Main Material
Avant d'ajouter des nœuds de matériau, préparez le matériau à utiliser dans l'interface utilisateur en modifiant les paramètres sur le nœud Main Material (MMN). Les paramètres du MMN déterminent les entrées disponibles sur le MMN et les emplacements où il est possible d'utiliser le matériau.
Sélectionnez le nœud MMN.
Dans le panneau Détails de l'éditeur de matériau, définissez le paramètre Domaine de matériau sur Interface utilisateur.
Définissez le paramètre Mode de fusion sur Translucide.
Cliquez sur l'image pour l'agrandir.
Définir la couleur de progression
Commencez le matériau de jauge en configurant la couleur de progression, que vous pouvez identifier dans UMG via le widget Image. Vous pouvez utiliser cette couleur de progression pour créer une conception d'interface utilisateur personnalisée.
Faites un clic droit dans le graphique de matériau pour ouvrir le menu Nœud.
Saisissez Linear Gradient dans la barre de recherche. Sélectionnez LinearGradient dans la liste déroulante. Le nœud apparaît sur le graphique.
Répétez les étapes 1 et 2 pour ajouter les nœuds suivants au graphique de matériau :
Ceil
Multiply
Constant3vector
Faites glisser la broche blanche du nœud Constant3Vector et reliez-la à l'entrée A du nœud Multiply. La forme dans le hublot change de couleur.
Sélectionnez le nœud de matériau Constant3Vector dans le graphique de matériau. Le nœud est mis en surbrillance dans le graphique pour indiquer que vous l'avez sélectionné.
Cliquez sur le carré noir sur le nœud pour ouvrir le sélecteur de couleurs. Sélectionnez une couleur pour le matériau dans le sélecteur de couleurs.
Faites glisser la broche UGradient sur le nœud Linear Gradient et reliez-la à l'entrée gauche du nœud Ceil.
Faites glisser la broche droite du nœud Ceil et reliez-la à l'entrée B du nœud Multiply.
Cette configuration de nœud fournit la couleur du conteneur d'interface utilisateur.
Faites un clic droit dans la zone du graphique et ajoutez un nœud LinearInterpolate au graphique.
Faites glisser le nœud Multiply et reliez-le à l'entrée A du premier nœud LinearInterpolate.
Cette partie du matériau permet de suivre la progression d'une jauge en remplissant l'arrière-plan d'un conteneur.
Pour regrouper des nœuds et les déplacer en tant qu'unité, procédez comme suit :
Faites un clic gauche sur un groupe de nœuds et faites-le glisser. Tous les nœuds sélectionnés sont mis en surbrillance.
Saisissez un nœud et faites-le glisser sur le graphique ; tous les nœuds sélectionnés se déplacent ensemble.
Configurer le changement d'échelle et la couleur des icônes
Pour cette section du matériau, vous allez choisir une icône et changer son échelle, puis sélectionner une couleur pour l'icône dans le matériau et dans l'interface utilisateur. Les icônes se trouvent dans les dossiers Fortnite > Textures > Icônes.
Faites un clic droit dans la zone du graphique et ajoutez les nœuds suivants au graphique :
TextureCoordinate
AppendVector
Fixer
TextureSample
Constant3vector
Multiply
Constant
Sélectionnez le nœud Constant dans le graphique, puis faites un clic droit et sélectionnez Dupliquer dans la liste déroulante. Un autre nœud Constant apparaît sur le premier. Placez le nœud en double sous l'original.
Dupliquez le nœud Multiply.
Dupliquez le nœud LinearInterpolate (Lerp).
Sélectionnez le nœud supérieur Constant dans le graphique et ajoutez une valeur par défaut de 0,7.
Faites un clic droit sur le nœud et sélectionnez Convertir en paramètre dans la liste déroulante. Nommez le paramètre IconScaleX. Ce nœud contrôle la taille de l'échelle pour les coordonnées X de l'icône.
Sélectionnez le nœud Constant inférieur dans le graphique et ajoutez une valeur par défaut de 0,7.
Faites un clic droit sur le nœud et sélectionnez Convertir en paramètre dans la liste déroulante. Nommez le paramètre IconScaleY. Ce nœud contrôle la taille de l'échelle pour les coordonnées Y de l'icône.
Faites glisser le nœud de paramètre IconScaleX et reliez-le à l'entrée A du nœud AppendVector.
Faites glisser le nœud de paramètre IconScaleY et reliez-le à l'entrée B du nœud AppendVector.
Il est possible de contrôler les valeurs IconScale X et Y définies dans le nœud de paramètre en dehors du matériau lorsqu'elles sont converties en instance de matériau.
Vous devez ensuite créer un nœud Material Function pour ajouter une fonction au matériau qui change l'échelle des UV de l'icône.
Configurer une fonction de matériau : UI_Scale
Dans cette section, vous apprendrez à créer une fonction de matériau et à rechercher des fonctions à utiliser avec le nœud.
Faites un clic droit sur le graphique et saisissez MaterialFunction dans la barre de recherche. Sélectionnez MaterialFunctionCall dans la liste déroulante. Le nœud MaterialFunctionCall apparaît dans le graphique.
Dans le panneau Détails, cliquez sur le menu déroulant Material Function et saisissez UI_Scale dans la barre de recherchez, puis sélectionnez MF_UI_Scale dans la liste déroulante. Le nœud MaterialFunctionCall est converti en nœud UI Scale.
La fonction UI_Scale permet d'augmenter ou de diminuer l'échelle des UV de l'icône à l'aide de fonctions de matériau. Les fonctions de matériau ne peuvent être utilisées dans un matériau que via le nœud Material Function.
Configurer les UV de l'icône
Vous devez ensuite ajouter une icône et une couleur d'icône au matériau dont l'échelle va changer lors de la prise en compte des informations provenant des paramètres et du changement d'échelle de l'interface utilisateur.
Faites glisser le nœud TextureCoordinate et reliez-le à l'entrée UVs (V2) du nœud MF_UI_Scale.
Faites glisser le nœud AppendVector et reliez-le à l'entrée Scale (V2) du nœud MF_UI_Scale.
Faites glisser la broche de résultat du nœud MF_UI_Scale et reliez-la à l'entrée blanche du nœud Clamp.
Sélectionnez le nœud Texture Sample pour ouvrir les options correspondantes dans le panneau Détails.
Ouvrez la liste déroulante Texture.
Saisissez "icône" dans la barre de recherche.
Sélectionnez une icône dans la liste déroulante.
Faites glisser la broche blanche sur le nœud Clamp et reliez-la à l'entrée UV du nœud Texture Sample.
Faites glisser la broche RVB sur le nœud Texture Sample et reliez-la à l'entrée A du premier nœud Multiply.
Faites glisser la broche A sur le nœud Texture Sample et reliez-la à l'entrée B du premier nœud Multiply .
Faites à nouveau glisser la broche A du nœud Texture Sample et reliez-la à l'entrée Alpha du deuxième nœud LinearInterpolate (Lerp).
Faites glisser le premier nœud Multiply et reliez-le à l'entrée B du deuxième nœud Multiply.
Sélectionnez le nœud Constant3Vector pour ouvrir les options correspondantes dans le panneau Détails.
Cliquez dans le champ Constante pour ouvrir le sélecteur de couleurs.
Sélectionnez une couleur pour l'icône dans le sélecteur de couleurs.
Faites glisser la broche blanche du nœud Constant3Vector et reliez-la à l'entrée A du deuxième nœud Multiply.
Faites glisser la broche blanche du deuxième nœud Multiply et reliez-la à l'entrée B du premier nœud LinearInterpolate (Lerp).
Faites glisser la broche blanche du premier nœud Multiply et reliez-la à l'entrée Alpha du premier nœud LinearInterpolate (Lerp).
Faites glisser la broche blanche du premier nœud Multiply et reliez-la à l'entrée B du deuxième nœud LinearInterpolate (Lerp).
Faites glisser la broche blanche sur le premier nœud LinearInterpolate (Lerp) dans l'entrée Couleur finale du nœud de Main Material.
L'icône apparaît désormais dans la fenêtre d'aperçu du matériau.
Vous allez ensuite configurer le masque de la barre de progression. Il s'agit ici de révéler uniquement la partie du matériau qui correspond à l'augmentation du nombre d'éliminations, comme dans l'animation gif ci-dessous.
Configurer un masque de barre de progression
La dernière étape du matériau consiste à créer un masque pour la barre de progression, que vous pouvez appeler dans un widget ou dans l'outil Sequencer pour animer le matériau d'interface utilisateur, provoquant ainsi le remplissage de la barre de progression avec la couleur du matériau lorsque le joueur élimine les ennemis.
Vous devez créer de l'espace pour la prochaine série de nœuds. Sélectionnez tous les nœuds existants en faisant un clic gauche dessus et en les faisant glisser, puis en les déplaçant vers la gauche en tant que groupe unique.
Vous devrez relier le masque configuré au deuxième nœud LinearInterpolate (Lerp). Sélectionnez le deuxième nœud LinearInterpolate (Lerp) et déplacez-le vers la droite en direction du nœud Main Material. Voici à quoi devrait ressembler la configuration du nœud à ce stade.
Cliquez sur l'image pour l'agrandir.
Pour cette section du matériau, vous devez masquer les propriétés du matériau en fonction de leurs coordonnées X et Y dans le conteneur. Ces coordonnées serviront également à révéler le matériel à mesure que le nombre d'éliminations du joueur augmente.
Faites un clic droit dans la zone du graphique et ajoutez les nœuds suivants au graphique :
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Sélectionnez le nœud Constant, puis faites un clic droit sur le nœud et sélectionnez Dupliquer dans la liste déroulante.
Sélectionnez le premier nœud Constant et donnez-lui une valeur de 5,0.
Faites un clic droit sur le nœud et sélectionnez Convertir en paramètre.
Nommez le paramètre TrackerProgress.
Ce paramètre est utilisé dans UMG et l'outil Sequencer pour suivre les éliminations du joueur et provoquer l'affichage du matériau dans le conteneur.
Faites glisser la broche blanche sur le nœud Tracker Progress et reliez-la au nœud ConstantBiasScale.
Sélectionnez le nœud ConstantBiasScale puis, dans le panneau Détails, définissez la valeur Biais sur 0 et la valeur Échelle sur 0,1. Le nœud TrackerProgress s'adapte à la plage de valeurs 0-10 du traqueur.
Faites glisser le nœud ConstantBiasScale et reliez-le à l'entrée Y du nœud Step.
Faites glisser la broche VGradient sur le nœud LinearGradient et reliez-la à l'entrée X du nœud Step.
Faites glisser la broche blanche sur le nœud Step et reliez-la à l'entrée B du nœud Multiply.
Sélectionnez le second nœud Constant et remplacez sa valeur par 0,9.
Faites un clic droit dans le graphique et saisissez MaterialFunctionCall dans la barre de recherche.
Sélectionnez le nœud Material Function pour ouvrir les options correspondantes dans le panneau Détails.
Saisissez UI_SDF_Circle dans la barre de recherche.
Sélectionnez UI_SDF_Circle dans la liste déroulante.
Cette fonction de matériau contrôle la taille du conteneur via le nœud Constant et détermine la forme du conteneur de matériau. Dans ce cas, il s'agit d'un conteneur circulaire.
Faites glisser le deuxième nœud Constant et reliez-le à l'entrée Taille(s) du nœud MF_UI_SDF_Circle.
Faites glisser la broche de remplissage sur le nœud MF_UI_SDF_Circle et reliez-la à l'entrée A du nœud Multiply.
Faites glisser la broche blanche du nœud Multiply et reliez-la à l'entrée A du deuxième nœud LinearInterpolate (Lerp).
Faites glisser la broche blanche sur le deuxième nœud LinearInterpolate (Lerp) et reliez-la à l'entrée Opacité du nœud Main Material.
Le matériau est terminé, et la configuration complète du nœud devrait ressembler à l'image ci-dessous.
Cliquez sur l'image pour l'agrandir.
Pour utiliser ce matériau avec UMG, convertissez-le en instance de matériau. Vous pouvez remplacer, activer ou désactiver les paramètres d'une instance de matériau et les appeler dans UMG et l'outil Sequencer pour animer l'interface utilisateur avec laquelle le matériau est utilisé.
Pour créer une instance de matériau :
Faites un clic droit sur la vignette du matériau dans le navigateur de contenu.
Sélectionnez Créer une instance de matériau dans le menu déroulant.