Unreal Motion Graphics (UMG) ist ein leistungsstarkes Werkzeug zum Erstellen von Benutzeroberflächen (UI). Ganz gleich, ob du ein einfaches Popup oder komplexe UI-Systeme erstellst, ein Verständnis der Kernkonzepte der Arbeit in UMG gibt dir die Freiheit, mit diesem leistungsstarken Werkzeug zu experimentieren.
Um deine UI-Designs vom Papier in den Spieltest zu bringen, musst du verstehen, wie UMG die Benutzeroberfläche erstellt. Um dich mit den korrekten Workflows zur UI-Erstellung vertraut zu machen, ist diese Seite in die folgenden Abschnitte unterteilt:
Entwerfen von UI-Systemen
Die Planung deines UI-Designs ist der Schlüssel, um gut aussehende und nützliche UI-Systeme zu erstellen. Denke an folgendes:
Die Art des Spiels, das du erstellst
Die Art der UI, die erforderlich ist, um die Spieler zu unterstützen und das Gameplay unterhaltsam und leicht verständlich zu halten
Wie die endgültige Benutzeroberfläche aussehen wird
Zum Beispiel im Fortnite-HUD alles, was der Spieler über das Spiel wissen muss; relevante Konditions- und Schildinformationen für die gesamten Spielstatistiken werden auf dem Bildschirm angezeigt.
Skizziere deine Ideen für das UI-Design. Verwende diese Skizzen als Orientierung dafür, wie die UI in UMG aufgebaut wird.
Mit grundlegenden Webdesign-Ansätzen kannst du das Layout für deine Benutzeroberfläche planen, bevor du mit der Erstellung von Benutzer-Widgets beginnst. Diese Herangehensweise kannst du nutzen, um zu entscheiden, welche Teile der Benutzeroberfläche fix sein müssen und welche flexibel sein können. Verwende die folgenden Webdesign-Ansätze für das UI-Layout:
Absolutes Layout
Absolute Layouts verwenden normalerweise genaue Berechnungen und Koordinaten, um festzulegen, wo Elemente auf einem Bildschirm platziert werden sollen. Dies ist nützlich, wenn ein UI-Element mit den X- und Y-Koordinaten an seinem Platz bleiben muss. Das UI-Element sollte berücksichtigen, wo das Parent-Element auf dem Bildschirm platziert wird. Das Parent-Element beginnt in der oberen linken Ecke des Layouts.
Dieser Layoutstil ist weniger flexibel und für verschiedene Bildschirmgrößen schwer beizubehalten.
Ein absolutes Layoutdesign wird am besten für kleine Elemente verwendet, die Teil eines größeren Designs sind. Verwende beispielsweise eine absolute Position für ein Symbol. In UEFN kann dies über die Einstellungen Ausrichtung und Auffüllung des Bild-Widgets festgelegt werden.
Das Symbol bleibt an der gleichen Stelle, unabhängig von der Platzierung und Größe der anderen UI-Elemente darum herum.
Relatives Layout
Diese Art von Layout eignet sich am besten für Spiele, die auf mehreren Plattformen gespielt werden können, da sie die Benutzeroberfläche an einen großen Fernsehbildschirm oder einen kleinen Handybildschirm anpasst.
Auffüllen und Abstände
Padding kann verwendet werden, um kleine Abstände zwischen den Elementen eines Ganzen anzupassen. Padding kann für einzelne Widgets in UMG schwer zu verwalten sein. Verwende stattdessen die Ausrichtung-Werkzeuge für Bilder und Textblöcke. Ausrichtung bietet mehr Kontrolle über Raum und Platzierung als Auffüllung.
Das bedeutet, dass du, wenn alle Teile vorhanden sind, noch ein wenig Platz zwischen den Elementen brauchst, indem du die Auffüllung-Einstellungen der einzelnen Widgets anpasst, um den nötigen Platz hinzuzufügen.
Um größere Abstände zwischen den Widgets zu erzwingen, verwendest du ein leeres Bild oder ein Slot-Widget zwischen Container-Widgets und Benutzer-Widgets. Unten kannst du sehen, dass ein Bild-Widget verwendet wird, um Abstand zwischen den einzelnen Benutzer-Widgets zu erzwingen, sodass für jedes Widget Platz ist, um Informationen deutlich anzuzeigen.
Verstehen der UMG-Widgets
Eine Benutzeroberfläche muss in Abschnitten in UMG gestaltet werden. Erstelle die Benutzeroberfläche, indem du individuelle Benutzer-Widgets erstellst und in Ebenen arbeitest. Wenn alle Elemente einer Benutzeroberfläche bereit sind, lege die einzelnen Abschnitte unter ein Parent-Benutzer-Widget. Das Erstellen einer UI in Ebenen bedeutet, dass du mehr Kontrolle über das Design und das Layout der gesamten UI hast.
Um individuelle Benutzer-Widgets zu planen und zu erstellen, musst du zunächst die im Palette-Panel verfügbaren Widgets verstehen. Es gibt zwei Haupttypen von Widgets: Container und Elemente.
Container
Ein Container enthält mehrere Benutzer-Widgets, Elemente und andere Container, um einen Teil der Benutzeroberfläche zu erstellen. Ein Element kann ein Bild, Material, Text oder mehr sein. Die Größe eines Container-Widgets wird durch die Größe des größten Child-Elements bestimmt.
| Container-Widget | Zweck | Image |
|---|---|---|
Raster | Ordnet Elemente innerhalb eines flexiblen Rastermusters an. Fügt Optionen zu Child-Elementen hinzu für:
|  |
Einheitliches Raster | Legt Child-Elemente in Zeilen und Spalten mit gleichem Abstand fest. Fügt Optionen zu Child-Elementen hinzu für:
|  |
Overlay | Legt Elemente und andere Container-Widgets übereinander. Overlay-Container fügen ihren Child-Elementen keine zusätzlichen Optionen oder Einstellungen hinzu. |  |
Stapelboxen | Ordnet Elemente entweder horizontal oder vertikal (von links nach rechts, von oben nach unten) an. Dieses Container-Widget platziert Elemente selbst nicht gut. Verwende andere Container- oder Element-Widgets, um Platz in einer Stapelbox zu schaffen. |  |
Größenbox | Führt Parameter ein, die die Größe der Child-Elemente beschränken. Größenbox-Container fügen ihren Child-Elementen keine zusätzlichen Optionen oder Einstellungen hinzu. |  |
Skalierungsbox | Legt fest, wie die Benutzeroberfläche an die Bildschirmgröße angepasst wird. |  |
Bildlauffeld | Erstellt eine scrollbare Box, die eine Sammlung von Elementen enthält. Bildlauffeld-Container fügen ihren Child-Elementen keine zusätzlichen Optionen oder Einstellungen hinzu. |  |
Widget-Umschalter | Ermöglicht es, mit dem Tab durch Widgets zu navigieren. In diesem Container-Widget ist jeweils ein Widget im Schalter sichtbar. Widget-Schalter-Container fügen ihren Child-Elementen keine zusätzlichen Optionen oder Einstellungen hinzu. |  |
Canvas | Verankert Elemente innerhalb eines definierten Raums. Er wird am besten am Ende des Designprozesses als Parent-Container verwendet. Fügt seinen Child-Elementen die folgenden Optionen hinzu:
|  |
Element-Widgets
Alle Widgets haben Aussehen-Eigenschaften, gefolgt von Einstellungen, die für das ausgewählte Widget im Details-Panel spezifisch sind.
Die Größe von Child-Elementen kann im Details-Panel festgelegt werden und Eigenschaften vom Parent-Container-Widget erben.
| Element-Widget | Zweck | Bilder |
|---|---|---|
Aktion-Widget | Bietet eine Möglichkeit, den Input von einer Schlüsselbindung für eine bestimmte Action mit Verse zu nehmen. Das Widget selbst hat rein kosmetische Funktionen. |  |
Bild | Diese Option bietet eine Möglichkeit, Texturen (das können importierte Bilder oder native in UEFN zu findende Texturen sein) und Materialien zum Hintergrund oder Vordergrund eines Benutzer-Widgets hinzuzufügen. |  |
Textblock | Fügt dem Benutzer-Widget Text hinzu. Du kannst die Größe, Schriftart, Abstände und mehr steuern. |  |
Leise-Taste | Eine rechteckige Schaltfläche mit einem transparenten Hintergrund |  |
Normale Taste | Eine rechteckige Schaltfläche mit einem undurchsichtigen Hintergrund |  |
Laut-Taste | Eine rechteckige Schaltfläche mit einem gelben Hintergrund |  |
Schieberegler | Ein Wert-Schieberegler, der sich innerhalb eines bestimmten Bereichs erhöht oder verringert. |  |
Um mehr über Widgets in Verse zu erfahren, kannst du unter Widget-Typen nachlesen.
Erstellen und Überlagern von Benutzer-Widgets
Benutzer-Widgets sind UI-Dateien, die alles enthalten, was du entworfen hast. Wenn du ein Benutzer-Widget erstellst, untergliedere dein Design so weit wie möglich. Das bedeutet, dass du nur das verwendest, was du in einem Benutzer-Widget benötigst, um das gewünschte Aussehen für dein UI-Element zu erzielen.
In dem Bild unten wurden vier Benutzer-Widgets für jede Komponente des Schnellzugriffs für gesammelte Gegenstände erstellt. Jedes Benutzer-Widget verfolgt die individuellen Statistiken für die verschiedenen Komponenten und behält dabei das gleiche UI-Design bei.
Das Entwerfen separater Benutzer-Widgets bedeutet, dass sie innerhalb eines Parent-Benutzer-Widgets geschichtet werden können, um ein konsistenteres und kontrollierteres Aussehen für den Sammlungsleisten-Schnellzugriff zu erstellen. Es ist auch einfacher für das Tracker-Gerät, die Statistiken für jede einzelne Komponente des Sammlungsschnellzugriffs zu verfolgen.
Klicke, um das Bild zu vergrößern.
Es erfordert Übung, die Benutzeroberfläche auf diese Weise zu gestalten. Folge den Tutorials Erstellen eines benutzerdefinierten HUD und Teenage Mutant Ninja Turtles, um die Erstellung individueller Benutzer-Widgets zu üben und einen benutzerdefinierten Team-Look für ein Spiel zu erstellen.
Bearbeiten eines Layouts
Die Verwendung einzelner Benutzer-Widgets zur UI-Erstellung macht die UI-Bearbeitung einfach. Dies bietet eine Möglichkeit, dieses eine Teil zu bearbeiten, ohne dass sich dies auf andere Teile des UI-Designs auswirkt.
Beachte im Design des Sammlungsleisten-Schnellzugriffs oben, dass alle Elementbezeichnungen bis auf eine zentriert sind. In diesem Fall öffnet der Entwickler einfach das Benutzer-Widget für dieses eine Element und bearbeitet das Label, ohne Probleme für alle anderen Elemente des Sammlungsleisten-Schnellzugriffs zu verursachen.
Wenn du etwas Komplexeres wie ein Inventarsystem entwirfst, stellst du möglicherweise fest, dass du entweder Container-Widgets verwendest, die du nicht brauchst, oder Probleme hast, deine Element-Widgets an das Design anzupassen. UMG bietet Optionen, die die Bearbeitung eines Layouts erleichtern:
Ersetzen durch…
Umhüllen mit…
Ersetzen von Widgets
Ersetze nicht benötigte Widgets aus der Hierarchie, ohne das Layout zu beschädigen. Klicke mit der rechten Maustaste auf das nicht benötigte Widget, wähle dann Ersetzen durch... und wähle ein anderes Widget, durch das du es ersetzen möchtest. Die Ersatz-Widgets sind alle Containertyp-Widgets.
Die Optionen der Child-Widgets ändern sich je nach verwendetem neuen Parent-Container.
Einhüllen von Widgets
Eine Möglichkeit, das Layout zu ändern, ohne dass sich dies auf alle Child-Widgets auswirkt, ist die Verwendung der Einstellung Umhüllen mit... in der Hierarchie. Klicke mit der rechten Maustaste auf das Child-Widget und wähle Umhüllen mit.... Wähle dann einen Container aus dem Dropdown-Menü aus, um seine Eigenschaften zu nutzen und die Einstellungen der Child-Widgets beizubehalten.
Spieltest
Wenn dein Design fertig ist, teste dein Design im Spieltest. Du solltest auf folgendes achten:
Die UI dient einem Zweck. Erstelle eine UI nicht nur, um UI zu haben, sie sollte auch nützlich sein.
Die UI ist hilfreich und benutzerfreundlich. Spieler sollten nicht erraten müssen, was die Benutzeroberfläche tut, während sie ein Spiel spielen.
Die UI sollte sich in das Spiel einfügen und das Gameplay ergänzen.
Deine UI-Elemente behindern das Gameplay nicht.