Créez une interface utilisateur personnalisée avec le matériau de base M_UI_Shape_Rectangle en créant des instances de matériau à partir du matériau de base à utiliser dans les widgets UMG. Le matériau de forme permet également de créer des formes plates qui peuvent être utilisées pour créer des conceptions d'interface utilisateur uniques. Le matériau M_UI_Shape_Rectangle se trouve dans le navigateur de contenu dans le dossier Fortnite accessible via IU > Matériaux.
Les instances de matériau peuvent être utilisées pour remplir un widget comme de la peinture. Il est préférable d'utiliser des matériaux plutôt que d'ajouter des textures aux widgets, car les matériaux utilisent moins de mémoire que les textures importées. Les matériaux offrent également une meilleure méthode de conception de l'interface utilisateur dans l'UEFN et l'UE, en particulier pour une interface plate, car elle est plus facile à reproduire, sans oublier qu'il est possible de faire preuve de fantaisie avec des matériaux 3D et dynamiques.
Les widgets UMG sont référencés dans les paramètres spéciaux de l'interface utilisateur sur quelques appareils dans l'Unreal Editor pour Fortnite (l'UEFN). Les widgets UMG remplacent l'interface utilisateur par défaut de Fortnite dans l'affichage tête haute (ATH).
Pour plus de tutoriels sur l'utilisation de Matériau pour créer une interface utilisateur, référez-vous aux ressources suivantes :
Créer des formes d'interfaces utilisateur personnalisées
Avant de créer une forme d'interface utilisateur personnalisée, décidez à quoi vous voulez que l'interface utilisateur ressemble, puis utilisez le matériau M_UI_Shape_Rectangle pour concevoir l'apparence de votre widget d'interface utilisateur. Il peut s'agir d'un simple carré personnalisé ou d'une forme plus complexe, comme une fleur. Les conceptions peuvent nécessiter plusieurs formes, que vous pouvez ensuite associer lorsque vous créez votre widget.
Pour créer des formes, vous devez tout d'abord créer une instance de matériau du matériau M_UI_Shape_Rectangle d'origine.
-
Faites un clic droit sur la vignette du matériau et sélectionnez Créer une instance de matériau.
-
Dans la fenêtre Enregistrer la ressource sous, donnez un nom à votre instance de ressource en vue de l'enregistrer dans le dossier de contenu de votre projet. Donnez un nom à vos ressources de manière à les regrouper. Par exemple, les instances de matériau standard de l'UEFN commencent par "M_UGC_" et se terminent par "_Inst". Exemple de nom d'instance de matériau : M_UGC_Circus_Inst.
-
Faites un double-clic sur votre nouvelle instance de matériau pour faire apparaître l'éditeur d'instance de matériau. Vous pouvez également accéder à l'éditeur en faisant un clic droit sur la ressource et en choisissant Modifier.
Le panneau Détails de l'éditeur d'instance de matériau contient les outils dont vous avez besoin pour personnaliser entièrement les instances de matériau. Ces outils se trouvent dans les sections suivantes :
-
[1] Remplissage
-
[2] Trait
-
[3] Couleurs
-
[4] État (Survolé/Mis au point/Appuyé/Désactivé)
Remplissage
Les options de la section Remplissage ont une incidence sur la forme de votre matériau. Pour de nombreuses options telles que Transparence du remplissage, une valeur de 0,0 désactive le paramètre tandis qu'une valeur de 1,0 l'active. N'oubliez pas d'activer l'option Transparence du remplissage pour que votre forme apparaisse dans le hublot.
L'image ci-dessus illustre les paramètres ajustés utilisés pour créer une forme.
Trait
Vous pouvez régler les options de la section Trait pour créer une bordure personnalisable. La couleur prédéfinie de bordure bleue vous permet d'afficher votre conception à mesure que vous modifiez les valeurs des options de trait.
Dans l'image ci-dessus, l'option Transparence du trait est réglée sur 1,0 pour afficher une bordure bleue.
Couleurs
Vous pouvez modifier les options de l'onglet Couleur pour personnaliser davantage les formes que vous créez. Vous ne pouvez régler ces options qu'après les avoir activées en cliquant sur la case booléenne correspondante.
Vous pouvez par ailleurs créer des dégradés pour les formes et les bordures. Vous pouvez prévisualiser les dégradés à mesure que vous les modifiez dans le hublot.
Dans l'image ci-dessus, les couleurs sont appliquées en dégradé. Cette option est activée lorsque la valeur de Dégradé activé/désactivé est supérieure à 0,0.
État
Cette option se trouve dans la section Couleur et peut être modifiée pour définir les couleurs de la forme selon différents états. Vous pouvez définir des couleurs personnalisées pour différentes actions du joueur (notamment le survol, la mise au point, l'appui ou la désactivation de votre forme d'interface utilisateur).
À moins que vous ne définissiez un matériau pour l'option Matériau physique, votre forme a un contour transparent lorsqu'elle est importée dans le widget que vous créez. Pour éviter cela, définissez votre matériau physique sur Bois afin de pouvoir effectuer son rendu comme un matériau réel.
Après avoir personnalisé la forme de votre interface utilisateur, n'oubliez pas de l'enregistrer en cliquant sur l'icône de disquette dans l'angle supérieur droit. Votre instance de matériau personnalisée est enregistrée dans le dossier de contenu de votre projet.
Dans l'exemple de ce tutoriel, nous utilisons des formes qui se combinent pour former un tournesol sur un arrière-plan de bouton.
Créer des widgets d'IU
Vous devez maintenant créer des widgets avec lesquels les joueurs peuvent interagir. Lisez le document Éditeur de widget d'IU pour en savoir plus sur la création de widgets et l'organisation de l'onglet Hiérarchie.
À ce stade, vous devriez avoir créé des instances de matériau pour chaque élément de votre conception.
L'exemple de ce tutoriel consiste en plusieurs instances d'un pétale de fleur et d'un disque de fleur. Le bouton se compose d'une base et de deux images utilisées comme icônes de bouton.
Ces instances de matériau sont disposées dans des blueprints de widget pour créer une conception personnalisée. Le blueprint de widget est importé dans l'appareil de fenêtre pop-up pour remplacer l'interface utilisateur préétablie.
Créez un nouveau blueprint de widget qui contiendra à la fois les instances de matériau et les widgets de bouton qui composent votre interface utilisateur personnalisée. Il s'agit du blueprint de widget qui sera ajouté aux paramètres de l'appareil.
Dans ce widget, combinez toutes vos instances de matériau personnalisées pour créer votre conception. Lorsque vous créez votre widget d'interface utilisateur, faites glisser les ressources de Commun, IU commune, Panneau, UIKIT et Créé par l'utilisateur sous le nom de votre widget.
Dans la photo ci-dessus, les ressources sont organisées dans l'onglet Hiérarchie et repositionnées dans le hublot pour donner à l'interface utilisateur personnalisée la forme d'une fleur.
Lorsque vous êtes satisfait de votre conception, enregistrez votre blueprint et revenez à votre navigateur de contenu. Ce blueprint va maintenant être importé dans un appareil de fenêtre pop-up qui affichera l'interface utilisateur personnalisée.
Ajouter des widgets aux appareils
Une fois votre conception prête, placez un appareil de fenêtre pop-up pour afficher votre widget.
Faites glisser votre widget dans Détails > Widget modal > Classe de remplacement de modèle.
Vous pouvez afficher et tester votre création via une session lancée.