Erstelle eine benutzerdefinierte Benutzeroberfläche mit dem Basismaterial M_UI_Shape_Rectangle, indem du Material-Instanzen aus dem Basismaterial erstellst, die in UMG-Widgets verwendet werden sollen. Das Formmaterial bietet auch eine Möglichkeit, flache Formen zu erstellen, mit denen du einzigartige UI-Designs erstellen kannst. Das Material M_UI_Shape_Rectangle befindet sich im Inhaltsbrowser unter dem Fortnite-Ordner unter Benutzeroberfläche > Materialien.
Materialinstanzen können verwendet werden, um ein Widget wie Farbe zu füllen. Materialien sind dem Hinzufügen von Texturen zu Widgets vorzuziehen, da Materialien weniger Speicher verbrauchen als importierte Texturen. Materialien stellen auch eine bessere Möglichkeit zum Entwerfen von Uis in UEFN und UE dar, insbesondere für ein flaches UI-Design, da es einfacher zu rendern ist, ganz zu schweigen davon, dass du mit 3D und dynamischen Materialien kreative Ideen entwickeln kannst.
Auf einigen Geräten wird in speziellen UI-Einstellungen im Unreal Editor für Fortnite (UEFN) auf UMG-Widgets verwiesen. Die UMG-Widgets ersetzen die standardmäßige Fortnite-Benutzeroberfläche im Heads-up-Display (HUD).
Weitere Tutorials zur Verwendung von Materialien zum Erstellen von Benutzeroberflächen findest du hier:
Erstellen von benutzerdefinierten Benutzeroberflächen-Formen
Bevor du eine benutzerdefinierte Form für die Benutzeroberfläche erstellst, solltest du dich entscheiden, wie die Benutzeroberfläche aussehen soll, und dann das Material M_UI_Shape_Rectangle verwenden, um das Aussehen deines Benutzeroberflächen-Widgets zu gestalten. Das kann etwas Einfaches wie ein angepasstes Quadrat oder etwas Komplizierteres wie eine Blumenform sein. Für das Design können mehrere Formen erforderlich sein, die dann beim Erstellen des Widgets zusammen positioniert werden können.
Um Formen zu erstellen, musst du zunächst eine Material-Instanz des ursprünglichen Materials M_UI_Shape_Rectangle erstellen.
Klicke mit der rechten Maustaste auf die Material-Miniaturansicht und wähle Material-Instanz erstellen.
Im Fenster Asset speichern als unter gibst du deiner Material-Instanz einen Namen, der im Inhaltsordner deines Projekts gespeichert wird. Benenne deine Assets so, dass sie zu einer Gruppe zusammengefasst werden. Zum Beispiel beginnen Standard-Material-Instanzen in UEFN mit „M_UGC_“ und enden mit „_Inst“. Der Name deiner Material-Instanz sollte etwa so aussehen wie M_UGC_Circus_Inst.
Doppelklicke auf deine neue Material-Instanz, um den Material-Instanz-Editor aufzurufen. Du kannst auch auf den Editor zugreifen, indem du mit der rechten Maustaste auf das Asset klickst und Bearbeiten auswählst.
Das Details-Panel des Materialinstanz-Editors hat die Werkzeuge, die du brauchst, um Material-Instanzen vollständig zu personalisieren. Diese Werkzeuge findest du in den Abschnitten:
[1] Füllen
[2] Umrandung
[3] Farben
[4] Zustand (Hover/Fokussiert/Gedrückt/Deaktiviert)
Auffüllen
Optionen im Abschnitt Füllung beeinflussen die Form deines Materials. Bei vielen Optionen wie Füllungstransparenz deaktiviert ein Wert von 0,0 die Einstellung, während ein Wert von 1,0 sie aktiviert. Denke immer daran, die Option Transparenz füllen zu aktivieren, damit deine Form im Viewport sichtbar wird.
Im Bild oben siehst du die angepassten Einstellungen, die zum Erstellen einer Form verwendet wurden.
Umrandung
Die Optionen im Abschnitt Umrandung können angepasst werden, um einen anpassbaren Rahmen zu erstellen. Dank der voreingestellten blauen Farbe des Rahmens kannst du dein Design sehen, wenn du die Werte der Optionen für die Umrandung anpasst.
Das Bild oben zeigt die Option Transparenz der Umrandung, die auf 1,0 eingestellt ist, um einen blauen Rahmen anzuzeigen.
Farben
Die Optionen im Tab Farbe können geändert werden, um die von dir erstellten Formen weiter anzupassen. Diese Optionen können nur eingestellt werden, wenn du die Option auf „Ein“ setzt, indem du auf die entsprechende Boolesche Box klickst.
Du kannst sogar Gradienten sowohl für Formen als auch für Rahmen erstellen. Du kannst eine Vorschau der Gradienten sehen, wenn sie im Viewport geändert werden.
Im Bild oben werden Farben in Gradienten angewendet. Diese Option wird aktiviert, indem du den Wert Gradient ein/aus über 0,0 einstellst.
Status
Diese Option befindet sich im Abschnitt Farbe und kann modifiziert werden, um die Farben der Form in verschiedenen Zuständen einzustellen. Du kannst benutzerdefinierte Farben für verschiedene Spieleraktionen wie Hover, Fokus, Drücken oder Deaktivieren deiner UI-Form einstellen.
Wenn du kein Material für die Option Phys Material festlegst, wird deine Form eine transparente Grenze haben, wenn sie in das von dir erstellte Widget importiert wird. Um dies zu vermeiden, stelle dein physikalisches Material als Holz ein, damit es als tatsächliches Material gerendert werden kann.
Wenn du mit dem Personalisieren deiner UI-Form fertig bist, denke daran, zu speichern, indem du auf das Festplattensymbol oben rechts klickst. Deine angepasste Materialinstanz wird im Inhaltsordner deines Projekts gespeichert.
In diesem Beispiel des Tutorials werden Formen verwendet, die zusammen mit dem Hintergrund einer Schaltfläche eine Sonnenblume ergeben.
Benutzeroberflächen-Widgets erstellen
Jetzt musst du Widgets erstellen, mit denen die Spieler interagieren können. Lies das Dokument Benutzeroberflächen-Widget-Editor, um mehr über das Erstellen von Widgets und das Organisieren des Tabs Hierarchie zu erfahren.
Zu diesem Zeitpunkt solltest du Materialinstanzen für jedes Element deines Designs erstellt haben.
Das Beispiel in diesem Tutorial besteht aus mehreren Instanzen eines Blumenblatts und einer Blumenscheibe. Die Schaltfläche besteht aus einer Basis und zwei Bildern, die als Schaltflächensymbole verwendet werden.
Diese Materialinstanzen werden in Blueprints für Widgets angeordnet, um ein angepasstes Design zu erstellen. Der Widget-Blueprint ist das, was in das Popup-Dialog-Gerät importiert wird, um die voreingestellte Benutzeroberfläche zu überschreiben.
Erstelle einen neuen Widget-Blueprint, der sowohl die Materialinstanzen als auch die Schaltflächen-Widgets enthält, die deine benutzerdefinierte Benutzeroberfläche ausmachen. Dies ist der Widget-Blueprint, der zu den Einstellungen des Geräts hinzugefügt wird.
In diesem Widget kombinierst du alle deine benutzerdefinierten Materialinstanzen, um dein Design zu erstellen. Wenn du dein Benutzeroberflächen-Widget erstellst, ziehe die Assets aus Allgemein, Allgemeine Benutzeroberfläche, Panel, UIKIT und Vom Benutzer erstellt unter den Namen deines Widgets.
Auf dem Bild oben werden die Assets im Tab Hierarchie organisiert und im Viewport neu positioniert, um eine Blumenform für die benutzerdefinierte Benutzeroberfläche zu erhalten.
Wenn du mit deinem Design zufrieden bist, speichere deinen Blueprint und navigiere zurück zu deinem Inhaltsbrowser. Dieser Blueprint wird nun in ein Popup-Dialog-Gerät importiert, das die benutzerdefinierte UI anzeigt.
Widgets zu Geräten hinzufügen
Wenn dein Design fertig ist, platziere ein Popup-Dialog-Gerät, um dein Widget anzuzeigen.
Ziehe dein Widget in die Details > Modales Widget > Vorlage Überschreiben-Klasse.
Du kannst deine Kreation in einer gestarteten Sitzung anzeigen und testen.