Games

Es ist alles hier drin: Die ultimative Anleitung zur Erstellung von UI-Schnittstellen in Unity

SHANTI ZACHARIAH / UNITY TECHNOLOGIESSenior content marketing manager
Dec 15, 2022|9 Min.
Es ist alles hier drin: Die ultimative Anleitung zur Erstellung von UI-Schnittstellen in Unity
Diese Website wurde aus praktischen Gründen für Sie maschinell übersetzt. Die Richtigkeit und Zuverlässigkeit des übersetzten Inhalts kann von uns nicht gewährleistet werden. Sollten Sie Zweifel an der Richtigkeit des übersetzten Inhalts haben, schauen Sie sich bitte die offizielle englische Version der Website an.
Tausende von Menschen haben sich vorangemeldet, und jetzt ist es endlich soweit: Unser bisher größtes E-Book, Design und Implementierung von Benutzeroberflächen in Unityist zum Download verfügbar. Machen Sie sich bereit, in über 130 Seiten fortgeschrittene Anleitungen zum UI-Design einzutauchen.

Die Benutzeroberfläche Ihres Spiels ist vielleicht die direkteste Art und Weise, wie Sie mit Ihren Spielern kommunizieren und sie anleiten können - wie eine gefaltete Karte, die Sie ihnen in die Hand geben und die ihnen Hinweise, wichtige Details und Wegbeschreibungen zeigt, während sie vorankommen. Unabhängig davon, ob Sie eher traditionelle Elemente wie Lebenspunktebalken und Popup-Meldungen verwenden oder Elemente, die vollständig in die Spielwelt eingebettet sind, wie z. B. die Anzeige von Statistiken auf der Rückseite des Überlebensanzugs eines Spielers, ist die Benutzeroberfläche ein wesentlicher Bestandteil, um die Spieler in die Geschichte, die Welt und den künstlerischen Stil Ihres Spiels eintauchen zu lassen.

Wir freuen uns, unser neuestes technisches E-Book ankündigen zu können, User Interface Design und Implementierung in Unitykostenlos zum Download zur Verfügung steht. Tausende von Menschen haben sich bereits dafür angemeldet und ebenso viele haben das dazugehörige Demoprojekt heruntergeladen, UI-Toolkit-Beispiel - Dragon Crashersheruntergeladen. Jetzt sind Sie an der Reihe.

Ein Blick in das Design und die Implementierung von Benutzeroberflächen in Unity
Ein Blick in das E-Book 'User Interface Design und Implementierung' in Unity
UI-Grundlagen: Von der künstlerischen Gestaltung bis zu den neuesten Toolsets

Das Interesse an diesem E-Book ist verständlich. In der Einleitung heißt es: "Die Benutzeroberfläche ist ein entscheidender Bestandteil eines jeden Spiels ... eine solide grafische Benutzeroberfläche (GUI) ist eine Erweiterung der visuellen Identität eines Spiels ... [und] das moderne Publikum sehnt sich nach raffinierten, intuitiven GUIs, die sich nahtlos in Ihre Anwendung integrieren."

Das Handbuch beginnt mit den Grundlagen des UI-Designs und der Grafikerstellung und geht dann zu ausführlichen Anleitungen zur UI-Entwicklung in Unity über. Geschrieben und geprüft von technischen und UI-Künstlern - externen und Unity-Profis gleichermaßen - packt das E-Book sowohl Unity UI, die Standardlösung, als auch das neuere UI Toolkit aus.

Der Schwerpunkt liegt jedoch auf dem letztgenannten Toolset, da das UI Toolkit jetzt viele Vorteile für Projekte mit komplexen Vollbildschnittstellen bietet. Denken Sie an Projekte, die ein skalierbares und leistungsfähiges System für die Benutzeroberfläche zur Laufzeit erfordern. Um Ihnen bei der Auswahl der richtigen Lösung für Ihr Projekt zu helfen, lesen Sie bitte diesen Abschnitt des Unity-Handbuchs.

