Barre de boussole Unreal Engine : créer un HUD de boussole avec l'IA

Une barre de boussole dans Unreal Engine repose sur trois petites idées : la direction vers laquelle la caméra regarde, sous forme d’angle ; une rangée de lettres, chacune placée à l’angle qui lui correspond ; et une fenêtre, pour que seules les lettres proches du milieu soient affichées. La rangée glisse quand la caméra tourne. Le moyen le plus simple d’en construire une est de demander à une IA l’élément de HUD complet en une seule requête.

Dans ce tutoriel pas à pas, Ultimate Engine CoPilot construit une barre de boussole en haut de l’écran avec N, E, S et W en doré. Vous obtenez le prompt exact, la façon dont l’IA a testé les quatre directions et une explication claire du fonctionnement d’une barre de boussole.

Ce que fait la boussole terminée

En haut de l’écran, une fine barre indique la direction dans laquelle vous regardez. Vous tournez la caméra et les lettres glissent sur le côté, comme une vraie boussole dans un jeu. Le N en doré, puis E, puis S, puis W, et un petit nombre sous le marqueur indique le cap en degrés.

La barre de boussole sous la boîte Blizzard, qui suit la caméra.

Le prompt

Copiez ceci, changez les degrés visibles ou les couleurs, et voyez ce que l’IA construit :

Make a compass bar. Create WBP_CompassBar in /Game/Series/EP37_Compass, a thin horizontal bar at the very top of the screen, 600 pixels wide and centred, below the existing Blizzard box. It shows the direction the player's camera is facing as letters that slide sideways as the camera turns: N, NE, E, SE, S, SW, W, NW, with a small white triangle marker in the middle. The letters for the main directions N, E, S and W are larger and gold, the in-between ones smaller and white. Also show the heading in degrees as a number under the marker, for example 90. Create BP_CompassController in the same folder, an actor that I place once, that adds the widget to the screen and updates it every frame from the player camera's yaw. Treat world +X as North and world +Y as East. Keep the bar width and the number of visible degrees as variables. Place the actor near the player start. Then play test it: turn the camera to face +X and check the heading reads 0 with N in the middle, turn it to +Y and check 90 with E, turn it to -X and check 180 with S, turn it to -Y and check 270 with W, and fix anything that does not work.

Le détail qui compte est la dernière partie de la configuration : « Treat world +X as North and world +Y as East ». Unreal n’a pas de nord, seulement des axes. Si vous ne dites pas quel axe est le nord, l’IA doit en choisir un, et vous pouvez vous retrouver avec une boussole qui pointe dans le mauvais sens. Précisez-le donc toujours.

Comment l’IA le construit

L’IA commence par lire le projet. Elle trouve la boîte Blizzard en haut du HUD et mesure où elle se termine, pour que la barre puisse se placer juste en dessous. Ensuite, les assets apparaissent : le widget de la barre de boussole et le Blueprint du contrôleur.

La logique du contrôleur : Begin Play ajoute le widget, et Tick lit le yaw de la caméra et déplace les lettres. Les lettres s’estompent près des extrémités de la barre, pour ne pas apparaître et disparaître brusquement.

Le graphe du contrôleur : il ajoute le widget, puis le met à jour depuis la caméra à chaque tick.

Le test en jeu

L’IA doit d’abord tourner la caméra, donc elle cherche comment faire. Puis elle vérifie quatre directions :

• Face à +X : le cap est 0 et N est au milieu.
• Face à +Y : 90 et E.
• Face à -X : 180 et S.
• Face à -Y : 270 et W.

Elle lit les nombres depuis le contrôleur et les lettres depuis une capture d’écran, et les voisines sont bien placées de chaque côté, comme NW et NE autour du N. Les quatre réussissent.

Puis un petit détail ressort de la capture : le triangle du marqueur touchait le haut de la lettre centrale. L’IA a donc agrandi un peu la barre, de 40 à 46 pixels, et descendu les lettres.

Le rapport

Ce qui a été construit et ce qu’il faut savoir.

La largeur de la barre (600) et le nombre de degrés visibles (180) sont des variables sur l’acteur placé. Le rapport est honnête sur quelques points :

• Le dernier changement, la barre plus haute, n’a pas été testé dans une autre session de jeu. La mise en page compile, mais aucun nouvel essai n’a été fait.
• La barre se trouve à une hauteur fixe, y=150, pour passer sous la boîte Blizzard, dont le texte déborde du panneau. Ce décalage n’est pas lié au HUD : si vous déplacez la boîte, la boussole ne bouge pas.
• Le niveau n’est pas enregistré.
• Le menu principal assombrissait les captures d’écran. C’est pourquoi la vidéo montre aussi un vrai essai où l’on fait un tour complet.

Comment fonctionne une barre de boussole, en termes simples

À chaque frame, le contrôleur prend le yaw de la caméra et le transforme en cap de 0 à 360. Zéro correspond à +X, que nous avons appelé le Nord. Chaque lettre a un angle : N à 0, E à 90, et ainsi de suite.

Pour chaque lettre, le contrôleur calcule l’écart avec le cap et le convertit en position en pixels sur la barre. Les lettres hors des degrés visibles sont masquées, et celles près des bords s’estompent. Comme la largeur de la barre et les degrés visibles sont des variables, vous pouvez obtenir une boussole large ou resserrée avec deux nombres.

Idées pour aller plus loin

• Des marqueurs sur la boussole, comme un marqueur de quête qui glisse le long de la barre. Voir le marqueur d’objectif Unreal Engine.
• La distance jusqu’au marqueur, en mètres, en dessous.
• Une barre qui s’estompe quand vous ne bougez pas la caméra.

Quatre conseils pour vos prompts de boussole

1. Dites quel axe du monde est le nord.
2. Dites la taille de la barre et son emplacement.
3. Dites quelles lettres sont grandes et lesquelles sont petites.
4. Demandez à l’IA de tester les quatre directions.

Questions fréquentes

Comment créer une barre de boussole dans Unreal Engine 5 ?

Lisez le yaw de la caméra à chaque frame sous forme de cap de 0 à 360, placez une rangée de lettres selon la différence entre l’angle de chaque lettre et le cap, et masquez les lettres hors d’une fenêtre visible.

Quelle direction est le nord dans Unreal Engine ?

Unreal n’a pas de nord, seulement des axes. Choisissez-en un et indiquez-le dans la requête. Ici, +X est le Nord et +Y est l’Est.

Pourquoi l’IA a-t-elle agrandi la barre ?

Sur la capture d’écran, le triangle du marqueur touchait le haut de la lettre centrale. L’IA a fait passer la barre de 40 à 46 pixels et descendu les lettres.

Essayez-le dans votre projet

Découvrez ce qu’Ultimate Engine CoPilot peut construire sur la page produit, ou procurez-vous-le sur Fab. Découvrez comment fonctionne le générateur de Blueprint IA.

Plus de réalisations de cette série : le marqueur d’objectif Unreal Engine, le voyage rapide Unreal Engine et le zoom Unreal Engine.