Basics
Unter Layering verstehe ich die Aufteilung von Objekten in Ebenen ("Layers"), insbesondere um Vordergrund und Hintergrund zu unterscheiden. Gerade für Dinge wie Alerts oder andere Arten von Pop-ups ist es für die UI wichtig, eine solche Sortierung über Layering sicherzustellen.
Abbildung 1: Der rote Alert sollte immer über allen anderen Elementen erscheinen.
Wie können wir also sicherstellen, dass unser Alert immer vorne ist, so wie es in Abbildung 1 zu sehen ist? Im Kapitel über das Canvas ging es bereits darum, wie man GameObjects innerhalb eines Canvas sortiert und dann wiederum Canvasses untereinander mittels Canvas-Render-Modes oder Sortieroptionen sortiert. Gegebenenfalls muss die UI sich auch noch gegen Objekte der Welt sortieren - das ist vor allem für Partikeleffekte interessant - weswegen es sinnvoll ist die Hierarchie und das Verhalten von Sortierfunktionen der Renderer zu kennen.
Abbildung 2: Die Komponente Sprite Renderer. Unten sieht man die Sortieroptionen.
Für Layering von transparenten Objekten (z.B. Canvas, Sprites) gilt folgende Hierarchie:
- Sorting Layer
- Sorting Wert
- Distanz zur Kamera (Transparenzachse; standardmäßig entlang Z)
Bedeutet also:
- Sind zwei Objekte auf dem gleichen Sorting-Layer?
- Ja - Sorting-Wert wird betrachtet.
- Nein - Das höhere Layer wird vorne angezeigt.
- Haben die Objekte den gleichen Sorting-Wert?
- Ja - Die Z-Position wird betrachtet.
- Nein - Der höhere Sorting-Wert ist vorne.
- Der geringere Z-Wert ist vorne.
Anmerkungen:
- Diese Hierarchie ist vereinfacht
Es gibt noch diverse andere Möglichkeiten Renderer zu sortieren. Die genaue Aufschlüsselung findet sich hier. - Es gibt standardmäßig 2 Render Queues "Opaque" und "Transparent", welche auch in dieser Reihenfolge sortiert werden.
Zur Erinnerung: Canvas und Sprites sind in der transparent Queue, - Die Transparenzachse kann man beliebig einstellen
z.B. auf Y an Stelle von Z. Das ist beispielsweise hilfreich für 2D Top-Down-Spiele.
Um die Sortierung von Weltobjekten zu erleichtern gibt es die Sorting Group, um welche es als nächstes geht.
Sorting Group
Abbildung 3: Die Komponente Sorting Group
Mit der Sorting Group gruppiert man ein GameObject und seine Childs als Einheit für das Rendern, ähnlich wie es das Canvas tut. Ein Beispiel dafür wäre ein Charakter, der aus mehreren, einzelnen Sprites besteht. Außerhalb der Gruppe gelten jetzt die Sortieroptionen bzw. die Z-Position des Gruppen-Parents für alle Childs. Innerhalb werden Renderer wiederum nach den für sie geltenden Regeln sortiert: Beispielsweise gelten für Sprites Sorting-Layer und Wert, während Z zugunsten der Hierarchie ignoriert wird (erneut, wie beim Canvas). Bei 3D-Renderern wird nach Z sortiert und bei gleichem Z-Wert der Hierarchie nach.
Abbildung 4: Sorting Group sortiert gegen Sprite
In Abbildung 4 sieht man beispielhaft die Anwendung einer Gruppe, um die drei kleinen Kreise zu gruppieren und diese gemeinsam gegen den grünen Kreis zu sortieren. Die Gruppe befindet sich vorne, da sie den höheren Sortierwert ( 1 gegen 0) hat. Innerhalb der Gruppe haben alle Kreise den gleichen Sortierwert, entsprechend werden die Kreise der Hierarchie nach sortiert. Diese Sortierung ist abweichend von den Z-Werten, da diese ignoriert werden.
Abbildung 5: Ein grauer Würfel wird einsortiert
Insbesondere bei 3D-Renderern ist wichtig, dass Sortieroptionen nur auf transparente Geometry angewendet werden. Wird der Render-Mode "Opaque" verwendet sortieren 3D-Renderer mit Sorting-Groups trotzdem über die Z-Position gegen andere Sorting-Groups. Wenn der richtige Render-Mode verwendet wird, kann man nun mit der Sprting-Group-Komponente einen Sortierwert zuweisen. Auf diese Weise landet der graue Würfel in Abbildung 5 zwischen den Elementen aus der vorherigen Abbilung 4.
Abschließend sind Sorting groups also für zwei Anwendungen besonders wichtig:
- Gruppieren von Objekten, die optisch eine Einheit sein sollen - z.B. Charakter aus mehreren Sprites,
- Anwendung von Sortieroptionen auf (transparente) 3D-Renderer.
Partikel in der UI
Partikeleffekte für die UI sind von Unity nicht von Haus aus unterstützt. Man kann zwar ein herkömmliches Partikelsystem an Childs eines Canvas hängen, aber das Sortieren funktioniert leider nicht korrekt:
Abbildung 5a: Partikelsystem als Child des grünen Play-Buttons
Abbildung 5b: Hierarchie zu 5a
In Abbildung 5a sehen wir, dass die Partikel nicht nur hinter den UI Elementen des Parent-Canvas "Foreground" verschwinden, sie liegen auch hinter dem darunterliegenden Canvas "Background".
Besser ist es Partikelsysteme in der Welt zu belassen. Dann kann man sie auch einfacher gegen die UI sortieren, in dem man den richtigen Canvas Render Mode wählt (siehe Canvas).
Abbildung 6a: Szenen-Ansicht des Screen Space Camera Setups
Abbildung 6b: Ansicht im Spiel
Für die Abbildung 6a habe ich die beiden Canvasses auf "Screen Space - Camera" umgestellt und das Partikelsystem dazwischen geschoben. Im Gameview (Abbildung 6b) tauchen die Partikel nun ordnungsgemäß zwischen Vorder- und Hintergrund-Canvas auf. Bei diesem Setup entsteht natürlich die Schwierigkeit, dass man das Partikelsystem korrekt platzieren muss. Das Ganze für statische Elemente per Hand aufzusetzen erscheint noch machbar, aber sobald Dinge dynamisch werden (Bildschirmgrößen bei Mobile, Partikelsysteme dynamisch instanziieren) braucht es ein selbstgeschriebenes System.
Um sich das Layouting zu erleichtern, kann man die Partikel trotzdem im Canvas belassen und auf ein Rendertextur-Setup zurückgreifen.
[Beispiel]
Hier werden die Partikel von einer separaten Kamera gerendert, deren Bild dann auf der Rendertextur angezeigt wird.
Zuletzt noch ein sehr gutes Package, was neben dem Rendertextur Ansatz auch noch andere Lösungen bietet: hier.
Anmerkung: Ein weiterer Grund warum Partikel besser nicht in der UI sein sollten ist Performance. Partikelsysteme sind konstant in Bewegung und würden das Canvas immer wieder neu zeichnen lassen (mehr dazu im Kapitel Performance).