Spieler-HUD

Die Benutzeroberfläche (UI) eines Spiels umfasst alles, womit der Spieler visuell interagiert, etwa Menüs, Pausieren-Bildschirme, Inventar, Dialogboxen und das Heads-up-Display des Spielers (HUD). Das HUD ist jeder Teil der Benutzeroberfläche, der während des Gameplays auf dem Bildschirm sichtbar bleibt, wie die Kondition des Spielers, die Ausrüstung oder die Ziel-Indikatoren.

Da dein Charakter nun in der Lage ist, Gegenstände aufzuheben, lernst du jetzt, wie du das UMG-System (Unreal Motion Graphics) der Unreal Engine nutzen kannst, um ein HUD zu bauen, das dem Spieler zeigt, welche Schlüssel er eingesammelt hat. Mit UMG kannst du ein HUD Design, indem du Benutzeroberfläche Elemente in einem visuellen Editor ziehst und anordnest, sodass du genau weißt, was der Spieler im Spiel sehen wird.

Bevor du anfängst

Stelle sicher, dass du die Themen verstehst, die in den vorherige Sektionen von Entwerfen eines Rätsel-Abenteuers behandelt wurden:

• Blueprints-Grundlagen wie Variablen, Funktionen, Event-Diagramme und das Hinzufügen von Knoten.

Du benötigst aus Erstellen eines Schlüssels folgende Assets:

• BP_Key Blueprint-Klasse

• BP_AdventureCharacter Blueprint-Klasse

• Enum_KeyType-Aufzählung

Erstellen eines Widget-Blueprints

UMG enthält einen speziellen Blueprint-Typ namens Widget, mit dem du verschiedene Benutzeroberfläche Elemente erstellen kannst. Um mit dem Erstellen Ihres HUD zu beginnen, erstelle ein neues Widget-Blueprint-Asset. 

Um einen neuen Widget-Blueprint zu erstellen, tust du Folgendes:

1. Im Inhaltsbrowser, gehst du zu Inhalt > Abenteuerspiel > Designer > Blueprints und erstelle einen Ordner mit dem NamenWidgets, um deine UI-Assets zu speichern.

   

2. Erstelle im neuen Widgets-Ordner ein neues Asset, indem du auf einen leeren Gebiet im Ordner rechtsklickst und Benutzeroberfläche > Widget-Blueprint auswählst.

   

3. Klicke im Fenster Parent-Klasse auswählen auf Benutzer-Widget.

   

4. Gebe einen Namen für Ihr Widget ein. Dieses Tutorial verwendet WBP_PlayerHUD.

5. Doppelklicke auf den Blueprint, um ihn zu öffnen.

Entdecken des Widget-Blueprint-Editors

Widget-Blueprints können in einem speziellen Widget-Editor geöffnet werden, der zwei Modi hat: Designer und Diagramm. Verwende die Schaltflächen oben rechts im Editor, um zwischen den Modi zu wechseln. 

Im Designer-Modus kannst du einzelne Teile Ihrer Benutzeroberfläche hinzufügen und bearbeiten. 

Auf der linken Seite des Widget Editor enthält die Palette sämtliche Widget Typen, die du zu deiner Benutzeroberfläche hinzufügen kannst. Das Hierarchie-Panel zeigt die Struktur Ihrer UI-Komponenten. Die Reihenfolge und Verschachtelung der Widgets in diesem Bereich wirkt sich auf das Layout und die Darstellung Ihrer Benutzeroberfläche aus.

Das Raster in der Mitte des Fensters ist der visuelle Designer. Verwende wie in Ihren Blueprint-Event-Diagrammen das Mausrad zum Vergrößern und Verkleinern und die rechte Maustaste zum Schwenken Ihres Blueprints.

Das Zoomlevel oben links im Raster aktualisiert sich, wenn dz hinein- oder hinauszoomst. Zoom 1:1 bedeutet, du betrachtest Ihre Benutzeroberfläche in 100 % Maßstab und zeigen, wie deine UI-Elemente im Spiel auf einem Bildschirm dieser Auflösung erscheinen werden. Wenn ein Spieler Ihr Spiel auf einem kleineren Bildschirm ausführt, verwendet Unreal Engine DPI-Skalierung, um Ihre Benutzeroberfläche so zu skalieren, dass sie auf den Bildschirm passt.

