In diesem Abschnitt erfährst du, wie du vollständig angepasste UI-Overlays für deine Spiele erstellst, indem du den Schritten zur Nachbildung der Spieler-UI der TMNT-Arcade-Vorlage folgst.
Die grundlegende Aufgliederung der Schritte ist wie folgt:
Füge Ansichtsbindungen zu jedem interaktiven Widget-Element hinzu.
Erstelle einen Spieler-Informationsstapel für mehrere gleichzeitige Spieler.
Richte das HUD-Kontrollgerät ein, um die benutzerdefinierte UI anzuzeigen.
Lade dir das Texturpaket UI Material Lab kostenlos herunter und experimentiere mit deinen eigenen UI-Konfigurationen.
Klicke auf das Bild, um es zu vergrößern.
Legen wir ohne weitere Umschweife los!
Benutzerdefinierte Widgets einrichten
Navigiere in deinem Inhaltsbrowser zu Alle > [dein Projektname] > UI > Widgets und öffne das Widget-Blueprint UW_HUD_PlayerInfoBlock.
Auf der linken Seite siehst du den Tab Hierarchie, der genau wie der Outliner im Editor-Hauptfenster funktioniert und die verschiedenen Komponenten des fertigen Widgets anzeigt.
Rückenschild
Der obere Bereich besteht aus drei Rückenschild-Bildern, die das mehrschichtige Aussehen der UI definieren. Dazu gehören:
Backplate1_Image – die grau getönte Hintergrundebene
Backplate2_Image – die orangefarbene Konturebene
Backplate3_Image – die weiße Konturebene
Zusammen bilden diese Bilder den gerahmten Stil des Panels mit den Spielerinformationen.
Beim Import der Bilder zur Verwendung in deiner UI musst du darauf achten, dass du Texturgruppe auf UI setzt und Komprimierungseinstellungen auf UserInterface2D(RGBA8).
Spielername
Diese Komponente besteht aus zwei Elementen, einem aktiven Spielernamen und einem inaktiven Spielernamen, die angezeigt werden, wenn der Spieler am Leben ist, eliminiert wurde oder vom Spiel getrennt wurde.
Wähle zwei unterschiedliche Farben, die die Spieler darüber informieren, wer in ihrem Team aktiv ist und wer eliminiert wurde.
Setze die Sichtbarkeit für den aktiven Spielernamen auf Sichtbar und für den inaktiven auf Ausgeblendet. Dies wird nur unter bestimmten Bedingungen angezeigt.
Setze Breiten-Override auf 220,0, sodass es bei langen Spielernamen keine Überschneidungen mit dem Spieleravatar-Symbol gibt.
Spieler-Avatar-Symbol
Diese Komponente zeigt das Charakterporträt des Spielers basierend auf der gewählten Skin im Spiel.
Die Komponente ist an eine Material-Instanz mit der Bezeichnung MI_UI_PlayerCard gebunden, die du im Ordner UI > Material-Instanzen findest.
Sie kannst diese Materialinstanz an deine Vorstellungen anpassen, indem du die Einstellungen im Details-Panel änderst. Versuche, dein eigenes Bild zu importieren und Konturfarben hinzuzufügen.
In diesem Beispiel ist das gewählte Bild ein leeres, transparentes Bild, das später mit der Charakter-Skin verbunden wird.
Kondition
Diese Komponente enthält die Bereiche, die die Kondition- und Schildstufen des Spielers anzeigen.
Auf der Parent-Ebene siehst du das Formatfeld, das bestimmt, wie groß der Gesamtbereich sein darf.
Darauf folgt das Kondition-Rückenschildbild mit der Bezeichnung MI_UI_Health_Backplate. Dieses UI-Material findest du auch unter Fortnite > UI > Materialien. Es kann umfangreich angepasst werden und bietet viele Optionen, um bereits vorkonfiguriert den Konditionsbalken des Spielers anzuzeigen.
Im oberen Bereich des Rückenschilds befindet sich ein Stapelfeld aus zwei Komponenten: einem Konditionsbalken und einem Schatten mit der Bezeichnung Health_Image bzw. Health_Shadow.
Health_Image ist UI-Material für einen anpassbaren Fortschrittsbalken. Wenn du die Material-Instanz öffnest, kannst du die Ansicht vergrößern, indem du die Vorschaugröße änderst.
Versuche, einige der Einstellungen im Details-Panel zu ändern, um zu sehen, wie diese sich auf das vorhandene Material auswirken.
Da skalierbare Parameterwerte (der Füllstatus des Fortschrittsbalkens) von 0 bis 1 reichen und die Konditions- und Schildwerte von Fortnite normalerweise von 0 bis 100 reichen, ist es wichtig, Multiplikator auf 0,01 zu setzen, sodass die Konditions- und Schildwerte den Spielern korrekt angezeigt werden.
Der Balken Health_Shadow ist ein einfacher schattierter Overlay, der aus ästhetischen Gründen hinzugefügt wurde.
Schilde
Die Schildkomponente besteht aus dem Hintergrund Shields_Container, der den leeren Schildbereich in dunkelgrau zeigt, und dem Shields_Image, das das Fortschrittsbalken-UI-Material enthält.
Shield_Image verwendet eine grundlegende Fortschrittsbalken-Material-Instanz, eine vereinfachte Version des Materials Health_Image.
Füge Ansichtsbindungen hinzu
Da du nun die Hauptkomponenten der UI für dein Spiel aufgebaut hast, üben wir nun das Hinzufügen von Anzeigebindungen, mit denen jede der Komponenten basierend auf den Daten, die sie von einer Live-Sitzung erhält, aktualisiert werden kann.
Spielername
Befolge diese Schritte, damit der Spielername im richtigen Feld angezeigt wird:
Öffne den Tab Anzeigebindungen, indem du auf Fenster > Anzeigebindungen klickst oder im unteren Bereich des Bildschirms Anzeigebindungen auswählst und ihn andockst.
So zeigst du die Liste HUDPlayerInfoViewModel der Ansichtsbindungen an:
1. Öffne das Ansichtsmodelle-Fenster, indem du Fenster > Ansichtsmodelle auswählst.
1. Navigiere zu +Ansichtsmodell und wähle HUD-Spielerinfo Ansichtsmodell-Basis.
1. Klicke auf Gerät – HUD-Kontrollgerät Spielerinfo-Ansichtsmodell und dann auf Auswählen.
Wähle in der Liste Hierarchie die Option NameActive_Text aus oder indem du den Spielernamen-Bereich des UI-Vorschaubildschirms anklickst.
Klicke auf + Widget NameActive_Text hinzufügen und wähle in dem Dropdown-Menü die Option Text aus.
Wähle in dem leeren Feld rechts HUDPlayerInfoViewmodel und in dem folgenden Dropdown-Menü Spielername aus.
Die endgültige Bindung sollte folgendermaßen aussehen:
Wiederhole die Schritte 1 bis 3 für das NameInactive_Text-Element.
Um die Sichtbarkeitseinstellungen für den inaktiven Namen zu ändern, füge ein neues Widget zu NameInactive_Text hinzu und wähle Sichtbarkeit aus dem Dropdown-Menü.
Klicke auf das leere Feld rechts und wähle Konvertierungsfunktionen > Zu Sichtbarkeit (Boolesch).
Durch die Auswahl dieser Option werden drei neue Felder angezeigt. Klicke auf das Link-Symbol neben Ist sichtbar. Wähle im Menü HUDPlayerInfoViewModel und Wurde eliminiert aus.
Setze True Sichtbarkeit auf Nicht trefferprüfbar (Nur Self). Lass False Sichtbarkeit auf zugeklappt. Wenn der Spieler eliminiert oder vom Spiel getrennt wird, ersetzt der Name NameActive_Text, aber wenn der Spieler am Leben ist, bleibt es zugeklappt.
Die endgültige NameInactive_Text-Bindung sollte folgendermaßen aussehen:
Drücke Kompilieren, um die Änderungen zu übermitteln. Dann bist du mit den Spielernamen fertig.
Spieler-Avatar-Symbol
Wähle in der Hierarchie die Option Profile_Image aus oder klicke im UI-Vorschaubildschirm auf den Spielersymbol-Bereich.
Klicke auf + Widget Profile_Image hinzufügen.
Gehe zu Profile_Image > Pinsel und drücke Auswählen. Diese Bindung sieht sich im Grunde die ausgewählte Pinseleinstellung des Details-Panels Profile_Image an.
Klicke in das leere Feld rechts und wähle Konvertierungsfunktionen > Texturparameter festlegen.
Gib Textur in das Feld Parametername ein. Um den Namen dieses Felds zu bestimmen, öffnest du die Spieleravatar-Materialinstanz.
Stelle für die Funktionen Vektor/Skalar/Texturparameter festlegen sicher, dass die Material-Instanz-Parameternamen exakt mit dem Parametername-Feld übereinstimmen.
Klicke auf das Verknüpfungssymbol neben dem Feld Wert und wähle HUDPlayerInfoViewModel > Spieleravatar-Symbol.
Die endgültige Bindung sollte folgendermaßen aussehen:
Kondition und Schild
Wähle in der Hierarchie die Option Health_Image aus oder klicke im UI-Vorschaubildschirm auf den Konditionsbalken-Bereich.
Klicke auf + Widget Health_Image hinzufügen.
Gehe zu Profile_Image > Pinsel und drücke Auswählen.
Klicke in das leere Feld rechts und wähle Konvertierungsfunktionen > Skalarparameter festlegen.
Gib Fortschritt in das Feld Parametername ein. Um den Namen dieses Felds zu bestimmen, öffnest du die Spieleravatar-Materialinstanz.
Klicke auf das Symbol Link neben Wert und wähle HUDPlayerInfoViewModel > Kondition.
Der Fortschritt zeigt den Prozentsatz der verbleibenden Kondition des Spielers an und da Multiplikator auf 0,1 gesetzt wurde, bewegt jeder Prozentsatzpunkt den Fortschrittsbalken um 1/100. Du kannst das testen, indem du den Prozentsatz in der Materialinstanz willkürlich änderst und so siehst, wie sich der Fortschrittsbalken bewegt.
Konditionsprozentsatz Klicke auf das Bild, um es zu vergrößern.
Die endgültige Bindung sollte folgendermaßen aussehen:
Wiederhole für den Schildbalken die Schritte 1 bis 6, aber wähle Schild anstelle von Kondition.
Die endgültige Bindung für den Schild sollte folgendermaßen aussehen:
Drücke Kompilieren, um die Änderungen zu übermitteln.
Vollständiges Widget
Diese Bindungen stellen sicher, dass das gesamte Widget erst angezeigt wird, wenn sich der Spieler mit dem Spiel verbunden hat.
Wähle PlayerInfoBlock_Overlay aus der Hierarchie aus.
Wähle + Widget PlayerInfoBlock_Overlay hinzufügen und wähle dann die Sichtbarkeit im Dropdown-Menü aus.
Klicke auf das leere Feld rechts und wähle Konvertierungsfunktionen > Zu Sichtbarkeit (Boolesch). Durch die Auswahl dieser Option werden drei neue Felder angezeigt.
Klicke auf das Link-Symbol neben Ist sichtbar. Wähle im Menü HUDPlayerInfoViewModel und Ist getrennt aus.
Setze True-Sichtbarkeit auf Zugeklappt und False-Sichtbarkeit auf Nicht trefferprüfbar (Nur Self).
Die endgültige Bindung sollte folgendermaßen aussehen. Klicke auf Kompilieren, um die Änderungen zu speichern.
Das war‘s. Jetzt hast du ein vollständig eingerichtetes UI-Widget, das die In-Game-Informationen anzeigt.
Spieler-Stapel erstellen
Dieser Abschnitt zeigt dir, wie du ein Benutzer-Widget erstellst, das zusätzliche Teamspieler sowie den steuernden Spieler anzeigt.
Erstelle zuerst ein neues Widget-Blueprint, indem du mit der rechten Maustaste auf den Inhaltsbrowser klickst und Benutzeroberfläche > Widget-Blueprint auswählst.
Wähle im Dialogfeld Benutzer-Widget aus und benenne es in HUDInfoStack um.
Doppelklicke auf das Benutzer-Widget, um ein neues Editorfenster zu öffnen.
Ziehe zuerst aus dem Palette-Bereich ein Overlay-Element in den Hierarchie-Bereich.
Ziehe eine Stapelbox auf die Ebene unter dem Overlay und nenne sie PlayerInfoStack.
Drücke im Ansichtsmodell-Bereich +Ansichtsmodell und wähle Gerät – HUD-Kontrollgerät Team-/Einheitspieler-Infoliste aus.
Navigiere zum Details-Panel und drücke +Ansichtsmodell-Erweiterung hinzufügen. Somit kann PlayerInfoStack eine Eintrag-Widget-Klasse akzeptieren.
Wenn du diese Optionen nicht siehst, versuche, das Widget noch einmal zu kompilieren.
Wähle als Eintrag-Widget-Klasse den zuvor erstellten PlayerInfoBlock aus. Wähle unten HUDPlayerInfoViewModel als Eintrag-Ansichtsmodell aus.
Unter dem Abschnitt Slot-Vorlage kannst du die Abstände zwischen den Widgets und die Ausrichtung anpassen und eine Vorschau der Darstellung einer bestimmten Anzahl Widgets im Spiel anzeigen.
Abstand zwischen den WidgetsKlicke auf das GIF, um es zu vergrößern.
Klicke im Bereich Ansichtsbindungen auf +Widget hinzufügen und wähle HUDInfoStack. Wähle PlayerInfoStack_Viewmodel_Extension und erweitere es, um Elemente festlegen zu sehen. Wähle diese Option aus. Wenn PlayerInfoStack_Viewmodel_Extension in deiner Liste nicht angezeigt wird, drücke Kompilieren. Daraufhin sollte es angezeigt werden.
Wähle in dem leeren Feld rechts HUDPlayerInfoListViewModel > Team-/Einheitspieler-Infoarray aus. Dies übergibt das Array der Spielerinfo-Ansichtsmodelle mit einer Funktion mit der Bezeichnung Gegenstände festlegen an die neu eingerichtete Erweiterung.
Klicke auf Kompilieren, um die Änderungen zu speichern. Du bist nun bereit, diese mit dem HUD-Kontrollgerät zu deinem Spiel hinzuzufügen.
Wenn du ein Widget für den steuernden Spieler erstellen möchtest, das separat vom Rest des Teams ist:
Erstelle ein neues Widget für den steuernden Spieler und richte die Ansichtsbindungen mit Gerät – HUD-Kontrollgerät Spielerinfo-Ansichtsmodell wie zuvor ein.
Ziehe dieses Widget unter das Parent-Widget mit der Stapelbox.
Erstelle eine Bindung für dieses Widget. Wähle im linken Feld die Option Gerät – HUD-Kontrollgerät Spielerinfo-Ansichtsmodell. Wähle im rechten Feld Gerät – HUD-Kontrollgerät Team-/Teamspieler-Infoliste > Info steuernder Spieler.
Richte das HUD-Kontrollgerät ein
Suche im Inhaltsbrowser nach dem HUD-Kontrollgerät und ziehe es in deine Szene.
Wähle in den Benutzeroptionen, was der Spieler sehen soll, und stelle sicher, dass HUD anzeigen auf Ja und Teaminformation anzeigen auf Nein gesetzt ist.
Scrolle bis zu Spielerinfo-Widget-Override nach unten und ziehe das Widget HUDInfoStack auf das leere Feld. Stelle sicher, dass dies das neu erstellte Stapel-Widget ist, nicht das ursprüngliche Widget, das du erstellt hast.
Klicke auf Speichern.
Fertig! Deine neue UI sollte nun angezeigt werden, wenn du einen Spieltest deines Spiels durchführst.
Als Nächstes
Als Nächste erfährst du, wie du Kameras und Kontrollgeräte für dein Seitenscroller-Spiel einrichtest.
