Transmettez des variables Entier ou Float à un widget à l'aide des fonctions de conversion En texte (Int) et En texte (Double). Les fonctions de conversion "ToText" convertissent une variable de type Entier ou Float en un type Texte que vous pouvez afficher sur votre widget. Aucune variable ne s'affiche sur votre widget si elle reste de type non-texte.
La fonction de conversion est en fait nommée En texte (Double) dans l'éditeur au lieu de En texte (Double), mais toutes deux ont le même objectif.
Voici deux exemples illustrant l'utilisation des deux fonctions de conversion.
Exemple En texte (Int) : un widget Traqueur personnalisé suit la progression d'un joueur lorsque celui-ci ramasse un certain nombre de tranches de bacon.
Exemple En texte (Double) : un widget de fenêtre pop-up personnalisée ouvre une fenêtre pop-up avec différentes réponses à une question de culture générale. Un compte à rebours est utilisé pour fermer le chronomètre si aucune réponse n'a été sélectionnée avant la fin du temps imparti.
En texte (Int)
Dans cet exemple, un widget Traqueur personnalisé est créé pour suivre le nombre de tranches de bacon que le joueur a collectées. Suivez les étapes du document Fenêtres pop-up de l'interface utilisateur pour créer un widget Utilisateur et nommez-le Tracker_Widget.
Configurer le widget
Pour configurer le widget Tracker_Widget, ajoutez les widgets suivants dans l'ordre présenté ci-dessous dans le panneau Hiérarchie :
Superposition
Image (widget imbriqué sous la superposition et renommé "Arrière-plan")
Zone empilable (widget imbriqué sous la superposition)
Bloc de texte (widget imbriqué sous la première zone empilable et renommé "Titre" ; il s'agit du titre de votre traqueur "{Tracker Title}")
Zone empilable (widget imbriqué sous la première zone empilable)
2 blocs de texte (widgets imbriqués sous la deuxième zone empilable. Renommez le premier bloc de texte CurrentValue "{Current}" et le deuxième bloc de texte Texte d'ambiance "Bacon collecté")
Vous devez disposer d'un bloc de texte qui prend en compte le nombre actuel de tranches de bacon collectées par le joueur. Le Tracker_Widget est configuré pour inclure un bloc de texte TrackerTitle afin que la propriété Nom du modèle d'affichage puisse être transmise au bloc de texte actuel :
Configurer votre widget en utilisant le même
Voici ce que le joueur voit dans le jeu lorsqu'il ramasse des tranches de bacon :
Configurer la fonction de conversion
La fonction de conversion En texte (Int) sert à transmettre la quantité actuelle de tranches de bacon sur l'appareil Traqueur via le bloc de texte CurrentValue.
Pour configurer les fonctions de conversion En texte (Int), créez des liaisons d'affichage et liez les valeurs que vous définissez dans le widget à l'appareil Traqueur.
Ouvrez Fenêtre > Liaisons d'affichage.
Sélectionnez le bloc de texte CurrentValue dans votre widget, puis cliquez sur +Ajouter un widget dans la fenêtre Liaisons d'affichage.
Dans la zone de gauche de la liaison d'affichage, sélectionnez CurrentValue > Texte. Cela signifie que le texte sera transmis à la propriété Texte du bloc de texte CurrentValue.
Dans la zone de droite, cliquez dans le champ et sélectionnez Fonctions de conversion > En texte (Entier). Un certain nombre de champs apparaissent dans la liaison pour le bloc de texte CurrentValue.
Pour en savoir plus sur la fonction de chaque champ, consultez la section Propriétés En texte (Int/Double).
Une fonction de conversion appelée En texte (Entier) est ainsi exécutée : elle prend une valeur et renvoie une variable de type Texte à transmettre à la propriété Texte du bloc de texte CurrentValue.
Sélectionnez l'icône de chaîne en regard de Valeur et sélectionnez MVVM_UEFN_Tracker > Valeur.
La variable Valeur du modèle d'affichage Traqueur est transmise à la fonction de conversion En texte (Entier). Cela génère la variable Valeur sous forme de propriété Texte, qui est ensuite transmise à la propriété Texte du bloc de texte CurrentValue.
Résultat final
Pour utiliser votre nouveau widget, faites glisser un appareil Traqueur dans votre projet, puis procédez comme suit :
Dans le panneau Détails de l'appareil Traqueur, définissez le champ Widget d'ATH sur votre Track_Widget.
Il est possible d'utiliser le traqueur pour suivre les statistiques de score ; utilisez des objets à collectionner dans votre niveau pour tester cette fonctionnalité.
Chaque fois que le joueur récupère du bacon dans le jeu, le traqueur augmente automatiquement en fonction de la valeur de score définie pour chaque bacon.
En texte (Double)
Dans cet exemple, utilisez le flux de travail Variante de boîte de dialogue modale du document Fenêtres pop-up de l'interface utilisateur pour créer un widget de fenêtre pop-up personnalisé appelé Trivia_Widget. Le Trivia_Widget affiche des questions de quiz de Fortnite auxquelles le joueur doit répondre avant l'expiration du temps imparti.
Configurer le widget
Faites un clic droit dans le navigateur de contenu pour afficher le menu contextuel.
Dans le menu contextuel, sélectionnez Interface utilisateur > Blueprint de widget > Variante de boîte de dialogue modale.
Ouvrez votre widget et ajoutez les conteneurs suivants au panneau Hiérarchie dans l'ordre indiqué dans l'image :
Superposition
Image
3 zones empilables
Une superposition héberge l'intégralité du widget en tant que conteneur parent. Ensuite, utilisez un widget Image pour l'arrière-plan, et enfin plusieurs zones empilables imbriquées pour englober tout le contenu, notamment vos textes et boutons.
Ajoutez des blocs de texte et des boutons à vos zones empilables, comme illustré ci-dessous.
Enveloppez les blocs de texte TimeLeft et TimeFlavorText dans une zone empilable afin de mettre à jour TimeLeft de manière dynamique via une liaison d'affichage en fonction de la variable Temps restant avant expiration dans le modèle d'affichage Fenêtre pop-up.
Si vous pensez que vous devez envelopper un widget avec un conteneur dans une structure existante, vous n'avez pas besoin de recréer l'intégralité du widget. Faites un clic droit sur le widget et sélectionnez Envelopper avec… ou Remplacer par… pour ajouter facilement un nouveau panneau dans un conteneur.
Ajoutez les boutons sous forme de grille 2x2. Étant donné que les boutons se trouvent dans une grille 2x2, utilisez un panneau de grille uniforme plutôt qu'une zone empilable. Faites un clic droit sur Container_Buttons > Remplacer par… > Panneau de grille uniforme.
Le panneau de grille uniforme vous permet d'organiser facilement ses widgets enfants dans un modèle de grille. Vous pouvez également définir facilement la marge intérieure de l'emplacement pour chaque enfant.
Sélectionnez chaque bouton individuellement dans la hiérarchie pour mettre en surbrillance le bouton dans la vue principale du concepteur.
Dans la vue principale du concepteur, cliquez sur les flèches autour du bouton pour déplacer le bouton vers une ligne ou une colonne spécifique où vous souhaitez placer le bouton.
Dans l'exemple ci-dessous, les boutons sont disposés de gauche à droite et de haut en bas. Les boutons ont été renommés comme suit : Button1, Button2, Button3 et Button4.
Dans le panneau Détails, définissez Disposition enfant > Marge intérieure d'emplacement sur 16 px pour les Container_Buttons.
Ajustez cette valeur comme bon vous semble en fonction de votre conception.
Dans la zone empilable de contenu, ajoutez un bouton discret à utiliser ultérieurement comme bouton Fermer.
Ajoutez des espacements entre les conteneurs pour rendre le contenu plus lisible. Pour cela, vous pouvez ajouter un widget Image à l'endroit où vous souhaitez placer des espaces puis, dans le panneau Détails, utiliser les options suivantes :
Pinceau > Dessiner en tant que = Aucun
Taille de l'image (valeurs X et Y) = 35 (vous pouvez définir une valeur inférieure ou supérieure selon votre conception)
Il s'agit d’un moyen simple de gérer l'espacement entre les éléments de votre interface utilisateur sans avoir recours à la marge intérieure.
Modifiez le texte du bouton pour identifier facilement chaque bouton.
Ouvrez les dossiers Fortnite > IU et créez une instance de matériau du M_UI_Rectangle pour créer un matériau d'arrière-plan pour votre fenêtre pop-up de questions.
Dans UMG, ouvrez votre widget utilisateur et sélectionnez le widget Image d'arrière-plan, puis dans le champ Pinceau > Image, sélectionnez l'instance de matériau que vous venez de créer.
Ajoutez une marge intérieure de 32 px dans la zone empilable de contenu pour rendre la fenêtre pop-up plus lisible.
Configurer la fonction de conversion
Nous n'aborderons pas la liaison des réponses de bouton dans ce document. Ce tutoriel porte sur la liaison du texte TimeLeft à la variable Float pour le Temps restant avant l'expiration.
Ouvrez Fenêtre > Liaisons d'affichage.
Dans le panneau Hiérarchie, sélectionnez le widget de bloc de texte TimeLeft. Dans la fenêtre Liaisons d'affichage, cliquez sur +Ajouter un widget.
Dans la zone de gauche, sélectionnez TimeLeft > Texte. Une certaine forme de valeur est transmise à la propriété Texte de TimeLeft.
Dans la zone de droite, sélectionnez CreativeModalDialogViewmodel > Temps restant avant expiration. Sélectionnez ensuite Fonctions de conversion > En texte (Double).
Lorsque vous placez le pointeur de la souris sur cette variable, vous constatez qu'il s'agit d'une valeur Float. La fonction de conversion En texte (Double) vous permet de convertir une valeur Double/Float en une variable Texte, et de les afficher dans votre interface utilisateur.
Un certain nombre de champs s'affichent dans la fenêtre Afficher les liaisons.
Pour en savoir plus sur ces champs, consultez la section Propriétés de texte (Int/Double) du document.
Cliquez sur l'icône de chaîne en regard de Valeur, et sélectionnez CreativeModalDialogViewmodel > Temps restant avant expiration > Sélectionner.
La variable Temps restant avant expiration est transmise à la fonction de conversion En texte (Double) qui génère la valeur Float dans un format texte lisible par votre interface utilisateur. Votre interface utilisateur affiche avec précision le temps restant avant la fermeture du widget de fenêtre pop-up.
Résultat final
Faites glisser un appareil de fenêtre pop-up dans votre projet et procédez comme suit :
Dans un appareil de fenêtre pop-up, définissez la classe de remplacement de modèle sur le Trivia_Widget que vous avez créé.
Cochez la case Expiration de la fenêtre.
Définissez la durée d'expiration sur 6 secondes ou sur le délai qui, selon vous, donnerait aux joueurs suffisamment de temps pour voir la fenêtre pop-up et la lire.
Désormais, lorsque votre widget de fenêtre pop-up s'affiche, le chronomètre décompte toutes les secondes dans la fenêtre pop-up.
Propriétés de conversion En texte (Int/Double)
Plusieurs champs sont disponibles dans la fonction de conversion En texte (Int). En texte (Double) partage les mêmes champs, sauf indication contraire :
Valeur : la variable Entier à transmettre à la fonction de conversion.
Signe systématique : ajoute un signe positif ou négatif au préfixe de la sortie de texte indiquant si la valeur est positive ou négative. Si la valeur est positive, le texte est généré au format +{Value}. Si elle est négative, le texte est généré au format -{Value}.
Utiliser le regroupement : détermine si les valeurs sont regroupées, mais séparées lorsque la valeur est supérieure à 1 000. Ce champ utilise le paramètre régional de votre ordinateur pour l'indicateur de regroupement. Si cette option est activée, le texte s'affiche comme suit : 1 000. Si cette option est désactivée, le texte s'affiche comme suit : 1000.
Nombre minimum de chiffres entiers : nombre minimum de chiffres entiers à afficher sur le texte. La valeur par défaut est 1. Si le minimum est défini sur une valeur supérieure à 1, des 0 s'affichent pour les entiers avec un nombre de chiffres inférieur au nombre entier minimum. Par exemple, si le nombre minimum de chiffres entiers est défini sur 3 et que la valeur est actuellement de 5, le texte généré est le suivant : 005.
Nombre maximum de chiffres entiers : nombre maximum de chiffres entiers à afficher dans le texte. La valeur par défaut est 354. Cette valeur limite votre texte à un nombre maximal de chiffres.
Nombre minimum de chiffres fractionnaires (uniquement pour En texte (Double)) : nombre minimum de chiffres à afficher après la virgule décimale. La valeur par défaut est 0.
Nombre maximum de chiffres fractionnaires (uniquement pour En texte (Double)) : nombre maximum de chiffres à afficher après la virgule décimale. La valeur par défaut est 3.
Mode d'arrondi (uniquement pour En texte (Double)) : détermine la façon dont la valeur Float/Double est arrondie au nombre le plus proche.
| Type | Description | Exemple |
|---|---|---|
À moitié vers régulier | Les arrondis sont réalisés à l'emplacement le plus proche, les égalités vont à la valeur la plus proche d'une valeur paire : | 1,5 devient 2, 0,5 devient 0 |
À moitié depuis zéro | Les arrondis sont réalisés à l'emplacement le plus proche, les égalités vont à la valeur la plus éloignée de zéro : | -0,5 devient -1,0, 0,5 devient 1,0 |
À moitié vers zéro | Les arrondis sont réalisés à l'emplacement le plus proche, les égalités vont à la valeur la plus proche de zéro : | -0,5 devient 0, 0,5 devient 0 |
Depuis zéro | Les arrondis sont réalisés à la valeur la plus éloignée de zéro, "plus grande" en valeur absolue : | 0,1 devient 1, -0,1 devient -1 |
Vers zéro | Les arrondis sont réalisés à la valeur la plus proche de zéro, "plus petite" en valeur absolue : | 0,1 devient 0, -0,1 devient 0 |
Vers l'infinité négative | Les arrondis sont réalisés à la valeur la plus négative : | 0,1 devient 0, -0,1 devient -1 |
Vers l'infinité positive | Les arrondis sont réalisés à la valeur la plus positive : | 0,1 devient 1, -0,1 devient 0 |