Unreal – Afficher un texte sur un actor

Sûrement un basique, afficher une barre de vie par exemple, le nom d’un personnage, …
Après quelques essais, je vous propose de voir ensemble les 2 différentes possibilités que j’ai pu trouver.

Avec un acteur, le plus simple possible, le résultat pourrait être

Je parle ici d’un actor, qui est un objet simple que vous pouvez facilement créer en ajoutant un blueprint.

Texte simple

Afin d’ajouter du texte sur un Actor, il suffit dans le Viewport de cet actor d’y ajouter le composant Text Render.

Une fois ajouté, vous pouvez le déplacer où vous le souhaitez.

Sauf que tel quel, le texte reste orienté dans une seule direction (quand on est face à l’actor)

On va devoir ajouter un peu de blueprint, pour ma part je me suis fait une fonction qui prend en paramètre un Text Renderer Component. C’est important quand vous sélectionner votre composant de texte.

On va voir chaque partie une par une, mais elle est assez courte à lire :

Le bloc le plus important récupère est la récupération de la rotation de notre référence.

Ce premier exemple, calcul par rapport à la caméra du joueur, mais on pourrait aussi récupérer par rapport au controller.
Selon si vous utilisez un Actor ou simplement une caméra.

Une fois votre référence trouvé, on récupère simplement la rotation par rapport aux coordonnées global, par rapport au world donc.

Pour les curieux, le but est qu’ils soit orienté exactement dans le même sens. Imaginez l’orientation de votre actor comme un vecteur. S’ils sont parallèle, ils seront donc forcément toujours face l’un par rapport à l’autre.
Après si l’élément est en dehors du champs de vision de l’autre, on ne le verra pas, mais sera quand même orienté.

Si on orientait le texte exactement vers la caméra, il ne serait lisible que lorsqu’on aura le texte pile en face et se déformerait de plus en plus sur les côtés.
Le texte de gauche a la même rotation que la caméra.
Celui du centre est au centre de l’écran.
Celui de droite est orienté VERS la caméra, et on peut voir une déformation.

L’étape suivante assez simple si vous avez réussi à comprendre mes explications, il suffit d’appliquer la rotation à au texte concerné.

Par contre le petit piège, comme on a appliqué exactement la même rotation que celle de notre référence, le texte sera forcément dans le même sens… soit à l’opposé de nous !

Afin de supprimer toute rotation de l’objet portant le texte, mais aussi pour remettre le texte dans le bon sens, on va changer la rotation local de l’objet, en faisant un demi tour !

Et voilà le résultat !

Widget component

Maintenant qu’on a vu la méthode compliquée, la méthode déportée.
En créant un Widget Blueprint.

Pour avoir un peu plus de visuel, je me suis amusé avec une progress bar en plus d’un élément Text mais plus pour que ce soit plus visible.

Afin d’y spécifier la valeur, si vous avez besoin qu’elle soit dynamique, il faudra binder la valeur. (Il y a d’autre manière, mais c’est simple et dédié, ce qui n’alourdit pas les autres éléments)

Afin de savoir ce qu’il faudra écrire, il vous faudra un paramètre d’entrée. Pour laisser la logique de gestion côté du widge, je demande le blueprint complet de mon Actor. On verra par la suite comment passer cette variable d’entrée.

Dans mon cas, je me base sur 2 des variables de mon Actor, libre à vous de vous baser sur ce que vous voulez.

Notre widget est prêt !
Il reste à l’ajouter à notre Actor.

Dans la configuration du Widget, changer le Space à Screen. Afin d’afficher les données sur l’écran. Il pourrait être pratique de sélectionner le widget nouvellement créé dans le Widget Class 😉

Côté blueprint, il nous reste à passer notre instance d’actor au widget.
Je me rends bien compte, qu’avoir nommé ma variable d’entrée target, n’était pas la meilleur idée.

Et voilà votre widget est alimenté.

Le point négatif du widget, il ne gère pas la profondeur, et se superpose facilement aux éléments.
Ainsi si on s’éloigne, on aura le composant tout aussi grand que prévu par le composant UI.

Résultat

Conclusion

Le texte renderer est bien pratique et s’intègre très bien dans la plus part des situations.

Le widget, est pratique dans le cas où les éléments sont toujours visible, dans le cas des jeux de plateau par exemple.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.