Die untere linke Ecke des Rasters enthält Informationen zur aktuellen Bildschirmgrößenvorgabe. Dies ist die Bildschirmgröße, die für die Vorschau Ihres Widget-Blueprints angezeigt wird. Standardmäßig ist es auf einen 720p-Fernsehbildschirm eingestellt.

Beginne mit einem Canvas-Panel

Im Palette-Tab werden Widgets nach Typ sortiert. Panel-Widgets zeigen nichts auf dem Bildschirm an; sie sind wie Container, die das Layout und die Positionierung der darin platzierten Widgets kontrollieren. Panels sind nützlich, um die Benutzeroberfläche automatisch an unterschiedliche Fernsehbildschirmgrößen und Monitorauflösungen anzupassen.

Canvas-Panels sind die flexibelste Art von Panel-Widget und eignen sich perfekt für HUDs. Während andere Panels Widgets in einem bestimmten Layout oder einer bestimmten Ausrichtung anordnen, verwenden Canvas Panels Anker, um Widgets genau dort zu platzieren, wo du sie haben möchtest, und stelle sicher, dass alles an Ort und Stelle bleibt, wenn sich die Größe ändert.

Um ein Canvas-Panel zu erstellen, gehe folgendermaßen vor:

1. Suche im Palette-Tab nach Canvas und ziehe ein Canvas-Panel in das Hierarchie-Panel über [WBP_PlayerHUD], damit es darunter geschachtelt wird.

   

   Im visuellen Designerbereich in der Mitte des Fensters wird ein Rechteck angezeigt.

Dieses Canvas ist das Stamm-Widget der Benutzeroberfläche. Jeder Widget-Blueprint muss ein Stamm-Widget haben, das UI-Element des obersten Levels, das alle anderen Widgets enthält. Wenn du ein weiteres Widget in der Canvas platzierst, besteht eine hierarchische Beziehung zwischen beiden, wobei die Canvas das Parent und das andere Widget ein Child ist.

Standardmäßig ist ein Canvas-Panel 1920 x 1080 Pixel groß und stellt den gesamten Bildschirm dar. Dies ist eine gängige Auflösung und ein guter Ausgangspunkt für die Arbeit. Behalte also diese Canvas-Größe bei. Zur Laufzeit skaliert Unreal Engine die Benutzeroberfläche so, dass sie auf den Bildschirm des Spielers passt.

Erstelle das Layout für Ihr HUD

Nun, da du eine Canvas habst, verankere in der oberen linken Ecke der Benutzeroberfläche Bereiche für Spieler und Inventar. 

Um die Bereiche für Text auf dem Canvas zu definieren, gehe folgendermaßen vor:

1. In Palette, suchst du nach Overlay und ziehst ein Overlay-Panel in die Hierarchie, so dass es als Child-Widget unter dem Canvas-Panel geschachtelt ist.

   

   Overlays sind eine Art von Panel, das mehrere Widgets im selben Bereich übereinander anordnet. Sie sind nützlich, um ein Hintergrundbild hinter UI-Elementen oder ein statisches Symbol oder ein Textlabel über UI-Elementen hinzuzufügen. In diesem HUD wirst du einen Weichzeichnen-Effekt hinter den UI-Text als übereinanderlegen, damit er leichter zu lesen ist.

2. Wähle das neue Overlay aus. Dieses Panel ist ein Child-Element des Canvas und erhält daher einen Ankerpunkt in der oberen linken Ecke des Canvas.

   

   Für dieses Tutorial lässt du den Ankerpunkt dort, aber im Details-Panel kannst du den Ankerpunkt mit der Verankert-Eigenschaft verschieben.

   

3. Im Details-Panel, stelle die Position X und Position Y auf 20. Dies ist die Anzahl der Pixel, die das Overlay-Panel vom Anker entfernt positioniert ist. Durch das Hinzufügen eines Versatzes wird das Erscheinungsbild der Benutzeroberfläche verbessert und verhindert, dass Text über den Bildschirmrand hinaus abgeschnitten wird.

4. Um den Bereich zu definieren, in dem du dein UI-Text zeichnen möchtest, ziehe die Haltepunkte der Begrenzungsrahmen des Overlay-Panels, bis du die Größe auf etwa 250 Pixel breit und 200 Pixel hoch änderst.

   Oder im Details-Panel, verwende Größe X und Größe Y, um die Größe des Bedienfelds zu ändern.

   

   In diesem Gebiet werden die Gesundheit (KP) des Spielers und die Namen der eingesammelten Schlüssel angezeigt.

