Title: Erstellen von benutzerdefinierten Konditions- und Schildbalken

Erstelle benutzerdefinierte Konditions- und Schildbalken in Unreal Motion Graphics (UMG) mit UI-Materialien, UI-Texturen und verschiedenen Widgets in der Palette, um die standardmäßige Fortnite-Benutzeroberfläche zu ersetzen. Konditions- und Schildbalken können zu einem Namensschild hinzugefügt oder separat im HUD platziert werden.

Das Design und die Platzierung der Konditions- und Schildbalken sind für jedes Spiel einmalig und berücksichtigen den Spieltyp (Kampfspiel, kooperativer Mehrspielermodus, Rollenspiel usw.).

Einrichten von Material-Instanzen, ohne Materialien zu ändern

In diesem Beispiel verwendest du verschiedene Materialien, die in UEFN erstellt wurden. Sie enthalten einen Fortschrittsbalken in Form eines Rechtecks (Box) und eines Kreises. Der rechteckige Fortschrittsbalken hat auch eine Option, um den Fortschrittsbalken in Sektionen umzuwandeln.

Die Materialien wurden mit einer Kombination von Material-Funktionen aus dem UI-Materiallabor, Parametern, die für die Material-Instanz freigegeben sind, und etwas Mathematik eingerichtet, damit alles funktioniert.

Es ist Best Practice, Materialien für Widgets zu verwenden. Die Materialien werden dynamisch basierend auf Gameplay-Daten aktualisiert, was bei der Optimierung der Benutzeroberfläche hilft und die Möglichkeit bietet, Spezialeffekte hinzuzufügen. Texturen werden nur für ein komplizierteres Design verwendet, das mit mathematischen Funktionen nicht einfach erreicht werden kann.

Eine Material-Instanz erstellt Instanzen eines Materials mit Parametern, mit denen das Erscheinungsbild dieses Materials einfach angepasst werden kann, ohne es erneut zu kompilieren. Um eine Instanz eines Materials zu erstellen, klicke mit der rechten Maustaste auf ein Material und wähle Materialinstanz erstellen.

Es gibt einige Parameter, die in UEFN verfügbar sind. Im Beispielmaterial ändert der Parameter „Fortschritt“, wie stark der Balken gefüllt ist. Der Bereich wird mithilfe des ConstantBiasScale-Knotens in der M_CircleProgressBar auf 0-100 normalisiert, damit er in den Fortnite KP-Bereich passt.

Du kannst die Hintergrundfarbe (BGColor) und die Flüssigkeitsfarbe ändern, bei denen es sich um Farbverläufe handelt. Anschließend siehst du deine Änderungen im Vorschau-Viewport auf der linken Seite.

Du kannst so viele Material-Instanzen erstellen, wie du für verschiedene Zwecke brauchst. In diesem Beispiel werden zwei Materialien verwendet, eines für Kondition und eines für Schild.

Best Practices für das Widget-Layout

Verwende nur in UMG (Unreal Motion Graphics) das Canvas-Panel, wenn du eine absolute Position auf dem Bildschirm brauchst oder die Platzierung verschiedener Widgets fein verändern musst.

Für kleinere Widgets verwendest du:

• Overlay

• Stapelboxen

• Größenboxen (wenn du dein Widget auf eine bestimmte Größe beschränken musst)

• Raster-Panel (wenn du die Größe deines Containers beibehalten, aber die Position der Widgets manipulieren möchtest)

Sobald die Materialien fertig sind, erstelle einen Widget-Blueprint im Inhaltsbrowser, dann doppelklicke auf die Widget-Miniaturansicht, um den UMG-Editor (Unreal Motion Graphics) zu öffnen.

Verwendung eines Canvas-Panels

In diesem Beispiel wird das Canvas-Panel genutzt, um die Konditions- und Schildbalken an einer absoluten Position auf dem HUD zu platzieren, indem die Widgets an bestimmten Teilen des Bildschirms verankert werden.

Für einzelne HUD-Elemente empfiehlt es sich, eine Kombination der folgenden Widgets zu verwenden:

• Overlay – Wenn du ein Widget über ein anderes legen musst

• Stapelboxen – Wenn du deine Widgets horizontal oder vertikal anordnen musst

• Größenboxen – Wenn du dein Widget auf eine bestimmte Größe beschränken musst

• Raster-Panel – wenn du die Größe deines Containers beibehalten möchtest, aber die Position der Child-Widgets darin manipulieren möchtest

Beginne vor diesem Hintergrund mit der Gestaltung der Kondition- und Schild-Widgets.

1. Erstelle einen Container, in dem die gesamte HUD-Benutzeroberfläche existiert. Verwende dazu ein Canvas-Panel als Container, in dem alle einzelnen HUD-Elemente Platz finden.

   

   In diesem Beispiel werden Kondition und Schilde unten in der Mitte des Bildschirms verankert.

