Animer l'interface utilisateur

Il existe actuellement un bogue qui vous empêche d'afficher le champ Condition d'animation de l'interface utilisateur dans les liaisons d'affichage lorsqu'aucune liaison d'affichage standard n'est créée. Vous devez créer une liaison d'affichage standard pour pouvoir afficher les champs de liaison de condition. Ce bogue a été corrigé dans la version 33.00.

Utilisez l'outil Sequencer dans UMG pour animer les widgets. Les widgets s'animent en fonction des valeurs saisies dans un paramètre de matériau.

Actuellement, l'animation de l'interface utilisateur ne fonctionne qu'avec les variables de type float et int. De nouvelles fonctionnalités seront ajoutées à l'animation de l'interface utilisateur à l'avenir.

Configurer le widget

Le widget utilise le widget Traqueur de l'exemple présenté dans la rubrique Définir les paramètres de matériau dans UMG.

Créez un widget Traqueur, le cas échéant. Ensuite, procédez comme suit :

1. Ajoutez un bloc de texte qui affiche l'indication +1 au-dessus du widget Traqueur existant. Ce bloc de texte indique que le traqueur d'élimination s'incrémente en fonction du nombre de zombies éliminés.

   

2. Sous Rendu > Opacité de rendu, définissez l'option Opacité de rendu sur 0.0 pour ce bloc de texte.

   

3. Vous pouvez commencer l'animation du widget.

Configurer l'animation

Pour ajouter une animation à votre interface utilisateur, ouvrez l'outil Sequencer sous le graphique d'événement pour animer l'icône et l'indication « +1 ». Vous configurerez ensuite l'animation dans l'outil Sequencer.

Dans cet exemple, l'icône apparaît et l'indication « +1 » s'affiche lorsque le traqueur du joueur progresse, comme dans l'animation gif ci-dessous.

Pour en savoir plus sur l'utilisation de l'outil Sequencer, consultez le document Outils Sequencer et Control Rig.

1. Ouvrez la fenêtre Animation dans Fenêtre > Animations.

   

2. Cliquez sur +Animation et nommez l'animation OnIncrement.

   

Animer la visibilité d'un widget

Pour animer l'interface utilisateur, vous devez identifier le widget à animer, puis animer la texture ou le matériau associé à ce widget dans l'outil Sequencer, dans la fenêtre d'animation. Démarrez l'animation en sélectionnant IncrementText (+1).

1. Sélectionnez OnIncrement, sélectionnez +1 Texte, puis sélectionnez +Ajouter > IncrementText.

   

2. Sélectionnez l'icône +plus dans la piste IncrementText et sélectionnez Opacité de rendu. Cela vous permet de suivre l'opacité sur la chronologie de l'animation.

   

3. Définissez une clé pour le début de l'animation. Celle-ci détermine où le texte commence à apparaître et à disparaître.

   

4. Définissez l'option Opacité de rendu sur :

   1. 1.0 à 0.25 seconde

   2. 0.0 à 0.50 seconde

   

5. Vous disposez désormais d'une animation qui fait apparaître et disparaître le texte chaque fois que le joueur obtient une élimination.

   

Animer la position d'un widget

Ajoutez une animation à la position du widget de texte afin que le texte se déplace vers le haut lorsqu'il est visible avant de disparaître.

1. Cliquez sur l'icône +plus sur IncrementText et sélectionnez Transformer.

   

2. Développez Transformer > Translation et définissez Y sur la valeur à laquelle vous souhaitez que le texte +1 se déplace vers le haut tant qu'il est visible. Dans cet exemple, les images clés de la translation Y sur le texte sont définies sur :

   1. 0.0 à 0.0 s

   2. -20.0 à 0.25 s

   3. -20.0 à 0.50 s

   

   N'oubliez pas de définir des images clés pour chaque mouvement du texte.

Désormais, le texte se déplace vers le haut lorsqu'il apparaît.

Animer l'échelle d'un widget

Augmentez la taille du texte +1 animé lorsqu'il se déplace pour attirer l'attention sur les éliminations en animant les paramètres d'échelle du widget. Cette animation donne l'illusion que le texte « apparaît » à l'écran.

1. Développez IncrementText > Transformer > Échelle. Les valeurs X et Y apparaissent sous Échelle.

   

