A UI (User Interface) vagy GUI (Graphical User Interface) a felhasználóval való interakciót lehetővé tevő grafikus felületet jelenti.
A UI-nak két fő szerepe van…
- Tájékoztatás: A UI segíti a felhasználókat abban, hogy információt nyerjenek a játék állapotáról , működéséről, funkcióiról és az egyes opcióikról. Pl.: Életcsík, Csapatszín, Lőszerek száma…
- Interaktivitás: A UI lehetővé teszi a felhasználók számára, hogy egyszerűen és intuitívan interakcióba lépjenek a játék funkcióival. Pl.: Gombok, Legördülő menük, Beállítások,
Egy UI úgynevezett komponensekből vagy elemekből épül fel A főbb UI Elemek:
- Image / Kép
- Text / Szöveg
- TextField / Szövegmező (Szerkeszthető)
- Button / Gomb
- Dropdown / Pupup / Legördülő menü
- Checkbox / Jelölőnégyzet
- Slider / Csúszka
A UI elemek egy hierarchiában helyezkednek el, amely azt jelenti, hogy egymásba vannak ágyazva. A hierarchia szülő-gyerek viszonyai segítségével lehetőség van a UI elemek elrendezésének és méretének szabályozására.
Minden UI elemet egy 2D téglalap határoz meg. Ha A. egy UI elem egy gyereke, egy másik B. UI elemnek.
Ezen hierarchia gyökerében, legfelül, a Canvas szerepel. Az egyes UI elemek, mid egy Canvas objektumon belül vannak elhelyezve.
A Rect és a RectTransform
A Rect egy típus, ami egy 2D síkon téglalapot (Rectangle) reprezentál. Ezt a téglalapot egy pozíció és egy méret ír le. Mindkét mező Vector2 típusú. A rect típust leggyakrabban a UI elemek méretének és pozíciójának meghatározására használjuk.
A RectTransform komponenst egy speciális fajta Transform. (A RectTransform a Transform osztályból származik le örökléssel: 
Ahogy egy Transform egy pozíciót határoz meg a térben elforgatással és skálázással együtt, úgy egy a RectTransform ugyanezt teszi, és emellett egy 2D téglalap alapú térrészt is meghatároz a síkban.
Ha egy RectTransform komponenssel rendelkező GameObject szülőjének is van egy RectTransform-ja, akkor a szülő pozíciója és mérete befolyásolni fogja a gyerek objektum pozícióját és méretét.
A gyakorlatban ez azt jelenti, hogy ha egy szülő UI elem mérete nő vagy csökken, akkor a gyerekei mérete bizonyos szabály szerint követheti fogja őket.
(Az itt említett méret különbözik a Transform-ról már megszokott Scale értéktől. A scale még ezen felül tudja szorozni a RectTransform komponensek méretét.)
A RectTransform beállítása
Ahhoz hogy megértsük a RectTransform beállítását induljunk egy egyszerű kiinduló állapotból, ahol a gyerek RectTransform teljes mértékben leköveti a szülője alakját. Ebben az esetben így néz ki a komponens:
Látszik, hogy a Rotation és a Scale beállítások ugyanúgy jelen vannak, mint eddig is sőt a loális pozíció z koordinátája azaz az előre vagy hátra eltolás is elérhető. Ám a pozíció x és y koordinátája helyett bekerültek új eddig ismeretlen beállítások.
Anchor: A horgony⚓
A szülő obejktumon belüli befoglaló téglalapot határoz meg a szülőn belül, aminek oldalait a szülő teljes méretéhez képest adjuk meg. Ezt a lenti képen kisháromszög alakú mutatók jelzik.
Ezen téglalap (későbbiekben: Anchor-Rect) arányszámokkal adható meg a szülő méretéhez képest. Ezen területen belül lesz értelmezve a gyerek objektum többi beállítás.
Nevezetes Anchor beállítások:
….
Left, Right, Top, Bottom:
Akkor látszanak ezen beállítások, hogyha NEM egyezik az anchor minimum és maximum pontjának megfelelő komponense: (Strech)
Pos X, Pos Y, Width, Height
Mi a téglalap pozíciója a és Anchor-Rect-en belül és mekkora a mérete.
Akkor látszanak ezen beállítások, hogyha egyezik az anchor minimum és maximum pontjának megfelelő komponense.
A fenti beállításokat (Left, Right, Top, Bottom, Pos X, Pos Y, Width, Height) igazából nem így tárolja el a Unity Más adatokból számolja ki őket és le sem kérhetők kódból. Mégis azért ezeket ezt jeleníti meg az Editor, mert kicsit intuitívabb bánni velük. Helyettük az Anchored Position és a SizeDelta a valóban szerializált adta, ami le is kérdezhető a programkódban
Anchored Position:
Mennyire van eltolva a gyerek pozíciója a szülő Anchor-Rect téglalapjának közepéhez képest.
SizeDelta
Mennyiben különbözik a gyerek mérete a szülő Anchor-Rect-jéhez képest.