In Spielen und 3D-Anwendungen ist das User Interface (UI) von großer Bedeutung. Und genau hier kommt Unreal Motion Graphics (UMG) in der Unreal Engine 5 ins Spiel. Die UI ist das Bindeglied zwischen dem Nutzer und der Anwendung. Daher beeinflusst die Gestaltung der UI maßgeblich die Benutzerfreundlichkeit.
In diesem Teil des Tutorials lernst du die Grundlagen des User Interface Designs in der Unreal Engine 5. Hierbei ist Unreal Motion Graphics (UMG) meist die bevorzugte Wahl. Du lernst alle nötigen Grundlagen und das Arbeiten mit verschiedenen Widgets, um ansprechende und funktionale UI-Elemente zu erstellen. Egal, ob du Spieleentwickler oder UI-Designer bist, dieser Artikel bietet dir einen umfassenden Einstieg in UMG.
Übersicht Unreal Engine 5 (UE5) Tutorial
1/13 – Basics & Installation (UE5)
2/13 – Marketplace und Plugins
3/13 – UE5 Editor-Oberfläche
4/13 – Unreal Actor Grundlagen
5/13 – Actor Components
6/13 – Einstieg Unreal Blueprint
7/13 – Unreal Blueprint Basics
8/13 – Unreal Material Grundlagen
9/13 – Unreal Engine 5 Lighting
10/13 – Unreal Input System
11/13 – Unreal Audio und Sound
12/13 – UI-Design mit UMG
13/13 – C++ in Unreal
Was ist UMG?
UMG steht für Unreal Motion Graphics und ist das integrierte UI-Design- und Entwicklungssystem in der Unreal Engine. Es ermöglicht dir, Benutzeroberflächen für Spiele, interaktive Anwendungen und Simulationen zu erstellen, ohne auf externe Tools oder Programmierung zurückgreifen zu müssen.
UMG verwendet eine visuelle Benutzeroberfläche, mit der du UI-Elemente unter anderem Buttons, Textfelder oder Bilder per Drag-and-Drop erstellen und bearbeiten kannst. Diese Elemente werden dann über Blueprints oder C++-Code mit Logik verbunden, um Interaktionen und Funktionalitäten zu ermöglichen.
Benutzeroberfläche UMG Designer
UMG bietet eine Vielzahl von Funktionen:
- WYSIWYG-Editor (What You See Is What You Get): UMG bietet einen visuellen Editor, mit dem du UI-Elemente direkt im Editorfenster erstellen, anpassen und positionieren kannst. Damit ist eine schnelle Iteration und Vorschau des Designs möglich.
- Widget Blueprint: UMG ermöglicht die Erstellung von Widget Blueprints, die die visuelle Darstellung und die Logik eines UI-Elements kombinieren. Dadurch lassen sich komplexe UI-Elemente erstellen, die auf Benutzerinteraktionen reagieren können.
- Anpassbare Stile und Themes: Es lassen sich Stile und Themes definieren, um das Erscheinungsbild und das Verhalten von UI-Elementen konsistent zu halten und schnell Anpassungen vorzunehmen.
- Unterstützung für verschiedene Plattformen: UMG bietet zudem Unterstützung für verschiedene Plattformen, einschließlich PC, Konsolen und Mobilgeräte. Damit kannst du benutzerdefinierte UIs für jede Zielplattform erstellen.
Insgesamt ist UMG ein leistungsstarkes Tool für die Erstellung von Benutzeroberflächen in der Unreal Engine. Es bietet dir die Flexibilität und Kontrolle, um funktionale UIs für deine Projekte zu erstellen.
Hinweis: Mit dem ultimativen Unreal Engine 5 Cheat Sheet erhältst du einen detaillierten Überblick über wertvolle Tipps & Tricks. Sichere dir jetzt das Cheat Sheet, um deine Spiele & Anwendungen noch einfacher zu erstellen!
Die Grundlagen von UMG
In diesem Abschnitt werden wir uns das UMG-Editorfenster und die verschiedenen Widgets ansehen, die als grundlegende Bausteine für das UI-Design dienen. Diese Tools bilden die Grundlage für die Erstellung von Benutzeroberflächen.
Um ein neues Blueprint Widget zu erstellen, ist es ratsam, zunächst einen Ordner namens UI in deinem Projekt anzulegen. Damit gewährleistet du eine strukturierte Organisation deiner Assets. Klicke dazu im Content Drawer mit der rechten Maustaste auf dein Projekt und wähle New Folder. Danach kannst du diesen Ordner entsprechend benennen.
Anschließend öffnest du den neu erstellten Ordner, klickst mit der rechten Maustaste und wählst User Interface → Widget Blueprint. Dieses Widget kannst du beispielsweise als BP_menu bezeichnen, wenn du ein Menü für dein Spiel entwerfen möchtest.
Blueprint Widget für UI erstellen
Überblick über die UMG Editor-Oberfläche
In der Editor-Oberfläche lassen sich User Interfaces für Spiele und interaktive Anwendungen erstellen und bearbeiten. Damit kannst du komplexe UI-Elemente gestalten, ohne aufwändigen Code schreiben zu müssen. Hier ist eine Beschreibung der Hauptkomponenten des UMG-Editorfensters.
UMG Editor-Oberfläche
- Viewport: Der Hauptarbeitsbereich des UMG-Editors, in dem du deine UI-Elemente visuell gestalten und anordnen kannst. Hier kannst du Widgets hinzufügen, positionieren und bearbeiten.
- Palette: Die Palette enthält eine Vielzahl von Widgets, aus denen du für die Benutzeroberfläche wählen kannst. Dazu gehören Text-Widgets, Bild-Widgets, Schaltflächen, Listen, Eingabefelder und viele mehr.
- Hierarchy: Das Hierarchy-Panel zeigt eine hierarchische Liste aller Widgets und UI-Elemente in deinem aktuellen Widget Blueprint an. Hier kannst du die Reihenfolge der Widgets ändern, sie gruppieren und organisieren, um die Struktur deiner Benutzeroberfläche zu verwalten.
- Bind Widgets: Das Bind Widgets-Panel ermöglicht es dir, Widgets an Blueprint-Variablen oder -Funktionen zu binden. Dies ermöglicht eine dynamische Aktualisierung der UI basierend auf Änderungen im Spiel oder in der Anwendung. Hier kannst du beispielsweise Textfelder an Variablen binden, um sie automatisch mit Spielinformationen zu aktualisieren.
- Details: Das Details-Panel zeigt die Eigenschaften des ausgewählten Widgets oder der ausgewählten UI-Elemente an. Hier kannst du Eigenschaften wie Größe, Position, Farbe und Ausrichtung anpassen.
- Graph: Im Graph-Panel kannst du die Logik für die Benutzeroberfläche implementieren. Hier lassen sich Blueprints verwenden, um Interaktionen und Funktionen für deine UI-Elemente zu definieren.
Das UMG-Editorfenster bietet eine intuitive Benutzeroberfläche, um hochwertige Benutzeroberflächen für Spiele und Anwendungen zu erstellen. Mit einer Kombination aus visuellem Design und Blueprint-Logik steht dir eine effektive Lösung für das UI-Design in der Unreal Engine zur Verfügung.
Widgets: Die Bausteine des UI-Designs
Widgets bilden die Bausteine des UI-Designs in der Unreal Engine 5. Sie repräsentieren die visuellen Elemente, aus denen Benutzeroberflächen zusammengesetzt sind. Und sie ermöglichen zugleich die Interaktion und Anzeige von Informationen für den Nutzer. Im Editor stehen dir eine Vielzahl von Widgets zur Verfügung.
Widget im UMG Designer
Border-Widget
Das Border-Widget ist ein grundlegendes Element in der UMG UI-Designerpalette. Es dient dazu, andere Widgets zu umrahmen und zu gruppieren. Ähnlich wie ein Rahmen oder eine Box in traditionellen UI-Designs bietet das Border-Widget eine visuelle Trennung oder Hervorhebung für Elemente.
Text-Widget
Das Text-Widget ermöglicht die Anzeige von Text in der Benutzeroberfläche. Es kann verwendet werden, um Titel, Beschriftungen, Spielinformationen und mehr anzuzeigen. Damit kannst du Schriftart, Größe, Farbe und Ausrichtung des Textes anpassen.
Button-Widget
Mit dem Button-Widget lässt sich die Erstellung von interaktiven Schaltflächen durchführen. Es kann verwendet werden, um Aktionen wie das Starten eines Spiels, das Öffnen von Menüs oder das Triggern von Ereignissen auszulösen.
Image-Widget
Das Image-Widget ermöglicht die Anzeige von Grafiken, Icons und Bildern in der Benutzeroberfläche. Es kann verwendet werden, um visuelle Elemente wie Logos, Hintergrundbilder und Symbole anzuzeigen. Es können Bilddateien importiert, im Bild-Widget platziert und entsprechend skaliert werden.
Text Box-Widget
Über das Text Box-Widget kann der Nutzer Text oder Zahlen eingeben. Es wird eingesetzt, um Formulare, Suchfelder, Chatfenster und andere interaktive Eingabefelder zu erstellen.
Anordnung von Widgets in UMG
Im UMG Editor können Widgets auf unterschiedliche Weise angeordnet und positioniert werden. Die Anordnung von Widgets umfasst die Platzierung, Gruppierung und Organisation von UI-Elementen, um ein ansprechendes und benutzerfreundliches Design zu erreichen.
Widgets anordnen
Die Anordnung von Widgets erfolgt im UMG-Editor, der eine benutzerfreundliche Oberfläche bietet, um Widgets zu platzieren und zu organisieren. Widgets können per Drag & Drop aus dem Palette-Bereich des Editors in die Viewport-Ansicht gezogen werden. Dafür gibt es verschiedene Anordnungsarten:
Absolute Positionierung: Widgets können direkt an bestimmten Koordinaten im Bildschirm platziert werden. Dies geschieht typischerweise durch das Festlegen von X- und Y-Positionen.
Relative Positionierung: Widgets können aber auch relativ zu anderen Widgets positioniert werden. Das ermöglicht flexible Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen können.
Container-Anordnung: Widgets können in Containern wie Panels, Boxen oder Scroll-Containern gruppiert werden, um eine logische Struktur zu schaffen und das Layout zu organisieren.
Container-Widgets
Container-Widgets wie Horizontal Box, Vertical Box und Grid Panel ermöglichen die Gruppierung und Anordnung mehrerer Widgets. Diese Container können flexibel konfiguriert werden, um unterschiedliche Layouts zu erstellen.
Ankerpunkte und Ankerbereiche
In UMG können Widgets an Ankerpunkten befestigt werden, um sicherzustellen, dass sie sich entsprechend der Bildschirmgröße und -auflösung verhalten. Ankerbereiche definieren, wie Widgets skaliert und positioniert werden, wenn sich die Bildschirmgröße ändert.
Pixel- und prozentuale Größen
Widgets können sowohl in Pixeln als auch prozentual in Bezug auf die Bildschirmgröße dimensioniert werden. Das ermöglicht eine flexible Anpassung an verschiedene Bildschirmauflösungen und Seitenverhältnisse.
Durch die effektive Anordnung von Widgets in UMG lassen sich Benutzeroberflächen gestalten, die den Anforderungen deines Spiels oder deiner Anwendung gerecht werden. Lass uns aber jetzt einen Blick darauf werfen, wie du den UMG Editor benutzen kannst.
Mit der UMG Editor-Oberfläche arbeiten
In diesem Abschnitt werfen wir einen Blick darauf, wie du mit der UMG Editor-Oberfläche arbeitest, um ansprechende und interaktive UI-Elemente zu erstellen.
Hinweis: Mit dem ultimativen Unreal Engine 5 Cheat Sheet erhältst du einen detaillierten Überblick über wertvolle Tipps & Tricks. Sichere dir jetzt das Cheat Sheet, um deine Spiele & Anwendungen noch einfacher zu erstellen!
Canvas Panel-Widget: Container für das Design
Das Canvas Panel-Widget dient als Container für das Design von Benutzeroberflächen im Editor. Es erlaubt die Platzierung und Anordnung von UI-Elementen wie Bildern, Texten und Schaltflächen. Alles, was innerhalb dieses Bereichs platziert wird, erscheint im User interface. Um das Canvas Panel zu verwenden, ziehst du es per Drag & Drop aus der Palette in das Hierarchy-Fenster.
Dieses Widget bietet die Möglichkeit, die Größe und Skalierung der UI-Elemente anzupassen, sodass sie perfekt ins Design passen. So kannst du das Layout für verschiedene Bildschirmgrößen und Auflösungen optimieren. Die Größe der Elemente kann entweder direkt im Viewport durch Drag & Drop mit dem entsprechenden Icon geändert werden (siehe nachfolgende Abbildung). Oder du kannst die Optionen Screen Size und Fit Size in der oberen rechten Ecke des Viewports nutzen.
Canvas Panel-Widget
Image-Widget: Grafiken hinzufügen
Mit dem Image-Widget können Grafiken und Icons in die Benutzeroberfläche integriert werden. Es ermöglicht die Darstellung von Bildern in verschiedenen Formaten wie PNG, JPEG oder SVG.
Um ein Image-Widget hinzuzufügen, ziehst du es per Drag & Drop aus der Widget-Palette in das Canvas Panel oder ein anderes Container-Widget in der Hierarchy. Wenn du beispielsweise einen Hintergrund für die UI erstellen möchtest, ist es wichtig, dass dieser den gesamten Bereich abdeckt. Das lässt sich erreichen, indem du im Details Panel auf Anchors klickst und den Bereich des Containers auswählst. Stelle nun noch sicher, dass alle Offset-Werte auf 0 gesetzt sind, sodass das Bild den Container vollständig ausfüllt.
Image-Widget erstellen
Anschließend kannst du dem Image-Widget eine Grafik zuweisen, indem du die entsprechende Bilddatei aus deinem Projekt auswählst. Diese wählst du im Content Drawer aus und platzierst sie per Drag & Drop im Details Panel unter Appearance → Brush → Image.
Um sicherzugehen, dass das Hintergrundbild wirklich im Hintergrund erscheint, solltest du die ZOrder auf -1 stellen. Diese Einstellung bezieht sich auf die Reihenfolge, in der das Bild im Stapel von Widgets angezeigt wird.
Widgets mit einer höheren ZOrder werden über Widgets mit einer niedrigeren ZOrder angezeigt. Wenn zwei Widgets sich überlappen, wird das Widget mit der höheren ZOrder über dem anderen Widget angezeigt.
Datei in Image-Widget verwenden
Das Image-Widget bietet eine Vielzahl von Einstellungsmöglichkeiten, um das Aussehen und Verhalten der dargestellten Grafik zu steuern. So lassen sich verschiedene Effekte wie Skalierung, Transparenz und Farbanpassung anwenden, um das Bild weiter zu verfeinern.
Es eignet sich ideal für die Integration von Logos, Symbolen, Hintergrundbildern und anderen visuellen Elementen im User Interface.
Button-Widget: Interaktionen ermöglichen
Im nächsten Schritt platzieren wir verschiedene Buttons, um die Interaktion des Nutzers zu ermöglichen. Hierfür verwenden wir das Button-Widget, das es uns erlaubt, interaktive Elemente zu implementieren. Diese können vom Nutzer aktiviert werden, um Aktionen oder Befehle auszuführen.
Bevor wir die Buttons platzieren, fügen wir jedoch zunächst ein Border-Widget hinzu, um die Schaltflächen innerhalb dieses Bereichs zu gruppieren. Ziehe dazu das Border-Widget in die Hierarchy und setze den Anchor-Punkt auf die Mitte des Containers. Dadurch stellst du sicher, dass dieser Bereich immer zentriert im User Interface angezeigt wird. Experimentiere ein wenig mit der Größe und der Farbe des Widgets. Die Farbe kannst du unter Appearance → Brush → Tint anpassen.
Border-Widget platzieren
Um ein Button-Widget hinzuzufügen, ziehst du es per Drag & Drop aus der Widget-Palette in das Canvas Panel in der Hierarchy. Den ersten Button habe ich beispielsweise mit ButtonResume bezeichnet. Einmal platziert lässt sich das Aussehen und Verhalten des Buttons im Details Panel anpassen.
Hierbei solltest du den Anchor auch wieder auf die Mitte des Containers legen. Danach bietet das Details Panel eine Vielzahl von Einstellungen für das Button-Widget. Darunter die genaue Positionierung, Farbe, Ausrichtung, Border Größe und vieles mehr.
Button-Widget erstellen
Das Button-Widget verfügt ebenso über Ereignisse, die ausgelöst werden können, wenn der Nutzer mit dem Button interagiert. Diese Ereignisse können in Blueprints verwendet werden, um entsprechende Aktionen auszuführen. Beispielsweise das Auslösen von Spielereignissen, das Ändern von Variablen oder das Navigieren zu anderen Menüs oder Bildschirmen.
Text-Widget: Texte in UI-Elementen anzeigen
Im letzten Schritt wollen wir ein Text-Widget auf die verschiedenen Buttons anwenden. Hierzu wollen wir einen Resume-, Restart- und Quit-Text einfügen. Dieses Widget ermöglicht es dir, Texte mit verschiedenen Schriftarten, Größen, Farben und Ausrichtungen einzufügen, um wichtige Informationen für den Nutzer bereitzustellen.
Zunächst ziehst du ein Text-Widget aus der Palette per Drag & Drop in die Hierarchy deines UI-Designs. Dabei ist wichtig, dass du das Text-Widget unter dem jeweiligen Button anordnest. So stellst du sicher, dass der Text innerhalb des Buttons angezeigt wird.
Als nächstes kannst du den Button benennen und den Text entsprechend anpassen. Im Details-Panel stehen dir dabei verschiedene Optionen zur Verfügung, wie die Änderung der Schriftart, -farbe und -größe. So kannst du den Text optimal an das Design und den Zweck des Buttons anpassen.
Text-Widget platzieren
UMG Oberfläche im Spiel verwenden
Nachdem wir in den letzten Abschnitten mit der UMG Editor-Oberfläche eine UI erstellt haben, wollen wir diese in der Anwendung anzeigen lassen. Da es sich um ein Menü handelt, wollen wir es als Beispiel beim Drücken der M-Taste ein- und wieder ausblenden. Dafür sind hauptsächlich die beiden Nodes Create Widget und Add to Viewport in einem Blueprint wie beispielsweise dem Level Blueprint nötig.
Hinweis: Mit dem ultimativen Unreal Engine 5 Cheat Sheet erhältst du einen detaillierten Überblick über wertvolle Tipps & Tricks. Sichere dir jetzt das Cheat Sheet, um deine Spiele & Anwendungen noch einfacher zu erstellen!
Benutzeroberfläche ein-/ausblenden
Um die Logik für das Ein- und Ausblenden der erstellten Benutzeroberfläche umzusetzen, musst du zunächst in den Level Blueprint wechseln. Du findest das Icon dazu in der nachfolgenden Abbildung. Dort wählst du Open Level Blueprint.
Level Blueprint öffnen
Im Level Blueprint kannst du im EventGraph nun die Logik integrieren. Der erste Node, den wir platzieren möchten, ist Keyboard Events mit der Taste M. Den Pin Pressed verbindest du mit einer Flip Flop Node, die sich um die Umschaltung zwischen Ein- und Ausblenden kümmert. Beim ersten Drücken der Taste M wird das Menü eingeblendet, beim erneuten Drücken wird es ausgeblendet, und so weiter.
Anschließend platzierst du eine Create Widget Node und wählst das zuvor erstellte Blueprint Widget der UI unter Class aus. In unserem Fall heißt es BP_menu. Mit dem Return Value dieser Node wird dann eine Variable namens menu gesetzt. Eine neue Variable kannst du in der linken Sidebar My Blueprint unter Variables erstellen. Der Datentyp dieser Variable sollte dem des Blueprint Widgets der UI entsprechen.
Nachdem diese Variable gesetzt wurde, soll das Menü durch den Node Add To Viewport eingeblendet werden. Die vollständige Logik findest du in der nachfolgenden Abbildung.
Benutzeroberfläche einblenden
Im nächsten Schritt integrieren wir das Ausblenden der UI. Dazu verwenden wir den Pin B der Flip Flop Node und verbinden ihn mit einer Remove From Parent Node. Wichtig ist hierbei, dass du zunächst die Variable menu als Get platzierst und von dort aus die Remove From Parent Node erstellst.
Benutzeroberfläche ausblenden
Mauszeiger ein-/ausblenden
Ein weiteres wichtiges Detail bei einem Menü ist die Möglichkeit für den Spieler, mit dem Mauszeiger zu navigieren. Bisher ist es nur möglich, die UI ein- und auszublenden. Wir werden uns nun ansehen, wie du zusätzlich den Mauszeiger ein- und ausblenden kannst.
Zunächst platzierst du den Get Player Controller Node im Level Blueprint und verbindest ihn mit dem Pin Target der Set Show Mouse Cursor Node. Den Execution Pin kannst du nach der Add To Viewport Node anordnen. Hierbei aktivieren wir außerdem Show Mouse Cursor.
Füge dasselbe am Ende der Remove From Parent Node hinzu und deaktiviere Show Mouse Cursor. Die beschriebene Logik findest du in der nachfolgenden Abbildung.
Mauszeiger ein- und ausblenden
Das User Interface ist ein wichtiger Bestandteil jedes Spiels oder jeder Anwendung, da es die Benutzerinteraktion ermöglicht und die Benutzererfahrung wesentlich beeinflusst. Mit dem Unreal Motion Graphics (UMG) Editor von Unreal kannst du ansprechende und funktionale Benutzeroberflächen gestalten, ohne auf komplexe Programmierung angewiesen zu sein.
In diesem Artikel hast du die Grundlagen von UMG gelernt. Angefangen bei der Einrichtung eines Blueprint-Widgets bis hin zur Gestaltung von Interaktionsmöglichkeiten mit Buttons und Text-Widgets. Im nächsten und letzten Teil des Unreal Engine 5 Tutorials wollen wir auf das C++ Scripting blicken.
