Unreal Engine Itemleiste: Eine Schnellauswahl-Leiste mit KI bauen

Eine Itemleiste in Unreal Engine besteht aus drei kleinen Ideen: einer Reihe von Slots, jeder mit eigenem Aussehen; einer Zahl, dem gewählten Slot; und einer Taste für jeden Slot, die diese Zahl ändert. Alles, was du siehst, der Rahmen, die Größe, das Abdunkeln und der Name, ist nur eine Reaktion auf diese eine Zahl. Am einfachsten baust du so etwas, indem du eine KI in einer einzigen Anfrage nach der ganzen Hotbar fragst.

In dieser Anleitung baut Ultimate Engine CoPilot eine Schnellauswahl-Leiste mit drei Slots auf den Tasten 1, 2 und 3. Du bekommst den genauen Prompt, siehst, wie die KI jede Taste getestet hat, und liest eine einfache Erklärung, wie eine Itemleiste funktioniert.

Was die fertige Leiste macht

Unten links auf dem Bildschirm sitzen drei kleine Slots: ein roter, ein blauer und ein grüner Edelstein. Der erste ist ausgewählt, mit goldenem Rahmen und etwas größer als die anderen, und der Name darüber lautet „Fire“. Du drückst 2, der Rahmen wandert zum blauen Edelstein, und der Name lautet „Frost“. Du drückst 3, der grüne Edelstein, „Heal“. Und 1, zurück zu Fire.

Die Leiste mit ausgewähltem grünem Slot Heal: goldener Rahmen, volle Größe, die anderen abgedunkelt.

Der Prompt

Kopiere ihn, ändere die Farben oder füge einen vierten Slot hinzu und sieh, was die KI daraus baut:

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.

Sieh dir die beiden Zahlen an: 115 Prozent und 55 Prozent. Sagst du nur „hebe den gewählten Slot hervor“, wählt die KI irgendetwas aus. Gibst du die Zahlen an, bekommst du gleich beim ersten Mal den gewünschten Look. Dazu ein kleines Detail: „über der bestehenden Fähigkeitenleiste und frei von ihr“. Sag immer, wo neue UI hinkommt, wenn auf dem Bildschirm schon welche ist.

So baut die KI es

Die KI beginnt damit, das Projekt und das HUD zu lesen, um zu sehen, wo die Fähigkeitenleiste sitzt. Dann erscheinen die Assets: das Widget der Itemleiste, der Controller-Blueprint und drei Enhanced Input Actions (IA_ItemSlot1, 2 und 3) samt Input Mapping, weil für einen Actor kein rohes Tasten-Event verfügbar ist.

Das Widget besteht aus vielen kleinen Teilen: drei Slots, drei Edelsteine, die Tastenzahlen, der Namenstext und drei Auswahl-Animationen. Die Input Actions sind so eingestellt, dass sie die Tasten nicht verbrauchen, sodass alles andere, was auf 1, 2 oder 3 liegt, weiter funktioniert. Das ist ein durchdachtes Detail.

Der Graph des Controllers: Jede Taste ruft Select Slot mit ihrer Nummer auf.

Der Playtest

Der Test klappt auf Anhieb:

• Am Start meldet der Controller Slot 1, der Name ist Fire, und der Screenshot zeigt Slot 1 mit goldenem Rahmen und größer, die anderen beiden abgedunkelt.
• Taste 2: Slot 2, Frost, und der Rahmen ist gewandert.
• Taste 3: Slot 3, Heal.
• Taste 1: Slot 1, wieder Fire.

Vier Prüfungen, alle bestanden, und nichts zu reparieren.

Der Bericht

Insgesamt sechs Assets, dazu die Hinweise, was nicht gemessen wurde.

Der Bericht listet auf, was gebaut wurde, insgesamt sechs Assets: das Widget, den Controller, drei Input Actions und das Mapping. Er ist ehrlich darüber, was er nicht gemessen hat:

• Die Animation von 0,15 Sekunden wurde im Spiel nicht gestoppt. Jede Prüfung wurde etwa 0,6 Sekunden nach der Taste gelesen, bestätigt also nur den Endzustand.
• Das Hauptmenü verdeckte die Leiste auf den Test-Screenshots, deshalb wirkt sie matt.
• Eine Änderung von SlotSize verschiebt weder den Edelstein noch die Layout-Box. Die Slots ändern ihre Größe, aber der Edelstein bleibt bei 26 Pixeln und der Container der Leiste ist fest 320 mal 130, ein viel größerer Slot würde also überlaufen.
• Das Level ist nicht gespeichert.

Wie eine Itemleiste funktioniert, einfach erklärt

Das Widget hält eine einzige Zahl, den gewählten Index. Bekommt der Controller die Taste 2, sagt er dem Widget: Wähle Slot 2. Das Widget speichert diese Zahl. Dann stellt sich jeder Slot eine Frage: Bin ich der gewählte? Wenn ja, spielt er die Auswahl-Animation: goldener Rahmen, Skalierung auf 115 Prozent, volle Helligkeit. Wenn nein, spielt er sie rückwärts: abgedunkelt auf 55 Prozent. Und der Namenstext wird über den Index gewählt: drei Slots, drei Namen.

Weil die Animationszeit und die Slotgröße Variablen sind, kannst du mit zwei Zahlen eine flotte oder eine langsame Leiste bauen.

Ideen zum Erweitern

• Das Mausrad zum Wechseln des Slots.
• Items, die wirklich etwas tun: Fire wirft eine Flamme, Frost bremst einen Gegner, Heal stellt Gesundheit wieder her.
• Eine Cooldown-Anzeige über jedem Slot und ein Zähler, wie viele du hast. Wie man Items zählt, zeigt das Unreal Engine Inventarsystem.

Vier Tipps für Prompts zur Itemleiste

1. Gib das Aussehen des gewählten und des abgedunkelten Slots als Zahlen an.
2. Sag, wo die Leiste hinkommt, relativ zur bestehenden UI.
3. Sag, welcher Slot am Start gewählt ist.
4. Bitte die KI, jede Taste zu testen, in gemischter Reihenfolge.

Häufig gestellte Fragen

Wie baue ich in Unreal Engine 5 eine Hotbar?

Halte einen gewählten Index in einem Widget, füge für jeden Slot eine Taste hinzu, die ihn setzt, und lass jeden Slot per Animation darauf reagieren, ob er der gewählte ist.

Warum nutzt die KI hier Enhanced Input Actions?

Über die Tools ist für einen Actor kein rohes Tasten-Event verfügbar, deshalb hat sie pro Taste eine Input Action und ein Mapping angelegt. Sie sind so eingestellt, dass sie keine Eingabe verbrauchen, sodass andere Belegungen auf diesen Tasten weiter funktionieren.

Kann ich die Slotgröße ändern?

SlotSize ist eine Variable, aber der Edelstein und der Container skalieren nicht mit. Ein viel größerer Slot würde den festen Container überlaufen, passe also auch das Layout an.

Probier es in deinem Projekt aus

Sieh dir auf der Produktseite an, was Ultimate Engine CoPilot bauen kann, oder hol es dir auf Fab. Erfahre, wie der KI-Blueprint-Generator funktioniert.

Weitere Builds aus dieser Serie: Unreal Engine Inventarsystem, Unreal Engine Fernkampfwaffe und Unreal Engine Hauptmenü.