2. Définissez l'échelle X et l'échelle Y comme images clés sur votre chronologie OnIncrement. Dans cet exemple, les images clés d'échelle ont été définies sur :

   1. 0.0 à 0.0 s

   2. 2.0 à 0.10 s

   3. 0.0 à 0,50 s

Désormais, le texte +1 apparaît de manière spectaculaire lors de la lecture de l'animation.

Animer le paramètre de matériau d'un pinceau d'image

Pour que l'icône du matériau s'agrandisse à mesure que le traqueur progresse, accédez au matériau via l'outil Sequencer.

1. Sélectionnez l'image TrackerMaterial, puis cliquez sur +Ajouter > TrackerMaterial dans l'animation OnIncrement.

   

2. Cliquez sur l'icône +plus dans votre piste TrackerMaterial et sélectionnez Brush.Brush Material. Un suivi de matériau est alors ajouté à la propriété Brush.Brush.Material.

   

3. Cliquez sur l'icône +plus dans le nouveau suivi Brush.Brush.Material et sélectionnez IconScaleX et IconScaleY.

   

   Développez IconScaleX et IconScaleY. Vous pouvez facilement manipuler ces paramètres dans l'outil Sequencer lors de la lecture de l'animation OnIncrement. Ces paramètres vous permettent d'animer l'icône en augmentant ou en réduisant son échelle.

4. Définissez IconScaleX et IconScaleY sur :

   1. 0,7 à 0,00

   2. 1.0 à 0.25

   3. 0,7 à 0,00

   

L'animation utilise désormais les paramètres de matériau de TrackerMaterial pour animer l'icône, comme dans l'animation gif ci-dessous.

Ajouter une condition d'animation

Maintenant que vous êtes prêt à utiliser votre animation, liez-la à une valeur de jeu afin de déclencher la lecture d'une animation lorsqu'une valeur change dans le jeu.

1. Ouvrez la fenêtre Liaisons d'affichage en sélectionnant Fenêtre > Liaisons d'affichage.

   

2. Dans la fenêtre Liaisons d'affichage, sélectionnez +Ajouter une condition.

   

   La zone de gauche correspond à la valeur de jeu dont vous souhaitez suivre les modifications afin de déclencher l'animation de droite. Pour l'instant, l'option +Ajouter une condition accepte uniquement les valeurs Float et Int.

   
   

3. Sélectionnez la zone de gauche, puis sélectionnez MVVM_UEFN_Tracker > Valeur. Vous pourrez ainsi suivre la progression du traqueur en déclenchant une animation chaque fois que la valeur du traqueur augmente.

   

4. Cliquez sur la liste déroulante centrale et sélectionnez Supérieur à (>).

   Les deux zones centrales correspondent aux conditions à remplir pour déclencher l'animation. Chaque fois que la valeur change, le système vérifie si elle remplit cette condition et, si c'est le cas, l'animation se déclenche.

   Si vous sélectionnez Supérieur à (>) 0,0, l'interface utilisateur déclenche l'animation chaque fois que cette valeur change.

   

5. Sélectionnez la zone de droite, puis sélectionnez WBP_{YourWidgetName} > Animation de lecture en file d'attente. La zone de droite indique l'action à entreprendre lorsque cette valeur remplit la condition, en l'occurrence, lire l'animation OnIncrement créée ci-dessus.

   

   Une liste d'options relatives à l'animation que vous souhaitez lire s'affiche dans Liaisons d'affichage.

   • Animation d'entrée = Lire

   • Démarrer à l'heure = Sélectionnez une heure

   • Nbre de boucles à lire = Nombre de fois que l'animation est lue en boucle

   • Mode de jeu = Avant, Arrière ou Aller-retour

   • Vitesse de lecture = Accélérer ou ralentir l'animation

   • Restaurer l'état = Rétablit l'état par défaut de l'animation

   

6. Cliquez sur l'icône de lien en regard de InAnimation, puis sélectionnez WBP_{YourWidgetName} > OnIncrement > Sélectionner.

   

Vous venez de configurer votre animation de façon à déclencher sa lecture à chaque progression du traqueur.

[]

Résultat final

Au fur et à mesure que les joueurs éliminent des ennemis ou des PNJ, l'interface utilisateur indique la progression des éliminations avec l'icône qui s'affiche et l'indication +1 qui apparaît, puis disparaît.