Unreal Engine Kompass: Eine Kompassleiste fürs HUD mit KI bauen

Eine Kompassleiste in Unreal Engine besteht aus drei kleinen Ideen: der Richtung, in die die Kamera schaut, als Winkel; einer Reihe von Buchstaben, die jeweils an dem Winkel sitzen, zu dem sie gehören; und einem Fenster, sodass nur die Buchstaben nahe der Mitte zu sehen sind. Die Reihe gleitet, wenn sich die Kamera dreht. Am einfachsten baust du so etwas, indem du eine KI in einer einzigen Anfrage nach dem ganzen HUD-Element fragst.

In dieser Anleitung baut Ultimate Engine CoPilot eine Kompassleiste am oberen Bildschirmrand mit N, E, S und W in Gold. Du bekommst den genauen Prompt, siehst, wie die KI alle vier Richtungen getestet hat, und liest eine einfache Erklärung, wie eine Kompassleiste funktioniert.

Was der fertige Kompass macht

Am oberen Bildschirmrand zeigt eine dünne Leiste die Richtung, in die du schaust. Drehst du die Kamera, gleiten die Buchstaben seitlich, wie bei einem echten Kompass in einem Spiel. N in Gold, dann E, dann S, dann W, und eine kleine Zahl unter dem Marker zeigt den Kurs in Grad.

Die Kompassleiste folgt der Kamera, unter der Blizzard-Box.

Der Prompt

Kopiere ihn, ändere die sichtbaren Grad oder die Farben und sieh, was die KI daraus baut:

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.

Wichtig ist der letzte Teil des Setups: „Behandle die Welt-Achse +X als Norden und die Welt-Achse +Y als Osten“. Unreal kennt kein Norden, nur Achsen. Sagst du nicht, welche Achse Norden ist, muss die KI eine wählen, und am Ende zeigt dein Kompass womöglich in die falsche Richtung. Sag es also immer.

So baut die KI es

Die KI beginnt damit, das Projekt zu lesen. Sie findet die Blizzard-Box oben im HUD und misst, wo sie endet, damit die Leiste direkt darunter sitzen kann. Dann erscheinen die Assets: das Widget für die Kompassleiste und der Controller-Blueprint.

Die Logik des Controllers: Begin Play fügt das Widget hinzu, und Tick liest den Yaw der Kamera und bewegt die Buchstaben. Die Buchstaben blenden an den Enden der Leiste aus, damit sie nicht einfach auftauchen und wieder verschwinden.

Der Graph des Controllers: Er fügt das Widget hinzu und aktualisiert es dann bei jedem Tick anhand der Kamera.

Der Playtest

Die KI muss zuerst die Kamera drehen, also sucht sie nach einer Möglichkeit dazu. Dann prüft sie vier Richtungen:

• Blick nach +X: Der Kurs ist 0, und N steht in der Mitte.
• Blick nach +Y: 90 und E.
• Blick nach -X: 180 und S.
• Blick nach -Y: 270 und W.

Sie liest die Zahlen aus dem Controller und die Buchstaben von einem Screenshot, und die Nachbarn sitzen auf beiden Seiten richtig, zum Beispiel NW und NE rund um das N. Alle vier bestehen.

Dann eine Kleinigkeit auf dem Screenshot: Das Marker-Dreieck berührte die Oberkante des mittleren Buchstabens. Die KI hat die Leiste deshalb etwas höher gemacht, von 40 auf 46 Pixel, und die Buchstaben nach unten verschoben.

Der Bericht

Was gebaut wurde und was du wissen solltest.

Die Leistenbreite (600) und die Zahl der sichtbaren Grad (180) sind Variablen am platzierten Actor. Der Bericht ist bei einigen Dingen ehrlich:

• Die letzte Änderung, die höhere Leiste, wurde in keiner weiteren Spielsitzung getestet. Das Layout kompiliert, aber es gab keinen weiteren Durchlauf.
• Die Leiste sitzt auf fester Höhe, y=150, um die Blizzard-Box freizuhalten, deren Text über ihr Panel hinausläuft. Der Versatz ist nicht mit dem HUD verknüpft: Verschiebst du die Box, bewegt sich der Kompass nicht mit.
• Das Level ist nicht gespeichert.
• Das Hauptmenü hat die Screenshots abgedunkelt. Deshalb zeigt das Video auch einen echten Durchlauf, bei dem man sich einmal ganz herumdreht.

Wie eine Kompassleiste funktioniert, einfach erklärt

In jedem Frame nimmt der Controller den Yaw der Kamera und macht daraus einen Kurs von 0 bis 360. Null ist +X, das wir Norden genannt haben. Jeder Buchstabe hat einen Winkel: N bei 0, E bei 90 und so weiter.

Für jeden Buchstaben berechnet der Controller, wie weit er vom Kurs entfernt ist, und wandelt das in eine Pixelposition auf der Leiste um. Buchstaben außerhalb der sichtbaren Grad werden ausgeblendet, und die nahe an den Rändern blenden aus. Weil die Leistenbreite und die sichtbaren Grad Variablen sind, kannst du mit zwei Zahlen einen breiten oder einen engen Kompass bauen.

Ideen zum Erweitern

• Marker auf dem Kompass, zum Beispiel ein Quest-Marker, der an der Leiste entlanggleitet. Mehr dazu in der Unreal Engine Zielmarkierung.
• Die Entfernung zum Marker in Metern darunter.
• Eine Leiste, die ausblendet, wenn du die Kamera nicht bewegst.

Vier Tipps für Kompass-Prompts

1. Sag, welche Welt-Achse Norden ist.
2. Sag, wie groß die Leiste ist und wohin sie kommt.
3. Sag, welche Buchstaben groß und welche klein sind.
4. Bitte die KI, alle vier Richtungen zu testen.

Häufig gestellte Fragen

Wie baue ich in Unreal Engine 5 eine Kompassleiste?

Lies den Yaw der Kamera in jedem Frame als Kurs von 0 bis 360, platziere eine Reihe von Buchstaben anhand der Differenz zwischen dem Winkel jedes Buchstabens und dem Kurs und blende Buchstaben außerhalb eines sichtbaren Fensters aus.

Wo ist Norden in Unreal Engine?

Unreal kennt kein Norden, nur Achsen. Wähle eine aus und sag sie in der Anfrage. Hier ist +X Norden und +Y Osten.

Warum hat die KI die Leiste höher gemacht?

Auf dem Screenshot berührte das Marker-Dreieck die Oberkante des mittleren Buchstabens. Die KI hat die Leiste von 40 auf 46 Pixel erhöht und die Buchstaben nach unten verschoben.

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 Zielmarkierung, Unreal Engine Schnellreise und Unreal Engine Zoom-Ansicht.