6. diel - Unity (C #) Android: GUI - Menu 2

V minulej lekcii, Unity (C #) Android: GUI - Menu 1 , sme sa zaoberali vytváraním GUI kódom.

V dnešnom Unity tutoriále si ukážeme ďalšie možnosti ako vytvoriť herný menu. Už sme menu vytvárali pomocou kódu s trochou programovania, tentoraz si ho v podstate len naklikáte.

Pre tieto účely si vytvoríme novú scénu, ktorú si pomenujeme Menu2, a otvoríme ju.

Canvas

Aby sme si mohli pridať do našej hry pár tých tlačidiel, najskôr musíme do scény pridať Canvas. To je v podstate plátno, do ktorého vkladáme naše prvky bez zložitejšieho programovania a alebo čohokoľvek iného. Je to vlastne taká plochá obrazovka, ktorú do hry vložíme a na ktoré môžeme niečo zobrazovať.

Pravým tlačidlom klikneme do priestoru, kde sa nachádza Main Camera, ďalej UI a zvolíme Canvas:

Spoločne s Canvas sa nám pridá aj EventSystem. Ten ponecháme tak, ako je, a zatiaľ si ho všímať nemusíme.

Nastavenie Canvas

Najskôr si ale náš Canvas musíme nastaviť:

Render Mode

Render Mode nám hovorí, ako chceme, aby sa naše okno vykresľovali.

• Screen Space - Camera vykresľuje vždy na kameru. To znamená, že sa prvky "prichytí" ku kamere a hýbu sa rovnako ako sa hýbe kamera. To je vhodné napríklad na rôzne menu, ukazovatele zdravia a podobne.
• World space sa využíva napríklad keď chceme, aby sme niekde vo svete mali texty, obrázky a tak, aby boli prichytené na kameru.
• A vo finále tu máme Screen Space - Overlay. Tento mód funguje podobne ako Screen Space - Camera, ale namiesto "prichytenie sa" ku kamere jednoducho vykresľuje canvas na obrazovku, ako by pod ňou ani nebola žiadna hra. Od obrazu potom nejde nastaviť napr. Nejakú vzdialenosť alebo sklon, skrátka si kamery nevšíma.

My využijeme Screen Space - Camera. V Render Camera musíme určiť na akú kameru sa naše prvky prichytí.

Order in Layer

Ďalšia podstatná vec, ktorú môžeme využiť častejšie, je Order in Layer. Keďže môžeme mať Canvas prvkov teoreticky neobmedzene, tak nám toto číslo hovorí, ako sa majú cez seba zobrazovať. Čím menšie číslo, tým viac naspodku canvas bude.

UI Scale Mode

Ďalej, aby naša hra bola pekná na všetkých veľkostiach monitorov, musíme zariadiť, aby sa náš Canvas roztiahol ako potrebujeme. K tomu slúži UI Scale Mode, ktorý nastavíme na Scale With Screen Size. Tým sa Canvas roztiahne vždy na veľkosť monitora, na ktorom hra práve beží. To od menu tiež očakávame.

Referencie Resolution

Vo finále nastavíme Referencie Resolution na rozlíšenie nášho monitora. Tým len hovoríme, aká je referenčná veľkosť monitora. Pre naše účely teda postačí nastaviť naše rozlíšenie, aby sa nám pracovalo trochu pohodlnejšie:

Tlačidla

Keď už máme najdôležitejšie prvky nastavené, môžeme sa vrhnúť na pridanie tlačidiel:

Po kliknutí na Button sa nám zobrazí tlačidlo. Keď hru spustíme a klikneme, samozrejme zatiaľ nič nerobí.

Nastavenie tlačidla

Ak prejdeme do inšpektorovi nášho tlačidlá, môžeme si všimnúť pár nastavenia. Aby sme docielili rovnakého efektu ako v minulom menu, nastavíme si sprite Source Image na náš požadovaný sprite a následne si Transition nastavíme na Sprite Swap, ak už tak nie je nastavené. To nám zaručí, že sa budú meniť sprity pre rôzne akcie. Ďalej už stačí len zvoliť aký chceme Pressed Sprite.

Teraz, keď scénu spustíme a klikneme na naše tlačidlo, vidíme rovnaký grafický výsledok ako v minulom menu. Lenže stále sa nič nedeje.

Funkcie tlačidla

Ak sa pozrieme na samotný spodok Inspector tlačidlá, môžeme si všimnúť okienka s nadpisom On Click (). To je v podstate metóda, ktorá sa zavolá zakaždým, keď je na tlačidlo kliknuté. Ak klikneme na maličké "+" vpravo dole toho okienka, zobrazí sa nám možnosť nastaviť skript, ktorý sa má spustiť:

Pre tieto účely si vždy vytvoríme prázdne GameObjecty, ktoré pomenujeme podľa toho, aké skripty združujú a na tieto GameObjecty dávame skripty na tlačidlá.

Jeden takýto objekt si vytvoríme. Pomenujeme si ho ScriptObject:

Pripnite naň náš Reaction Script:

Zároveň, aby naše metódy v Reaction Script boli vidieť, musíme všetky prerobiť na public. Je to z toho dôvodu, že k našim metódam budeme pristupovať zvonku:

public void ClickedArcade()
{
    print("clicked Arcade");
}

public void ClickedSurvival()
{
    print("clicked Survival");
}

public void ClickedExit()
{
    print("clicked Exit");
}

Keď teraz prejdeme zas na tlačidlo, stačí náš ScriptObject vložiť do kolónky None (Object):

Ďalej klikneme na No Function a vyberieme si náš skript a požadovanej metódy:

Aby bolo všetko hotové, stačí už len zmeniť text tlačidla. To urobíme rozbalením nášho tlačidlá, kde uvidíme Text. Na ten klikneme a môžeme si nastaviť požadovaný text na našom tlačidle. Ak sa chceme vyblbnúť, môžeme si nastaviť ďalej i fonty, farby a podobne, nám ale postačí len text. Tlačidlo si pre prehľadnosť v scéne pomenujeme Arcade a tiež, aby nám názvy tlačidiel sedeli s minulým tutorialom. A máme hotovo.

Keď scénu spustíme, klikneme na tlačidlo môžeme vidieť, že sa nám do konzoly vypisuje požadovaný text zo skriptu. Takýmto spôsobom môžeme naprogramovať ľubovoľnej metódy s ľubovoľnou funkciou.

Proces zopakujeme pre zvyšné dve tlačidlá a výsledok máme úplne rovnaký:

Záver

Ešte neviem, aký spôsob vytvárania menu a GUI prvkov budem voliť do ďalších lekcií, ale je to v podstate jedno. Žiadny z ukázaných spôsobov nemá žiadne extra výhody ani nevýhody a niekto môže byť rád, keď si môže všetko vytvoriť sám kódom a mať všetko pod kontrolou. Týmto by som dnešné lekciu ukončil.