5. In Palette, suchen und ziehst du ein Vertikale Box-Panel als Child unter dem Overlay. Bei diesem Paneltyp werden die UI-Elemente in seinem Inneren vertikal angeordnet, wie in einer Spalte einer Tabelle.

6. Füge zwei Horizontale Box-Panels als Children der Vertikale Box hinzu. Horizontale Boxen ordnen alle darin enthaltenen UI-Elemente horizontal an, wie in einer Tabellenzeile. Ein horizontales Feld ist ein Container für die Gesundheitsinformationen des Spielers und das andere horizontale Feld ist ein Container für ein Etikett mit dem Label „Gesammelte Schlüssel“.

   

Vertikale und horizontale Felder sind Layout-Widgets. Diese Panels sind wie unsichtbare Organizer – sie haben im Designer keinen sichtbaren Rahmen und passen ihre Größe automatisch an ihren Inhalt an.

Jeder Feldtyp richtet den Text aus und organisiert ihn, den du der Benutzeroberfläche hinzufügst:

• Das Overlay-Panel ermöglicht Überlappungen, sodass das vertikale Feld die horizontalen Felder dazu zwingt, vertikal ausgerichtet zu werden, anstatt sie übereinander zu stapeln.

• In der ersten Zeile befinden sich zwei Textfelder. Durch das Hinzufügen horizontaler Felder kannst du die Ausrichtung und den Abstand der einzelnen Textfelder in der Zeile steuern.

Hinzufügen von Text-Labels

Nachdem du nun die Struktur des HUD definiert hast, kannst du den statischen Text hinzufügen, der sich je nach Spielgeschehen nicht ändert. 

Du benötigst ein KP-Label vor der Gesundheit des Spielers und ein Schlüssel gesammelt-Label vor der Liste der Schlüsselnamen. Vorerst fügst du auch Platzhaltertext für den aktuellen KP-Wert des Spielers hinzu. In einer späteren Sektion dieser Tutorialreihe änderst du diesen Platzhalter in eine Variable, um die tatsächliche Gesundheit des Spielers widerzuspiegeln.

Um Textlabel für die Gesundheit (KP) des Spielers hinzuzufügen, gehe folgendermaßen vor:

1. In Palette, suchst du nach Text und ziehe zwei Text-Widgets in die Hierarchie als Children der ersten Horizontalen Box. 

   

   Stelle sicher, dass du ein Text-Widget, keine Textfeld hinzufügst.

2. Wähle das erste Text-Widget unter derHorizontale Box aus. Im Details-Panel, in der Sektion Slot (horizontales Box-Slot), legst du den Innenabstand auf 5. Dadurch wird der Text 5 Pixel vom Rand des horizontalen Felds entfernt platziert.

   

3. In der Sektion Inhalt , lege Text auf KP:.

   

4. In der Sektion Aussehe, klicke auf das Farbfeld nebenFarbe und Opazität, und wähle eine Farbe für deinen Text aus. Dieses Tutorial verwendet Grün (Hex sRGB = 78FF3FFF).

   

5. Wähle das zweite Text-Widget aus. Oben im Details-Panel benennst du das Widget von TextBlock zu txtHP. In späteren Teilen dieses Tutorials musst du auf dieses Widget verweisen. Gebe ihm daher jetzt einen eindeutigen und beschreibenden Variablennamen.

   

6. Ändere den Innenabstand auf 5 und den Text auf 100.

   

Befolge diese Schritte, um einen Text-Label für die vom Spieler gesammelten Schlüssel hinzuzufügen:

1. Ziehe in Palette ein Text-Widget, um ein Child der zweiten Horizontal Box zu werden.

2. Ändere seinen Innenabstand auf 5 und den Text auf Gesammelte Schlüssel:.

3. Für Farbe und Opazität, wähle eine Farbe. Dieses Tutorial verwendet Orange (Hex sRGB =FF6200FF).