2. Verschachtele eine Stapelbox unter des Canvas, um den Container für Kondition und Schilde zu erstellen. Für dieses Design werden diese Elemente von links nach rechts gestapelt.

   

   Wenn du deine Widgets in einer Stapelbox vertikal anordnen möchtest, ändere die Ausrichtungseinstellung im Details-Panel unter Verhalten > Ausrichtung.

3. Benenne deine Widgets um, indem du sie auswählst und F2 drückst, während du sie zu deiner Hierarchie für eine bessere Organisation hinzufügst.

   

4. Wähle die Stapelbox in der Hierarchie aus, und im Details-Panel solltest du die Option Anker sehen. Öffne die Option, indem du Umschalt + Strg drückst. Verankere die Stapelbox unten in der Mitte des HUD, indem du die Option in Zeile 3, Spalte 2 auswählst.

   

   Die Stapelbox sollte jetzt am Boden verankert sein. Das Blumensymbol zeigt, wo das Widget im Canvas-Panel verankert ist.

5. Schiebe die Stapelbox nach oben, damit sie nicht am unteren Rand des Bildschirms hängen bleibt. Bearbeite dazu die Option Position Y.

   Positive Werte verschieben das Widget nach unten, während negative Werte es nach oben verschieben.

   

6. Aktiviere das Kontrollkästchen Größe an Inhalt anpassen, um sicherzustellen, dass der Container sich immer an den Inhalt anpasst.

   

Einrichten von KP-Balken und Text

Jetzt, wo der Container für Kondition und Schilde bereit ist, richte das Konditions- und Schilde-Widget ein.

1. Verschachtele ein Overlay unter der Stapelbox und benenne es in HPOverlay um. Dadurch überlagert der KP-Text den runden KP-Balken.

   

2. Verschachtele ein Bild unter HPOverlay und benenne es in HPBar um. Dies bietet eine Möglichkeit, die Material-Instanz, die du oben erstellt hast, zu deinem Widget hinzuzufügen.

   

3. Wähle HPBar in der Hierarchie aus, wähle in den Details unter Pinsel> Bild deine benutzerdefinierte Konditionsbalken-Material-Instanz aus.

   

   Um die Größe der Material-Instanz zu ändern, kannst du die unten stehende Eigenschaft „Bildgröße“ anpassen.

4. Verschachtele einen Textblock unter HPOverlay und benenne ihn in HPText um. Dies bietet eine Möglichkeit, Text auf dem kreisförmigen Konditionsbalken hinzuzufügen.

   

5. Wähle den Textblock aus und lege in den Details die Ausrichtung Horizontal und Vertikal auf Mitte fest. Dadurch wird sichergestellt, dass der Text immer mittig zu HPBar ausgerichtet ist.

   

   Klicke, um das Bild zu vergrößern.

6. Ändere die Schriftgröße unter Erscheinungsbild > Schriftart > Größe, damit sie in den KP-Balken passt.

   

   Klicke, um das Bild zu vergrößern.

7. Klicke auf Kompilieren. Jetzt hast du einen KP-Balken und einen KP-Text!

   

Einrichten von Schildbalken und Text

Wiederhole die obigen Schritte, um deinen Schildbalken und deinen Schildtext einzurichten. Füge dieses Mal etwas Platz zwischen dem KP-Balken und dem Schildbalken hinzu. Da es sich bei **HPShieldsContainer** um eine Stapelbox handelt, werden die Child-Widgets automatisch horizontal angeordnet.

Verwende ein Bild-Widget in der Stapelbox, um etwas Platz zwischen deinen Konditions- und Schildbalken einzufügen. Richte das leere Bild-Widget wie folgt ein:

1. Verschachtele ein Bild unter der Stapelbox.

2. Lege die Pinsel-Eigenschaften des Bildes von „Zeichnen als“ auf „Keine“ fest.

   

Das bedeutet, dass in deinem Widget nichts angezeigt wird, das Bild-Widget aber trotzdem Platz in deinem Layout benötigt! So kannst du den Abstand zwischen den Elementen in einer Stapelbox einfach verwalten, ohne auf das Auffüllen angewiesen zu sein.

1. Richte das Schild-Widget nach demselben Verfahren wie den Konditionsbalken ein.

   Um den Schildbalken schneller zu erstellen, duplizierst du das HPOverlay, indem du mit der rechten Maustaste auf HPOverlay in der Hierarchie klickst und Duplizieren auswählst.

   

2. Verschachtele das ShieldOverlay unter dem Abstandsbild, sodass es am Ende der Stapelbox erscheint.

   

   Die beiden Typen von Balken erscheinen nebeneinander in deinem Widget!

   

