UI in Unity

UI

UI steht generell als Kurzform von User Interface. Im Kontext von Unity bezeichnet der Begriff UI allerdings eine von Unity spezifisch vorgegebene Interaktionsstruktur, die mit Buttons, Textfeldern und ähnlichem arbeitet, und sich im Code von den meisten anderen Interaktionen unterscheidet. Der Hauptunterschied besteht im von Unity vorgegebenen Interaktionsmodus durch UI Elemente und die Unterschiede in der Art der Darstellung auf dem Bildschirm.

UI Elemente hinzufügen

Unity UI Elemente sind GameObjects die man in der Hierarchy über den Unterpunkt UI erstellen kann.

Es stehen eine Reihe von Elementen zur Auswahl. Wir werden uns auf dieser Seite hauptsächlich mit den Elementen Button (TextMeshPro) und Text (TextMeshpro) beschäftigen.

Kurze Erklärung zu TextMeshPro

Unity ist in den letzten zehn Jahren enorm schnell gewachsen und hat oft Code-Elemente, die von Menschen ausserhalb der Firma erstellt wurden über Zeit in den eigenen Code übernommen. TextMeshPro ist so ein Fall, in dem besserer Code zur Darstellung von texten in unity eingeflossen ist. Unity muss allerdings nun den von ihnen selbst erstellten sowie den zugekauften Code weiter anbieten, was dazu führt, dass man als Nutzer*in die Auswahl aht, für welche dier beiden zur Verfügung gestellten Varianten man sich entscheiden möchte.

Wir wollen uns im Zweifel immer für TextMeshPro entscheiden, da der Text schöner dargestellt wird.
Wenn ihr das erste Mal aus der Hierarchy ein GameObject mit dem Zusatz (TextMeshPro) erstellt, ploppt folgender Dialog auf, bei dem ihr auf beide Knöpfe klicken könnt:

Das Canvas Konzept

Alle in Unity genutzten UI Elemente werden einem sogenannten Canvas Objekt zugeordnet, einer Art Leinwand, die über der Szenen auf den Bildschirm gespannt ist. Wenn wir in der Hierarchy einen neuen Button erstellen, erstellt Unity auch gleich ein Canvas Object sowie ein EventSystem (über letzteres werde wir uns im Rahmen des Studiengangs nur peripher unterhalten).

UI Elemente werden relativ zu diesem Canvas positioniert und dargestellt (gerendert) und unterliegen dem Koordinatensystem, das durch den Canvas vorgegeben ist. Für gewöhnlich sind sie daher unabhängig von der Position und Rotation der Kamera in der Szene immer am selben Ort auf dem Bildschirm. Deswegen müssen UI Elemente in der Hierarchy in Unity auch immer unter einem Canvas Objekt auftauchen.
Das Koordinatensystem des Canvas Objekts wiederum orientiert sich an der Auflösung des Bildschirms, wie in der Game View eingestellt.

Da man sich der Auflösung der Endgeräte zu Beginn eines Projektes nicht immer sicher sein kann, und Unity von sich aus vorsieht, dass die Nutzer*innen ihre Auflösung auch selbst einstellen können (kommt bei uns seltener vor), bietet uns Unity durch die Nutzung des Canvas Konzeptes an, dass wir verschiedene UI Elemente relativ zu den Ecken des Bildschirms positionieren können. Hierfür ändert Unity den uns bekannten Transform Component in ein RectTransform Component (der allerdings von Transform abgeleitet ist, so dass wir per Script weiterhin wie gewohnt auf transform.position zugreifen können):

Unterschiede in Koordinaten

Wie ihr gut erkennen könnt, sind die Zahlen, die in diesem Component die Position des GameObjects beschreiben deutlich anders, als die von uns bisher genutzten. Während wir bei unseren bisherigen Übungen für gewöhnlich Koordinaten zwischen 1 und 10 oder -1 und -10 für die x, y und z Werte genutzt haben, stehen hier plötzlich zahlen in der Grösse von 100 und 1000. Das hat damit zu tun, dass die Koordinaten bei Rect Transform als Bildschirmkoordinaten interpretiert werden, wobei eine Koordinate von 1 genau einen Pixel beschreibt. Zum Vergleich: in unserer Unity Szene beschreibt eine Koordinate von 1 für gewöhnlich die Distanz von einem Meter.

Darstellung in Scene View und Game View

Wenn wir zwischen der Unity Scene View und der Game View hin und her schalten, stellen wir fest, dass unser Button in der Game View zwar an einem sinnvollen Punkt dargestellt wird, in unserer Scene View Allerdings nichts von ihm zu sehen ist. Stattdessen sehen wir eine seltsame Linie mit Ecke:

Relatives Ausrichten der UI Elemente

Durch klicken auf das Piktogramm links bei RectTransform können wir bestimmen, wie Unity die relative Position unseres UI Elements bestimmen soll:

Mehr informationen hierzu findet ihr in der Unity Gebrauchsanweisung für UI Elemente.

Nachdem wir einen Button (TextMeshPro) in Unity hinzugefügt haben, sollte unsere Szene ungefähr so aussehen: