maginons que votre jeu se déroule dans une ville. Il y aura sans doute des panneaux publicitaires. Dans un cadre moderne voir futuriste, certains ce ces panneaux devront être animés pour donner plus de caractère à votre scène, comme à Broadway par exemple.
Sans aller jusqu’à la création d’effets avancés, il est possible de faire des choses simples mais qui font leur effet. Nous allons donc créer un panneau avec du texte défilant.
Disclaimer
Cet article a été originalement écrit le 12/01/2014 sur mon précédent blog. Certaines informations présentées ici peuvent donc ne plus fonctionner telles quelles.
C’est parti
Quelque chose dans ce style là, sans l’effet LED :
Aller on y va ! De quoi allons-nous avoir besoin pour mettre tout ça en place ? Une texture, c’est tout. Il faut créer une texture avec le texte que l’on va animer. Prenez l’éditeur d’images de votre choix, Gimp, Paint.Net, Photoshop… et créez une texture large et pas très haute. Par exemple : 1024×128. Écrivez votre texte en blanc, en l’alignant à gauche. La couleur blanche est importante car elle vous permettra de jouer avec la couleur du texte directement dans Unity. Vous devriez avoir quelque chose comme ça :
La suite se passe dans l’éditeur. Pour faciliter le test, créons un sol en aplatissant un cube et ajoutons un controlleur FPS disponible dans les assets par défaut ainsi qu’une lumière directionnelle histoire d’y voir clair :
Passons à la création du panneau. Ajoutez un GameObject vide sur la scène, ce sera notre panneau. Ajoutez ensuite 2 Quads (GameObject > Create Other > Quad), et placez les dans le GameObject créé juste avant. Renommez tout ça comme suit :
Le premier Quad (Back) sera le fond du panneau, et le second (Text) contiendra le texte qui va défiler. Afin d’éviter tout problème de z-fighting entre le fond et le texte, je vous invite à faire tout d’abord un reset de leurs position en les plaçant en [0,0,0] par rapport à leur parent.
Prenez maintenant Text et déplacez le en Z à -0.01. Les deux éléments ne risquent maintenant plus de se marcher l’un sur l’autre. Il est temps maintenant d’agrandir les éléments selon vos besoins. Dans cet exemple, voilà les scales que j’ai utilisé :
- Back : [5.12, 0.64, 1]
- Text : [5, 1, 1]
Il nous faut créer 2 Materials, un pour chaque Quad. Utilisez le shader Transparent/Diffuse pour le texte afin d’avoir la transparence. Pour le fond, un simple Diffuse est suffisant. Affectez les Materials aux Quads concernés via les inspecteurs. Choisissez une Main Color noire pour le fond :
Si vous n’avez pas déplacé les quads en Z, vous devriez tomber sur un bon petit z-fighting des familles :
Profitez-en pour le corriger tout de suite si c’est le cas ! Déplacez Text en z (-0.01 est suffisant). Le setup de la scène est maintenant terminé. Passons au petit script qui va animer tout ça. Rien de bien méchant, on va simplement jouer avec l’offset de la texture pour la déplacer dans le temps.
public class TextureBillboard : MonoBehaviour
{
public GameObject TextRenderer;
public float XSpeed;
public float YSpeed;
void Update ()
{
var offset = TextRenderer.renderer.material.mainTextureOffset;
offset.x += XSpeed * Time.deltaTime;
offset.y += YSpeed * Time.deltaTime;
TextRenderer.renderer.material.mainTextureOffset = offset;
}
}
Pour ce script, 3 paramètres publics : le Quad dont on va modifier l’offset de texture, et la vitesse de déplacement en X et Y. La méthode d’Update va déplacer petit à petit l’offset de la texture, ce qui aura pour effet de visuellement déplacer le texte. Et c’est tout !
Retournons maintenant dans l’éditeur et affectez ce script à votre conteneur : TextureBillboard. Assignez le TextRenderer avec le Quad Text. Saisissez une vitesse en X, ou Y, ou les deux.
Voilà, vous avez un panneau avec du texte défilant. Les couleurs sont paramétrables via les Main Color des Materials utilisé, de quoi peupler facilement vos décors urbains !
Télécharger le script TextureBillboard
Crédits image : Reto
L'atelier de Drakulo 