Da sich nun in jedem horizontalen Feld etwas Text befindet, kannst du die flexible Struktur dieses Layouts erkennen. Wenn du ein horizontales Feld oder ein Text-Widget auswählst, werden an den Rändern dieses Widgets Pfeilschaltflächen angezeigt. Klicke auf die Pfeile, um die Widgets neu zu organisieren. Durch die Verwendung der Ausrichtungs- und Innenabstandoptionen jedes Text-Widgets hast du umfassende Kontrolle über den Abstand zwischen Elementen in derselben Zeile und über verschiedene Zeilen hinweg.

Platz für eine Variable hinzufügen

In einem Spiel muss das HUD des Spielers während des Gameplays größtenteils aufgrund der von dir ausgeführten Actions aktualisiert werden, z. B. wenn du Schaden erleidest, Gegenstände erhältst oder verwendest oder ein Power-Up erhältst. Um dies in deinem Projekt zu tun, verbinde das HUD mit einer Variable, die die Schlüssel des Spielers verfolgt, sodass es aktualisiert werden kann, wenn der Spieler sie sammelt.

Um ein Eingabetextfeld zum Anzeigen der Schlüsselliste hinzuzufügen, führe die folgenden Schritte aus:

1. In Palette, suchen und ziehe ein Textfeld (mehrzeilig), um das letzte Child der Vertikalen Box zu werden. Dieses Input-Widget akzeptiert mehrere Zeilen vom Benutzer eingegebenen Text. Du kannst jedoch die Event-Diagrammlogik verwenden, um diesem Widget Text hinzuzufügen, wenn der Benutzer einen Schlüssel abholt.

   

2. In Hierarchie, wähle das Textfeld aus. Im Details-Panel, benenne es txtKeys um.

   

   Du kannst den Namen eines Widgets auch anzeigen und ändern, indem du mit der rechten Maustaste auf Hierarchie klickst.

3. Im visuellen Designer siehst du, dass das Eingabetextfeld mit einem Standardhintergrund versehen ist. Entferne ihn daher:

   1. Vergrößere oben im Details-Panel den Innenabstand und lege die folgenden Werte fest, Box mit einem Einzug aufzufüllen:

      • Links: 15

      • Oben, Rechts und Unten: 4

      

   2. In der Sektion Stil, erweitere Stil > Hintergrundbild Normal und klicke auf das Farbfeld neben Farbton.

      

   3. Ändere Hex sRGB auf FFFFFF00, um den Hintergrund transparent zu machen, und klicke dann auf OK.

      

4. Dieses Widget verfügt nicht über einen Standardschriftstil, du musst die Schrifteigenschaften also selbst einstellen. Erweitere in der Sektion Stil die Optionen Textstil > Schriftart und lege Folgendes fest:

   1. Ändere die Schriftfamilie auf Roboto.

   2. Ändere die Schriftart auf Fett.

   3. Ändere die Größe auf 24.

   4. Ändere die Farbe auf weiß.

      

Mit txtKeys ausgewählt, oben im Details-Panel, wirst du Ist variabel als aktiviert sehen. Textfelder erwarten vom Benutzer eingegebenen Text und werden daher automatisch als Variablen eingerichtet. Wenn Ist variabel aktiviert ist, kannst du auf txtKeys im Event-Diagramm Ihres Widget-Blueprints referenzieren. 

Schichtweiser Einsatz eines Spezialeffekts

Du kannst die Lesbarkeit Ihres HUD-Textes verbessern, indem du den Hintergrund des Begrenzungsrahmens dem Overlay verwischst. Verwende die Ebenenfunktion des Overlay-Panels, um einen Unschärfeeffekt hinter den vertikalen und horizontalen Feldern zu platzieren.

Um den Bildschirmbereich hinter Ihrem HUD-Text mithilfe eines Widgets unscharf zu machen, gehe folgendermaßen vor:

1. In Palette, suche nach verwische und ziehe ein Hintergrund-Weichzeichnen-Widget in Hierarchie als Child des Overlays.

2. Der Editor fügt die Hintergrundunschärfe an das Ende der Liste hinzu, so ziehe es, um das erste Child unter Overlay, über derVertikale Box zu sein.

   

3. Stelle im Details-Panel in der Sektion Darstellung die Weichzeichnenstärke auf 2.

   Die Verwendung großer Unschärfeeffekte verursacht höhere Laufzeitkosten auf der GPU. Als günstigere Alternative kannst du auch ein undurchsichtiges Grenze-Widget benutzen oder wende eine Textur mit einem Bild-Widget an.  

