UI-Toolkit: Neue und aktualisierte Demos für Programmierer und Künstler
Wir freuen uns, die Verfügbarkeit von zwei neuen und aktualisierten Lehrbeispielen ankündigen zu können, um die verschiedenen Perspektiven von Programmierern und Künstlern/Designern bei der Erstellung professioneller Spiele-UIs mit UI Toolkit zu unterstützen.
UI Toolkit bietet eine Reihe von Tools für die Entwicklung performanter und skalierbarer Runtime UI für Spiele und Anwendungen, benutzerdefinierte Erweiterungen für den Unity-Editor und Runtime-Debugging-Tools. Die Kernkonzepte und Arbeitsabläufe werden Ihnen vertraut sein, wenn Sie Erfahrung mit der Entwicklung von Webseiten oder Anwendungen haben.
Mit diesen Beispielen möchten wir Ihnen helfen, mit UI Toolkit reichhaltige, reaktionsfähige und skalierbare Benutzeroberflächen zu erstellen. Die neue Demo QuizUfür Programmierer und das aktualisierte UI Toolkit Sample - Dragon Crashers für Künstler und Designer sind zwei sehr unterschiedliche Projekte, die jeweils mit umfangreichen Anleitungen versehen sind.
QuizU ist ein programmiererzentriertes Beispiel für eine interaktive Quiz-Anwendung, die zeigt, wie UI-Toolkit-Komponenten in einem kleinen, aber funktionalen Spiel mit mehreren Bildschirmen und Spielflussmanagement zusammenarbeiten können, indem sie verschiedene Entwurfsmuster nutzen.
Die Demo besteht aus zwei Teilen: 10 kleine, leicht verdauliche Beispiele, die verschiedene Aspekte von UI Toolkit demonstrieren, und ein Mini-Quizspiel, das viele der Techniken aus den 10 Szenen zu einem vollständigen Projekt zusammenfasst.
Der minimalistische visuelle Stil des Minispiels ermöglicht es Ihnen, sich auf die Mechanik der UI-Implementierung zu konzentrieren, ohne sich in den Designdetails zu verlieren.
Das Quizspiel veranschaulicht, wie man das State-Pattern für den Spielfluss verwendet, mehrere Menübildschirme verwaltet, das Model-View-Presenter-Pattern verwendet, die Ereignisbehandlung im UI Toolkit implementiert und vieles mehr. Das Gameplay ist eine sehr einfache Quizspielmechanik, aber die Absicht ist, Implementierungstechniken zu zeigen und zu lehren, die Sie in Ihren eigenen Projekten verwenden können.
Wenn Sie einige dieser Entwurfsmuster konsequent in Ihr Projekt integrieren, können Sie die Lesbarkeit des Codes verbessern und Ihre Codebasis sauberer gestalten. Entwurfsmuster reduzieren nicht nur das Refactoring und den Zeitaufwand für das Testen, sie können auch den Entwicklungsprozess für Ihr gesamtes Team beschleunigen.
Darüber hinaus fördert die ereignisgesteuerte Architektur, bei der die Spielkomponenten über Ereignisse miteinander kommunizieren, eine lose Kopplung für Skalierbarkeit und Testbarkeit.
Der zweite Teil der Demo besteht aus 10 kleinen Demoszenen. Jede Demoszene steht für eine bestimmte Technik oder Funktion. Betrachten Sie sie als eine Reihe von Rezepten, die Sie inspirieren und anleiten sollen, wenn Sie UI Toolkit für Ihr nächstes Projekt evaluieren. Im Folgenden finden Sie einen kurzen Überblick über die Funktionen und Techniken des UI-Toolkits, die in den Demoszenen veranschaulicht werden:
- UXML und Visual Trees: UXML-Dateien bilden eine hierarchische Struktur von UI-Elementen. Diese visuellen Bäume dienen als Blaupause für Ihre Benutzeroberfläche.
- Flexbox: Das Flexible Box Layout Model (Flexbox) bietet ein effizientes Layout-Modell für die dynamische Anordnung von UI-Elementen innerhalb eines Containers.
- Unity Style Sheets (USS): USS ermöglicht Entwicklern die Anpassung von UI-Elementen mit vordefinierten Stilen. Die Neugestaltung der Benutzeroberfläche ist nur eine Frage des Austauschs von Stilvorlagen.
- UQuery: UQuery vereinfacht die Suche in einer komplexen Hierarchie von UI-Elementen und ermöglicht eine nahtlose Navigation zu bestimmten UI-Komponenten innerhalb des visuellen Baums.
- Pseudo-classes: Mit Pseudoklassen lassen sich interaktive und animierte UI-Elemente mit minimalem Zusatzcode erstellen, die Ihre visuelle Schnittstelle aufwerten (z. B. Vergrößerung einer Schaltfläche, wenn Sie den Mauszeiger darüber bewegen, oder Änderung der Farbe eines Textfeldes nach der Auswahl).
- UI-Toolkit Ereignis-System: UI Toolkit verfügt über ein eigenes Ereignissystem, das dafür ausgelegt ist, Klicks, Änderungen und Zeigereingaben in der Benutzeroberfläche zu verarbeiten, selbst bei komplexen Hierarchien.
- Manipulatoren: Ein Manipulator kapselt zusammenhängende Ereignis-Callbacks in einer einzigen Klasse und fördert so die Wiederverwendbarkeit und erleichtert die Definition von Benutzerinteraktionen (z. B. ein Click-and-Drag-Manipulator für ein Inventarsystem, ein Gesten-Manipulator für einen Pinch-to-Zoom-Effekt usw.).
- Benutzerdefinierte Steuerelemente: Die Demo zeigt, wie man ein benutzerdefiniertes VisualElement über die Klassen UxmlFactory und UxmlTraits definiert und instanziiert. Diese benutzerdefinierten Steuerelemente können dann über Skripte oder den UI-Builder wiederverwendet werden.
Wir empfehlen, dass Sie QuizU mit Unity 2022 LTS herunterladen. Sie können die Demo auch in einer Reihe von Artikeln verfolgen, die auf Unity Discussions veröffentlicht wurden und die Demo begleiten. Die Artikel sind hier zu finden:
Im September 2022 haben wir das UI Toolkit Sample - Dragon Crashers auf den Markt gebracht (lesen Sie den Blogbeitrag zur Einführung). Diese Demo einer voll funktionsfähigen Schnittstelle über ein Stück des 2D-Mini-RPG-Projekts Dragon Crasherszeigt Ihnen, wie Sie das UI Toolkit in Ihren eigenen Anwendungen einsetzen können. Es ist das Begleitbuch zum E-Book User Interface Design und Implementierung in Unitydas ebenfalls Ende 2022 erscheint.
Sie können jetzt eine neue Version des UI Toolkit Sample - Dragon Crashers für Unity 2022 LTS herunterladen. Zu den Verbesserungen und Aktualisierungen in dieser neuesten Version gehören:
- Unterstützung für Quer- und Hochformat zur Laufzeit durch Themes und das GeometryChangedEvent im UI Toolkit
- Implementierung der SafeArea API, um die UI-Funktionalität innerhalb des nutzbaren Bildschirmbereichs eines Geräts zu halten
- Anhebung der fps-Grenze für mobile Geräte auf 60 fps
- Umstrukturierte, vereinfachte Selektoren und USS-Stylesheets
- Höher aufgelöste Icons
- Verbesserte fixierte VFX-Spawning-Position für verschiedene Bildschirmverhältnisse und einige Cursor-Ungereimtheiten
- Überarbeitete Entwurfsmuster für eine sauberere UI-Architektur
- Neue Lerninhalte, die über das Fenster Tutorial Inspector bereitgestellt werden
Wir haben auch ein Benutzerhandbuch für das aktualisierte Projekt hinzugefügt. Damit reagieren wir auf die Rückmeldungen von Nutzern, die sich bessere Anleitungsinhalte gewünscht haben, um die in der Demo verwendeten Techniken und Funktionen besser zu verstehen.
Schließlich ist jetzt ein Video verfügbar, das Ihnen hilft, sich in der Demo zurechtzufinden. Sehen Sie sich das an:
Wir hoffen, dass Sie mit QuizU und dem aktualisierten UI Toolkit Sample - Dragon Crashers viele nützliche Tipps erhalten werden. Sie finden alle fortgeschrittenen E-Books von Unity für Programmierer, Künstler, technische Künstler und Designer im Unity Best Practices Hub.