Créez un chronomètre animé personnalisé pour les jeux à durée limitée. Grâce aux animations de l'interface utilisateur, vous pouvez faire apparaître et disparaître le chronomètre, voire ajouter un matériau de compte à rebours personnalisé autour de l'horloge.
Dans ce tutoriel, nous vous expliquons comment :
Configurer un matériau
Animer un cadran d'horloge
Changer la couleur de l'horloge
Créez un widget utilisateur dans le navigateur de contenu en suivant les instructions du tutoriel Les fenêtres contextuelles de l'interface utilisateur.
Étape 1 : Configurer les widgets
Après avoir créé le widget utilisateur, double-cliquez sur la vignette du widget utilisateur pour ouvrir l'éditeur de widget.
Faites glisser un widget Superposition dans le graphique du widget et redimensionnez-le à 1 920 x 1 080 en faisant glisser le coin inférieur droit. Ce widget fait office d'écran sur lequel l'interface utilisateur s'affiche.
Faites un clic droit sur le widget Superposition dans le panneau Hiérarchie pour le renommer Racine. Ce nom vous rappelle également qu'il s'agit du widget faisant office de modèle de l'écran.
Faites glisser un deuxième widget Superposition dans le widget Racine. Ce widget contiendra tous les widgets qui composent la conception et la fonction du chronomètre animé.
Renommez le deuxième widget Superposition « ParentContainer » dans le panneau Hiérarchie.
Dans le panneau Détails, définissez les propriétés suivantes :
Marge intérieure = 25,0
Alignement horizontal = Alignement centré horizontalement
Faites glisser un widget Zone empilable dans le widget ParentContainer. Cela détermine et applique la taille de ses widgets enfants. Les widgets enfants de la zone empilable deviennent le cadran d'horloge.
Renommez le widget de zone empilable « BGSizeBox » dans le panneau Hiérarchie.
Dans le panneau Détails, définissez Alignement horizontal et Alignement vertical sur Alignement central.
Cochez les options Largeur minimale souhaitée et Hauteur maximale souhaitée pour les activer, puis définissez les propriétés sur 130,0.
Le conteneur doit se trouver dans le widget Racine, comme indiqué ci-dessous
Faites glisser un widget Image dans le widget BGSizeBox.
Renommez le widget Image « Chronomètre » dans le panneau Hiérarchie.
Dans le panneau Détails, définissez Alignement horizontal et Alignement vertical sur Alignement central.
Ajoutez une instance de matériau à la propriété Pinceau > Image. Il peut s'agir d'un matériau qui effectue un compte à rebours.
Le matériau remplit l'espace à l'intérieur du widget Conteneur parent.
Faites glisser un widget Zone de texte dans le widget Conteneur parent.
Renommez le widget Zone de texte « Texte du chronomètre » dans le panneau Hiérarchie.
Dans le panneau Détails, définissez la propriété Texte sur 00:00.
Le widget Texte du chronomètre se trouve directement au centre du widget Utilisateur.
Dans la prochaine étape, vous allez animer le widget Texte du chronomètre pour rendre le temps plus dynamique pendant l'état d'urgence.
Étape 2 : Animer le texte du chronomètre
Pour créer un sentiment de danger imminent en mode d'urgence pendant les dernières secondes de votre chronomètre, animez l'horloge.
Dans l'animation créée ci-dessous, le texte du chronomètre s'agrandit, devient rouge, puis disparaît progressivement. Cette animation se répète pendant toute la durée du mode Urgence définie dans l'appareil Chronomètre.
Cliquez sur Animations au bas de l'écran de l'éditeur de widgets. Un panneau Sequencer s'ouvre, dans lequel vous pouvez créer des animations et ajouter des widgets à la séquence d'animation.
Cliquez sur +Animation pour créer un fichier d'animation dans votre widget Utilisateur.
Nommez l'animation Urgence. Vous configurerez cette animation ultérieurement, lorsque vous ajouterez des liaisons au widget Utilisateur.
Un carré bleu indiquant SÉLECTIONNÉ entoure le graphique du widget.
Cliquez sur +Ajouter pour ouvrir la liste des objets pouvant être ajoutés à l'animation dans le widget Utilisateur.
Dans le panneau Hiérarchie, sélectionnez le widget Texte du chronomètre.
Sélectionnez Texte du chronomètre dans la liste pour ajouter le texte du chronomètre au panneau Sequencer.
En regard de Texte du chronomètre, sélectionnez l'icône + pour ouvrir la liste des propriétés que vous pouvez animer.
Sélectionnez Transformer dans la liste. Tous les modes de transformation du texte sont ajoutés : déplacement, rotation, changement d'échelle et distorsion.
Ouvrez les options de changement d'échelle et sélectionnez l'icône + Image clé pour ajouter des images clés à la chronologie. Les options Axe X et de Axe Y augmentent et diminuent la taille du texte lorsque vous saisissez de nouvelles valeurs.
Déplacez la tête de lecture dans la chronologie à 0,25 seconde, modifiez les valeurs de l'axe X et de l'axe Y à 1,5, puis appuyez sur l'icône + Image clé en regard des options Axe X et Axe Y. Les images clés apparaissent dans la chronologie, affichant une progression sur le texte du chronomètre.
Déplacez la tête de lecture dans la chronologie sur 0,5 seconde, modifiez les valeurs de l'axe X et de l'axe Y sur 2,0, puis appuyez sur l'icône + Image clé en regard des options Axe X et Axe Y. Des images clés supplémentaires apparaissent dans la chronologie montrant une progression du texte.
Sélectionnez l'icône + en regard du texte du chronomètre et sélectionnez Couleur et opacité dans la liste. Les propriétés Rouge, Vert, Bleu et Alpha sont ajoutées à l'outil Sequencer.
Réinitialisez la tête de lecture dans la chronologie et sélectionnez l'icône + Image clé en regard de Couleur et opacité. La première image clé est ainsi définie pour chacune des propriétés Couleur et opacité dans la chronologie.
Développez Couleur et opacité, remplacez la valeur Rouge par 1,0, la valeur Vert par 0,0 et la valeur Bleu par 0,0. Une couleur rouge est ainsi créée.
Déplacez la tête de lecture sur 0,25 seconde, puis sélectionnez l' icône + Image clé en regard de chacune des propriétés sous Couleur et opacité. Des images clés sont ajoutées à la chronologie.
Déplacez la tête de lecture sur 0,5 seconde, modifiez la valeur Alpha sur 0,0 et sélectionnez l'icône + Image clé. Lorsque l'animation atteint les dernières images clés de la chronologie, le texte disparaît.
Si vous déplacez la tête de lecture d'avant en arrière sur la chronologie, la lecture de l'animation que vous avez créée commence dans le graphique du widget.
Dans la prochaine étape, vous allez ajouter un modèle d'affichage et des liaisons d'affichage pour remplacer le chronomètre par le widget Utilisateur.
Étape 3 : Ajouter les liaisons d'affichage
Pour remplacer l'interface utilisateur par défaut de l'appareil Chronomètre, vous allez lier le widget Zone de texte (Texte du chronomètre) aux paramètres de l'appareil Chronomètre.
Dans le menu Fenêtres, sélectionnez Modèle d'affichage. La fenêtre Modèle d'affichage s'ouvre.
Cliquez sur +Modèle d'affichage, puis sélectionnez Appareil - Modèle d'affichage Chronomètre > Sélectionner. Tous les modèles d'affichage de l'appareil Chronomètre sont désormais disponibles afin que vous puissiez les lier à votre widget Utilisateur.
Dans le panneau Hiérarchie, sélectionnez le widget Texte du chronomètre.
Cliquez sur Liaisons d'affichage dans la barre d'outils inférieure pour ouvrir le panneau correspondant.
Cliquez sur +Widget Texte du chronomètre pour ajouter le widget au panneau Liaisons d'affichage.
Sélectionnez le champ Texte du chronomètre pour ouvrir le menu déroulant des propriétés du widget.
Dans le menu déroulant, sélectionnez Texte du chronomètre > Texte > Sélectionner. Le texte du widget Texte du chronomètre est ainsi identifié comme propriété liée.
Sélectionnez le champ vide de droite pour ouvrir le menu déroulant des liaisons.
Dans le menu déroulant des liaisons, sélectionnez Modèle d'affichage Texte du chronomètre > Heure actuelle > Sélectionner. Le widget Texte du chronomètre est lié à l'heure actuelle de l'appareil Chronomètre et affiche l'heure actuelle à l'écran.
Dans l'étape suivante, vous allez ajouter l'animation au modèle d'affichage afin de la lire à l'écran en mode Urgence.
Étape 4 : Ajouter l'animation
Vous allez ajouter l'animation de la même manière que vous avez ajouté les liaisons pour le texte du chronomètre dans le panneau Liaisons d'affichage.
Sélectionnez +Ajouter une condition dans la partie supérieure du panneau Liaisons d'affichage. Une ligne conditionnelle est ajoutée au panneau Liaisons d'affichage.
Ouvrez le menu déroulant du modèle d'affichage, puis sélectionnez Widget Utilisateur > Sélectionner. Le widget Utilisateur est ajouté à la condition.
Sélectionnez le champ de gauche pour ouvrir le menu déroulant de liaison du modèle d'affichage.
Sélectionnez le chronomètre du mode Créatif dans Modèle d'affichage > IsUrgency > Sélectionner. IsUrgency est utilisé comme propriété de comparaison pour voir si elle est égale à une valeur spécifique, puis, en fonction de la valeur renvoyée (true/false), elle déclenche l'animation.
Définissez le champ Heure sur 1,0. Ainsi, si IsUrgency est égal à 1,0, la valeur est true et l'animation est jouée.
Sélectionnez le champ de droite pour ouvrir le menu déroulant de file d'attente, puis sélectionnez Widget Utilisateur > Animation de lecture de la file d'attente > Sélectionner. Désormais, l'animation que vous avez créée est mise en file d'attente et sera jouée lorsque le mode Urgence sera égal à 1,0.
En regard de Dans l'animation, sélectionnez l'icône de liaison pour la convertir en icône de lien bleue.
Sélectionnez le champ Dans l'animation, puis sélectionnez Widget utilisateur > Nom de l'animation > Sélectionner. La lecture de l'animation sélectionnée commence lorsque l'animation est mise en file d'attente.
Personnalisez la valeur Démarrer à l'heure sur 10,0. Cette valeur correspond à la seconde/image à laquelle la lecture de l'animation doit commencer. Si vous choisissez 0,0, la lecture de l'animation commence à partir de la seconde/de l'image 0,0 de l'animation.
Définissez le champ Vitesse de lecture sur 0,5. La lecture de l'animation commence à la moitié de la vitesse définie dans l'outil Sequencer.
Cliquez sur Compiler pour enregistrer votre widget Utilisateur.
Étape 5 : Ajouter l'appareil Chronomètre
La dernière étape consiste à ajouter un appareil Chronomètre au hublot et à personnaliser ses paramètres.
Dans le navigateur de contenu, sélectionnez le dossier Fortnite > Appareils pour ouvrir tous les dossiers des appareils.
Saisissez Chronomètre dans la barre de recherche d'affichage des ressources pour afficher l'appareil Chronomètre.
Faites glisser l'appareil Chronomètre dans le hublot.
Dans le panneau Détails, définissez le champ Durée sur 30,0 secondes.
Développez l'option Avancé pour afficher la classe de widget personnalisée.
Sélectionnez votre widget utilisateur dans le menu déroulant Classe de widget personnalisée.
Sous le deuxième ensemble d'options avancées, utilisez les paramètres suivants :
Peut interagir = Non
Comportement à l'achèvement = Réinitialiser
Visible pendant le jeu = Masqué
Activer le mode urgence = Option activée
Durée du mode urgence = 10,0 secondes
Désormais, les joueurs ne peuvent plus interagir avec l'appareil et, lorsque le chronomètre atteint la durée définie, il est réinitialisé. Après avoir activé le mode Urgence, votre animation personnalisée est désormais mise en file d'attente et lue pendant la durée définie dans le champ Délai avant mode urgence.
Enregistrez vos modifications, puis testez votre projet pour déterminer si le widget utilisateur fonctionne dans l'ATH.
À l'issue du test, le délai personnalisé doit remplacer le chronomètre par défaut et l'animation doit être lue pendant le délai spécifié.
À vous de jouer
Il existe plusieurs façons de rendre le chronomètre unique à votre projet.
Ajouter un matériau autour du texte du chronomètre, qui disparaît lentement à mesure que le chronomètre s'écoule.
Ajouter une texture autour du texte du chronomètre qui ressemble à une horloge.
Déplacer le chronomètre vers l'un des coins plutôt qu'au centre de l'écran.