4. Sorge dafür, dass der Effekt die Abmessungen des Overlay-Widgets ausfüllt:

   1. In der Sektion Slot (Overlay-Steckplatz), neben Horizontale Ausrichtung klicke auf Horizontal füllen.

   2. Neben Vertikale Ausrichtung, wähle Vertikal füllen.

   

Hier ist ein Beispiel dafür, wie der Benutzeroberfläche Text ohne unscharfen Hintergrund, dafür aber mit übertriebenem Weichzeichnen Effekt aussieht:

Erstelle die HUD-Logik

Um Ihren Widget-Blueprint fertigzustellen, erstelle die Logik, die den Namen aller Tasten anzeigt, die der Spieler aufnimmt. 

Bausteine für Schlüsselabholungen einrichten

Bevor du mit dem Erstellen der Logik beginnen kannst, die dem HUD Schlüsselnamen hinzufügt, benötigst du:

• Eine Array-Variable, die Schlüssel des Spielers verfolgt.

• Eine Funktion, die der Blueprint Ihres Charakters aufrufen kann, wenn der Spieler einen neuen Schlüssel findet.

Um die Ausführung der HUD-Logik aus anderen Blueprints auszulösen, verwende anstelle des Event-Diagramms eine Funktion. Die Funktion nimmt den vom Spieler gesammelten Schlüssel, speichert ihn in der benannten Variable und gibt die Namen der Schlüssel in dieser Variable in das Feld txtKeys ein.

Um eine neue Variable und Funktion hinzuzufügen, die die Tasten des Spielers verfolgt, gehe folgendermaßen vor:

1. Klicke in der oberen rechten Ecke des Fensters auf Diagramm, um das Event-Diagramm des Widget-Blueprints zu bearbeiten. Dieses Diagramm funktioniert genauso wie die anderen Blueprints, an denen du bisher gearbeitet hast.

   

   Ihre txtKeys-Variable wird im Panel auf der linken Seite des Fensters aufgelistet.

2. Erstelle eine Funktion, die beim Aufruf die gesamte HUD-Logik ausführt:

   1. In der Sektion Funktionen klicke auf die Plus (+)-Schaltfläche, um eine Funktion hinzuzufügen. Über dem Diagramm wird ein neues Tab für diese Funktion angezeigt.

   2. Benenne die Funktion fnAddKeyHUD.

   3. Klicke mit gewählter Funktion im Details-Panel in der Sektion Inputs auf +, um einen neuen Funktion Input hinzuzufügen.

      

   4. Benenne den Input KeyType und ändere seinen Typ in Enum Key Type.

      

3. Erstelle im Mein Blueprint-Panel eine Array-Variable, um die Schlüssel des Spielers zu speichern:

   1. In der Sektion Variablen klicke auf +, um eine neue Variable zu erstellen.

   2. Benenne die Variable KeysToDisplay.

   3. Ändere den Typ auf Enum-Schlüsseltyp. Dies ist die Aufzählung, die du mit den Schlüsseltypoptionen Rot, Gelb und Blau erstellt hast.

   4. Klicke mit der rechten Maustaste auf den Variablentyp, um ihn in ein Array umzuwandeln. Oder verwende das Details-Panel, um den Containertyp zu ändern.

      

      Du kannst das Schlüssel-Array des Charakter-Blueprints in die Funktion übergeben, anstatt es hier neu zu erstellen. Wenn du die Schlüssel jedoch unabhängig im HUD verfolgst, hast du mehr Flexibilität, wenn du eine HUD-spezifische Logik ausführen möchtest, z. B. das Anzeigen von Bildern für jeden Schlüssel.

4. Um die Schlüsselnamen im mehrzeiligen Textfeld zu drucken, musst du sie alle in einen String kombinieren.

   Klicke im Abschnitt Lokale Variablen auf die +-Schaltfläche, um eine neue Variable hinzuzufügen. Benenne es Schlüssel und ändere seinen Typ in String und seinen Containertyp zu Einzeln.

   

Drucke die Schlüssel des Spielers auf dem Bildschirm

Jetzt kannst du mit dem Hinzufügen von Logik zu der fnAddKeyHUD-Funktion beginnen. 