3. Benenne deine Variablen in ShieldOverlay, ShieldBar und ShieldText um, wie im Bild der Widget-Hierarchie unten zu sehen.

   

Jetzt kannst du die Bindungen erstellen, die den Fortschrittsbalken für Kondition und Schild ihre Funktionalität hinzufügen.

Anzeigen von Bindungen

Hinzufügen eines Ansichtsmodells

Ein Ansichtsmodell bietet dir eine Möglichkeit, Geräte-Funktionalität zu einem Widget-Blueprint hinzuzufügen. Das Ansichtsmodell verwendet Ansichtsbindungen, um Widgets im Blueprint zu identifizieren und Diagrammgerätefunktionalität diesem Widget zuzuordnen.

Das HUD-Kontrollgerät-Spielerinfo-Viewmodel bietet eine Möglichkeit, Teile deines HUD durch ein benutzerdefiniertes Widget zu ersetzen.

1. Wähle Fenster > Ansichtsmodelle aus, um ein Ansichtsmodell zu öffnen und es zu deinem Widget hinzuzufügen.

   

2. Wähle im Fenster „Ansichtsmodell“ +Ansichtsmodell aus. Dadurch wird ein Popup geöffnet, in dem alle derzeit verfügbaren Viewmodels angezeigt werden.

   

3. Es sind zwei Arten von HUD-Kontrollgerät-Viewmodels verfügbar:

   1. Wähle Gerät – HUD-Kontrollgerät Team/Truppe Spielerinformationsliste Ansichtsmodell aus den HUDPlayerInfoListViewModel-Optionen aus. Basierend auf den obigen Informationen möchtest du nur die Informationen für den steuernden Spieler anzeigen und nicht sein/e Team/Einheit.

      

      

   2. Wähle Gerät – HUD-Kontrollgerät-Spielerinfo-Ansichtsmodell aus, wenn du separate Widgets für den steuernden Spieler und sein/e Team/Truppe erstellen möchtest. Verwende die Eigenschaften in „Gerät – HUD-Kontrollgerät-Spielerinformation-Ansichtsmodell“ für jedes dieser Widgets. Dann musst du ein Team-Stapel-Widget erstellen, das die Viewmodels der Team-/Einheit-Spieler-Infoliste mit ihren Viewmodels verbindet.

      

      Das Viewmodel Team/Einheit-Spielerinformationsliste hat dieselben Informationen wie das HUD-Kontrollgerät-Spielerinfo-Viewmodel, wird aber je nach Szenario anders verwendet.

4. Wähle Team-/Truppen-Spielerinformationsliste Ansichtsmodell aus den HUDPlayerInfoListViewModel-Optionen aus. Basierend auf den obigen Informationen möchtest du nur die Informationen für den steuernden Spieler anzeigen und nicht sein/e Team/Einheit.

   

Jetzt ist es an der Zeit, die Bindungen einzurichten, die Daten vom Ansichtsmodell an dein Widget binden!

Einrichten von ToText-Ansichtsbindungen

1. Wähle Fenster > Bindungen anzeigen, um das Fenster Bindungen anzeigen zu öffnen.

   

2. Wähle HPText in deiner Hierarchie aus und wähle Widget in Ansichtsbindungen hinzufügen aus, um HPText so zu binden, dass es deinen aktuellen Konditionswert anzeigt. Es wird eine leere Bindung angezeigt.

   

3. Die linke Box ist die Widget-Eigenschaft und die rechte Box sind die Daten, die du an die Widget-Eigenschaft binden möchtest. Klicke auf die linke Box, und eine Liste der Eigenschaften für den HPText-Textblock erscheint. Wähle die Eigenschaft Text aus, um die KP-Zahlen an diese Eigenschaft zu übergeben.

   

4. Die rechte Box enthält die Daten, die du an die ausgewählte Widget-Eigenschaft übergeben möchtest. Die Text-Eigenschaft akzeptiert jedoch nur Daten des Typs Text. Da die Fortnite-KP-Zahl in einer Fließkommazahl vorliegt (d. h Vom Typ Double ist), musst du sie in den entsprechenden Texttyp konvertieren. Klicke auf die rechte Box und wähle Konvertierungsfunktionen > In Text (doppelt) aus.

   

   Eine lange Liste mit Optionen wird angezeigt. Die wichtigsten Einstellungen stehen normalerweise ganz oben, während die übrigen Einstellungen eine Möglichkeit bieten, den endgültigen Wert zu formatieren, der an deine Text-Eigenschaft übergeben wird.

   

   Klicke auf das Bild, um es zu vergrößern.

5. Wähle das Link-Symbol neben Wert aus und wähle dann deinen Konditionswert aus dem HUD-Kontrollgerät-Ansichtsmodell aus.

   

