Testen Sie das neue UI Toolkit-Beispiel – jetzt im Asset Store erhältlich

In Unity 2021 LTS bietet das UI Toolkit eine Sammlung von Funktionen, Ressourcen und Tools, die Ihnen helfen, adaptive Laufzeit-UIs für eine breite Palette von Spielanwendungen und Editorerweiterungen zu erstellen und zu debuggen. Der intuitive Workflow ermöglicht es Unity-Entwicklern in verschiedenen Rollen – Grafikern, Programmierern und Designern gleichermaßen –, so schnell wie möglich mit der Entwicklung der Benutzeroberfläche zu beginnen.

In unserem früheren Blog-Eintrag finden Sie eine Erläuterung der wichtigsten Vorteile des UI Toolkits, wie verbesserte Skalierbarkeit und Leistung, die bereits von Studios wie Mechanistry für ihr Spiel Timberborn genutzt werden.

Unity UI ist zwar nach wie vor die bevorzugte Lösung für die Positionierung und Beleuchtung der Benutzeroberfläche in einer 3D Welt oder die Integration mit anderen Unity Systemen, doch das UI Toolkit für die Laufzeit-UI kann bereits ab Unity 2021 LTS Spieleproduktionen zugutekommen, die Leistung und Skalierbarkeit anstreben. Sie ist besonders effektiv für Screen Space – Overlay UI und skaliert gut auf einer Vielzahl von Bildschirmauflösungen.

Deshalb freuen wir uns, zwei neue Lernressourcen bekannt zu geben, die die Entwicklung der Benutzeroberfläche mit dem UI Toolkit besser unterstützen:

• Beispiel UI Toolkit – Dragon Crashers: Die Demo steht jetzt im Asset Store zum kostenlosen Download zur Verfügung.
• Design und Implementierung der Benutzeroberfläche in Unity: Dieses kostenlose E-Book kann hier heruntergeladen werden

Lesen Sie weiter, um mehr über einige wichtige Funktionen des Beispielprojekts UI Toolkit zu erfahren.

Das UI Toolkit Beispiel zeigt, wie Sie das UI Toolkit für Ihre eigenen Anwendungen nutzen können. Diese Demo umfasst eine funktionsreiche Schnittstelle über ein Slice des 2D-Projekts Dragon Crashers,ein Mini-RPG, das den Unity 2021 LTS UI Toolkit-Workflow zur Laufzeit verwendet.

Einige der im Beispielprojekt dargestellten Aktionen zeigen Ihnen, wie Sie:

• Stil mit Selektoren in Unity Stylesheet (USS)-Dateien und Verwendung von UXML-Vorlagen
• Erstellen Sie benutzerdefinierte Steuerelemente, wie z. B. Kreismesser oder Registerkartenansichten
• Anpassen des Erscheinungsbilds von Elementen wie Schiebereglern und Umschalttasten
• Verwenden Sie Render Texture für UI-Overlay-Effekte, USS-Animationen, saisonale Themen und mehr

Um das Projekt auszuprobieren, nachdem Sie es zu Ihren Assets hinzugefügt haben, wechseln Sie in den Play-Modus. Bitte beachten Sie, dass die UI Toolkit-Schnittstellen nicht in der Szenenansicht angezeigt werden. Stattdessen können Sie sie in der Spieleansicht oder im UI Builder ansehen.

Das Menü auf der linken Seite hilft Ihnen, durch die modalen Hauptmenübildschirme zu navigieren. Diese vertikale Tastenspalte bietet Zugriff auf die fünf modalen Bildschirme, die das Hauptmenü umfassen (sie bleiben aktiv, während sie zwischen den Bildschirmen wechseln).

Es ist zwar eine gewisse Interaktivität möglich, wie z. B. das Heilen der Charaktere durch Ziehen verfügbarer Tränke in der Szene, aber das Gameplay wurde auf ein Minimum reduziert, um einen kontinuierlichen Fokus auf die UI-Beispiele zu gewährleisten.

Sehen wir uns die Benutzeroberflächen in der Menüleiste genauer an:

• Der Startbildschirm dient beim Starten der Anwendung als Landing Pad. Auf diesem Bildschirm können Sie das Spiel spielen oder simulierte Chatnachrichten empfangen.