Wenn diese Funktion aufgerufen wird, beginnt sie mit einem roten, gelben oder blauen Schlüsseltyp. Du musst diesen Schlüsseltyp zu deinem KeysToDisplay-Array hinzufügen, füge alle Schlüssel zu Ihrer String Variable hinzu und konvertiere diese String dann in Text, damit du sie auf dem Bildschirm anzeigen kannst.

Erstens, um das KeysToDisplay-Array zu erstellen, führe die folgenden Schritte aus:

1. In der Ansicht Diagramm des Widget-Blueprints stelle sicher, dass du den fnAddKeyHUD-Tab siehst.

2. Um das KeysToDisplay-Array zu erstellen, füge nach dem Funktionsknoten einen Einmalig hinzufügen-Knoten hinzu.

3. Für sein Ziel-Array, verbinde eine Referenz mit der KeysToDisplay-Variable.

4. Für den zweiten Input verbinde den Schlüsseltyp-Funktionsinput.

   

   Der Einmalig hinzufügen-Knoten nimmt ein Array und einen neuen Wert und fügt diesen Wert dem Array hinzu (sofern er nicht bereits im Array vorhanden ist). Dieser Knoten stellt sicher, dass Schlüsselnamen nicht mehr als einmal auf dem HUD erscheinen.

Um alle gesammelten Schlüssel in den Schlüssel-String zu kombinieren, führe die folgenden Schritte aus:

1. Durchlaufe jedes Element im KeysToDisplay-Array. Nach dem Eindeutig hinzufügen-Knoten, füge einen Für jede Schleife-Knoten hinzu.

2. Verbinde eine weitere KeysToDisplay_Referenz auf den Array-Input der Schleife.

   

   Für jedes Element im Array oder jede Iteration der Schleife musst das Element in eine String konvertieren, es der String Variable Schlüssel hinzufügen und dann nach diesem Schlüsselnamen eine neue Zeile hinzufügen (als würdest du die Eingabetaste auf deiner Tastatur drücken). 

   Denke daran, dass jede Logik, die du mit dem Schleifenkörper-Ausführungs-Pin verbindest, einmal pro Array-Element ausgeführt wird. Wenn die Schleife beendet ist, wird die Ausführung durch den Abgeschlossen-Pin laufen.

3. Klicke mit der rechten Maustaste in das Knoten-Diagramm und suche nach String anhängen und füge einen Stringtyp Anhängen-Knoten hinzu. Dadurch werden String-Inputs zu einem einzelnen String-Ergebniswert kombiniert.

4. Richte den Anfügen-Knoten ein, um den aktuellen Inhalt der Schlüssel-Variable zu nehmen, füge das neue Array-Element hinzu und füge dann einen Zeilenumbruch hinzu:

   1. Für seinen A-Input, verbinde eine Referenz mit Schlüssel.

   2. Für seinen B-Input, verbinde den Array-Element-Pin des Schleifenknotens. Unreal Engine fügt einen Enumeration zu String-Knoten hinzu, um den Wert zu konvertieren.

   3. Klicke auf Pin hinzufügen, um einen C-Input hinzuzufügen. Klicke in das Textfeld und drücke Umschalt + Eingabe, um eine neue Zeile hinzuzufügen.

      

5. Ziehe den vom Anhängen-Knoten besessenen Ergebniswert-Pin und füge einen Schlüssel festlegen -Knoten hinzu.

6. Verbinde den Ausführungs-Output-Pin der Schleife mit dem Schlüssel festlegen-Knoten.

   

Wenn der Schleifenkörper abgeschlossen ist, verfüge über eine lange String mit den Namen aller Tasten des Spielers.

Um den Schlüssel-String an die Textbox TxtKeys des HUDs weiterzugeben, führe die folgenden Schritte aus:

1. Ziehe den Abgeschlossen-Ausführungs-Pin der Schleife und füge einen SetText (Mehrzeiliges Textfeld)-Knoten hinzu.

   Wenn du diesen Knoten nicht finden konntest, deaktivierst du Kontextsensitiv in der Nähe der oberen rechten Ecke der Knotenaktionsliste. 

   

   Der SetText-Knoten nimmt Texteingaben entgegen und zeigt sie in einem Zieltextfeld an.

