Canvas
Abbdilung 1: Canvas-Komponente
Jedwede Art von GUI-Element muss innerhalb eines Canvas liegen. Es kann mehrere dieser Canvasses geben. Sie haben eine rechteckige Form und sind ein GameObject mit der Canvas-Komponente darauf. Alle Objekte im Canvas werden in der "Transparent"-Render Queue gerendert.
Innerhalb eines Canvas wird das unterste Objekt im Vordergrund gerendert - die Reihenfolge ist der Hierarchie nach von hinten nach vorne. Das passiert auch unabhängig von der Z-Position. Zusätzlich haben UI-Komponenten, wie etwa Image, auch keine Sorting-Optionen, die man von der Sprite-Komponente gewohnt ist. Entsprechend ist die einzige Möglichkeit UI im Canvas zu sortieren ihr Index in der Hierarchie.
Außerhalb des Canvas verhält es sich wie ein einziger Sprite - egal wie viele Objekte unter dem Canvas liegen und auf welchen Positionen sie sich befinden. Für das Sortieren stehen entsprechende Sortieroptionen analog zum Sprite-Renderer zur Verfügung. Die Render-Reihenfolge von Canvas und Welt-Objekten wird dann noch weiter von den Canvas Render Modes beeinflusst.
Canvas Render Modes
Abbdilung 2: Canvas Render Modes
Die drei Render Modes sind:
- Screen Space - Overlay,
- Screen Space - Camera,
- World Space.
Grundsätzlich wird hier unterschieden, ob die UI in Screen oder World Space gerendered wird. Ersteres bedeutet auch, dass sich die Maße des Canvas basierend auf denen des Bildschirms verändern. Ein Screen Space Canvas probiert nämlich immer die gleichen Maße wie der Bildschirm anzunehmen. Das World Space Canvas hingegen hat eine feste Größe, die ihm manuell zugewiesen werden muss.
Screen Space - Overlay
In diesem Modus wird das Canvas nach dem Rendern der Szene über diese gelegt. Sie befindet sich also immer vor allen Objekten, die sich nicht innerhalb weiterer Overlay Canvasses befinden. Weil das Canvas so immer ganz oben gezeichnet wird, entfällt die Option "Sorting Layer" - es bleibt lediglich der Sortierwert zum Sortieren der Overlays untereinander.
Abbdilung 3: Das Canvas wird über den Button drüber gezeichnet
In Abbildung 3 sieht man einen in der Welt platzierten grünen Button. Im Kamera-Preview kann ihn ganz klar sehen - im Game View bleibt er jedoch verdeckt, weil das Overlay-Canvas am Ende über alles gelegt wird.
Diese Art von Canvas eignet sich meiner Meinung nach vor allem für Heads up Displays jedweder Art oder 3D-Spiele, da man sich dort auf der Z-Achse bewegt - was für die beiden folgenden Render-Modes relevant ist.
Screen Space - Camera
Im Modus "Camera" wird die UI in einer festen Distanz vor der zugewiesenen Kamera platziert. Diese Kamera ist dann auch für das Rendern der UI zuständig - entsprechend beeinflussen Kamera-Einstellungen (z.B. perspektivisch vs. orthografisch) das Canvas, ähnlich wie es der Bildschirm tut. Der Abstand zur Kamera und damit letztendlich die Z-Position des Canvas wird über den Parameter "Plane Distance" auf dem Canvas gesteuert (siehe Abbildung 1).
Dadurch entsteht der wichtigste Unterschied zum Overlay: Die Z-Position des Canvas ist nun für die Render-Reihenfolge der Szene relevant. Genauer gesagt können nun Objekte in der Welt vor der UI angezeigt werden, sollten sie sich näher an der Kamera befinden.
Abbdilung 4: Mit Screen Space Camera wird der Button sichtbar
Man kann in Abbildung 4 sehen, dass der grüne Button zwischen Kamera und Canvas liegt. Dementsprechend wird er in diesem Render-Modus vor dem Canvas angezeigt. Des Weiteren ist der Canvas-Inhalt jetzt im Kamera-Preview sichtbar, weil die Main Camera als Camera auf dem Canvas zugewiesen ist. Jedes Screen Space Camera Canvas wird nur von der zugewiesenen Kamera gesehen. Man könnte also kameraspezifische UI bauen.
Wichtig: Die Plane Distance beeinflusst nicht die Größe der UI. Sie ist abhängig von Bildschirm und Kamera. Am einfachsten lässt sich dieses Canvas also über die Plane Distance sortieren, was ebenfalls eine Visualisierung des Layerings im Scene View ermöglicht.
Abbildung 5: Ein zweites Canvas mit Buttons wurde hinzugefügt.
Im Scene View von Abbildung 5 ist sichtbar, dass das zweite Canvas mit den Buttons vor dem bisherigen Canvas liegt, aber immer noch hinter dem grünen Button in der Welt.
Screen Space Camera ist denke ich der beste Render-Mode für Spiele, in denen die Kamera eine feste Distanz zum Geschehen beibehält oder orthografisch ist. Bei Spielen mit Bewegung in die Tiefe besteht immer die Gefahr, dass unsere UI verdeckt wird, weswegen dieser Modus für 3D eher ungeeignet ist.
Wenn man trotzdem seine UI gegen die Welt sortieren möchte, kann man den nächsten Modus nutzen.
World Space
Ein World Space Canvas verhält sich wie jedes andere GameObject auch - wenn es näher an der Kamera ist wird es vorne gezeigt und wenn nicht, dann eben hinter anderen Sachen. Gängige Sortieroptionen bleiben weiterhin erhalten (Wert, Layer). Im Vergleich zu vorangegangenen Modi müssen Breite und Höhe des Canvas nun manuell gewählt werden - sie sind nicht mehr abhängig von Bildschirm oder Kamera. Des Weiteren beeinflusst die Nähe zur Kamera jetzt die Größe der UI-Elemente.
Abbildung 6: Das zweite Canvas wurde auf den Modus "World" gestellt
Abbildung 6 verdeutlicht, dass das Canvas nun wie ein wirkliches Weltobjekt funktioniert: Das zweite Canvas hat eine deutlich kleinere Größe als zuvor und ist damit auch kleiner als das erste Canvas. Durch die Nähe zur Kamera erscheint es trotzdem riesig.
World Space UI kann vor allem hilfreich sein, um sog. diegetische UI in Spielen mit variabler Tiefe zu erstellen. Ein beliebter Anwendungsfall sind Lebensbalken über den Köpfen von Einheiten in Echtzeitstrategie oder Aktion-Rollenspielen.