Das Zählermaterial eignet sich perfekt für die Verwendung in der UI. Dieses Material kann in einem UMG-Bild-Widget referenziert werden, um deine Gesundheit, Eliminierungen oder das Sammeln von Gegenständen und Währung im Spiel zu verfolgen. Verwende dieses Tutorial, um dein eigenes Meter Material zu erstellen das du in einem benutzerdefinierten Benutzeroberfläche-Design verwenden kannst.
Dieses Material kann die Fortnite-Standarddarstellung mit dem benutzerdefinierten Material überschreiben, das du erstellst, um die Kondition der Spieler, die Schilde oder eine andere Art von spielerzentrierten Statistiken zu verfolgen.
Dieses Material verwendet Symbole in seinem Design. Unreal Editor für Fortnite (UEFN) wird nativ mit zahlreiche Symbolen geliefert. Die Symbole findest du unter den Fortnite-Ordnern Texturen > Symbole.
Erstelle ein Material
Alle Materialien werden im Inhaltsbrowser erstellt. Um dein Projekt zu organisieren, Erstellen einen Ordner, in dem du alle deine Materialien unterbringen kannst.
Klicke mit der rechten Maustaste in den Inhaltsbrowser, um das Kontextmenü zu öffnen.
Wähle Material aus dem Kontextmenü.
Nenne dein Material M_Meter.
Mache einen Doppelklick auf die Material-Miniaturansicht, um den Material-Editor zu öffnen.
Um das Meter Material zu erstellen, musst du das UI Material Lab von Fab herunterladen.
Weitere Informationen zu Materialknoten und ihrer Funktionsweise findest du unter Materialknoten und Einstellungen.
Materialknoten
Im Folgenden findest du eine Liste der in diesem Tutorial verwendeten Materialknoten und deren Zweck im Endprodukt. Um diese Erklärung zu überspringen und mit der Erstellung des Materials zu beginnen, klicke hier.
| Material Knoten | Zweck |
|---|---|
Fügt dem Symbol und der Fortschrittsanzeige eine Farbe hinzu. | |
Wird verwendet, um eine Hintergrundmaske unter dem Symbol hinzuzufügen. Wird auch als Fortschrittsbalken verwendet, um den Hintergrund entsprechend dem Fortschritt zu maskieren. | |
Bietet eine Möglichkeit, dem Benutzeroberflächen-Material eine Textur hinzuzufügen. | |
Wird verwendet, um das farbige Symbol über eine Hintergrundfarbe zu legen und eine Maske für das Symbol über dem Hintergrund zu erstellen. | |
Gibt die UV-Texturkoordinaten des Symbols in Form eines Zweikanal-Vektorwerts aus. | |
Materialfunktion > UI-Skalierung | Texturfunktionen sind eine Unterkategorie des Materialfunktions-Knoten. Dies bietet eine Möglichkeit, die UVs des Symbols zu skalieren. |
Materialfunktion > UI SDF-Kreis | Bietet eine Möglichkeit, den Fortschrittsbalken hinter dem Symbol zu verbergen und festzulegen, wie viel des Kreises mit der Hintergrundfarbe gefüllt wird. Typischerweise wird diese Materialfunktion verwendet, um einen Kreis im Material zu zeichnen. Kann durch andere SDF-Form-Materialfunktionen (z. B. UI-SDF-Box) aus dem UI Material Lab ersetzt werden, um eine andere Form zu erzeugen. |
Wird verwendet, um die X- und Y-Achse des Symbols gleichmäßig zu skalieren, wobei wir zwei skalierbare Parameter anfügen. Eines für die Skalierung der X-Achse des Symbols und ein Weiteres für die Y-Achse des Symbols, und verbinde diese mit MF_UI_Scale. | |
Die UVs des Symbols werden zwischen 0 und 1 begrenzt, um sicherzustellen, dass das Symbol nicht umgebrochen oder gekachelt wird. | |
Wird verwendet, um einen Bereich von 0-10 für den Fortschritt-skalierbarer Parameter auf dem Tracker-Gerät zu erstellen. ConstantBiasScale nimmt den eingestellten Wert vom Parameter, zieht den Bias-Wert ab und multipliziert ihn mit dem Skalierung-Wert. | |
Ein Multiplikationsknoten nimmt zwei Inputs entgegen, multipliziert diese miteinander und gibt das Ergebnis aus. In diesem Beispiel werden die RGB-Kanäle einer Textur mit einem Vector3-Knoten multipliziert, um den Hintergrund einzufärben. Zusätzlich wird der LinearGradient mit einem Vector3 multipliziert, um das Symbol einzufärben. | |
Schritt | Erstellt einen Schwellenwert für die X- und Y-Koordinaten. Der Schwellenwert erstellt einen Container für das Hintergrundmaterial in der Benutzeroberfläche. Die Schritt-Knoten setzen Werte oberhalb eines Schwellenwerts auf 1 und Werte unterhalb des Schwellenwerts auf 0. Dies gibt die Maske für einen Fortschrittsbalken aus, bei dem eine klare Trennung zwischen einem gefüllten und einem nicht gefüllten Bereich besteht. |
Nimmt die UGradient-Werte vom Linearen Gradienten, rundet sie auf die nächste Ganzzahl auf und gibt das Ergebnis aus. So können wir auf einfache Weise einen einfachen einfarbigen Hintergrund erstellen. | |
Konstante | Bietet eine Möglichkeit, einen Wert zu einem Materialattribut hinzuzufügen. |
Bereite den Hauptmaterialknoten vor
Bevor du Materialknoten hinzufügst, musst du das Material für die Benutzeroberfläche vorbereiten, indem du die Einstellungen im Hauptmaterialknoten (MMN) änderst. Die Einstellungen des MMN (Hauptmaterialknoten) bestimmen, welche Inputs im MMN verfügbar sind und wo das Material verwendet werden kann.
Wähle den MMN-Knoten aus.
Lege im Details-Panel des Material-Editors die Materialdomain auf Benutzeroberfläche fest.
Setze den Überblendmodus auf Durchscheinend.
Klicke auf das Bild, um es zu vergrößern.
Fortschrittsfarbe einrichten
Beginne mit dem Meter-Material, indem du die Fortschrittsfarbe einstellst, die in UMG über das Bild-Widget identifiziert werden kann. Du kannst diese Fortschrittsfarbe verwenden, um ein benutzerdefiniertes UI-Design zu erstellen.
Klicke mit der rechten Maustaste in das Materialdiagramm, um das Knotenmenü zu öffnen.
Gib Linearer Gradient in die Suchleiste ein. Wähle LinearGradient aus der Dropdown-Liste. Der Knoten erscheint im Diagramm.
Wiederhole die Schritte Eins und zwei, um dem Materialdiagramm die folgenden Knoten hinzuzufügen:
Ceil
Multiplizieren
Constant3vector
Ziehe den weißen Pin vom Constant3Vector-Knoten ab und verbinde ihn mit dem A-Input am Multiplizieren-Knoten. Die Form im Viewport ändert die Farbe.
Wähle den Constant3Vector-Materialknoten im Materialdiagramm aus. Der Knoten wird im Diagramm hervorgehoben, um anzuzeigen, dass du ihn ausgewählt hast.
Klicke im schwarzen Quadrat auf dem Knoten, um das Farbrad zu öffnen. Wähle eine Farbe aus dem Farbrad für das Material.
Ziehe den UGradient-Pin vom Linearen Gradient-Knoten ab und verbinde ihn mit dem linken Input des Ceil-Knotens.
Ziehe den rechten Pin vom Ceil-Knoten ab und verbinde ihn mit dem B-Input des Multiplizieren-Knotens.
Diese Knotenkonfiguration liefert die Farbe für den Container der Benutzeroberfläche.
Klicke mit der rechten Maustaste in den Diagrammbereich und füge dem Graphen einen LinearInterpolate-Knoten hinzu.
Ziehe den Multiplizieren-Knoten ab und verbinde ihn mit dem A-Input am ersten LinearInterpolate-Knoten.
Dieser Teil des Materials wird verwendet, um den Fortschritt in einem Zähler zu verfolgen, indem der Hintergrund eines Containers aufgefüllt wird.
Um Knoten zu gruppieren und als Einheit zu verschieben, gehe wie folgt vor:
Klicke mit der linken Maustaste und ziehe um eine Gruppe von Knoten herum. Alle ausgewählten Knoten werden hervorgehoben.
Wähle einen Knoten aus und ziehe ihn im Diagramm herum. Alle ausgewählten Knoten werden dabei als Einheit verschoben.
Symbolskalierung und Farbe einrichten
Für diesen Abschnitt des Materials wählst und skalierst du ein Symbol sowie eine Farbe für das Symbol im Material und in der Benutzeroberfläche. Symbole findest du in den Ordnern Fortnite > Texturen > Symbole.
Klicke mit der rechten Maustaste in den Diagrammbereich und füge dem Diagramm die folgenden Knoten hinzu:
TextureCoordinate
AppendVector
Fixierung
TextureSample
Constant3vector
Multiplizieren
Konstante
Wähle den Konstanten-Knoten im Diagramm aus, klicke dann mit der rechten Maustaste und wähle Duplizieren aus der Dropdown-Liste. Ein weiterer Konstante-Knoten erscheint auf dem ersten. Verschiebe das Duplikat unter das Original.
Dupliziere den Multiplizieren-Knoten.
Dupliziere den LinearInterpolate (Lerp)-Knoten.
Wähle den obersten Konstante-Knoten im Diagramm aus und füge einen Standardwert von 0,7 hinzu.
Klicke mit der rechten Maustaste auf den Knoten und wähle In Parameter konvertieren aus der Dropdown-Liste aus. Nenne den Parameter IconScaleX. Dieser Knoten steuert die Skalierungsgröße für die X-Koordinaten des Symbols.
Wähle den untersten Konstante-Knoten im Diagramm aus und füge einen Standardwert von 0,7 hinzu.
Klicke mit der rechten Maustaste auf den Knoten und wähle Parameter konvertieren aus der Dropdown-Liste aus. Nenne den Parameter IconScaleY. Dieser Knoten steuert die Skalierungsgröße für die Y-Koordinaten des Symbols.
Ziehe den Parameterknoten IconScaleX ab und verbinde ihn mit dem A-Input des AppendVector-Knoten.
Ziehe den Parameterknoten IconScaleY ab und verbinde ihn mit dem B-Input des AppendVector-Knotens.
Die im Parameterknoten festgelegten X- und Y-Werte für IconScale können außerhalb des Materials gesteuert werden, wenn sie in eine Material-Instanz umgewandelt werden.
Als Nächstes musst du einen Materialfunktions Knoten erstellen, um dem Material eine Funktion hinzuzufügen, welche die UVs des Symbols skaliert.
Richte eine Materialfunktion ein: UI_Scale
In diesem Schritt lernst du, wie du eine Materialfunktion erstellst und nach Funktionen suchst, die du mit dem Knoten verwenden kannst.
Klicke mit der rechten Maustaste in das Diagramm und gib MaterialFunction in die Suchleiste ein. Wähle MaterialFunctionCall aus der Dropdown-Liste. Der MaterialFunctionCall-Knoten wird im Diagramm angezeigt.
Klicke im Details-Panel auf das Dropdown-Liste-Menü Materialfunktion, gib UI_Scale in die Suchleiste ein und wähle dann MF_UI_Scale aus der Dropdown-Liste aus. Der MaterialFunctionCall-Knoten wird zum UI-Scale-Knoten.
Die Funktion UI_Scale bietet eine Möglichkeit, den Maßstab der UVs des Symbols mithilfe von Materialfunktionen zu erhöhen oder zu verringern. Materialfunktionen können nur über den Knoten Materialfunktion in einem Material verwendet werden.
Symbol-UVs einrichten
Als Nächstes fügst du dem Material ein Symbol und eine Farbe hinzu, die skaliert werden, wenn die Informationen aus den Parametern und der Benutzeroberflächen Skalierung übernommen werden.
Ziehe den TextureCoordinate Knoten ab und verbinde ihn mit dem UVs (V2)-Input des MF_UI_Scale Knotens.
Ziehe den AppendVector Knoten ab und verbinde ihn mit dem Skalierung (V2)-Input des MF_UI_Scale Knotens.
Ziehe den Ergebnis-Pin auf dem MF_UI_Scale-Knoten ab und stecke ihn in den weißen Input auf dem Klammer-Knoten.
Wähle den Knoten Textur Sample aus, um seine Optionen im Details -Panel zu öffnen.
Öffne die Dropdown-Liste Textur.
Gib „Symbol“ in die Suchleiste ein.
Wähle ein Symbol aus der Dropdown-Liste.
Ziehe den weißen Pin vom Klammer -Knoten ab und verbinde ihn mit dem UVs-Input des Textur-Sample-Knoten.
Ziehe den RGB-Pin des Texture Sample ab und verbinde ihn mit dem A-Input des ersten Multiplizieren Knoten.
Ziehe den A-Pin des Textur-Samples und verbinde ihn mit dem B-Input des ersten Multiplizieren Knoten.
Ziehe den A-Pin des Texturen Sample-Knotens erneut ab und verbinde ihn mit dem Alpha-Input des zweiten LinearInterpolate (Lerp)-Knoten.
Ziehe den ersten Multiplizieren Knoten ab und verbinde ihn mit dem B-Input des zweiten Multiplizieren Knoten.
Wähle den Knoten Constant3Vector aus, um seine Optionen im Details Panel zu öffnen.
Klicke in das Feld Konstante , um das Farbrad zu öffnen.
Wähle eine Farbe für das Symbol aus dem Farbrad aus.
Ziehe den weißen Pin vom Constant3Vector-Knoten ab und verbinde ihn mit dem A-Input des zweiten Multiplizieren-Knoten.
Ziehe den weißen Pin des zweiten Multiplizieren -Knotens ab und verbinde ihn mit dem B-Input des ersten LinearInterpolate (Lerp)-Knoten.
Ziehe den weißen Pin des ersten Multiplizieren -Knotens ab und verbinde ihn mit dem Alpha-Input des ersten LinearInterpolate (Lerp)-Knoten.
Ziehe den weißen Pin des ersten Multiplizieren -Knotens ab und verbinde ihn mit dem B-Input des zweiten LinearInterpolate (Lerp)-Knoten.
Ziehe den weißen Pin des ersten LinearInterpolate (Lerp)-Knoten in den Endgültige Farbe-Input auf dem Hauptmaterialknoten.
Das Symbol wird nun im Materialvorschau-Fenster angezeigt.
Als Nächstes richtest du die Maske für den Fortschrittsbalken ein. Dadurch wird nur der Teil des Materials angezeigt, der der Erhöhung der Eliminierungen entspricht, genau wie im folgenden GIF.
Fortschrittsbalkenmaske einrichten
Der letzte Schritt besteht darin, eine Maske für den Fortschrittsbalken zu erstellen, die in einem Widget oder im Sequencer aufgerufen werden kann, um das Benutzeroberflächenmaterial zu animieren, sodass sich der Fortschrittsbalken mit der Materialfarbe füllt, wenn der Spieler Gegner eliminiert.
Du musst Raum für die nächste Reihe von Knoten schaffen. Wähle alle derzeit vorhandenen Knoten aus, indem du mit der linken Maustaste darauf klickst und sie markierst, und verschiebe sie dann als eine Gruppe nach links.
Du musst die Maskeneinrichtung in den zweiten LinearInterpolate (Lerp)-Knoten einstecken. Wähle den zweiten LinearInterpolate (Lerp)-Knoten aus und verschiebe ihn nach rechts in Richtung des Hauptmaterialknotens. Im Folgenden siehst du, wie die Knotenkonfiguration zu diesem Zeitpunkt aussehen sollte.
Klicke auf das Bild, um es zu vergrößern.
Für diesen Abschnitt des Materials musst du die Eigenschaften des Materials auf der Grundlage ihrer X und Y-Koordinaten im Container maskieren. Diese Koordinaten werden auch verwendet, um das Material anzuzeigen, wenn die Spielereliminierungen zunehmen.
Klicke mit der rechten Maustaste in den Diagrammbereich und füge dem Diagramm die folgenden Knoten hinzu:
Konstante
ConstantBiasScale
LinearGradient
Schritt
Multiplizieren
Wähle den Konstante-Knoten aus, klicke mit der rechten Maustaste auf den Knoten und wähle Duplizieren aus der Dropdown-Liste.
Wähle den ersten Konstante-Knoten aus und gib ihm den Wert 5,0.
Klicke mit der rechten Maustaste auf den Knoten und wähle In Parameter umwandeln aus.
Benenne den Parameter TrackerProgress.
Dieser Parameter wird in UMG und Sequencer verwendet, um die Eliminierungen des Spielers zu verfolgen und das Material im Container anzuzeigen.
Ziehe den weißen Pin vom Trackerfortschritt-Knoten ab und verbinde ihn mit dem ConstantBiasScale-Knoten.
Wähle den ConstantBiasScale-Knoten aus und lege im Detailfenster den Bias-Wert auf 0 und den Skalierungswert auf 0,1 fest. Dies normalisiert TrackerProgress für den 0-10 Wert des Trackers.
Ziehe den ConstantBiasScale-Knoten ab und verbinde ihn mit dem Y-Input des Schritt-Knoten.
Ziehe den VGradient-Pin vom LinearGradient-Knoten ab und verbinde ihn mit dem X-Input des Schritt-Knoten.
Ziehe den weißen Pin vom Schritt-Knoten ab und verbinde ihn mit dem B-Input des Multiplizieren-Knoten.
Wähle den zweiten Konstante-Knoten aus und setze den Wert auf 0,9.
Klicke mit der rechten Maustaste in das Diagramm und gib MaterialFunctionCall in die Suchleiste ein.
Wähle den Knoten Materialfunktion aus, sodass seine Optionen im Details-Panel geöffnet werden.
Gib UI_SDF_Circle in die Suchleiste ein.
Wähle UI_SDF_Circle aus der Dropdown-Liste aus.
Diese Materialfunktion steuert die Größe des Containers über den Konstante-Knoten und bestimmt die Form des Materialcontainers. In diesem Fall ist es ein kreisförmiger Container.
Ziehe den zweiten Konstante-Knoten ab und verbinde ihn mit dem Größe(n)-Input am MF_UI_SDF_Circle-Knoten.
Ziehe den Füllen-Pin vom MF_UI_SDF_Circle-Knoten ab und verbinde ihn mit dem A-Input des Multiplizieren-Knotens.
Ziehe den weißen Pin vom Multiplizieren-Knoten ab und verbinde ihn mit dem A-Input des zweiten LinearInterpolate (Lerp)-Knoten.
Ziehe den weißen Pin am zweiten LinearInterpolate (Lerp)-Knotens ab und verbinde ihn mit dem Opazität Input des Hauptmaterialknotens.
Das Material ist vollständig, die vollständige Knotenkonfiguration sollte wie in der Abbildung unten aussehen.
Klicke auf das Bild, um es zu vergrößern.
Um dieses Material mit UMG zu verwenden, verwandle es in eine Material-Instanz. Die Parameter einer Material-Instanz können überschrieben, ein- oder ausgeschaltet und in UMG und Sequencer aufgerufen werden, um die Benutzeroberfläche zu animieren, mit der das Material verwendet wird.
So erstellst du eine Material-Instanz:
Klicke mit der rechten Maustaste auf die Material-Miniaturansicht im Inhaltsbrowser.
Wähle Material-Instanz erstellen aus der Dropdown-Liste.