Erstelle eine dynamische Benutzeroberfläche mit sich ändernden Materialien, die basierend auf Gameplay-Events und Daten aktualisiert werden. Um deine Benutzeroberfläche dynamisch zu gestalten, musst du eine Kombination aus UI-Materialien, Ansichtsbindungen und drei der Konvertierungsfunktionen Materialparameter festlegen (Textur, Skalar und Vektorparameter festlegen) verwenden.
In Unreal Editor für Fortnite (UEFN) erhältst du ein Basismaterial mit einer Reihe von Parametern. Verwende das Tracker-Gerät, um Eliminierungen in einem Widget im Fortschrittsbalkenstil zu verfolgen, als Beispiel für ein Material, das basierend auf deinem Fortschritt bei der Eliminierung von Feinden dynamisch aktualisiert wird.
Erstellen einer Materialinstanz
Weitere Informationen zu Material-Instanzen findest du unter Material-Instanzen erstellen und verwenden in der Unreal-Engine-Dokumentation.
Alle Assets, die zur Erstellung dieser Material-Instanzen verwendet werden, sind nativ in UEFN zu finden. Wie du das Material in diesem Beispiel erstellst, erfährst du unter Zählermaterial im Material-Tutorials-Bereich.
Erstelle eine Material-Instanz von M_Tracker und gib der Material-Instanz einen Namen, MI_TrackerExample.
Ändere in der neuen Material-Instanz die Werte für IconScaleX und IconScaleY basierend auf deinen Vorstellungen. Die Materialien in diesem Beispiel wurden auf jeweils 0,7 gesetzt.
Du kannst die Eliminierungs-Fortschrittsfarbe, die das Widget füllt, basierend auf deinem Fortschritt anpassen. Lass TrackerProgress, Icon und IconColor deaktiviert. Diese werden später mit dem Tracker-Gerät verwendet.
Symbole findest du im Ordner Fortnite unter Texturen > Symbole.
Einrichten des Tracker Widgets
Du erstellst ein benutzerdefiniertes Tracker-Widget in UMG, das im Tracker-Gerät referenziert werden kann und die Eliminierungen der Spieler in der benutzerdefinierten Eliminierungs-UI verfolgt.
Klicke mit der rechten Maustaste in den Inhaltsbrowser und wähle Benutzeroberfläche > Widget-Blueprint > Benutzer-Widget.
Erstelle ein einfaches Tracker-Widget, das das Tracker-Material und einen Tracker-Titel anzeigt, wie in dem folgenden Beispiel gezeigt.
Ziehe ein Overlay in das Widget-Diagramm. So werden alle Teile, aus denen das Widget besteht, übereinandergelegt. Außerdem kannst du festlegen, wo auf dem Bildschirm dieses Widget angezeigt wird.
Verschachtele eine Stapelbox innerhalb des Overlays, sodass du das Tracker-Material und den Titel von links nach rechts anordnen kannst.
Verschachtele ein Overlay in der Stapelbox, damit du ein Tracker-Material erstellen kannst, um die Stapelbox mit einem einfachen dunklen Hintergrund zu überlagern.
Füge im Overlay zwei Bild-Widgets hinzu. Drücke F2, um sie in TrackerBackground und TrackerMaterial umzubenennen.
Wähle TrackMaterial aus, um seine Optionen im Details-Panel zu öffnen. Wähle im Details-Panel Pinsel > Bild aus und suche nach deinem erstellten MI_TrackerExample.
Stelle die Bildgröße unten auf X=96,0, Y=96,0 ein. Es sollte groß genug sein, um im Spiel gesehen zu werden.
Nachdem das Tracker-Material eingerichtet ist, musst du den Hintergrund für das Material erstellen, damit das Track-Material besser lesbar ist.
Wähle TrackerBacking aus und wähle in der Hierarchie und dann im Details-Panel Pinsel > Zeichnen als > Abgerundete Box.
Setze die Option Tönung oben für bessere Lesbarkeit auf eine neutrale Farbe. In diesem Beispiel wurde die Tönung im Feld Hex sRGB auf 3A3A3AFF festgelegt.
Setze die Optionen Horizontale Ausrichtung und Vertikale Ausrichtung auf Füllen. Dadurch wird sichergestellt, dass TrackerBacking den Container füllt, der das TrackerMaterial enthält.
Jetzt hast du einen Hintergrund für dein TrackerMaterial, der in jeder Szene im Spiel gut lesbar aussieht.
Einrichten des Tracker-Textes
Nachdem das Tracker-Material im Tracker-Widget referenziert wurde, richtest du einen Text ein, der den Spieler darüber informiert, was in der Benutzeroberfläche nachverfolgt wird.
Verschachtele einen Textblock in der Stapelbox, die das Overlay enthält. Benenne den Textblock in TrackerTitle um.
Wähle TrackerTitle in der Hierarchie aus und setze im Details-Panel Vertikale Ausrichtung auf Vertikal zentrieren. Dadurch wird sichergestellt, dass der Text immer mittig zum TrackerMaterial ausgerichtet ist.
Nimm einige stilistische Änderungen an der Schriftart vor, indem du die Größe reduzierst, eine Kontur hinzufügst oder den Schriftschnitt änderst, damit sie zu deiner Themenwelt passt.
In diesem Beispiel wurden die folgenden Änderungen vorgenommen: Schriftgröße = 24 Schriftart = Fett Umriss = Dunkelrot
Du kannst alle Einstellungen, die sich auf die Schriftart beziehen, in der Kategorie „Aussehen“ anpassen.
Sobald alle letzten Designarbeiten abgeschlossen sind, solltest du TrackerMaterial und TrackerTitle eingerichtet haben.
Um zwischen beiden Elementen etwas Platz zu schaffen, füge rechts zum Overlay, das das TrackerMaterial enthält, Padding hinzu:
Wähle das Overlay aus.
Erweitere im Details-Panel die Option Auffüllen.
Ändere Auffüllen rechts zu 16 px.
Zwischen dem Bild und dem Text wird ein Leerraum eingefügt.
Wenn du den Abstand zwischen mehreren Objekten einfach ändern möchtest, kannst du ein Bild-Widget in die Stapelbox mit diesen Objekten einfügen, die Bildgröße X auf den gewünschten Abstand festlegen und es auf „Zeichnen als Nichts“ setzen. Das Bild wird nicht angezeigt, nimmt aber trotzdem Platz in deiner Stapelbox ein!
Das macht es einfacher, die Abstände zwischen Objekten zu verwalten und nicht in jedem Widget Paddings suchen zu müssen.
Einrichten von „Materialparameter festlegen“
Als Nächstes bindest du die Werte des Tracker-Geräts an die Materialparameter im Tracker-Widget.
Hinzufügen eines Ansichtsmodells
Füge das Tracker-Ansichtsmodell zum Widget hinzu, indem du Fenster > Ansichtsmodell wählst.
Wähle in deinem Ansichtsmodell-Fenster +Ansichtsmodell.
Wähle im Popup-Fenster Gerät – Tracker-Ansichtsmodell aus.
Wähle in der Menüleiste Fenster > Ansichtsbindungen, um das Ansichtsbindungen-Panel anzuzeigen.
Du kannst nun mit der Bindung der Daten vom Tracker beginnen, um dein Widget zu verändern.
Festlegen von Skalarparametern
Ein Skalarparameter nimmt einen Int- oder Float-Wert entgegen. Beispielsweise füllt sich der Fortschrittsbalken mit dem TrackerMaterial, basierend darauf, wie viele Eliminierungen du im Tracker hast.
Das Material ist so eingerichtet, dass es die Anzahl der Eliminierungen vom Tracker-Gerät umwandelt, um das TrackerMaterial zu füllen. Du musst nur diese Daten an den Materialparameter „Progress“ in MI_TrackerExample binden.
Ein Fortschritt von 3,0 bzw. 8,0 in MI_TrackerExample. Das ist sehr praktisch!
Wähle das TrackerMaterial-Widget aus und klicke dann auf +Widget hinzufügen im Fenster Ansichtsbindungen.
Wähle im linken Feld TrackerMaterial > Pinsel.
Wähle im rechten Feld (mit den Daten, die du an den Pinsel des TrackerMaterial binden möchtest) Konvertierungsfunktionen > Skalarparameter festlegen aus.
Dadurch wird die Funktion Skalarparameter festlegen für die Pinsel-Einstellung ausgeführt. Da dein Pinsel derzeit MI_TrackerExample enthält, sucht er nach einem Skalarparameter, den du angibst, und übergibt ihm einen Wert.
Gib TrackerProgress in das Feld Parametername ein. Dadurch wird das Material basierend auf dem Fortschritt des Trackers gefüllt.
Es ist wichtig, dass du keine Fehler beim Parameter machst, denn der richtige Parameter wird sonst für dein Material nicht gefunden. Wenn du vergessen hast, wie dein Parameter heißt, öffne die Material-Instanz und suche auf der rechten Seite nach den Parametern.
Wähle das Link-Symbol neben Wert und wähle dann MVVM_UEFN_Tracker > Farbe. Dies bindet den aktuellen Fortschritt des Trackers.
Jetzt wird dein aktueller Tracker-Fortschritt direkt in dein Material übernommen. Das Tracker-Material füllt sich langsam auf, wenn der Spieler, der dem Tracker zugewiesen ist, eine Eliminierung erhält.
Vektorparameter festlegen
Ein Vektorparameter übernimmt einen Vector4-Wert. Vektoren werden normalerweise für Farben verwendet – RGBA (die vier Vektoren), du wirst einen Vector4 verwenden, um die Farbe deines Symbols basierend auf den Einstellungen im Gerät zu ändern.
Weitere Informationen zu Vektoren findest du unter Vektormaterialausdrücke in der Unreal-Engine-Dokumentation.
Wähle das TrackerMaterial in der Hierarchie aus, öffne dann das Ansichtsbindungen-Fenster und wähle +Widget hinzufügen.
Wähle im leeren Feld auf der linken Seite TrackerMaterial > Pinsel-Eigenschaften aus.
Wähle im leeren Feld rechts Konvertierungsfunktionen > Vektorparameter festlegen aus.
Wie oben erläutert, ruft diese Bindung den Pinsel vom TrackerMaterial (in diesem Fall MI_TrackerExample) ab und legt einen Vektorparameter fest, den du für diese Material-Instanz angibst. Du kannst die Symbolfarbe so einstellen, dass sie den Optionen des Tracker-Geräts folgt.
Gib IconColor in das Feld Parametername ein.
Wähle das Link-Symbol neben Wert und wähle dann MVVM_UEFN_Tracker > Farbe. Dadurch wird der Wert auf die Symbolfarbe-Eigenschaft aus dem Tracker-Viewmodel gesetzt.
Egal, welche Symbolfarbe auf dem Tracker-Gerät festgelegt ist, sie wird an dein Material übergeben. Wenn du ein orangefarbenes Symbol möchtest, lege es einfach auf dem Gerät fest und dieses färbt es für dich ein. Das in diesem Beispiel verwendete Material ist bereits darauf eingestellt.
Texturparameter festlegen
Ein Texturparameter nimmt einen Texture2D-Wert entgegen. Texturen werden normalerweise für Bilder oder Symbole verwendet, also werden wir sie verwenden, um unser Symbol basierend auf den Einstellungen im Gerät zu ändern!
Weitere Informationen zu Texturen findest du unter Texturen in der Unreal-Engine-Dokumentation.
Wähle das TrackerMaterial in der Hierarchie aus, öffne dann das Ansichtsbindungen-Fenster und wähle +Widget hinzufügen.
Wähle im leeren Feld auf der linken Seite MVVM_UEFN_Tracker > Pinsel aus.
Wähle im leeren Feld rechts Konvertierungsfunktionen > Texturparameter festlegen.
Gib Icon in das Feld Parametername ein.
Vermeide Fehler bei der Eingabe des Parameternamens! Wenn du den Namen des Parameters vergisst, kannst du im MI_TrackerExample nach der Liste der Parameter suchen, die festgelegt werden können.
Klicke auf das Verknüpfungssymbol neben dem Feld Wert und wähle MVVM_UEFN_Tracker > Icon aus dem Dropdown-Menü aus. Dadurch wird der Wert mit der Icon-Eigenschaft aus dem Tracker-Viewmodel verknüpft.
Der Texturparameter wurde festgelegt. Jetzt wird jedes Symbol, das in deinem Tracker-Gerät eingestellt ist, an das Widget übergeben!
Binden des Tracker-Texts an den Tracker-Namen
Als Nächstes bindest du den Tracker-Titel, den du erstellt hast, an die gleiche Einstellung im Tracker-Gerät.
Wähle TrackerTitle in der Hierarchie aus, öffne dann das Fenster Ansichtsbindungen und wähle +Widget hinzufügen.
Wähle im leeren Feld auf der linken Seite TrackerTitle > Text aus dem Dropdown-Menü.
Wähle im leeren Feld auf der rechten Seite MVVM_UEFN_Tracker > Name aus dem Dropdown-Menü aus.
Diese Bindung übergibt den Titel deines Trackers an den Textblock.
Einrichten des Tracker-Geräts
Als Nächstes referenzierst du das Widget, das du in UMG erstellt hast, im Tracker-Gerät. Dadurch wird die Eliminierungs-UI im HUD angezeigt.
Füge ein Tracker-Gerät zu deinem Projekt hinzu.
Gib dem Tracker-Titel einen Namen. Dieser Name wird im TrackerTitle-Text in deinem Widget angezeigt.
Füge dein Widget zum Feld HUD-Widget hinzu.
Ändere das Auftragssymbol-Feld in ein beliebiges Symbol, das du auf deinem Tracker anzeigen möchtest. Dies setzt das Default-Alien-Symbol auf dem MI_TrackerExample außer Kraft.
Wähle eine Farbe in Symbolfarbe. Das oben festgelegte Symbol nimmt die ausgewählte Farbe an.
Richte die anderen Einstellungen ein, um den Tracker zu deinem Spieler hinzuzufügen.
Endergebnis
Voila! Dein benutzerdefiniertes Tracker-Widget wird oben links angezeigt. Egal, ob du Zombies oder andere Spieler eliminierst, das Widget füllt sich langsam auf. So verknüpfst du Gameplay-Daten mit deinen eigenen benutzerdefinierten Widgets, indem du „Materialparameter festlegen“ verwendest.
