Das Erstellen einer benutzerdefinierten Truppenansicht baut auf dem Widget-Design Einzelspieler-Namensschild auf, um eine benutzerdefinierte Truppenansicht zu erstellen. Das Widget „Stapelbox“ transformiert die Spieleransicht von Einzelspieler zu Truppe, indem es das Widget „Einzelspieler-Info“ mit dem Ansichtsmodell reproduziert.
Die Stapelbox ist ein Container, der die Kopien des Einzelspieler-Widgets linear anordnet, entweder von links nach rechts oder von oben nach unten. So entsteht ein einheitliches Aussehen für das Team.
In diesem Beispiel wird die Teamansicht von oben nach unten gestapelt.
Ein Beispiel für das Stapeln einer Truppe von links nach rechts findest du unter Benutzerdefinierte UI: Spieler-Infos in der Dokumentation zu „Teenage Mutant Ninja Turtles“.
Spielerinformationen-Widget
Um die Spielerinformationen von Teammitgliedern während eines Spiels zu verwenden, muss das Widget „Player_Info“ mit dem Gerät – HUD-Kontrollgerät Spielerinformation Viewmodel eingestellt werden. Diese Einstellung erstellt separate Widgets für den steuernden Spieler und sein Team, wobei die Eigenschaften im Viewmodel Gerät – HUD-Kontrollgerät-Spielerinformationen für jedes Widget verwendet werden.
Du kannst die Einstellungen weiterhin verwenden, um die Bindungen aus den Tutorials Rückenschild und Kondition und Schild einzurichten und die erforderlichen Spielerinformationen zu binden.
Ohne die richtige Einrichtung des Player_Info-Widgets erhältst du Fehlermeldungen im Compiler.
Im Folgenden findest du die Schritte, um ein Team-Stapel-Widget zu erstellen, das die Viewmodels der Team-Spielerinformationsliste mit dem Spielersymbol, dem Spielernamen, der Gesundheit und den Schilden verbindet.
Erstellen eines Benutzer-Widget
Folge den Schritten in UI-Pop-Ups, um ein Benutzer-Widget zu erstellen.
Nenne das Benutzer-Widget Squad_View.
Doppelklicke auf die Miniaturansicht des Nutzer-Widgets, um den Event-Editor in Unreal Motion Graphics (UMG) zu öffnen.
Im Widget-Editor planst und gestaltest du dein UI-Design für die Teamansicht. Wenn du dich für ein Layout entschieden hast, kannst du Materialien hinzufügen, um deiner Benutzeroberfläche ein benutzerdefiniertes Aussehen zu verleihen.
Du solltest nun zwei Benutzer-Widgets in deinem Inhaltsbrowser haben – eines mit dem Namen Player_Info und ein zweites mit dem Namen Squad_View.
Erstellen des Truppen-Layouts
Es ist Best Practice, ein voll funktionsfähiges einzelnes Player_Info-Widget in ein Squad_View-Widget zu bringen, indem eine Stapelbox als Container verwendet wird. Dies bietet ein einheitliches Design, indem das Einzelspieler-Design in der Stapelbox reproduziert und das Design von oben nach unten oder von rechts nach rechts wiederholt wird.
Du fügst das Einzelspieler-Widget zum Viewmodel hinzu und ordnest dann das Layout im Event-Diagramm über die Stapelbox an.
Gehen Sie wie folgt vor:
Ziehe ein Overlay unter Team_Info und nenne es Container_Overlay.
Ändere die Größe von Container_Overlay auf 2560 x 1440. Dies ist die optimale Größe für alle Bildschirme.
Verschachtele eine Stapelbox unter dem Container_Overlay.
Ändere im Details-Panel die folgenden Einstellungen für die Stapelbox:
Abstand = 25
Ausrichtung = Vertikal
Die Stapelbox hat ein Padding von 25 px vom Bildschirmrand.
Wähle in der Hauptmenüleiste Fenster > Ansichtsmodelle aus, um das Panel „Ansichtsmodell“ zu öffnen.
Klicke auf +Ansichtsmodell, wähle dann Gerät – HUD-Kontrollgerät Team/Truppen-Spielerinformationsliste > Auswählen aus. Dadurch wird ein Viewmodel für das HUD-Kontrollgerät-Gerät erstellt.
Klicke im Details-Panel auf +Ansichtsmodell-Erweiterung hinzufügen. Dadurch werden Optionen geöffnet, mit denen das Team-Widget im Team_View-Widget dynamisch auf der Grundlage der Anzahl der Spieler in deinem Team erstellt werden kann.
Vor „+Viewmodel-Erweiterung hinzufügen“Nach „+Viewmodel-Erweiterung hinzufügen“Wähle in der Einstellung Einstiegs-Widget-Klasse dein Player_Info Widget aus der Dropdown-Liste aus und lege das Einstiegs-ViewModel auf HUDPlayerInfoListViewModel fest.
Erweitere die Option Slot-Vorlage und passe den Abstand zwischen den einzelnen Spieler-Widgets an. Füge Widgets hinzu oder entferne sie und ändere die Ausrichtung. Verwende diese Optionen, um zu visualisieren, wie die Widgets im Spiel aussehen werden.
Wenn deine UI-Elemente zu groß für den verfügbaren Platz sind, gehe zurück zum Player_Info-Widget und passe die Größe deines Bild-Widgets nach unten an, damit es in das Team_View-Widget passt.
Als Nächstes fügst du Bindungen hinzu, damit die gesamte UI für Truppen funktioniert.
Truppenbindungen
Um die Informationen eines Teams an das Team_View-Widget zu binden, musst du über Ansichtsbindungen auf die Informationen des Teammitglieds verweisen. Die Bindungen teilen dem Widget mit, welche Informationen es von den gebundenen Geräten holen muss und für welchen Spieler. Die Informationen für jeden Spieler werden dann über das HUD-Kontrollgerät-Gerät in der Benutzeroberfläche ausgefüllt.
Wähle die Stapelbox im Hierarchie-Panel aus, öffne dann die Ansichtsbindungen und wähle +Widget hinzufügen aus. Dies fügt die Stapelbox als Widget zum Ansichtsbindungen-Panel hinzu.
Wähle Squad_View > Auswählen aus der Widget-Dropdown-Liste aus. Dies wählt das Team-Widget und alle seine internen Widgets für die Bindung aus.
Wähle im Feld Squad_View auf der linken Seite Squad_View > StackBox > StackBox-Ansichtsmodell > Gegenstände festlegen > Auswählen aus. Dies übergibt das Array der Spielerinfo-Ansichtsmodelle mit einer Funktion mit der Bezeichnung Gegenstände festlegen an die neu eingerichtete Erweiterung.
Wenn du die Funktion Gegenstände festlegen bei diesem Schritt nicht siehst, kompiliere das Widget und überprüfe es noch einmal.
Wenn PlayerInfoStack_Viewmodel_Extension in deiner Liste nicht angezeigt wird, drücke Kompilieren. Daraufhin sollte es angezeigt werden.
Wähle in dem leeren Feld auf der rechten Seite Squad_View > HUDPlayerInfoListViewModel > Team/Truppen-Spieler-Info-Array > Auswählen 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. Dein Widget kann nun zum HUD-Kontrollgerät hinzugefügt werden.
Füge dein Widget zum HUD-Kontrollgerät hinzu und teste dein Projekt.
Einrichten des HUD-Kontrollgeräts
Es müssen einige wichtige HUD-Kontrollgerät-Einstellungen geändert werden. Du ersetze diese Standardelemente der Fortnite-HUD durch dein eigenes Widget-Design.
Ziehe ein HUD-Kontrollgerät in dein Projekt und lass das Gerät ausgewählt, um seine Einstellungen im Details-Panel zu füllen.
Lege im Details-Panel die folgenden Optionen fest:
HUD anzeigen = Ja
Spielerinfo-Widget-Override = Name deines Widgets
Klicke auf das Speichern-Symbol, um deine Änderungen zu speichern.
Wähle Sitzung starten aus, um deine benutzerdefinierte Benutzeroberfläche zu testen.
Führe einen Spieltest mit zwei oder mehr Spielern durch, um sicherzustellen, dass das Layout funktioniert und für die von dir erstellte Insel richtig aussieht.