• Der Charakterbildschirm umfasst eine Mischung aus GameObjects und UI-Elementen. Hier können Sie jeden der vier Dragon Crashers-Charaktere erkunden. Verwenden Sie die Registerkarten Statistiken, Fähigkeiten und Bio, um die spezifischen Charakterdetails zu lesen, und klicken Sie auf die Inventarplätze, um Gegenstände hinzuzufügen oder zu entfernen. Der Vorschaubereich zeigt einen 2D beleuchteten und mit Rigging versehenen Charakter vor einem kachelförmigen Hintergrund.

• Die Ressourcen-Screenlinks führen zur Dokumentation, zum Forum und zu anderen Ressourcen, um das UI Toolkit optimal zu nutzen.

• Der Shop-Bildschirm simuliert einen In-Game-Store, in dem Sie harte und weiche Währungen wie Gold oder Edelsteine sowie virtuelle Waren wie Heiltränke kaufen können. Jeder Artikel auf dem Shop-Bildschirm ist ein separates VisualTreeAsset. Das UI Toolkit instanziiert diese Assets zur Laufzeit; eines für jedes ScriptableObject in den Ressourcen/GameData.

• Der E-Mail-Bildschirm ist ein Frontend-Reader für fiktive Nachrichten, der den Posteingang und die gelöschten Nachrichten über ein Registerkartenmenü trennt.

• Der Spielbildschirm ist eine Miniversion des Dragon Crashers-Projekts, die automatisch zu spielen beginnt. In diesem Projekt werden Ihnen einige überarbeitete Elemente mit dem UI Toolkit auffallen, wie z. B. eine Schaltfläche zum Pausieren, Gesundheitsbalken und die Möglichkeit, ein Heiltrankelement zu Ihren Charakteren zu ziehen, wenn diese Schaden erleiden.

Mit dem UI Toolkit können Sie stabile und konsistente Benutzeroberflächen für Ihr gesamtes Projekt erstellen. Gleichzeitig bietet es flexible Tools zum Hinzufügen Ihrer eigenen Designdetails und Details, um das Thema und den Stil des Spiels weiter zu verfeinern.

Sehen wir uns einige der Funktionen an, die zur Verfeinerung der UI-Designs im Beispiel verwendet werden:

• Rendertexturen:UI Toolkit-Schnittstellen werden zuletzt in der Renderwarteschlange gerendert, d. h. Sie können keine andere Spielgrafik über eine UI Toolkit-Benutzeroberfläche legen. Rendertexturen bieten eine Umgehung dieser Einschränkung und machen es möglich, In-Game-Effekte in UI Toolkit-UIs zu integrieren. Obwohl diese Effekte auf Basis von Rendertexturen sparsam eingesetzt werden sollten, können Sie sich dennoch scharfe Effekte im Kontext einer Vollbild-Benutzeroberfläche leisten, ohne das Gameplay auszuführen. Die folgenden Bilder zeigen eine Reihe von Rendertexturen aus der Demo.

• Designs mit Design-Stylesheets (TSS): TSS-Dateien sind Asset-Dateien, die normalen USS-Dateien ähneln. Sie dienen als Ausgangspunkt für die Definition Ihres eigenen Designs über USS-Selektoren sowie Eigenschaften- und Variableneinstellungen. In der Demo haben wir die Standard-Designdateien dupliziert und die Kopien modifiziert, um saisonale Variationen anzubieten.

• Individuelle Benutzeroberflächenelemente: Da Designer geschult sind, über den Tellerrand hinaus zu denken, bietet Ihnen das UI Toolkit viel Raum, um die Standardbibliothek anzupassen oder zu erweitern. Das Demoprojekt hebt einige benutzerdefinierte Elemente in den Registerkartenmenüs, Folienschaltern und Dropdown-Listen sowie einen Radialzähler hervor, um zu demonstrieren, wozu UI-Artists neben Entwicklern in der Lage sind.

• USS-Übergänge für animierte Zustandsänderungen der Benutzeroberfläche: Das Hinzufügen von Übergängen zu den Menübildschirmen kann Ihre Grafik verfeinern und glätten. Das UI Toolkit macht dies mit der Eigenschaft Transition Animations, Teil des UI Builder’s Inspector, einfacher. Passen Sie die Eigenschaften Eigenschaft, Dauer, Erleichterung und Verzögerung an, um die Animation einzurichten. Ändern Sie dann einfach die Stile für das UI Toolkit, um den animierten Übergang zur Laufzeit anzuwenden.

