In diesem Videotutorial von Unity erfahren Sie, wie Sie World Space-Benutzeroberflächen mit dem UI Toolkit in Unity 6.2 erstellen. Zu den wichtigsten Schritten, die Sie kennenlernen werden, gehören:
- Die Grundlagen für die Einrichtung des Projekts und das Öffnen des UI Builders
- Speichern Ihres ersten UXML-Dokuments
- Erstellung einer flexiblen und wartbaren Benutzeroberfläche durch Erstellung und Anwendung von Stylesheets (USS-Dateien) und wiederverwendbaren Stilklassen
Das Tutorial zum UI Toolkit Unity 6.2 behandelt auch ein praktisches Beispiel für die Verbesserung der Benutzerinteraktion durch die Implementierung von benutzerdefinierten Hover-Effekten auf Schaltflächen mithilfe von Pseudoklassen.
Abschließend wird der komplette Workflow für die Integration der Benutzeroberfläche in eine 3D Szene durch die Konfiguration eines UI Documents und der zugehörigen Bedienfeldeinstellungen für das World Space Rendering gezeigt, sodass ein Menü entsteht, das physisch innerhalb der Spielumgebung existiert.
FAQ
Wie kann ich mit dem UI Builder beginnen?
Öffnen Sie zunächst das UI Builder-Fenster und speichern Sie Ihre Arbeit als UXML-Asset. Diese Datei speichert die Struktur und Hierarchie Ihrer UI-Elemente.
Befolgen Sie diese Schritte, um zu beginnen:
1. Navigieren Sie im Hauptmenü des Unity Editors zum UI Builder: Fenster > UI Toolkit > UI Builder
2. Sobald das UI Builder-Fenster geöffnet ist, speichern Sie Ihr neues UI Document. Gehen Sie zu Datei > Speichern unter... im Menü des UI Builders.
3. Wählen Sie einen Speicherort in Ihrem Projekt aus und speichern Sie die Datei. Dadurch wird das .uxml-Asset erstellt, das Sie als Quelle für Ihre Benutzeroberfläche in der Szene verwenden werden.
Sie können dieses Beispiel in Aktion sehen, indem Sie direkt zu diesen Abschnitten im Video gehen:
(1:10) - Öffnen des UI Builder-Fensters
(1:23) - Speichern der UXML-Datei
Wenn Sie mehr über den UI Builder erfahren möchten, werfen Sie einen Blick auf die Unity Dokumentationsseite.
Wie wende ich konsistente Stile auf mehrere UI-Elemente an?
Die effizienteste Möglichkeit, ein konsistentes Erscheinungsbild in Ihrer Benutzeroberfläche zu erhalten, ist die Verwendung von Stylesheets, die ähnlich wie CSS in der Webentwicklung funktionieren. Dieser Ansatz trennt Stil von Struktur und erleichtert die Verwaltung Ihrer Benutzeroberfläche.
Das System besteht aus drei wesentlichen Teilen:
- Stylesheet (.uss-Datei): Erstellen Sie ein neues Stylesheet im UI Builder und fügen Sie es Ihrem Haupt-UI-Container hinzu. Diese Datei enthält alle Ihre Styling-Regeln.
- Stilklassen: Um einen wiederverwendbaren Stil zu erstellen, wählen Sie ein visuelles Element im UI Builder aus. Geben Sie im Inspektor unter der Stilklassenliste einen neuen Klassennamen ein (z. B. "Menüschaltfläche") und fügen Sie ihn zur Liste hinzu.
- Wiederverwendbarkeit: Sie können diese Stilklasse jetzt jedem anderen UI-Element zuweisen. Alle Elemente, die sich eine Klasse teilen, erben automatisch ihre definierten Eigenschaften und sorgen so für ein einheitliches Erscheinungsbild. Jede an der Stilklasse vorgenommene Änderung aktualisiert alle zugewiesenen Elemente gleichzeitig.
Sie können dieses Beispiel in Aktion sehen, indem Sie direkt zu diesen Abschnitten im Video gehen:
(2:18) - Neues Stylesheet erstellen
(2:57) - Erstellen einer neuen Stilklasse
(3:07) - Erstellen eines neuen USS Selectors aus der Klasse
(3:43) - Erläuterung der Auswirkungen von Änderungen an einer Stilklasse auf alle zugewiesenen Elemente
Wenn Sie mehr über das Styling Ihrer Benutzeroberfläche mit Unity Style Sheet (USS) erfahren möchten, werfen Sie einen Blick auf die Unity Dokumentationsseite.
Wie erstelle ich benutzerdefinierte Hover-Effekte für Schaltflächen?
Sie können benutzerdefinierte Hover-Effekte und andere interaktive Stile mit USS-Pseudoklassen erstellen. Mit der Pseudoklasse :hover können Sie einen bestimmten Satz von Stilen definieren, die nur dann angewendet werden, wenn der Cursor eines Benutzers über einem Element steht.
Führen Sie diese Schritte aus, um einen benutzerdefinierten Hover-Effekt für eine Standard-Schaltfläche von Unity zu implementieren:
1. Wählen Sie im UI Builder eine Schaltfläche aus, um die Standardstilklassen im Inspektor anzuzeigen. Die Standardschaltflächenklasse ist Unity-Button.
2. Doppelklicken Sie auf die Unity-Button-Klasse, um deren Auswahl zu Ihrem Stylesheet hinzuzufügen. Dies ermöglicht es Ihnen, das standardmäßige Erscheinungsbild der Schaltfläche zu ändern, z. B. teilweise transparent zu machen.
3. Erstellen Sie einen neuen Selektor in Ihrem Stylesheet, indem Sie die Pseudoklasse:hover an die ursprüngliche Klasse anfügen: .Unity-button:hover
4. Definieren Sie bei aktiviertem :hover-Auswahlschalter die gewünschten Stile für den Schwebezustand, z. B. die Hintergrundfarbe vollständig deckend ändern. Die Benutzeroberfläche wechselt nun automatisch zwischen diesen Stilen während Mouse-Over-Ereignissen.
Sie können dieses Beispiel in Aktion sehen, indem Sie direkt zu diesen Abschnitten im Video gehen:
(6:29) - Einführung in Pseudoklassen
(6:54) - Ermittlung der Standardklasse .Unity-Button
(7:24) - Erstellung des Pseudoklassen-Selektors :hover
(7:39) – Der endgültige Schwebeeffekt
Wenn Sie mehr über Pseudoklassen erfahren möchten, werfen Sie einen Blick auf die Unity Dokumentationsseite.
Wie füge ich meiner Szene als World Space-Objekt ein UI Toolkit-Element hinzu?
Unity 6.2 erweitert das UI Toolkit um die Möglichkeit, UI-Elemente direkt in World Space zu rendern. Dazu werden ein UI Document und ein GameObject verwendet, um Ihr UXML-Asset in der Szene zu hosten.
Befolgen Sie diese Sequenz, um eine World Space-Benutzeroberfläche zu erstellen:
1. Klicken Sie im Fenster Hierarchie mit der rechten Maustaste und wählen Sie UI Toolkit > UI Document. Dadurch wird ein neues GameObject in Ihrer Szene erstellt.
2. Wählen Sie das neue UI Document GameObject aus. Suchen Sie im Inspektor das Feld Source Asset und weisen Sie ihm Ihre gespeicherte .uxml-Datei zu.
3. Klicken Sie auf das dem UI Document zugeordnete Asset „Panel Settings“. Dadurch wird das Asset in Ihrem Projektfenster hervorgehoben.
4. Wählen Sie das Asset „Panel Settings“ aus, um seine Eigenschaften im Inspektor anzuzeigen. Ändern Sie den Rendermodus vom standardmäßigen Screen Space in World Space.
5. Nach dem Wechsel zu World Space können Sie die RectTransform-Komponente des UI Document GameObject anpassen, um die UI-Ebene innerhalb Ihrer 3D Szene zu positionieren, zu drehen und zu skalieren.
Sie können dieses Beispiel in Aktion sehen, indem Sie direkt zu diesen Abschnitten im Video gehen:
(7:49) – Erstellung eines UI Document in der Szene
(7:59) - Zuweisen des UXML-Quell-Assets
(8:08) - Zugriff auf die Panel-Einstellungen
(8:23) - Wechsel in den Weltraum-Rendermodus
(8:58) - Demonstrieren der endgültigen Benutzeroberfläche von World Space
Wenn Sie mehr über die Benutzeroberfläche von World Space erfahren möchten, werfen Sie einen Blick auf die Unity Dokumentationsseite.
