UI Toolkit zur Laufzeit: Holen Sie sich die Aufschlüsselung

UI Toolkit ist eine Sammlung von Funktionen, Ressourcen und Tools, die für die Entwicklung von Benutzeroberflächen und Editor-Erweiterungen entwickelt wurden. Das UI Toolkit wurde ursprünglich als UI-Elemente eingeführt und bietet ein Retained-Mode-UI-Framework, um die Entwicklung einer benutzerdefinierten Benutzeroberfläche für Unity Editor-Erweiterungen zu erleichtern.

Das UI Toolkit ist in der neuesten Version von Unity verfügbar und unterstützt die Erstellung einer Laufzeit-Benutzeroberfläche durch eine vertraute und intuitive Authoring-Erfahrung, die von Webtechnologien inspiriert ist. In diesem Artikel werden die Besonderheiten seiner Funktionen untersucht und Tipps für den Einstieg in das UI Toolkit zur Laufzeit als Alternative zu UGUI gegeben.

In diesem Handbuch finden Sie einen detaillierten Vergleich zwischen Benutzeroberflächensystemen.

Unity 2021 LTS kann jetzt heruntergeladen und verwendet werden. Diese Version steht für mehr als ein Jahr konzentrierter Entwicklung über den gesamten Unity Editor sowie die zugrunde liegenden grundlegenden Funktionen, kombiniert mit den Funktionen, die in unseren Unity 2021.1- und Unity 2021.2-Tech-Stream-Veröffentlichungen enthalten sind (mit zusätzlichen sechs Monaten Qualitätsverbesserung).

Laden Sie zunächst die neueste Version von Unity vom Unity Hub herunter.

Lassen Sie uns klären, wie das UI Toolkit reibungslosere Workflows bei der Erstellung der Benutzeroberfläche gewährleisten kann.

Die Erstellung einer Benutzeroberfläche in Zusammenarbeit mit Grafikern kann eine komplexe Aufgabe sein. Während der Künstler das Canvas bearbeitet, um Farben und Material hinzuzufügen, fügt der Entwickler Skripte, Verhaltensweisen und OnClick-Hörer hinzu. Beim Merging kann es anschließend zu Konflikten kommen, die zu Problemen führen, die eine schnelle Lösung erfordern.

Das UI Toolkit verhindert solche Merging-Konflikte, indem es den Grafiker an den UXML- und USS-Dateien arbeiten lässt, während C# die gesamte Logik übernimmt. Die Handhabung der Schaltfläche erfolgt beispielsweise nur mit C#, das die Schaltfläche unter Verwendung ihres Namens abfragt und Logik hinzufügt, ohne UXML- oder USS-Dateien zu bearbeiten.

Dieser Prozess erleichtert nicht nur das Merging, sondern vereinfacht auch zukünftige Stiländerungen. Wenn beispielsweise plötzlich alle Projektschriftarten geändert werden müssten, müssten Sie nicht jedes Asset einzeln durchgehen, um die Texteinstellungen zu bearbeiten. Dadurch wird mühselige Arbeit vermieden, die zu Aufsichtsproblemen führen kann – und je größer das Spiel, desto komplizierter wird das.

Mit dem UI Toolkit enthalten die Bedienfeldeinstellungen alle Texteinstellungen. Um die Schriftarten unter einem UI Document zu ändern, müssen Sie also nur diese Bedienfeldeinstellungen bearbeiten. Obwohl Editor-Skripte ebenfalls mit UGUI unterstützt werden können, kümmert sich das Framework des UI Toolkit automatisch um diesen Prozess.

Ein visuelles Element ist die Basisklasse jedes UI Toolkit-Elements: Schaltflächen, Bilder, Text usw. Sie können es sich als GameObject des UI Toolkit vorstellen. Inzwischen ist UI Builder (Fenster > UI Toolkit > UI Builder) ein visuelles Tool, das hilft, Schnittstellen zu erstellen und zu bearbeiten, ohne Code schreiben zu müssen. Dies ist sowohl für Grafiker als auch für Designer nützlich, da sie die Benutzeroberfläche während der Entwicklung visualisieren können.

