Barre d'objets Unreal Engine : créer une hotbar à sélection rapide avec l'IA

Une barre d’objets dans Unreal Engine repose sur trois petites idées : une rangée d’emplacements, chacun avec son propre aspect ; un nombre, l’emplacement sélectionné ; et une touche pour chaque emplacement qui change ce nombre. Tout ce que vous voyez, la bordure, la taille, l’atténuation et le nom, n’est qu’une réaction à ce seul nombre. Le moyen le plus simple d’en construire une est de demander à une IA la hotbar complète en une seule requête.

Dans ce tutoriel pas à pas, Ultimate Engine CoPilot construit une barre à sélection rapide de trois emplacements sur les touches 1, 2 et 3. Vous obtenez le prompt exact, la façon dont l’IA a testé chaque touche et une explication claire du fonctionnement d’une barre d’objets.

Ce que fait la barre terminée

En bas à gauche de l’écran, il y a trois petits emplacements : une gemme rouge, une gemme bleue et une gemme verte. Le premier est sélectionné, avec une bordure dorée, un peu plus grand que les autres, et le nom au-dessus indique « Fire ». Vous appuyez sur 2 : la bordure passe à la gemme bleue et le nom indique « Frost ». Vous appuyez sur 3, la gemme verte, « Heal ». Et sur 1, retour à Fire.

La barre avec l’emplacement vert Heal sélectionné : bordure dorée, pleine taille, les autres atténués.

Le prompt

Copiez ceci, changez les couleurs ou ajoutez un quatrième emplacement, et voyez ce que l’IA construit :

Make a quick-select item bar. Create WBP_ItemBar in /Game/Series/EP38_ItemBar, a row of three square slots at the bottom left of the screen, above the existing ability bar and clear of it, each 72 pixels wide with the key number 1, 2 or 3 in the corner and a coloured gem in the middle: red for Fire, blue for Frost and green for Heal. The selected slot has a gold border and is scaled up to 115 percent, the other two are dimmed to 55 percent. Above the bar, show the name of the selected item, Fire, Frost or Heal. Create BP_ItemBarController in the same folder, an actor that I place once, that adds the widget on BeginPlay and listens for the keys 1, 2 and 3 to select the matching slot. The change animates over 0.15 seconds. Slot 1 is selected at the start. Keep the slot size and the animation time as variables. Place the actor near the player start. Then play test it: check slot 1 is selected at the start, press 2 and check slot 2 is selected and the name reads Frost, press 3 and check Heal, press 1 and check Fire, and fix anything that does not work.

Regardez les deux nombres : 115 % et 55 %. Si vous dites seulement « mettre en valeur l’emplacement sélectionné », l’IA choisit quelque chose. Si vous donnez les nombres, vous obtenez du premier coup l’aspect voulu. Et un petit détail : « above the existing ability bar and clear of it ». Dites toujours où va une nouvelle interface quand l’écran en contient déjà.

Comment l’IA le construit

L’IA commence par lire le projet et le HUD, pour voir où se trouve la barre de capacités. Ensuite, les assets apparaissent : le widget de la barre d’objets, le Blueprint du contrôleur et trois actions Enhanced Input (IA_ItemSlot1, 2 et 3) plus un input mapping, car aucun événement de touche brut n’est disponible pour un acteur.

Le widget comporte beaucoup de petites pièces : trois emplacements, trois gemmes, les numéros de touche, le texte du nom et trois animations de sélection. Les input actions sont réglées pour ne pas consommer les touches, donc tout ce qui est lié à 1, 2 ou 3 continue de fonctionner. C’est un détail bien pensé.

Le graphe du contrôleur : chaque touche appelle Select Slot avec son numéro.

Le test en jeu

Il réussit du premier coup :

• Au départ, le contrôleur indique l’emplacement 1, le nom est Fire, et la capture montre l’emplacement 1 avec la bordure dorée et plus grand, et les deux autres atténués.
• Appui sur 2 : emplacement 2, Frost, et la bordure s’est déplacée.
• Appui sur 3 : emplacement 3, Heal.
• Appui sur 1 : emplacement 1, Fire de nouveau.

Quatre vérifications, toutes réussies, et rien à corriger.

Le rapport

Six assets au total, et les remarques sur ce qui n’a pas été mesuré.

Le rapport liste ce qui a été construit, six assets au total : le widget, le contrôleur, trois input actions et le mapping. Il est honnête sur ce qu’il n’a pas mesuré :

• L’animation de 0,15 seconde n’a pas été chronométrée en jeu. Chaque vérification a été lue environ 0,6 seconde après la touche : elle ne confirme donc que l’état final.
• Le menu principal masquait la barre sur les captures d’écran du test, elle paraît donc terne.
• Changer SlotSize ne déplace ni la gemme ni la boîte de mise en page. Les emplacements se redimensionnent, mais la gemme reste à 26 pixels et le conteneur de la barre est fixé à 320 par 130, donc un emplacement beaucoup plus grand déborderait.
• Le niveau n’est pas enregistré.

Comment fonctionne une barre d’objets, en termes simples

Le widget garde un seul nombre, l’index sélectionné. Quand le contrôleur reçoit la touche 2, il dit au widget : sélectionne l’emplacement 2. Le widget mémorise ce nombre. Puis chaque emplacement se pose une seule question : suis-je le sélectionné ? Si oui, il joue l’animation de sélection : bordure dorée, échelle à 115 %, pleine luminosité. Sinon, il la joue en sens inverse : atténué à 55 %. Et le texte du nom est choisi selon l’index : trois emplacements, trois noms.

Comme la durée de l’animation et la taille des emplacements sont des variables, vous pouvez obtenir une barre vive ou lente avec deux nombres.

Idées pour aller plus loin

• La molette de la souris pour changer d’emplacement.
• Des objets qui font vraiment quelque chose : Fire lance une flamme, Frost ralentit un ennemi, Heal restaure la santé.
• Un balayage de temps de recharge sur chaque emplacement, et un compteur du nombre d’objets possédés. Le système d’inventaire Unreal Engine montre comment compter des objets.

Quatre conseils pour vos prompts de barre d’objets

1. Donnez l’aspect sélectionné et l’aspect atténué sous forme de nombres.
2. Dites où va la barre, par rapport à l’interface existante.
3. Dites quel emplacement est sélectionné au départ.
4. Demandez à l’IA de tester chaque touche, dans un ordre mélangé.

Questions fréquentes

Comment créer une hotbar dans Unreal Engine 5 ?

Gardez un index sélectionné dans un widget, ajoutez une touche pour chaque emplacement qui le définit, et faites réagir chaque emplacement avec une animation selon qu’il est le sélectionné ou non.

Pourquoi l’IA utilise-t-elle ici des actions Enhanced Input ?

Aucun événement de touche brut n’est disponible pour un acteur via les outils : elle a donc ajouté une input action par touche et un mapping. Elles sont réglées pour ne pas consommer l’entrée, donc les autres liaisons sur ces touches continuent de fonctionner.

Puis-je changer la taille des emplacements ?

SlotSize est une variable, mais la gemme et le conteneur ne s’adaptent pas à elle. Un emplacement beaucoup plus grand déborderait du conteneur fixe : ajustez donc aussi la mise en page.

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 système d’inventaire Unreal Engine, l’arme à distance Unreal Engine et le menu principal Unreal Engine.