Wireframing, Roundtripping, Greyboxing und mehr
 Beispiele aus dem UI-Toolkit-Beispielprojekt mit Grafiken aus der Dragon Crashers-Demo, die mit Wireframes in Adobe XD erstellt wurden, um Navigationsabläufe zu testen und Feedback auszutauschen
Beispiele aus dem UI-Toolkit-Beispielprojekt mit Grafiken aus der Dragon Crashers-Demo, die mit Wireframes in Adobe XD erstellt wurden, um Navigationsabläufe zu testen und Feedback auszutauschen

Das E-Book ist eine Fundgrube an Informationen für professionelle UI-Designer, Künstler und andere Unity-Entwickler, die ihr Wissen über UI-Entwicklung vertiefen wollen. Hier ein kleiner Einblick in den Inhalt.

Der erste Abschnitt soll mit grundlegenden Tipps zur Gestaltung einer effektiven Benutzeroberfläche inspirieren. Es werden Beispiele für diegetische UIs betrachtet, bei denen UI-Elemente direkt in der Geschichte zu finden sind, so dass Teile der Spielwelt als Benutzeroberfläche fungieren. Es wird erklärt, wie Elemente zur Immersion des Spielers beitragen oder diese unterbrechen können. Wir haben diesen Abschnitt sogar in einen Blogbeitrag verwandelt, den Sie hier lesen können.

Der Leitfaden befasst sich dann mit den Aufgaben und Verantwortlichkeiten eines UI-Designers und den von ihm verwendeten Tools und Methoden, wie z. B. UI-Wireframing, künstlerische Gestaltung durch Mockups, Schriftarten und Greyboxing. Außerdem gibt es ein Kapitel über die Vorbereitung von Assets und den Export von Grafiken aus DCC-Tools ( Digital Content Creation ). Diese früheren Abschnitte des Leitfadens sind hilfreich, unabhängig davon, welche Spiel-Engine und UI-Lösung Sie verwenden.

Erweiterte Tipps zur Verwendung von Unity UI

Ein umfangreiches Kapitel ist der Unity UI gewidmet. Unity UI ist unser langjähriges System zur Erstellung von Benutzeroberflächen im Spiel und derzeit die beste Lösung für die Positionierung von Benutzeroberflächen in einer 3D-Welt oder die Verwendung von GameObjects-basierten Unity-Systemen.

Das Unity UI Samples-Asset verwendet GameObjects-basierte Elemente.
Das Unity UI Samples-Asset verwendet GameObjects-basierte Elemente.

In diesem Abschnitt werden die Unity UI-Grundlagen für das Prototyping und die Integration von Assets in den Editor erläutert: das Canvas, vorgefertigte UI-Elemente, TextMesh Pro und Prefabs, unter anderem. Wir haben kürzlich einen Artikel über fortgeschrittene Optimierungstechniken für Unity UI aktualisiert, in dem Sie Tipps zu verwandten Themen finden können.

Ausbau Ihrer Fähigkeiten mit dem sich entwickelnden UI Toolkit

UI Toolkit ist auf maximale Leistung und Wiederverwendbarkeit ausgelegt. Die Workflows und Autorenwerkzeuge basieren auf Standard-Webtechnologien. UI-Designer und -Gestalter werden es wahrscheinlich als vertraut empfinden, insbesondere wenn sie bereits Erfahrung mit der Gestaltung von Webseiten haben.

Drei Hauptabschnitte des Leitfadens enthalten Anweisungen für die Entwicklung von Runtime UI mit UI Toolkit. Es gibt eine gründliche Erklärung der Teile, aus denen sich die mit dem UI Toolkit erstellten UIs zusammensetzen, einschließlich der Unity Extensible Markup Language (UXML) und des Unity Style Sheet (USS) unter Verwendung von UI Builder.

Sie werden erkunden, wie UI Toolkit visuelle Elemente basierend auf Yogabasiert, einer HTML/CSS-Layout-Engine, die eine Teilmenge von Flexbox. Die Flexbox-Architektur bietet Vorteile, wie z. B. eine responsive Benutzeroberfläche, mit der Sie Ihre Benutzeroberfläche an verschiedene Bildschirmauflösungen und -größen anpassen können. Mithilfe von UXML und USS können Sie die auf UI-Layouts angewandten Stile entkoppeln (und diese Stile bei Bedarf ändern), während Logik und Funktionalität weiterhin im Code verbleiben. Die Arbeitsabläufe für visuelle Elemente, die grundlegenden Bausteine jeder Schnittstelle, werden ebenfalls ausführlich besprochen - von Positionierung, Größe und Ausrichtungseinstellungen bis hin zu Rändern und Auffüllungen.

Entkopplung von Logik und Design: Die Programmierer verbinden die visuellen Elemente mit der eigentlichen Spiellogik (unten dargestellt), während die Designer sich auf die Definition der Stile für diese Elemente konzentrieren (UI Builder oben).
Entkopplung von Logik und Design: Die Programmierer verbinden die visuellen Elemente mit der eigentlichen Spiellogik (unten dargestellt), während die Designer sich auf die Definition der Stile für diese Elemente konzentrieren (UI Builder oben).
Alles über Styling
Mit Übergangsanimationen können Sie zwischen den Stilen interpolieren.
Mit Übergangsanimationen können Sie zwischen den Stilen interpolieren.

Das Kapitel über Styling zeigt Ihnen, wie Sie mit Selektoren wiederverwendbare Stile für visuelle Elemente definieren, Stile außer Kraft setzen und eindeutige Attribute mit Inline-Stilen definieren sowie Animationen und Effekte mit USS-Animation und einer Kamera-Rendertextur erstellen. Es wird auch gezeigt, wie Sie UI-Elemente für Feiertage und andere besondere Ereignisse thematisieren können.

Dann kommt das E-Book ins Spiel UI-Toolkit-Beispiel - Dragon Crashersmit verschiedenen Abschnitten, die zeigen, wie die Benutzeroberfläche erstellt wurde: von den Menüs und benutzerdefinierten Steuerelementen wie radialen Zählern oder Registerkartenansichten bis hin zu eingebetteten UXML-Vorlagen und mehr.

Aus dem UI-Toolkit-Beispiel: Das Inventar, aufgefüllt mit ScriptableObject-Daten
Aus dem UI-Toolkit-Beispiel: Das Inventar, aufgefüllt mit ScriptableObject-Daten

Der Leitfaden schließt mit einem Miniprofil der Umstellung der Benutzeroberfläche des Studios Mechanistry auf UI Toolkit für ihr neues Spiel Timberborn ab. Diese kurze Studie zeigt, wie es dem schlanken Team gelungen ist, das Spiel über verschiedene Menüs und Bildschirme hinweg zu skalieren und konsistent zu halten.

Neue Ressourcen zur Verfeinerung der UI-Erstellung in Unity

Mit 137 Seiten ist das UI-E-Book keine leichte Lektüre. Wie bei den anderen technischen E-Books, die in diesem Jahr erschienen sind, sollten Sie es als ständiges Nachschlagewerk verwenden.

Neben dem E-Book finden Sie auch einige kürzlich veröffentlichte Ressourcen mit nützlichen Tipps zur Nutzung von Unity UI und UI Toolkit:

Die technischen E-Books sind alle nur einen Klick entfernt

Setzen Sie ein Lesezeichen für eine oder beide dieser Seiten. Sie stellen alle unsere technischen E-Books und fortgeschrittenen Inhalte zusammen:

Wir hoffen, dass Ihnen dieses neue E-Book gefällt und freuen uns auf Ihr Feedback in diesem Forum.

Promo-Artwork für das E-Book 'User interface design and implementation in Unity'.