6. Klicke auf das leere Feld und wähle in der linken Spalte HUDPlayerInfoListViewmodel aus, erweitere rechts Steuernder Spieler Info und wähle Kondition aus.

   

   Dies übergibt der Kondition-Eigenschaft einen Float (d. h Double) durch die Konvertierungsfunktion Zu Text (Double). Zu Text (Double) wandelt Kondition in einen Texttyp um, sodass sie auf dem Widget angezeigt wird. Die konvertierte Kondition wird dann an die Text-Eigenschaft deines HPText-Widgets übergeben.

   

7. Wiederhole die obigen Schritte, um das ShieldText-Widget einzurichten. Die gleichen Bindungen zeigen auch die Schildzahlen an.

   

Festlegen der Materialparameter

Weitere Informationen zur Funktionsweise von „Festlegen der Materialparameter“ findest du unter Festlegen der Materialparameter in der Dokumentation von Unreal Engine.

Jetzt müssen wir den kreisförmigen Fortschrittsbalken einrichten. Der Fortschritt ändert sich je nach Konditions- und Schildstufe der Spieler.

1. Richte eine leere Bindung zu deinem HPBar-Kreis ein.

   

2. Wähle im linken Feld HPBar > Pinsel aus. Der Pinsel enthält die Material-Instanz deines kreisförmigen KP-Balkens.

   

3. Wähle in der rechten Box Konvertierungsfunktionen > Skalarparameter festlegen aus.

   

4. Gib im Feld Parametername den Namen des Parameters ein, der den Fortschritt deines Fortschrittsbalkens ändert.

   Um nach diesem Parameternamen zu suchen, öffne die Materialinstanz deines KP-Balkens und sieh dir die Parameterwerte auf der rechten Seite an.

   

5. Der Parameter, der den Fortschrittsbalken steuert, heißt Fortschritt. Gib diesen Namen in das Feld Parametername ein.

   

   Es ist wichtig, dass dein Parametername mit dem Parameter in deiner Material-Instanz übereinstimmt, da das Material sonst im Spiel nicht funktioniert.

6. Wähle das Link-Symbol neben Wert aus. Ähnlich wie bei ToText wird die Kondition des Spielers an den Wert gebunden.

   

Dies ist das Endergebnis der Bindung der Konditions- und Schildwerte im Viewmodel. Immer, wenn sich die Kondition des Spielers ändert, wird die Kondition-Eigenschaft an die KP-Balken-Material-Instanz übergeben und der Skalarparameter „Fortschritt“ aktualisiert.

Wiederhole das Gleiche für deinen ShieldBar. Anstatt sie an die Kondition-Eigenschaft zu binden, sollte sie an die Schildeigenschaft gebunden werden.

Jetzt sind deine KP- und Schild-Bindungen eingerichtet! Es ist an der Zeit, dein Widget auf deinem HUD anzuzeigen.

Einrichten des HUD-Kontrollgeräts

1. Platziere ein HUD-Kontrollgerät in deinem Level.

2. Stelle im Details-Panel für das Gerät sicher, dass:

   1. HUD anzeigen = Ja

3. Verwende im Feld Spielerinfo-Widget-Override das Widget, das die benutzerdefinierte Kondition und Schilde enthält.

   

   Klicke auf das Bild, um es zu vergrößern.

4. Wähle Sitzung starten aus. Du solltest das Konditions- und Schilde-Widget auf deinem HUD sehen! Teste deine Benutzeroberfläche, indem du Schaden nimmst und beobachtest, wie deine Statistiken im HUD aktualisiert werden.

   

Andere Beispiele für Fortschrittsbalken

Das Rechteckmaterial findest du unter Fortnite > UI > Materialien. Du kannst die Basisbox anpassen, um sie als Hintergrund in vielen Formen und für jedes Widget zu verwenden!

Erstelle eine Material-Instanz daraus und verwende sie mit UMG!

Versuche, mithilfe der hier enthaltenen Informationen und der von uns bereitgestellten Materialien diese Fortschrittsbalken zu erstellen:

• Verwenden einer Textur als Hintergrund, um deinen Spieler-Avatar, deinen Anzeigenamen und deinen KP-Balken einzurahmen.

  

• Verwenden einer Kombination aus Texturen, Symbolen, Fortschrittsbalkenmaterialien und dem Rechteck-Material unter Fortnite > UI > Material, um grundlegende Fortschrittsbalken zu stilisieren.

  

• Geteilter KP- und Schildbalken zusammen mit dem Spieler-Avatar und dem Anzeigenamen.

  

Nächster Schritt

• 

  Erstellen einer benutzerdefinierten Truppenansicht

  Erweitere dein Wissen zum benutzerdefinierten Rückenschild, um eine benutzerdefinierte Truppenansicht für dein Projekt zu erstellen.