Il existe deux façons de créer un matériau d'interface utilisateur personnalisé pour votre projet :
Collection de matériaux : collection de matériaux dont toutes les fonctionnalités d'interface utilisateur sont préintégrées dans le matériau.
Matériau parent personnalisé : matériau créé à l'aide de fonctions de matériau.
Collection de matériaux
La collection de matériaux est une série de matériaux de mesure et de textures hautement personnalisables. La collection de matériaux se trouve dans le navigateur de contenu sous Fortnite > IU > Matériaux. Il existe deux types de matériaux :
Matériaux de mesure : ces matériaux sont généralement utilisés en tant que barres de progression.
Textures : ces matériaux sont généralement utilisés pour l'iconographie et les portraits de joueurs.
L'appareil material_collection_device fournit un exemple d'utilisation de la collection de matériaux avec Verse pour afficher les textures et les matériaux, ainsi que pour utiliser les paramètres des instances de matériau en vue de modifier dynamiquement les matériaux de l'interface utilisateur lorsque des événements de dégâts se produisent dans le jeu.
Matériau parent personnalisé
Pour créer un matériau parent personnalisé pour un widget Image UMG, vous devez définir le Domaine de matériau sur Interface utilisateur pour le nœud de matériau principal. Ce matériau parent utilise des fonctions de matériau qui rendent le matériau plus dynamique.
Les matériaux sont convertis en instances de matériau pour assurer une réutilisation efficace du matériau parent et une interface plus conviviale qui vous permet de personnaliser les paramètres du matériau. Les paramètres du matériau sont ensuite mis à jour dans l'interface utilisateur via les propriétés liées du widget UMG.
Toute modification apportée à un matériau parent après la conversion se propage dans toutes ses instances de matériau.
Dans le navigateur de contenu, ouvrez les dossiers IU > Appareils > Controleur_d_ATH > Instances_de_materiau. Recherchez et ouvrez le matériau ShieldBar nommé MI_HCD01_ShieldBar en cliquant deux fois sur la vignette. Cette action ouvre l'instance de matériau dans l'éditeur d'instance de matériau.
Dans la section précédente, Définir les paramètres de l'appareil, nous vous avons expliqué comment utiliser la propriété Progression de l'instance de matériau pour mettre à jour la barre de bouclier dans l'ATH lorsqu'un joueur subit des dégâts de bouclier ou répare son bouclier. Ces modifications sont obtenues en utilisant les informations de joueur du Contrôleur d'ATH pour indiquer à l'instance de matériau dans quel sens déplacer la barre en fonction des informations de joueur.
Matériaux
La raison pour laquelle une instance de matériau peut écouter la fonction d'un appareil réside dans le fait qu'elle possède des paramètres configurés dans son matériau parent. Les matériaux de l'interface utilisateur utilisent des fonctions de matériau pour créer des rythmes ou des motifs chronométrés dans le matériau qui peuvent être exploités via des instances de matériau pour mettre à jour les informations de joueur dans l'ATH.
Ce modèle utilise les mêmes fonctions de matériau que le projet UI Material Lab. Pour mieux comprendre les différents types de fonctions de matériau et la façon dont elles ont été utilisées, consultez la page Répartition des fonctions de matériau du projet UI Material Lab.
Vous trouverez ci-dessous un tableau qui décrit les différents matériaux créés pour le projet et la façon de les utiliser.
| Liste des matériaux du projet | Utilisation |
|---|---|
M_DropShadow | Crée une ombre portée à afficher sous une forme. Permet de créer un carré, un cercle, un hexagone ou une forme personnalisée (à l'aide d'une texture). Les formes personnalisées ne permettent pas d'adoucir l'ombre. |
M_IconWithbackground | Crée une icône avec un arrière-plan et un contour. |
M_Meter | Crée un compteur à barres simple pour l'appareil Interaction habile. |
M_Notches | Crée des notchs décoratifs à espacement régulier. Utilisé avec M_Meter pour créer un compteur à barres avec des notchs pour l'appareil Interaction habile. |
M_ProgressBar_Basic | Crée une barre de progression dotée d'arêtes incurvées ou pointues avec un remplissage et un contour dégradés. |
M_ProgressBar_Orb | Crée une barre de progression sous la forme d'un orbe qui se remplit au fur et à mesure de sa progression. A une texture d'icône au centre de l'orbe. |
M_Texture_Complex | Permet le changement d'échelle et/ou la déformation d'une texture personnalisée. Par exemple, ce matériau peut être utilisé pour créer un effet de scintillement ou d'immersion sous l'eau. |
M_Texture_SImple | Permet de colorer des textures simples. Ce matériau peut être utilisé avec une simple texture noir et blanc ou une texture channel packed (à l'aide des canaux RVB). |
M_Wave | Crée une vague avec des bulles qui remontent à la surface. |
Groupes de paramètres
Ouvrez les différentes instances de matériau du modèle pour consulter les différents paramètres répertoriés dans les groupes de paramètres. Il s'agit des paramètres des fonctions de matériau qui peuvent être liés aux appareils et mis à jour dans l'ATH.
Les groupes de paramètres ne peuvent être modifiés dans l'éditeur d'instances de matériau que s'ils sont cochés.
Pour modifier les paramètres dans l'éditeur d'instances de matériau, ouvrez le navigateur de contenu et les dossiers IU > Appareils > Interaction_habile > Instances_de_materiaux, puis recherchez et ouvrez l'instance de matériau MI_SID03_Water.
Commencez par changer la couleur de l'eau en faisant un double clic sur les paramètres Couleur liquide 1 et Couleur liquide 2. La sélecteur de couleurs s'ouvre. Modifiez la couleur de l'eau. Dans l'exemple ci-dessous, la couleur de l'eau passe du bleu au vert.
Observez attentivement les bulles. Si vous avez sélectionné la fenêtre Éditeur d'instances de matériau, vous devriez voir les bulles dans le matériau remonter à la surface. Vous pouvez modifier la taille de la bulle en activant les options de taille BubblesStartSize et BubblesMiddleSize, puis en modifiant leurs paramètres. Si le paramètre est trop élevé, les bulles semblent disparaître derrière un mur.
Des paramètres tels que ceux-ci peuvent être définis dans les liaisons d'affichage et utilisés par les fonctions de l'appareil pour mettre à jour les informations de joueur.
Migrez les instances de matériau et les ressources de texture à utiliser dans vos propres projets.
Texture
Dans l'interface utilisateur, les textures servent à ajouter des détails et des subtilités que les matériaux seuls ne permettent pas d'obtenir. Si vous décidez d'utiliser des textures dans les conceptions de vos interfaces utilisateur, sachez que les textures consomment beaucoup de mémoire.
Utilisez la texture d'interaction habile et les échantillons de texture et de matériau combinés pour déterminer le pourcentage d'éléments d'interface utilisateur créés avec des textures. Dans l'échantillon de texture, lorsque vous désactivez le widget Plaque, les seules parties de l'interface utilisateur qui restent visibles sont le message, la barre de PV et le nombre d'éliminations.
La méthode recommandée pour créer l'apparence des boîtes stylisées sur la plaque est d'utiliser une texture. La complexité de la conception et de la forme serait difficile à reproduire dans UMG. Les matériaux d'interface utilisateur ne peuvent être utilisés que pour créer des formes primitives de base, ajouter un trait autour de la forme du matériau, et ajouter des dégradés à la forme et au trait du matériau.
L'échantillon d'interface utilisateur doté du matériau et de la texture montre la façon dont le mélange de textures et de matériaux permet d'obtenir une interface utilisateur raffinée. L'interface utilisateur comporte trois textures qui composent la conception de la plaque et l'image de la créature.
L'image de la créature est superposée sur un widget image. Le widget image n'utilise pas d'instance de matériau. Au lieu de cela, l'option Pinceau crée un rectangle blanc sur la couche située sous l'image de la créature. La taille et les dimensions du rectangle sont contrôlées dans le panneau Détails à l'aide des options Taille de l'image.
Dans le panneau Hiérarchie, les widgets qui précèdent les autres dans la liste se trouvent sur la couche d'arrière-plan, chaque widget supplémentaire se trouvant au-dessus du widget précédent dans la liste.
Une instance de matériau est utilisée comme ombre portée pour la photographie de la créature dans la conception.
Textures de fonction de distance orientée (SDF)
Le champ de distance signé est une fonction qui utilise la position comme entrée et fournit la distance à partir de cette position. Par exemple, dans l'image ci-dessous, le centre du radial est 1, ce qui signifie entièrement blanc, mais à mesure qu'il progresse vers le bord, il passe à 0, c'est-à-dire entièrement noir. En utilisant ce concept, les SDF offrent un moyen de spécifier une plage de valeurs comprises entre 0 et 1 pour appliquer un effet.
En d'autres termes, vous pouvez :
Sélectionner des valeurs comprises entre 0,5 et 1,0 et appliquer une couleur unie.
Sélectionner des valeurs comprises entre 0,49 et 0,0 et appliquer une couleur de fondu qui émule une lueur.
Les textures normales ne sont pas concernées, car leur valeur est soit 1 (blanc) soit 0 (noir). Les SDF vous fournissent toutes ces données entre 0 et 1.
Ces concepts peuvent également s'appliquer aux photographies. Si une photographie est enregistrée au format .png et que des effets lui ont été appliqués, mais que l'image ne présente pas toute la gamme de couleurs et de détails d'éclairage, les possibilités de personnalisation sont alors plus limitées, car le fait de modifier l'image pour la rendre plus claire ou plus sombre peut entraîner une perte de détails, voire leur disparition complète.
Si cette même image avait été prise avec un appareil photo reflex numérique, il serait possible de personnaliser le fichier brut (qui contient toutes les informations relatives aux couleurs et à l'éclairage) avec un niveau de précision élevé, par exemple en éclaircissant les zones sombres sans perdre les détails, et inversement.
Recherchez dans les dossiers IU > Texture > SDF pour obtenir un aperçu complet des textures SDF afin de créer votre propre interface utilisateur unique.
Il existe un dossier appelé Icônes contenant de nombreuses icônes SDF.
Textures SDF dans les matériaux
La plupart des matériaux d'interface utilisateur sont des matériaux 2D plats qui utilisent des valeurs binaires de 0 et 1 pour définir l'extérieur et le milieu du matériau. Dans les matériaux 2D. Lorsque les textures de fonction de distance orientée sont utilisées dans un nœud Sample Texture et associées à une fonction de matériau SDF, il est possible de personnaliser l'interface utilisateur en manipulant certaines valeurs dans le matériau de l'interface utilisateur.
La modification de différentes valeurs dans un matériau d'interface utilisateur à l'aide de textures de fonction de distance orientée et de nœuds de matériau produit des effets différents, tels que :
Ombres
Flou
Brillance
Miroitement
Contours
Animations
Changement d'échelle
Les textures SDF confèrent aux matériaux d'interface utilisateur un aspect plus dynamique et unique, car elles peuvent être facilement redimensionnées sans perte de qualité, contrairement aux ressources classiques qui perdent en qualité lorsqu'elles sont agrandies ou réduites. Les textures SDF bénéficient d'une meilleure optimisation pour faciliter la mise en œuvre de tous les effets à l'aide d'une seule texture, ce qui permet d'obtenir un graphique de matériau plus épuré.
En revanche, les textures noires et blanches classiques ne sont pas facilement manipulables dans le graphique de matériau et nécessitent l'utilisation de plusieurs textures. Dans l'image ci-dessus, la manière la plus simple d'ajouter une brillance aux textures consiste à superposer la texture sur un dégradé radial, plutôt que de créer un graphique de matériau détaillé pour obtenir un résultat similaire.
Nœud de matériau Smooth Step
Les nœuds de matériaux de type Step créent généralement une transition brusque dans les matériaux, par exemple, de 0 à 0,25 directement. Le nœud Smooth Step, quant à lui, utilise les fonctions SDF pour créer une transition fluide dans les matériaux d'interface utilisateur. Les matériaux d'interface utilisateur du modèle qui font appel à des textures SDF utilisent le nœud de matériau Smooth Step pour créer une transition fluide du centre du matériau vers le bord extérieur.
Conclusions
Voici quelques points clés à retenir sur l'utilisation de matériaux et de textures pour les ressources de l'interface utilisateur :
L'utilisation des fonctions de matériau permet de gagner du temps grâce à des nœuds de matériau prédéfinis qui référencent des fonctions dans vos matériaux de barre de PV et de bouclier, ainsi que des matériaux d'interface utilisateur de plaque qui les font réagir aux événements dans le jeu.
Les matériaux et textures SDF créent une interface utilisateur plus dynamique.
Il est essentiel de comprendre comment superposer vos widgets image pour passer d'une interface utilisateur élémentaire à une interface utilisateur visuellement plus intéressante.
Utilisez les textures pour les éléments d'une conception qui sont visuellement complexes, impossibles à produire avec des matériaux.