Créer un HUD avec UMG dans Unreal Engine 5
Tu veux afficher un score, une barre de vie ou un compteur par-dessus ton jeu ? Dans Unreal Engine, on fabrique ça avec UMG. Ce guide t’explique comment créer un Widget Blueprint, le ranger avec des box et des ancres, l’afficher en jeu au bon endroit, puis changer son texte pendant la partie.
HUD ou menu ?
L’interface, c’est tout ce qui s’affiche par-dessus le jeu. Le HUD montre l’état de la partie (vie, score, temps) : on ne clique pas dessus. Un menu, lui, a des boutons : pause, victoire. UMG sert aux deux.
Créer le Widget Blueprint
Un widget est un morceau d’écran : un texte, une image, un bouton. On les range dans un Widget Blueprint, créé depuis le Content Browser. Il s’ouvre avec deux onglets : Designer pour l’apparence, Graph pour la logique, avec des nœuds. Dans le Designer, tu glisses des widgets depuis Palette vers l’aperçu, et Details règle le widget sélectionné.
Les widgets de base
- Text affiche des mots ou des nombres. Font puis Size règle la taille, Color and Opacity la couleur.
- Image affiche une texture ou un matériau, choisi dans Brush, Image. Sans rien dedans, c’est un rectangle blanc que Color and Opacity peut teinter.
- Progress Bar est une barre qui se remplit. Son réglage Percent va de 0 (vide) à 1 (pleine), pas de 0 à 100 : à moitié pleine, c’est 0.5. À 0, la couleur de remplissage n’est pas visible : c’est normal.
Chaque Widget Blueprint que tu crées peut aussi se glisser dans un autre widget : une seule version à corriger, et tous les widgets qui l’utilisent sont à jour.
Ranger avec les box et les ancres
Sur un Canvas Panel, chaque widget a sa propre position : si un texte grandit, il peut passer sous la barre. Les box rangent toutes seules leurs enfants. Une Vertical Box les empile de haut en bas, une Horizontal Box les aligne de gauche à droite.
- Dans une box, chaque enfant a un réglage Size : Auto prend juste la place nécessaire, Fill prend toute la place qui reste.
- Padding ajoute de l’espace autour d’un enfant.
- Visibility : Hidden cache un widget mais garde sa place, Collapsed le cache et lui retire sa place.
Le Canvas Panel coûte plus cher qu’une box : un seul à la racine d’un écran, ça va.
Sur un Canvas, chaque widget est accroché à un point de l’écran : son ancre. Quand l’écran change de taille, le widget garde la même distance avec elle. Par défaut, l’ancre est en haut à gauche, et Anchors propose des préréglages pour la placer ailleurs.
Afficher le HUD en jeu
Un Widget Blueprint n’est qu’un plan. Pour l’afficher, Create Widget le fabrique, puis Add to Viewport le dessine. Sans Add to Viewport, rien n’apparaît.
Où mettre ces nœuds ? Si tu les mets dans l’Event BeginPlay du personnage et que ce personnage est détruit puis recréé, le nouveau personnage refait son BeginPlay et crée un deuxième écran posé sur le premier. L’écran doit suivre le joueur, pas son personnage.
La solution : la classe HUD, que le GameMode choisit dans HUD Class. Elle est créée une fois pour chaque joueur, avec son Controller, et elle reste quand le personnage change. Tu y crées le widget dans son Event BeginPlay, tu gardes une référence vers lui dans une variable, puis tu l’ajoutes à l’écran.
Changer un texte pendant la partie
En gros : tu coches Is Variable sur le Text (un Text ne l’est pas au départ) pour le retrouver dans le Graph. Là, un widget n’a pas d’Event BeginPlay : il a Event Construct, lancé quand le widget arrive à l’écran. Tu crées un Custom Event avec une entrée de type Integer, qui appelle SetText (Text) sur ton Text. Le jeu n’a plus qu’à appeler cet événement avec la nouvelle valeur.
Le pas à pas complet, avec les captures de l’éditeur, des quiz et un mini-projet, est dans le chapitre « Interface (UMG) » du cours.
Questions fréquentes
Mon texte n’apparaît pas dans My Blueprint, pourquoi ?
Is Variable n’est pas coché sur ce Text. Coche-le en haut de Details et compile : il apparaît.
Mon HUD n’apparaît pas quand je joue, pourquoi ?
Create Widget fabrique l’écran mais ne le montre pas. Il manque Add to Viewport, avec Target relié à Return Value.
J’ai deux HUD superposés quand mon personnage est détruit puis recréé, pourquoi ?
Le nouveau personnage refait son Event BeginPlay et crée un deuxième écran. Crée le widget dans la classe HUD du GameMode plutôt que dans le personnage.
Sources officielles
- User Interfaces and HUDs (documentation Epic)
- Widget Blueprints in UMG (documentation Epic)
- UMG UI Designer Quick Start Guide (documentation Epic)
- Creating Widgets (documentation Epic)
- Gameplay Framework (documentation Epic)
- Game Mode and Game State (documentation Epic)
- Create Widget (documentation Epic)
- UMG Anchors (documentation Epic)
- UMG Best Practices (documentation Epic)
- Optimization Guidelines for UMG (documentation Epic)
- UTextBlock (documentation Epic)
- UImage (documentation Epic)
- UProgressBar (documentation Epic)
- UVerticalBox (documentation Epic)
- ESlateVisibility (documentation Epic)
- UWidget (documentation Epic)
- UUserWidget (documentation Epic)
- Custom Events (documentation Epic)
À lire aussi : créer un menu pause avec des boutons, GameMode, GameState et PlayerState et Pawn, Character et Controller.
Tu veux construire ton propre écran de jeu ? Suis des leçons courtes, des quiz et des mini-projets pour afficher et mettre à jour ton HUD, à ton rythme.
Apprendre Unreal Engine 5 gratuitement