Erstelle eine benutzerdefinierte UI mit der Basismaterial M_UI_Shape_Rectangle, indem du Materialinstanzen 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 UI > 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 UI-Formen
Bevor du eine benutzerdefinierte UI-Form erstellst, entscheide, wie die Benutzeroberfläche aussehen soll, und verwende dann das Material M_UI_Shape_Rectangle, um das Aussehen deines UI-Widgets zu entwerfen. 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 [Materialinstanz] (https://docs.unrealengine.com/de-de/creating-and-using-material-instances-in-unreal-engine) des ursprünglichen Materials M_UI_Shape_Rectangle erstellen.
-
Klicke mit der rechten Maustaste auf die Miniaturansicht des Materials und wähle Materialinstanz erstellen.
-
Im Fenster Asset speichern unter gibst du deiner Materialinstanz einen Namen, der im Inhaltsordner deines Projekts gespeichert wird. Benenne deine Assets so, dass sie zu einer Gruppe zusammengefasst werden. Zum Beispiel beginnen Materialinstanzen in UEFN mit „M_UGC_“ und enden mit „_Inst“. Der Name deiner Materialinstanz sollte etwa so aussehen wie M_UGC_Circus_Inst.
-
Doppelklicke auf deine neue Materialinstanz, um den M aterialinstanz-Editor aufzurufen. Du kannst auch auf den Editor zugreifen, indem du mit der rechten Maustaste auf das Asset klickst und Bearbeiten wählst.
Das Details-Paneldes Materialinstanz-Editors hat die Werkzeuge, die du brauchst, um Materialinstanzen vollständig zu personalisieren. Diese Werkzeuge findest du in den Abschnitten:
-
[1]Füllen
-
[2] Umrandung
-
[3] Farben
-
[4] Zustand (Hover/Fokus/Gedrückt/Deaktiviert)
Füllung
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 Reiter 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.
Zustand
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 einstellst, 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.
UI-Widgets erstellen
Jetzt musst du Widgets erstellen, mit denen die Spieler interagieren können. Lies das Dokument UI-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 außer Kraft zu setzen.
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 UI-Widget erstellst, ziehe die Assets aus Gewöhnlich, Gewöhnliche UI, Panel, UIKIT und Benutzererstellt unter den Namen deines Widgets.
Auf dem Bild oben werden die Assets im Reiter Hierarchie organisiert und im Viewport neu positioniert, um eine Blumenform für die benutzerdefinierte UI 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 Details > Modales Widget > Template-Override-Klasse.
Du kannst deine Kreation in einer gestarteten Sitzung ansehen und testen.