Als Premium-Tool für Personen, die bereits mit Webtechnologien vertraut sind, verbessert das UI Toolkit auch die Zusammenarbeit zwischen Grafikern und Entwicklern, indem Logik und Stil getrennt werden, um die Organisation zu verfeinern und Dateikonflikte zu vermeiden. Während sich der UI Builder um die Positionen, den Stil und das Design der Elemente kümmert, kann Code in einem separaten Abschnitt des Projekts behandelt werden, um die Teile von UXML abzufragen, die er benötigt, und die Logik mit ihm zu verbinden.

UXML-Dateien sind vergleichbar mit HTML-Webdateien. Sie stellen visuelle Elemente dar und enthalten die Hierarchie der Benutzeroberfläche. Erstellen Sie ein UXML-Dokument über Assets > Create > UI Toolkit > UI Document. Verwenden Sie dann UI Builder, um die neu erstellte UXML zu visualisieren und zu bearbeiten.

Beachten Sie jedoch, dass eine UXML-Datei nicht als GameObject, sondern als Baum visueller Elemente behandelt werden sollte. Nutzen Sie ein einzelnes UI Document, um die Hierarchie zu erleichtern, und laden Sie alle UXML-Elemente darauf. Sie können die Benutzeroberfläche mit dem UI Toolkit Debugger unter Windows > UI Toolkit > Debugger visualisieren.

Sehen Sie sich einige UXML-Element-Beispiele unter Windows > UI Toolkit > Samples an, um Ihnen den Einstieg zu erleichtern.

Dank des UI Builders können UXML-Dateien erstellt, visualisiert und getestet werden, ohne das Spiel zu starten. Ziehen Sie einfach UI-Steuerelemente (standardmäßig oder benutzerdefinierte) aus dem UI Builder Library-Bedienfeld in die Hierarchie und kombinieren Sie mehrere UXML-Dateien, um die endgültige Benutzeroberfläche zu erstellen.

Angenommen, wir haben eine Benutzeroberfläche, die aus drei Elementen besteht:

• Gesundheit
• Ergebnis
• Pop-up „Sie gewinnen“

Das Pop-up „Sie gewinnen“ zeigt Gesundheit, Punktzahl sowie eine Schaltfläche „Neu starten“ an.

Jedes Element wird in einem anderen Benutzeroberflächenbereich des Spiels verwendet, da es mit popup.uxml Teil separater UXML-Dateien ist – eine Kombination aus health.uxml und score.uxml sowie der Schaltfläche „Neu starten“. Daher sind die Codelogik, die die Punktzahl und die Gesundheit verwaltet (score.cs und health.cs) unabhängig von der Hierarchie. Das bedeutet, dass health.cs die health.uxml-Werte immer aktualisiert, unabhängig davon, ob die Benutzeroberfläche allein auf dem Bildschirm oder in einem anderen Pop-up-Fenster angezeigt wird.

Die Kombination von UXML kann auch die Visualisierung bearbeiteter Objekte erleichtern. Durch Aktivieren der Klassenlisten-Option innerhalb der UI Builder-Hierarchie können Sie auf den ersten Blick sehen, was sich auf das Objekt auswirkt, und Selektoren verwenden, um den Stil organisiert zu halten:

Ein weiterer Vorteil betrifft die Szenenhierarchie. Statt eines Canvas mit Dutzenden von GameObjects benötigt das UI Toolkit nur eine mit einem UI Document verknüpfte UXML-Datei.

vs

Dieser Workflow ist besonders für größere Teams von Vorteil. Anstatt an derselben Szene zu arbeiten, kann jedes Teammitglied mit dem Risiko von Merging-Problemen an seinen eigenen UXML-Dateien arbeiten, die dann zu einem einzigen UI Document innerhalb der Szene hinzugefügt werden.

Das Panel Settings Asset (Assets > Create > UI Toolkit > Panel Settings Asset) definiert, wie die UXML innerhalb des Spiels instanziiert und visualisiert werden soll. Es ist möglich, mehrere Panel Settings Assets zu haben, um verschiedene Stile für die Benutzeroberflächen zu aktivieren. Die Verwendung bestimmter Panel-Einstellungen für das HUD und anderer für die Minimap ist beispielsweise sinnvoll, da es sich um sehr unterschiedliche Benutzeroberflächen mit unterschiedlichen Anforderungen handelt.

