Faire clignoter du texte à l’écran

Avec Unity, il est possible de faire des choses simples rapidement, sans pour autant faire n’importe quoi. Pour ce premier article, attaquons avec un petit script utilitaire d’animation de texte pour le faire clignoter. C’est un effet simple à réaliser et qui peut être réutilisé facilement.

Disclaimer

Cet article a été originalement écrit le 07/12/2013 sur mon précédent blog. Certaines informations présentées ici peuvent donc ne plus fonctionner telles quelles.

Commençons !

Ce script est prévu pour fonctionner le plus simplement possible et devra être rattaché à un Game Object de type GUIText. Commencez par en ajouter un à la scène :

GameObject > Create Other > GUI Text

Maintenant, passons au code. On va créer un script CSharp et le nommer Blink. Les deux méthodes Start et Update sont ajoutées automatiquement, ce qui tombe bien car on va en avoir besoin. Laissez les de côté pour le moment.

Le script va avoir besoin de quelques variables privées et publiques :

public float TextBlinkTime = 1f;

private Color _textColorON;
private Color _textColorOFF;
private bool _fadingIn;
private float _timer;
private float _tmpDeltaTime;

La seule variable publique va nous permettre de modifier le temps d’animation du texte. C’est toujours pratique d’avoir ça sous la main depuis l’éditeur. Les autres variables seront expliquées plus tard.

Passons à la méthode Start. On va stocker deux couleurs : ON et OFF. Ces couleurs serviront de points de repères pour l’animation. Afin de rendre les choses bien transparentes, ces couleurs vont être créées à partir de la couleur définie sur le GUIText auquel sera attaché ce script :

var textColor = guiText.color;
_textColorON = new Color(textColor.r, textColor.g, textColor.b, 1);
_textColorOFF = new Color(textColor.r, textColor.g, textColor.b, 0);
 
_fadingIn = false;
_timer = Time.time;

La couleur ON est construite avec le canal alpha à 1 (visible) et la couleur OFF avec un canal alpha à 0 (invisible). On en profite pour initialiser le sens d’animation et le timer. C’est tout pour le moment pour Start.

Passons maintenant à la méthode Update. On veut que le texte devienne invisible, puis redevienne visible. Il faut donc mettre en place un système de va et vient permanent. C’est là que les variables _timer et _tmpDeltaTime vont intervenir avec la méthode Lerp.

Dans la méthode Start, on a initialisé _timer à Time.time : on stocke le temps d’origine, ce qui servira de point de repère pour connaitre le temps écoulé. On va faire un petit calcul pour avoir le temps écoulé ramené sur une plage entre 0 et 1. Cette étape peut sembler bizarre mais vous allez vite comprendre pourquoi. On veut que l’animation dure TextBlinkTime secondes :

_tmpDeltaTime = (Time.time - _timer) / TextBlinkTime;

Ensuite, c’est presque terminé. Lerp va faire presque tout le travail restant !

if(_fadingIn)
{
 guiText.color = Color.Lerp(_textColorOFF, _textColorON, _tmpDeltaTime);
}
else
{
 guiText.color = Color.Lerp(_textColorON, _textColorOFF, _tmpDeltaTime);
}

La méthode Lerp est présente dans beaucoup de classes de bases et permet de faire de l’interpolation entre 2 valeurs. Dans ce cas, on peut faire une interpolation entre deux couleurs. Le troisième paramètre est l’indicateur de progression dans l’interpolation et doit être compris entre 0 et 1.

Reste à mettre en place le changement de sens d’animation pour boucler à l’infini une fois l’interpolation terminée. C’est à dire une fois que la progression proportionnelle dépasse 1. (> 100%) :

if(_tmpDeltaTime > 1)
{
 _fadingIn = !_fadingIn; 
 _timer = Time.time;
}

On inverse simplement le sens de l’animation, on réinitialise la référence de temps, et c’est bon. Ajoutez ce script sur votre GUI Text, lancez le mode play et vous le verrez apparaitre / disparaitre.

Pour aller plus loin

Dans ce script, tout est géré dans la méthode Update. Il est possible de procéder autrement en utilisant des coroutines mais ça ne me semble pas justifié ici dans la mesure où le va et vient est effectué en permanence.

Si vous essayez de jouer avec la couleur du texte pendant le mode play via l’inspecteur de votre GUIText, vous remarquerez que la couleur de change pas. C’est normal car dans le cadre de l’animation, elle est stockée une seule fois dans la méthode Start.

Pour pouvoir modifier à la volée cette information de couleur, il faut « recharger » la couleur du texte à chaque appel d’Update. C’est un traitement supplémentaire qui n’a pas vraiment lieu d’être en dehors de l’éditeur pour faire des essais. Voyons voir comment faire ça avec les instructions pré-processeur :

#if UNITY_EDITOR
var textColor = guiText.color;
_textColorON = new Color(textColor.r, textColor.g, textColor.b, 1);
_textColorOFF = new Color(textColor.r, textColor.g, textColor.b, 0);
#endif 

Pas de panique si vous n’avez pas l’habitude de vous servir de ça, c’est très simple en réalité. Ce bout de code ne sera ajouté à la compilation que si UNITY_EDITOR est vrai. Pas besoin de vous en occuper, c’est Unity qui gère. En ajoutant ce code en haut de la méthode Update, si vous testez depuis l’éditeur, la couleur d’animation sera mise à jour depuis celle définie dans le GUIText. Vous pouvez maintenant jouer avec l’inspecteur et modifier à la volée la couleur du texte pendant l’animation.

Voilà, un beau petit script simple et optimisé pour animer du texte ! Le script complet et commenté est disponible ici : Télécharger le script Blink

 

Crédits image : Crédits image : Alternate Photography

Publicité