2. Richte den SetText (Mehrzeiliges Textfeld)-Knoten ein:

   1. Für das Ziel, verbinde eine Referenz mit TxtKeys.

   2. Für Im Text, verbinde eine Referenz mit Schlüssel. Unreal Engine fügt einen Zu Text (String)-Knoten hinzu, der den Schlüssel-String zu Text konvertiert. 

      

      Text ist ein separater Datentyp. Während Strings zum Programmieren und Debuggen dienen, ist Text für benutzerorientierten Text konzipiert und unterstützt Verschiebung und Formatierung.

3. Kompilieren und speichere den Blueprint.

Ihre komplette fnAddKeyHUD-Funktion sollte wie folgt aussehen:

Ihr HUD ist einsatzbereit! Jetzt musst du es Ihrem Spielercharakter hinzufügen, damit es beim Starten des Spiels auf dem Bildschirm angezeigt wird.

Aktualisiere den Spielercharakter

Um die Einrichtung Ihres HUD abzuschließen, musst Ihrem Charakter-Blueprint eine Logik hinzufügen, die das HUD-Widget zu Beginn des Spiels hinzufügt und es aktualisiert, wenn der Spieler einen Schlüssel aufnimmt. 

Rufe FnAddKeyHUD aus dem Charakter-Blueprint auf

Verbinde die Schlüssellogik in BP_AdventureCharacter zur Logik des HUD, sodass durch das Hinzufügen eines Schlüssels zum Player auch ein Schlüssel zum HUD hinzugefügt wird. 

Um das HUD auszulösen, wenn der Spieler einen Schlüssel erhält, gehe folgendermaßen vor:

1. Öffne deinen BP_AdventureCharacter-Blueprint. Im Mein Blueprint-Panel, in der Sektion Variablen klicke auf +, um eine neue Variable hinzuzufügen.

2. Benenne die Variable HUD und ändere den Typ zu WBP-Player-HUD (Objektreferenz). 

   

   Dadurch wird das HUD-Widget, das du erstellst, im Event-Diagramm des Charakters gespeichert.

3. Gehe zur Sektion des Event-Diagramms, wo Event fnBPIAddKey dem HeldKeys-Array des Spielers einen neuen Schlüssel hinzufügt.

   

   Vergrößere in der Sektion Diagramme des Widget-Blueprints des Mein Blueprint-Panels erweitere Event-Diagramm und doppelklicke auf ein Event, um zu diesem Gebiet des Diagramm zu springen.

4. Nach dem Hinzufügen-Knoten, verbinde einen FnAddKeyHUD-Knoten.

5. Richte den FnAddKeyHUD-Knoten ein:

   1. Für das Ziel, verbinde eine Referenz mit der HUD-Variable.

   2. Für Schlüsseltyp, verbinde den Pin mit dem vom Event fnBPIAddKey-Knoten besessenen Schlüsseltyp-Pin.

      

   Nun wird der neue Schlüssel des Spielers verwendet und die FnAddKeyHUD-Funktion im HUD-Widget-Blueprint aufgerufen.

6. Speichere und kompilieree Ihren Blueprint.

Zeige das HUD an, wenn das Spiel beginnt

Um ein HUD zu erstellen, wenn der Spieler im Level spawnt, gehe folgendermaßen vor:

1. Suche eine leere Stelle im Event-Diagramm Ihres Charakters und füge einen Event besessen-Knoten hinzu. Dies ist das Event, das gesendet wird, wenn der Spieler die Kontrolle über den Spielercharakter übernimmt oder von ihm Besitz ergreift.

2. Klicke mit der rechten Maustaste auf den Event besessen-Knoten und wähle Aufruf zur Parent-Funktion hinzufügen, um sicherzustellen, dass die Event besessen-Logik in der Parent-Zeichenklasse weiterhin ausgeführt wird. Verbinde den exec-Pin und den Neuer Controller-Pin jedes Knotens.

   

   In der oberen rechten Ecke Ihres Charakter-Blueprints siehst du, dass er abgeleitet ist von der BP_FirstPersonCharacter-Blueprint-Klasse. Das bedeutet, dass Ihr Charakter die Logik von sich selbst und dem Parent-Element verwendet. Wenn du Ihrem Charakter-Blueprint ein Event hinzufügst, das im Parent-Element bereits vorhanden ist, überschreibe es. Achte beim Überschreiben eines Events darauf, auch die Version des Parent-Events aufzurufen, damit dessen Logik ausgeführt wird, bevor du deine eigene hinzufügst.

   