Die Bedienfeldeinstellungen können als UGUI Canvas + Canvas Scaler mit zusätzlichen Optionen wie Texteinstellungen angesehen werden, sodass der gesamte Text innerhalb des Bedienfelds dieselbe Grundeinstellung verwendet. Dadurch wird der Zeitaufwand für manuelles Zurücksetzen der einzelnen Schriftarten vermieden – aber natürlich können Schriftarten bei Bedarf auch innerhalb der einzelnen UI-Dokumente überschrieben werden.

Der UI Builder ist weder für die Eventverwaltung gedacht noch das UXML-Dokument. Erstellen Sie ein C#-Skript und verknüpfen Sie es mit der UXML, um einen Tastenklick oder ein anderes Ereignis zu bearbeiten.

public class UIEventHandler : MonoBehaviour
{
   [SerializeField]
   private UIDocument m_UIDocument;
 
   private Label m_Label;
   private int m_ButtonClickCount = 0;
   private Toggle m_Toggle;
   private Button m_Button;
 
   public void Start()
   {
       var rootElement = m_UIDocument.rootVisualElement;
 
       // This searches for the VisualElement Button named “EventButton”
       // rootElement.Query<> and rootElement.Q<> can both be used
       m_Button = rootElement.Q<Button>("EventButton");
 
       // Elements with no values like Buttons can register callBacks
// with clickable.clicked
       m_Button.clickable.clicked += OnButtonClicked;
 
       // This searches for the VisualElement Toggle named “ColorToggle”
       m_Toggle = rootElement.Query<Toggle>("ColorToggle");
 
       // Elements with changing values: toggle, TextField, etc... 
// implement the INotifyValueChanged interface,
       // meaning they use RegisterValueChangedCallback and 
// UnRegisterValueChangedCallback
       m_Toggle.RegisterValueChangedCallback(OnToggleValueChanged);
 
       // Cache the reference to the Label since we will access it repeatedly.
       // This avoids the relatively costly VisualElement search each time we update
       // the label.
       m_Label = rootElement.Q<Label>("IncrementLabel");
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnDestroy()
   {
       m_Button.clickable.clicked -= OnClicked;
       m_Toggle.UnregisterValueChangedCallback(OnToggleValueChanged);
   }
 
   private void OnButtonClicked()
   {
       m_ButtonClickCount++;
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnToggleValueChanged(ChangeEvent<bool> evt)
   {
       Debug.Log("New toggle value is: " + evt.newValue);
   }
}

Die Elementpositionierung nutzt standardmäßig die Flexbox-Architektur. Dadurch wird sichergestellt, dass die meisten Layouts auf die Behälter- oder Bildschirmgröße reagieren. Wenden Sie es auf einen Visual Element Tree mit zwei oder mehr Elementen an und definieren Sie dann, wie sie auf dem Baum ausgerichtet sind.

Das Platzieren eines Elements in der Absolutpositionierung bedeutet, dass es relativ zur Position der Eltern positioniert wird und keine Auswirkungen auf andere Positionen hat oder von diesen beeinflusst wird.

Für die Einstellungen für Flexibilität und Ausrichtung verwenden Sie beispielsweise diese einfache Hierarchie:

Bearbeiten Sie die folgenden Einstellungen mit dem UI Builder Inspector:

• Basis: Dies bezieht sich auf die Standardgröße des Elements, bevor ein Shink-Vorgang (Schrumpfungsverhältnis, wenn die übergeordnete Größe nicht mehr vorhanden ist) oder Grow-Vorgang (Grow-Elementeverhältnis, wenn die Größe im übergeordneten Bereich belassen wird) ausgeführt wird.
• Richtung (Zeile und Spalte): Verwenden Sie dies, um Verhaltensweisen ähnlich der UGUI-Vertical Layout Group bzw. Horizontal Layout Group zu erstellen.

• Wrapp: Bestimmen Sie, welche Elemente nicht passen, und ignorieren Sie sie, sonst gehen Sie nach oben oder unter vorherige Elemente.

• Gegenstände ausrichten: Packen Sie die Elemente an ausgewählten Positionen mit ihrer Mindestgröße.

• Inhalt rechtfertigen: Bestimmen Sie den Abstand zwischen Elementen entlang der Hauptachse.

Weitere Informationen zur Positionierung visueller Elemente finden Sie in der Dokumentation der UI Toolkit Layout Engine.

Beim Styling entfaltet das UI Toolkit seine volle Kraft. Das Hinzufügen von Stil zu visuellen Elementen erfolgt über USS-Dateien (Assets > Create > UI Toolkit >> StyleSheet). Sie entsprechen Unity Web-CSS-Dateien und verwenden dasselbe regelbasierte Format.

Beachten Sie, dass benutzerdefinierte USS-Dateien nicht zwingend erforderlich sind, damit die Benutzeroberfläche funktioniert. Runtime- und Editor-Styles sind standardmäßig vorgesehen, aber die Erstellung einer benutzerdefinierten USS ermöglicht es Ihnen, das bereits Gegebene zu erweitern oder sogar ein Styling von Grund auf neu zu erstellen.

Sie können Stilselektoren über das UI Builder Inspector StyleSheet-Bedienfeld hinzufügen und dann mit Code oder UI Builder bearbeiten.

USS Style Selektoren im UI Builder

Passende hinzugefügte Klasse auf dem Inspector

Im obigen Screenshot wird die .RedButton-Auswahltaste zu einer Schaltfläche hinzugefügt. Der Selektor erscheint somit neben den integrierten .Unity-Textelement- und .Unity-Schaltflächenklassen, die alle Schaltflächen automatisch haben.

Nachfolgend finden Sie ein Beispiel für eine USS-Regel, die die Hintergrundfarbe aller Elemente mit der .RedButton-Klasse auf Rot setzt. Die erste Zeile der Regel ist ein Selektor, der den Klassennamen verwendet, gefolgt von einer Liste der anzuwendenden Stile.

.RedButton { background-color: red; }

Genau wie in CSS können Klassen kombiniert werden, um den Geltungsbereich des Selektors einer Regel weiter einzuschränken:

.RedButton.BlueText { color: blue; }

In diesem Beispiel haben nur Objekte mit .RedButton und .BlueTextclasses blauen Text. In Kombination mit dem vorherigen Snippet hat die Schaltfläche auch einen roten Hintergrund.

Wie CSS-Styles können USS-Dateien verwendet werden, um das Erscheinungsbild von Objekten basierend auf ihrem Status zu überschreiben:

.unity-button:hover { background-color: red; }

In diesem Beispiel wird der Hintergrund aller Schaltflächen, die sich im Schwebezustand befinden, auf rot geschaltet. Klicken Sie auf Vorschau in der Symbolleiste des UI Builders, um eine Vorschau des Hover-Stylings anzuzeigen und zu sehen, wie die Effekte aussehen.

Nachdem wir nun die Grundlagen des UI Toolkits kennen, möchten wir ein Beispiel erstellen, das die Erstellung von Schnittstellen mit dem UGUI mit dem UI Toolkit vergleicht. Unser Ziel ist es, ein einfaches Menü zu erstellen, das den Mauszeiger mit den folgenden zwei Effekten enthält:

• Änderung der Hintergrundfarbe der Schaltflächen
• Änderung der Textfarbe der Schaltflächen

Um dieses Menü mit UGUI zu erstellen, richten Sie die folgende Hierarchie ein:

Außerdem müssen wir einigen Objekten einige zusätzliche Komponenten hinzufügen:

• Das Menü hat ein Bild für den Hintergrund und muss zur Ausrichtung verankert werden.
• Schaltflächen müssen richtig verankert sein, damit sie richtig ausgerichtet sind.
• Die Schaltflächen Neustart und Beenden erfordern:
• Ein Skript zum dynamischen Ändern der Textfarbe beim Hover.
• Schaltflächenkomponenteneinstellungen (im Editor bearbeitet), um die Hintergrundfarbe zu ändern.

In diesem Beispiel ist Beenden ein Prefab, das eine rote Schaltfläche definiert.

Um nun das Menü mit dem UI Builder zu erstellen, beginnen Sie mit einer ähnlichen Hierarchie:

Mit Popup Align als Mitte und Buttons Flex Direction als Zeile sieht unser aktuelles UI Toolkit Pop-up folgendermaßen aus:

Beachten Sie, dass die Schaltfläche Beenden rot ist, da sie die Komponente QuitButton.uxml verwendet, eine Entsprechung zur Schaltfläche Beenden Prefab.

Um zu sehen, wo die Magie des UI Toolkits wirklich stattfindet, fügen Sie einen PopupStyle.uss mit einer Reihe von Regeln und...

.background {
   background-image: url('/Assets/Assets/OptionsMenu.png#OptionsMenu');
   width: 500px;
   height: 300px;
}
 
.title {
   font-size: 32px;
   color: rgb(255, 255, 255);
}
 
.unity-base-field__input {
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/OptionsMenu9Slice.png#OptionsMenu9Slice_2');
   width: 300px;
   height: 75px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   -unity-text-align: middle-center;
}
 
.unity-button {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/StartMenu.png#StartMenu_ButtonDefault');
   width: 160px;
   height: 30px;
   -unity-slice-bottom: 1;
}
 
.unity-button:hover {
   color: rgb(0, 21, 255);
}
 
#Restart {
   -unity-background-image-tint-color: rgb(112, 202, 125);
}

Beachten Sie bitte, dass hier der Selektorvorrang gilt. Beispielsweise überschreibt ein direkt in die UXML geschriebener Stil den in den USS-Dateien. Hier werden die Breite und Höhe der Elemente zu PopupStyle.uss hinzugefügt, sie könnten aber auch direkt im UI Builder bearbeitet werden und die PopupStyle.uss überschreiben. Die Vorrangregeln finden Sie hier.

Angenommen, wir möchten alle Farben ändern, die im Menü angezeigt werden, aber nicht im Rest des Spiels: UGUI würde erfordern, dass wir alle Farben für alle Komponenten manuell bearbeiten, jeweils einzeln. Betrachten Sie jedoch unser Beispiel. Obwohl nur die Schaltfläche Beenden ein Prefab ist, könnten wir sie alle zu Prefabs machen, um sie einmal lokal zu überschreiben. Wenn sie dann bearbeitet werden, werden zukünftige Farbänderungen im Prefab vom Menü ignoriert.

Mit dem UI Toolkit müssen wir nur eine NewStyle.uss erstellen, die die PopupStyle.uss-Tags dupliziert, und PopupStyle.uss durch NewStyle.uss ersetzen.

Sobald die UXML-Datei erstellt und gestylt wurde, ist der letzte Schritt, sie zur eigentlichen Szene hinzuzufügen. Ersetzen Sie dazu das Element Scene Canvas und erstellen Sie ein leeres GameObject durch ein UI Document Element. Füllen Sie es mit den Dateien popup.uxmlund Panel Settings und drücken Sie Play, um die neue Benutzeroberfläche zu testen.

Sobald Sie das UI Toolkit ausprobieren konnten, teilen Sie uns bitte in den UI-Foren mit, was Sie davon halten, oder schauen Sie sich die offizielle Dokumentation an, um weitere Einzelheiten zu erfahren.

Schließlich können Sie die neuesten Updates in unserer neuen Unity Platform Roadmap verfolgen. Bitte teilen Sie Ihr Feedback direkt mit dem Produktteam – wir freuen uns auf Sie!

Dieser Artikel wurde von Marina Joffrineau im Team „Unity Studio Productions“ verfasst, das aus den leitenden Softwareentwicklern von Unity besteht. Das Team von Unity Studio Productions bietet Beratung und individuelle Entwicklungslösungen für Spielestudios jeder Größe. Um mehr über Unity Studio Productions zu erfahren und zu erfahren, wie wir Ihnen helfen können, Ihre Ziele zu erreichen, besuchen Sie unsere Website.