Es gibt zwei Möglichkeiten, ein benutzerdefiniertes UI-Material für dein Projekt zu erstellen:
Materialsammlung: Eine Materialsammlung, in der die gesamte UI-Funktionalität vorintegriert ist.
Benutzerdefiniertes Parent-Material: Ein Material, das mithilfe von Materialfunktionen neu erstellt wurde.
Materialsammlung
Die Materialsammlung ist eine Reihe von extrem anpassbaren Messanzeigen-Materialien und Texturen. Du findest die Materialsammlung im Inhaltsbrowser unter Fortnite > UI > Materialien. Die Materialien sind in zwei Arten unterteilt:
Messanzeigen-Materialien: Werden normalerweise als Fortschrittsbalken verwendet.
Texturen: Werden oft für Symbole und Spielerportraits verwendet.
Das material_collection_device enthält ein Beispiel dafür, wie die Materialsammlung mit Verse verwendet werden kann, um Texturen und Materialien anzuzeigen sowie die Parameter der Materialinstanzen zu verwenden, um die UI-Materialien dynamisch zu ändern, wenn Schadensereignisse im Spiel auftreten.
Benutzerdefiniertes Parent-Material
Um ein benutzerdefiniertes Parent Material für ein UMG-Bild-Widget zu erstellen, musst du die Material-Domäne für den Hauptmaterialknoten auf Benutzeroberfläche setzen. Dieses Parent-Material verwendet Material-Funktionen, die das Material dynamischer machen.
Materialien werden in Material-Instanzen konvertiert, um eine effiziente Wiederverwendung des Parent-Materials und ein nutzerfreundlicheres Interface zu gewährleisten, mit dem du die Parameter anpassen kannst. Die Materialparameter werden dann in der Benutzeroberfläche über die gebundenen UMG-Widget-Eigenschaften aktualisiert.
Alle Änderungen, die an einem Parent-Material nach der Konvertierung vorgenommen werden, werden in alle seine Material-Instanzen propagiert.
Öffne im Inhaltsbrowser die Ordner UI > Geräte > HUD-Kontrollgerät > MaterialInstances. Finde und öffne das Schildbalkenmaterial namens MI_HCD01_ShieldBar, indem du auf die Miniaturansicht doppelklickst. Dadurch wird die Materialinstanz im Materialinstanz-Editor geöffnet.
Im vorigen Abschnitt, Einrichten der Geräteparameter, wurde erläutert, wie die Eigenschaft Fortschritt der Material-Instanz verwendet wurde, um den Schildbalken im HUD zu aktualisieren, wenn ein Spieler Schildschaden erleidet oder seinen Schild repariert. Diese Änderungen werden erzielt, indem die Spielerinformationen des HUD-Kontrollgeräts verwendet werden, um der Material-Instanz basierend auf den Spielerinformationen mitzuteilen, in welche Richtung sie auf dem Balken rutschen soll.
Materialien
Der Grund, warum eine Material-Instanz der Funktion eines Geräts zuhören kann, liegt in der Tatsache, dass sie in ihrem Parent-Material Parameter eingerichtet hat. Benutzeroberflächenmaterialien verwenden Material-Funktionen, um zeitlich festgelegte Rhythmen oder Muster in den Materialien zu erstellen, die über Material-Instanzen genutzt werden können, um Spielerinformationen im HUD zu aktualisieren.
Diese Vorlage verwendet dieselben Material-Funktionen wie das UI-Material-Projekt. Um die verschiedenen Arten von Material-Funktionen und deren Verwendung besser zu verstehen, sieh dir die Seite Material-Funktionen – Aufschlüsselung des UI-Materiallabor-Projekts an.
Die folgende Tabelle zeigt die verschiedenen Materialien, die für das Projekt erstellt wurden, und deren Verwendung.
| Liste der Projektmaterialien | Verwendung |
|---|---|
M_DropShadow | Erzeugt einen Schlagschatten, der unter einer Form angezeigt wird. Ermöglicht Quadrat, Kreis, Sechseck oder eine benutzerdefinierte Form (mit einer Textur). Benutzerdefinierte Formen erlauben kein Weichmachen des Schattens. |
M_IconWithbackground | Erstellt ein Symbol mit Hintergrund und Umriss. |
M_Meter | Erstellt einen einfachen Balkenzähler für das Geschicklichkeitsinteraktion-Gerät. |
M_Notches | Erzeugt dekorative Einkerbungen, die gleichmäßig verteilt sind Wird mit M_Meter verwendet, um einen Balkenzähler mit Einkerbungen für das Geschicklichkeitsinteraktion-Gerät zu erstellen. |
M_ProgressBar_Basic | Erstellt einen Fortschrittsbalken mit gewölbten oder scharfen Ecken mit einer Gradientfüllung und Umriss. |
M_ProgressBar_Orb | Erstellt einen Fortschrittsbalken in Form einer Kugel, die sich mit dem Fortschritt füllt. Hat eine Symboltextur in der Mitte der Kugel. |
M_Texture_Complex | Erlaubt die Skalierung und/oder Verzerrung einer benutzerdefinierten Textur. Beispielsweise kann es verwendet werden, um einen Glitzer- oder Unterwassereffekt zu erzeugen. |
M_Texture_Simple | Erlaubt das Einfärben einfacher Texturen. Es kann mit einer einfachen Schwarz-Weiß-Textur oder einer Kanal-gepackten Textur (mit RGB-Kanälen) verwendet werden. |
M_Wave | Erzeugt eine Welle mit Blasen, die nach oben steigen. |
Parametergruppen
Öffne die verschiedenen Material-Instanzen aus der Vorlage, um die verschiedenen Parameter zu sehen, die in den Parametergruppen aufgeführt sind. Dies sind die bearbeitbaren Parameter der Material-Funktionen, die an Geräte gebunden und im HUD aktualisiert werden können.
Parametergruppen können nur dann im Materialinstanz-Editor bearbeitet werden, wenn sie mit einem Häkchen markiert sind.
Um die Parameter im Materialinstanz-Editor zu bearbeiten, öffne den Inhaltsbrowser und die Ordner UI > Geräte > SkilledInteraction > MaterialInstances, suche und öffne dann die Materialinstanz MI_SID03_Water.
Ändere zunächst die Farbe des Wassers und doppelklicke auf die Parameter für Flüssigkeitsfarbe 1 und Flüssigkeitsfarbe 2. Dadurch wird das Farbrad geöffnet. Ändere das Wasser auf eine andere Farbe. Im folgenden Beispiel wird die Wasserfarbe von blau in grün geändert.
Sieh dir die Blasen genau an. Wenn du das Materialinstanz-Editor-Fenster ausgewählt hast, solltest du sehen, wie die Blasen im Material nach oben steigen. Du kannst die Blasengröße ändern, indem du die Größenparameter BubblesStartSize und BubblesMiddleSize aktivierst und dann ihre Parameter bearbeitest. Wenn die Parametergröße zu groß ist, scheinen die Blasen hinter einer Wand zu verschwinden.
Parameter wie diese können in Ansichtsbindungen gesetzt und von Gerätefunktionen verwendet werden, um Spielerinformationen zu aktualisieren.
Migriere Material-Instanzen und Textur-Assets, um sie in deinen eigenen Projekten zu verwenden.
Texturen
Texturen werden in der Benutzeroberfläche verwendet, um Details hinzuzufügen und aufzupolieren, was mit Materialien allein nicht möglich ist. Wenn du dich für die Verwendung von Texturen in deinen UI-Designs entscheidest, solltest du beachten, dass Texturen speicherintensiv sind.
Mit der Geschicklichkeitsinteraktion-Textur und kombinierten Textur- und Material-Beispielen kannst du sehen, wie viel der Benutzeroberfläche mit Texturen erstellt wird. Wenn du im Textur-Beispiel das Rückenschild-Widget ausschaltest, sind die einzigen Teile der Benutzeroberfläche, die im Textur-Beispiel sichtbar sind, die Nachricht, der Konditionsbalken und der Eliminierungszähler.
Die bevorzugte Methode zum Erstellen des Aussehens der stilisierten Boxen auf dem Rückenschild ist die Verwendung einer Textur. Die Komplexität des Designs und der Formen wäre in UMG schwer zu reproduzieren. UI-Materialien können nur verwendet werden, um grundlegende Formen zu erstellen, eine Umrandung um die Materialform hinzuzufügen und Gradienten zur Materialform und zur Umrandung hinzuzufügen.
Das UI-Beispiel mit Material und Textur zeigt, wie das Überblenden von Texturen und Materialien ein poliertes Aussehen für die Benutzeroberfläche erzeugt. Die Benutzeroberfläche besteht aus drei Texturen, die das Rückenschild-Design und das Kreaturenbild bilden.
Das Bild der Kreatur wird über ein Bild-Widget gelegt. Das Bild-Widget verwendet keine Material-Instanz. Stattdessen erstellt die Pinsel-Option ein weißes Rechteck auf der Ebene unter dem Kreaturenbild. Die Größe und die Abmessungen des Rechtecks werden im Details-Panel mithilfe der Bildgröße-Optionen gesteuert.
Im Hierarchie-Panel befinden sich Widgets, die anderen Widgets in der Liste vorangehen, auf der Hintergrundebene. Jedes zusätzliche Widget liegt über dem vorhergehenden Widget in der Liste.
Eine Material-Instanz wird als Schlagschatten für das Kreaturenmotiv im Design verwendet.
SDF-Texturen
Signiertes Distanzfeld (SDF) ist eine Funktion, die die Position als Eingabe benutzt und dann die Distanz von dieser Funktion ausgibt. Im Bild unten ist die Mitte des Radials zum Beispiel 1, was vollständig weiß bedeutet, aber wenn es zur Kante fortschreitet, geht es auf 0, vollständig schwarz über. Mit diesem Konzept bieten SDFs eine Möglichkeit, einen Bereich von Werten zwischen 0 und 1 anzugeben, um einen Effekt anzuwenden.
Das bedeutet, du kannst Folgendes tun:
Nimm Werte zwischen 0.5 und 1.0 und wende eine Volltonfarbe an.
Nimm Werte zwischen 0.49 und 0.0 und wende eine ausblendende Farbe an, die ein Leuchten imitiert.
Normale Texturen tun das nicht, weil normale Texturen entweder 1 (weiß) oder 0 (schwarz) sind. SDFs liefern dir all diese Daten zwischen 0 und 1.
Diese Konzepte können auch auf Fotos angewendet werden. Wenn ein Foto als .png- Datei gespeichert wird und Effekte darauf angewendet werden, aber das Bild nicht alle Farb- und Beleuchtungsdetails enthält, dann gibt es weniger Anpassungsmöglichkeiten für das Bild, da das Bearbeiten des Bildes, um es heller oder dunkler zu machen, dazu führen kann, dass Details verloren gehen oder überbelichtet werden.
Wenn dasselbe Bild mit einer DSLR-Kamera aufgenommen wurde, kann die Rohdatei, die alle Farb- und Beleuchtungsinformationen enthält, auf dem Level der Granularität personalisiert werden, z. B. um die dunklen Anteile heller zu machen, ohne Details in diesen dunklen Bereichen zu verlieren, und umgekehrt.
Suche in den Ordnern UI > Textur > SDF nach der vollständigen Vorschau der SDF-Texturen, um deine eigene einzigartig aussehende Benutzeroberfläche zu erstellen.
Es gibt einen Ordner namens Symbole voller SDF-Symbole.
SDF-Texturen in Materialien
Die meisten UI-Materialien sind flache 2D-Materialien, die Binärwerte von 0 und 1 verwenden, um die Außenseite und die Mitte des Materials zu definieren. In 2D-Materialien. Wenn SDF-Texturen in einem Textur-Sample-Knoten verwendet und mit einer SDF-Material-Funktion gepaart werden, kann die Benutzeroberfläche durch die Manipulation einiger Werte im UI-Material optimiert werden.
Das Ändern verschiedener Werte in einem UI-Material mit SDF-Texturen und Materialknoten führt zu verschiedenen Effekten, wie zum Beispiel:
Schatten
Weichzeichnen
Leuchten
Glanz
Umrisse
Animationen
Skalieren
SDF-Texturen lassen UI-Materialien dynamischer und einzigartiger aussehen, weil sie eine Möglichkeit bieten, ohne Qualitätsverlust einfach zu skalieren, während reguläre Assets an Qualität verlieren, wenn sie vergrößert oder verkleinert werden. SDF-Texturen haben eine bessere Optimierung, um alle Effekte mit nur 1 Textur einfach auszuführen, wodurch ein übersichtlicheres Materialdiagramm erstellt wird.
Andererseits lassen sich reguläre Schwarz-Weiß-Texturen im Materialdiagramm nicht einfach manipulieren und greifen auf die Verwendung mehrerer Texturen zurück. Im obigen Bild besteht die einfachste Möglichkeit, den Texturen einen Glanz hinzuzufügen, darin, die Textur über einen radialen Gradienten zu legen, anstatt ein umfangreiches Materialdiagramm zu erstellen, um ein ähnliches Ergebnis zu erzielen.
Smooth-Step-Materialknoten
Materialknoten vom Typ Step erzeugen normalerweise einen harten Übergang in Materialien, z. B. direkt von 0 zu 0.25. Der Smooth-Step-Knoten verwendet hingegen SDF-Funktionen, um einen fließenden Übergang in UI-Materialien zu erstellen. Die UI-Materialien in der Vorlage, die SDF-Texturen verwenden, verwenden den Smooth-Step-Materialknoten, um einen glatten Übergang von der Mitte des Materials zur Außenkante zu erstellen.
Kernpunkte
Im Folgenden sind einige wichtige Punkte für die Verwendung von Materialien und Texturen für UI-Assets aufgeführt:
Die Verwendung von Material-Funktionen spart Zeit mit vordefinierten Material-Knoten, die Funktionen in deinen Konditions- und Schildbalken-Materialien referenzieren, und Rückenschild-UI-Materialien, mit denen sie auf Events im Spiel reagieren.
SDF-Materialien und -Texturen erzeugen eine dynamischer erscheinende Benutzeroberfläche.
Zu verstehen, wie man seine Bild-Widgets übereinander legt, macht den Unterschied zwischen einer einfach aussehenden Benutzeroberfläche und einer visuell interessanteren Benutzeroberfläche.
Texturen sollten für Elemente eines Designs verwendet werden, die visuell komplex sind und mit Materialien nicht erzeugt werden können.