Vous pouvez créer des éléments d'interface utilisateur (IU) personnalisés pour votre île dans l'Unreal Editor pour Fortnite (UEFN) en utilisant un blueprint de widget avec l'appareil Message d'ATH et l'appareil Fenêtre pop-up.
Il existe deux catégories de Blueprint de widget pour créer une IU personnalisée :
Widget utilisateur : permet de créer un message d'ATH personnalisé.
Variante de fenêtre modale : permet de créer des boutons cliquables personnalisés.
L'appareil Fenêtre de pop-up ne fonctionne qu'avec un blueprint Variante de fenêtre modale. L'appareil de message d'ATH fonctionne avec les deux types de Blueprints.
Pour en savoir plus sur l'éditeur de widget, consultez le document Éditeur de widget d'interface.
Widget utilisateur
Ce widget utilise l'ATH pour afficher un message personnalisé aux joueurs. Utilisez-le pour envoyer les joueurs dans une quête ou comme appareil narratif pour les personnages de votre île. Vous pouvez ajouter des boutons à votre message dans le flux de travail pour la variante de fenêtre modale ci-dessous.
Faites glisser un appareil de message d'ATH dans le hublot. L'appareil est prêt à se connecter à un Blueprint de widget.
Créer le blueprint
Faites un clic droit dans le navigateur de contenu pour ouvrir le menu du navigateur de contenu.
Sélectionnez Interface utilisateur >Blueprint de widget. Le chemin d'accès au widget s'ouvre.
Sélectionnez Widget utilisateur. La vignette du Blueprint de widget apparaît dans le navigateur de contenu.
Renommez la vignette.
Sélectionnez l'appareil de message d'ATH dans le hublot, recherchez l'option avancée Widget d'ATH dans le panneau Détails, puis sélectionnez votre Blueprint de widget dans le menu déroulant.
Double-cliquez sur la vignette pour ouvrir l'éditeur de widget.
Sélectionnez un widget de panneau dans le menu Panneau. Dans cet exemple, nous utilisons le panneau Canevas.
Vous devez effectuer cette étape avant d'ajouter des éléments au widget.
Tout ce que vous placez dans ce panneau s'affiche dans le message d'ATH.
Redimensionnez le widget de panneau en cliquant sur le coin et en faisant glisser le pointeur jusqu'à atteindre la taille souhaitée. Dans cet exemple, la taille du panneau est de 1 920 x 1 080 pour obtenir le format Full HD.
Cliquez sur l'image pour l'agrandir.
Importez une image dans le navigateur de contenu, puis faites glisser le widget d'image dans l'éditeur de blueprint de widget. Il s'agit de l'image d'arrière-plan de votre ATH.
Redimensionnez l'image à partir du panneau Détails en utilisant l'option Taille de l'image sous Apparence.
Déplacez l'image à l'aide des champs Translation. Un glissement dans le premier champ permet de déplacer l'image vers la gauche et la droite. Un glissement dans le second champ permet de déplacer l'image vers le haut et vers le bas.
Faites glisser un widget de bloc de texte de l'UEFN dans le panneau. C'est dans le widget de bloc de texte que vous allez créer votre message d'ATH personnalisé.
L'emplacement que vous sélectionnez pour placer le widget de zone de texte est celui où le texte apparaît dans le message d'ATH.
Ajoutez votre message d'IU personnalisé au champ Texte du panneau Détails.
Appliquez une couleur à votre texte et modifiez votre style de police grâce aux options d'apparence Couleur et opacité, Famille de police et Taille.
Vous pouvez personnaliser davantage votre texte en inclinant les lettres, en utilisant un espacement personnalisé ou en ajoutant un contour ou des ombres portées au texte.
Au déclenchement de votre appareil de message d'ATH, le message d'IU personnalisé que vous avez défini s'affiche dans l'ATH.
Variante de fenêtre modale
Ce widget utilise une interface de bouton pour connecter un appareil de fenêtre pop-up et un fournisseur d'objets afin de donner un objet aux joueurs. Pour commencer, faites glisser un appareil de fenêtre pop-up et un fournisseur d'objets dans le hublot.
Créer le blueprint
Faites un clic droit dans le navigateur de contenu pour ouvrir le menu du navigateur de contenu.
Sélectionnez Interface utilisateur >Blueprint de widget. Le chemin d'accès au widget s'ouvre.
Sélectionnez Variante de fenêtre modale. La vignette du Blueprint de widget apparaît dans le navigateur de contenu.
Renommez la vignette.
Double-cliquez sur la vignette pour ouvrir l'éditeur de widget.
Faites glisser un widget de panneau dans le hublot et redimensionnez-le.
Cliquez sur l'image pour l'agrandir.
Faites glisser un widget Image dans le hublot, ou importez une arme ou un objet et faites glisser l'image du navigateur de contenu au hublot.
Sélectionnez l'alignement de l'image. Il existe différents alignements horizontaux et verticaux.
Déplacez l'image à l'intérieur du hublot à l'aide des outils de translation. Un glissement dans le premier champ déplace l'image vers la droite et vers la gauche, un glissement dans le second champ déplace l'image vers le haut et vers le bas.
Faites glisser un widget de bouton dans le hublot, sélectionnez un alignement, puis déplacez le bouton à l'aide des champs Translation.
Donnez un nom au bouton dans le champ Texte, puis ajoutez une action dans le champ Texte secondaire.
Si vous souhaitez uniquement utiliser une action sur le bouton, ajoutez l'action au champ Texte uniquement. Cela signifie que votre bouton indique simplement "Appuyez ici".
Définissez les options de sélection suivantes :
Sélectionnable : option activée
Interactive sur sélection : option activée
Lorsque le joueur interagit avec les boutons, le comportement adéquat est déclenché.
Sélectionnez l'appareil de fenêtre pop-up dans le hublot et recherchez Widget modal > Classe de remplacement de modèle dans le panneau Détails. Sélectionnez le bouton d'IU dans le menu déroulant Classe de remplacement de modèle.
Définissez l'option Option d'affichage automatique sur Début du jeu. Lorsque vous testez le jeu, le bouton apparaît automatiquement au début du jeu.
Vous pouvez également définir cette option sur Jamais, puis configurer un autre appareil pour déclencher l'appareil Fenêtre pop-up.
Sélectionnez le fournisseur d'objets et ajoutez l'arme ou l'objet à la liste des objets.
L'élément dont vous vous équipez doit correspondre à l'image que vous utilisez, sauf si vous employez un point d'interrogation, auquel cas vous pouvez utiliser l'élément de votre choix.
Sélectionnez l'appareil Fenêtre pop-up dans le menu déroulant Remettre l'objet et sélectionnez En choisissant le bouton 1 dans la liste des fonctions.
Logique des boutons
Vous êtes maintenant en mesure de créer la logique du bouton pour le Blueprint de widget.
Ouvrez l'éditeur de widget.
Cliquez sur le bouton Liaisons d'affichage en bas de l'éditeur.
Cliquez sur Créer un modèle d'affichage.
Sélectionnez Modèle d'affichage de fenêtre modale du mode Créatif > Sélectionner > Fermer. La logique de bouton est ajoutée. Vous pouvez la modifier dans le Blueprint de widget.
Cliquez sur Liaisons d'affichage > Ajouter le widget pour ouvrir le menu de sélection des widgets.
Sélectionnez le widget de bouton dans le menu déroulant Modèle d'affichage de fenêtre modale du mode Créatif, puis cliquez sur Sélectionner.
Sélectionnez Widget à sens unique et définissez Sens unique sur le modèle d'affichage dans le menu déroulant Mode de liaison.
Cliquez sur le premier champ et sélectionnez Fonctions de conversion > Obtenir le bouton de réponse 1 > Sélectionner.
Les numéros de ces boutons indiquent leur emplacement dans le panneau.
Cliquez sur le deuxième champ et sélectionnez Modèle d'affichage de fenêtre modale du mode Créatif > Réponse > Sélectionner.
Sélectionnez le widget de bouton de l'UEFN que vous avez fait glisser sur le panneau dans le menu déroulant Champ et sélectionnez Événement de clic > Sélectionner.
Cliquez sur Compiler.
Testez le jeu pour vous assurer que le bouton apparaît et fonctionne comme prévu lorsque vous appuyez dessus.