• Nachbearbeitungsvolumen für eine Hintergrundunschärfe: Ein beliebter Effekt in Spielen ist die Unschärfe einer überfüllten Gameplay-Szene, um die Aufmerksamkeit des Spielers auf eine bestimmte Popup-Nachricht oder ein bestimmtes Dialogfenster zu lenken. Sie können diesen Effekt erreichen, indem Sie die Tiefenschärfe im Volumen-Framework aktivieren (verfügbar in der Universal Render Pipeline).

Wir haben dafür gesorgt, dass effiziente Workflows zur Verstärkung der Benutzeroberfläche verwendet wurden. Hier sind einige Empfehlungen für eine übersichtliche Organisation des Projekts:

• Konsistente Namenskonventionen: Es ist wichtig, Namenskonventionen zu übernehmen, die auf Ihre visuellen Elemente und Stylesheets abgestimmt sind. Klare Namenskonventionen sorgen nicht nur dafür, dass die Hierarchieorganisation im UI Builder erhalten bleibt, sie machen sie auch für Ihre Teammitglieder zugänglicher und halten den Code sauber und lesbar. Genauer gesagt empfehlen wir die Blockelementmodifikator-Namenskonvention für visuelle Elemente und Stylesheets. Die BEM-Benennung eines Elements kann Ihnen auf einen Blick sagen, was es tut, wie es erscheint und wie es sich mit den anderen Elementen um es herum verhält. Sehen Sie sich die folgenden BEM-Namensbeispiele an:

• Reaktives Benutzeroberflächenlayout: Ähnlich wie bei Webtechnologien bietet das UI Toolkit die Möglichkeit, Layouts zu erstellen, bei denen sich visuelle Elemente für „untergeordnete“ Elemente an die aktuelle verfügbare Größe innerhalb ihrer visuellen Elemente für „übergeordnete“ Elemente anpassen, und andere, bei denen jedes Element eine absolute Position hat, die an einem Referenzpunkt verankert ist, ähnlich wie beim System Unity UI. Das Beispiel verwendet beide Optionen je nach Bedarf über die visuellen Elemente der Benutzeroberfläche.

• PSD Importer: PSD Importer ist eines der effektivsten Tools für die Erstellung der Demo und ermöglicht es Grafikern, an einem Masterdokument zu arbeiten, ohne jedes Sprite einzeln manuell exportieren zu müssen. Wenn Änderungen erforderlich sind, können sie in der ursprünglichen PSD Datei vorgenommen und automatisch in Unity aktualisiert werden.
• ScriptableObjects: Um sich auf das Design und die Implementierung der Benutzeroberfläche zu konzentrieren, werden im Beispielprojekt Backend-Daten wie In-App-Käufe und E-Mail-Nachrichten mit ScriptableObjects simuliert. Sie können diese Stand-in-Daten bequem aus dem Ordner Ressources/GameData anpassen und mit dem Beispiel ähnliche Daten-Assets wie Inventar-Elemente und Charakter- oder Dialogdaten im UI Toolkit erstellen.

Denken Sie daran, dass mit dem UI Toolkit die Layouts und Stile der Benutzeroberfläche vom Code entkoppelt sind. Das bedeutet, dass das Umschreiben der Backend-Daten unabhängig vom UI-Design erfolgen kann. Wenn Ihr Entwicklungsteam diese Systeme ersetzt, sollte die Schnittstelle weiterhin funktionieren.

Weitere in der Demo verwendete Tools sind unter anderem Partikelsysteme, die mit dem eingebauten Partikelsystem für Spezialeffekte erstellt wurden, und das 2D Toolset. Sehen Sie sich das Projekt über den Inspector an, um zu sehen, wie diese verschiedenen Elemente zum Tragen kommen.

Referenzgrafiken der UI-Grafiker finden Sie unter UI/Referenz, wie sie im UI Builder repliziert wurden. Der gesamte Prozess, von den Modellen bis hin zu Wireframes, wird ebenfalls im E-Book dokumentiert. Schließlich können alle Inhalte des Beispiels zu Ihrem eigenen Unity Projekt hinzugefügt werden.

Sie können das UI Toolkit Beispiel – Dragon Crashers aus dem Asset Store herunterladen. Sobald Sie die verschiedenen Benutzeroberflächendesigns erkundet haben, geben Sie bitte Ihr Feedback im Forum.

Dann schauen Sie sich unbedingt unser E-Book „Benutzeroberflächendesign und Implementierung in Unity“ an. Herunterladen