3. Um das HUD zu erstellen, verbinde einen Widget erstellen-Knoten und ändere seine Klasse auf WBP-Spieler-HUD. Dadurch wird eine Instanz Ihres Widget-Blueprints erstellt.

4. Nach dem Widget erstellen-Knoten, füge einen HUD einstellen-Knoten hinzu, der beide Pins verbindet. Dadurch wird der neue Widget-Blueprint in Ihrer Variable gespeichert.

   

5. Um das HUD-Objekt auf dem Bildschirm anzuzeigen, füge einen Zum Viewport hinzufügen-Knoten hinzu. Stelle sein Ziel auf Ihre HUD-Variable ein.

   

   Du kannst zwar den Widget erstellen-Knoten direkt an denZum Viewport hinzufügen-Knoten verbinden, doch dieses Lernprogramm trennt das Erstellen des Widgets und das Zeichnen auf dem Bildschirm. Das ist nützlich, wenn das Widget bereit, aber bis zu einem bestimmten Zeitpunkt verborgen sein soll, etwa bei einem Kombo Warnung, der nach mehreren Spieler erscheint. Wenn ein Widget viele Animationen, Effekte und Sounds enthält, ist es möglicherweise am besten, es im Voraus zu laden, um Verzögerungen beim Gameplay zu vermeiden.

6. Klicke auf Kompilieren und Speichern.

Die Logik Ihres neuen Charakter-Blueprints sollte wie folgt aussehen:

Teste das HUD 

Klicke auf Spielen, um Ihr Spiel zu testen. Wenn das Spiel beginnt, solltest du die KP- und Schlüsselsammel-Labels des Spielers auf dem HUD sehen. Durch Berühren einer Taste sollte der Name dieser Taste zum HUD hinzugefügt werden.

Nimmst du bei Bedarf Anpassungen am HUD vor. Einige Dinge, die du selbst ausprobieren kannst, sind: 

• Passe die Größe des Overlay-Panels an.

• Ändere Schriftgrößen und -stile.

• Verschiebe die Platzierung in andere Bereiche als oben links.

• Verschiedene Widgets für Hintergründe Hinzufügen, etwa Texturen oder Materialien.

Um dein HUD weiterzuentwickeln, kannst du experimentieren und die Textlabel durch Symbole ersetzen. Importiere dazu ein Bild in den Inhaltsbrowser und füge es mit einem Bild-Widget zu Ihrem HUD hinzu. Weitere Informationen zum Importieren von Assets in Unreal Editor findest du unterImporting Assets Directly.

Entwerfen effektiver HUDs 

Hier sind einige weitere Designstrategien zum Erstellen eines übersichtlichen, spielerfreundlichen HUD.  

Mache es leicht zu lesen:

Verwende kontrastreichen Text, klare Schriftarten und angemessene Schriftgrößen. Stelle sicher, dass dein HUD aus einem typischen Betrachtungsabstand vom Bildschirm und wenn sich der Spieler durch eine belebte Umgebung bewegt, lesbar ist, nicht nur wenn er stillsteht.

Halte es klar und prägnant:

Zeige nur, was der Spieler gerade braucht, und verberge oder minimiere weniger relevante Informationen, bis sie benötigt werden. Der Spieler sollte jedoch immer auf einen Blick sehen können, was er braucht, um sichere Entscheidungen treffen zu können. 

Feedback hinzufügen:

Wenn das HUD aktualisiert wird (z. B. beim Aufheben eines Schlüssels), verwende eine kurze Animation, Farbänderung oder einen Ton, um den Spieler auf die Änderung aufmerksam zu machen.

Priorisieren nach Größe und Position:

Wichtige Informationen sollten hervorstechen – verwende größeren Text, kräftige Farben oder platziere diese Informationen oben links oder in der Mitte, wo die Spieler natürlich zuerst hinschauen. 

Als Nächstes

In der nächsten Sektion fügst du Ihrem Level weitere Gameplay-Elemente hinzu und lerne, wie du einen Schalter so programmierst, dass er beim Drücken eine Action ausführt.

• 

  Rätsel: Schalter und Würfel

  Verwende im ersten Teil der Plattform-Rätsel-Sektion Materialien, Physik und Blueprints, um einen Schalter zu erstellen, der durch einen Würfel aktiviert wird.