Créer un panneau publicitaire simple

broadway_at_night_by_reto-d4nryol

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 :

led-electronic-display-panels-single-line-66270-4497649

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 :

billboard_bg
Le fond gris est là pour vous montrer le texte, il ne devrait pas y être chez vous !

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 :

Capture

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 :

2

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.

3

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 :

maincolor1

Si vous n’avez pas déplacé les quads en Z, vous devriez tomber sur un bon petit z-fighting des familles :

zfighting

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.

tex

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

Advertisements

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s