Unity UI-System

Unitys UI-System umfasst drei Hauptansätze – UGUI (Canvas-basiert), IMGUI (code-basiert, Editor-Tools) und UI Toolkit (CSS-inspiriert) – für die Erstellung von Menüs, HUDs und Spieloberflächen.

Rubrik: Game Design & Interactive Media · Unterrubrik: Game Engines · Niveau: Fortgeschritten

Synonyme / Auch bekannt als: Unity GUI, UGUI, UI Toolkit, uGUI, Unity Canvas System

Was ist das Unity UI-System?

Unity hat im Lauf seiner Geschichte mehrere UI-Systeme entwickelt und bereitgestellt. Das Hauptsystem für Runtime-UI (Spielmenüs, HUDs, In-Game-Oberflächen) ist seit Unity 4.6 das Canvas-basierte UGUI. Daneben existiert das ältere IMGUI (Immediate Mode GUI), das primär für Editor-Tools genutzt wird, sowie das neuere UI Toolkit, das perspektivisch UGUI ablösen soll.

Das Verständnis aller drei Systeme ist für professionelle Unity-Entwicklung relevant, da Projekte oft Kombinationen nutzen.

Erklärung

UGUI – Unity's Canvas-basiertes UI

UGUI (ausgesprochen „U-GUI", für Unity Graphic User Interface) wurde 2014 mit Unity 4.6 eingeführt und ist bis heute das Standard-Runtime-UI-System. Es basiert auf dem Canvas-Konzept.

Canvas: Jedes UI-Element in UGUI muss Kind eines Canvas-GameObjects sein. Der Canvas ist die Zeichenfläche für alle UI-Elemente. Es gibt drei Render-Modi:

• Screen Space – Overlay: Das UI wird direkt auf dem Bildschirm gerendert, immer vor der 3D-Welt. Standard für Menüs und HUDs.
• Screen Space – Camera: Das UI ist einer Kamera zugewiesen und wird in deren Render-Ebene gezeichnet. Erlaubt Post-Processing-Effekte auf dem UI.
• World Space: Das Canvas ist ein 3D-Objekt in der Spielwelt. Nützlich für Namenschilder über Charakteren, In-World-Bildschirme.

Basis-Komponenten:

• RectTransform: Erweitert Transform um 2D-Anchoring und Pivoting. Zentral für Responsive UI.
• Image: Zeigt Sprites oder Farben.
• Text (TextMeshPro): TextMeshPro ist seit Unity 2019 der Standard für Text-Rendering (bessere Qualität als altes Text).
• Button: Klick-interaktives Element mit OnClick-UnityEvent.
• Slider, Toggle, Dropdown, InputField: Standard-Formular-Elemente.
• ScrollView/ScrollRect: Scroll-Container.

Canvas Scaler: Bestimmt, wie das UI auf verschiedene Bildschirmauflösungen skaliert. Der Modus „Scale With Screen Size" mit einer Referenzauflösung (z. B. 1920×1080) ist Best Practice für Spiele mit mehreren Auflösungen.

Layout-Gruppen: HorizontalLayoutGroup, VerticalLayoutGroup, GridLayoutGroup ordnen UI-Kindelemente automatisch an – nützlich für Inventar-Grids, Menülisten, Statistik-Panels.

IMGUI – Immediate Mode GUI

IMGUI ist Unitys ältestes UI-System. Es ist Code-Only: UI-Elemente werden nicht im Editor platziert, sondern in einer OnGUI()-Methode in einem MonoBehaviour-Skript gerendert. Jedes Frame wird die gesamte UI von Grund auf neu gezeichnet.

``csharp void OnGUI() { if (GUI.Button(new Rect(10, 10, 150, 30), "Klick mich")) { Debug.Log("Button geklickt"); } GUI.Label(new Rect(10, 50, 300, 20), "Spieler HP: " + playerHP); } ``

IMGUI ist für Produktions-Spiel-UIs nicht empfohlen (schwache Performance, schlechte Skalierung), aber unverzichtbar für:

• Custom Editor-Fenster (Editor-Tools, Debugging-Panels)
• ScriptableObject-Inspektoren
• Schnelle Prototyp-UIs während der Entwicklung

UI Toolkit (UIElements)

UI Toolkit ist Unitys modernes, zukunftsorientiertes UI-System, das auf Konzepten aus dem Web-Entwicklungsbereich basiert. Statt GameObject-Hierarchien nutzt es:

• UXML: Deklarative Markup-Sprache (ähnlich HTML) für UI-Struktur.
• USS (Unity StyleSheets): CSS-ähnliche Stylesheets für Aussehen und Layout.
• C# Code-Behind: Interaktionslogik in C#.

``xml <!-- Beispiel UXML --> <ui:UXML xmlns:ui="UnityEngine.UIElements"> <ui:VisualElement class="container"> <ui:Label text="Willkommen!" class="title"/> <ui:Button text="Spiel starten" name="start-button"/> </ui:VisualElement> </ui:UXML> ``

UI Toolkit wurde zunächst für den Unity Editor selbst entwickelt (Unity nutzt es intern für seine eigene Benutzeroberfläche) und ist seit Unity 2021 LTS auch für Runtime-Spiel-UI stable. Es bietet Performance-Vorteile durch besseres Batching und einen moderneren Rendering-Ansatz als UGUI.

Für neue Projekte in Unity 2021+ empfiehlt Unity offiziell UI Toolkit, aber UGUI ist weiterhin vollständig supported und in der Community deutlich populärer.

Beispiele

• HUD in Unity-Spielen: Lebenspunkte-Balken, Minimap, Ammo-Counter – klassisch in UGUI mit Canvas Overlay.
• Hauptmenü: Canvas im Screen-Space-Overlay mit vertikal angeordneten Buttons (VerticalLayoutGroup).
• Inventar-System: Grid-Layout mit dynamisch instanziierten Item-UI-Prefabs.
• Editor-Tools: Custom Inspector und Editor-Fenster für Level-Designer in IMGUI oder UI Toolkit.

In der Praxis

Best Practices für UGUI:

1. TextMeshPro statt Legacy Text – schärfere Schrift, bessere Skalierung.
2. Canvas aufteilen: UI in mehrere Canvases unterteilen, die sich selten ändern (statisches HUD) von denen, die häufig aktualisiert werden (Punktestand). Unity re-batcht einen ganzen Canvas bei Änderungen.
3. Raycasting deaktivieren auf UI-Elementen, die nicht interaktiv sind (Image-Komponente → Raycast Target aus).
4. Sprite Atlas nutzen: UI-Sprites in Atlas-Texturen zusammenfassen, um Draw Calls zu reduzieren.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Sollte ich für neue Projekte UGUI oder UI Toolkit verwenden? Für Unity 2021 LTS und neuer ist UI Toolkit die zukunftsorientierte Wahl. UGUI ist stabil, gut dokumentiert und hat mehr Community-Ressourcen. Für Teams mit UGUI-Erfahrung lohnt ein Wechsel zu UI Toolkit erst bei neuen Projekten.

Was ist TextMeshPro? TextMeshPro (TMP) ist ein fortschrittliches Text-Rendering-Plugin für Unity, das Signed Distance Field (SDF)-Texturierung nutzt. Es liefert scharfe Schrift bei jeder Skalierung und unterstützt Rich Text, Custom Shader und Localization-Features. Es ist seit Unity 2018 Bestandteil von Unity.

Wie funktioniert Responsive UI in Unity? RectTransform-Anchors definieren, wie UI-Elemente bei verschiedenen Bildschirmgrößen skalieren und positionieren. Canvas Scaler mit „Scale With Screen Size" sorgt für einheitliche Skalierung basierend auf Referenzauflösung.

Kann UGUI und UI Toolkit im selben Projekt gemischt werden? Ja, beide Systeme können koexistieren. Viele Projekte nutzen UGUI für Spiel-UI und UI Toolkit für Editor-Tools.

Verwandte Einträge

• Unity Engine
• ShaderGraph und UE5 Material Editor
• Game Engine – Grundlagen

Weiterführend

• Unity Technologies: Unity UI User Guide (UGUI). docs.unity3d.com, 2024.
• Unity Technologies: UI Toolkit Manual. docs.unity3d.com, 2024.
• Thorn, Alan: Unity UI Cookbook. Packt Publishing, 2015.
• Ferrone, Harrison: Learning C# by Developing Games with Unity. Kapitel UI Systems. Packt Publishing, 2023.