Animer l'interface

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

Configurer le widget

Le widget utilise le widget Tracker de l'exemple dans la rubrique Définir des 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 Tracker 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, 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.

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 ensuite le texte +1, puis cliquez sur +Ajouter > Texte d’incrément.

   

2. Sélectionnez l'icône +plus dans la piste IncrementText, puis 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 comme suit :

   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 élimination du joueur.

   

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 de IncrementText et sélectionnez Transformer.

   

2. Développez Transformer > Translation et définissez Y en fonction de la distance souhaitée pour le déplacement vers le haut du texte +1 pendant 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 des 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, puis sélectionnez Brush.Brush.Material. Cela ajoute une piste de matériau à la propriété Brush.Brush.Material.

   

3. Cliquez sur l'icône +plus dans la nouvelle piste Brush.Brush.Material, puis 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 case 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 le menu déroulant central, puis 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 définissez l’option Supérieur à (>) 0,0, l'interface déclenche l'animation chaque fois que cette valeur change.

   

5. Sélectionnez la case de droite, puis sélectionnez WBP_{YourWidgetName} > Ajouter à la file d’animations. La zone de droite indique l'action à entreprendre lorsque cette valeur remplit la condition, En l'occurrence, pour 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.

   • En animation = Lecture

   • Heure de début = Sélectionner une heure

   • Nombre de boucles à lire = Nombre de boucles de lecture de l’animation

   • Mode de lecture = Avant, Arrière ou Ping-pong

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

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

   

6. Cliquez sur l'icône de lien à côté 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.