Lekce 7 - Unity (C#) Android: GUI - Menu 2

V minulé lekci, Unity (C#) Android: GUI - Menu 1, jsme se zabývali vytvářením GUI kódem.

V dnešním Unity tutoriálu si ukážeme další možnosti jak vytvořit herní menu. Již jsme menu vytvářeli pomocí kódu s trochou programování, tentokrát si jej v podstatě jen naklikáme.

Pro tyto účely si vytvoříme novou scénu, kterou si pojmenujeme Menu2, a otevřeme ji.

Canvas

Abychom si mohli přidat do naší hry pár těch tlačítek, nejdříve musíme do scény přidat Canvas. To je plátno, do kterého vkládáme naše prvky bez programování. Je to vlastně taková placatá obrazovka, kterou do hry vložíme a na které můžeme něco zobrazovat.

Klikneme pravým tlačítkem do prostoru okna Hierarchy a zvolíme UI->Canvas:

Společně s Canvas se nám přidá i EventSystem. Ten ponecháme tak, jak je, a prozatím si ho všímat nemusíme.

Nastavení Canvas

Nejdříve si ale náš Canvas musíme nastavit:

Render Mode

Render Mode nám říká, jak chceme, aby se naše okno vykreslovalo.

• Screen Space - Camera vykresluje vždy na kameru. To znamená, že se prvky "přichytí" ke kameře a hýbou se stejně jako se hýbe kamera. To je vhodné například na různá menu, ukazatele zdraví a podobně.
• World space se využívá například když chceme, abychom někde ve světě měli texty, obrázky a tak, aniž by byly přichycené na kameru.
• A ve finále tu máme Screen Space - Overlay. Tento mód funguje podobně jako Screen Space - Camera, ale místo "přichycení se" ke kameře jednoduše vykresluje canvas na obrazovku, jako by pod ní ani nebyla žádná hra. Od obrazu pak nejde nastavit např. nějakou vzdálenost nebo sklon, zkrátka si kamery nevšímá.

My využijeme Screen Space - Camera. V Render Camera musíme určit na jakou kameru se naše prvky přichytí.

Order in Layer

Další podstatná věc, kterou můžeme využít častěji, je Order in Layer. Jelikož můžeme mít Canvas prvků teoreticky neomezeně, tak nám toto číslo říká, jak se mají přes sebe zobrazovat. Čím menší číslo, tím více vespod canvas bude.

UI Scale Mode

Dále, aby naše hra byla hezká na všech velikostech monitorů, musíme zařídit, aby se náš Canvas roztáhl jak potřebujeme. K tomu slouží UI Scale Mode, který nastavíme na Scale With Screen Size. Tím se Canvas roztáhne vždy na velikost monitoru, na kterém hra právě běží. To od menu také očekáváme.

Reference Resolution

Ve finále nastavíme Reference Resolution na rozlišení našeho monitoru. Tím jen říkáme, jaká je referenční velikost monitoru. Pro naše účely tudíž postačí nastavit naše rozlišení, aby se nám pracovalo trochu pohodlněji:

Tlačítka

Když již máme nejdůležitější prvky nastavené, můžeme se vrhnout na přidání tlačítek:

Po kliknutí na Button se nám zobrazí tlačítko. Když hru spustíme a klikneme, samozřejmě zatím nic nedělá.

Nastavení tlačítka

Pokud přejdeme do inspektoru našeho tlačítka, můžeme si povšimnout pár nastavení. Abychom docílili stejného efektu jako v minulém menu, nastavíme si sprite Source Image na náš požadovaný sprite a následně si Transition nastavíme na Sprite Swap, pokud již tak není nastaveno. To nám zaručí, že se budou měnit sprity pro různé akce. Dále již stačí pouze zvolit jaký chceme Pressed Sprite.

Teď, když scénu spustíme a klikneme na naše tlačítko, vidíme stejný grafický výsledek jako v minulém menu. Jenže stále se nic neděje.

Funkce tlačítka

Pokud se podíváme na samotný spodek Inspectoru tlačítka, můžeme si všimnout okénka s nadpisem On Click(). To je metoda, která se zavolá pokaždé, když je na tlačítko kliknuto. Pokud klikneme na malinké "+" vpravo dole toho okénka, zobrazí se nám možnost nastavit skript, který se má spustit:

Pro tyto účely si vždy vytvoříme prázdné GameObjecty, které pojmenujeme podle toho, jaké skripty sdružují a na tyto GameObjecty dáváme skripty na tlačítka.

Jeden takovýto objekt si vytvoříme. Pojmenujeme si ho ScriptObject:

Připneme na něj náš Reaction Script:

Zároveň, aby naše metody v Reaction Scriptu byly vidět, musíme všechny předělat na public. Je to z toho důvodu, že k našim metodám budeme přistupovat zvenku:

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

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

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

Když nyní najedeme zas na tlačítko, stačí náš ScriptObject vložit do kolonky None (Object):

Dále klikneme na No Function a vybereme si náš skript a požadovanou metodu:

Aby bylo vše hotovo, stačí již jen změnit text tlačítka. To uděláme rozbalením našeho tlačítka, kde uvidíme Text. Na ten klikneme a můžeme si nastavit požadovaný text na našem tlačítku. Pokud se chceme vyblbnout, můžeme si nastavit dále i fonty, barvy a podobně, nám ale postačí jen text. Tlačítko si pro přehlednost ve scéně pojmenujeme Arcade a také, aby nám názvy tlačítek seděly s minulým tutoriálem. A máme hotovo.

Když scénu spustíme, klikneme na tlačítko můžeme vidět, že se nám do konzole vypisuje požadovaný text ze skriptu. Takovýmto způsobem můžeme naprogramovat libovolné metody s libovolnou funkcí.

Proces zopakujeme pro zbývající dvě tlačítka a výsledek máme naprosto stejný:

Závěr

Ještě nevím, jaký způsob vytváření menu a GUI prvků budu volit do dalších lekcí, ale je to v podstatě jedno. Žádný z ukázaných způsobů nemá žádné extra výhody ani nevýhody a někdo může být rád, když si může vše vytvořit sám kódem a mít vše pod kontrolou. Tímto bych dnešní lekci ukončil.

V příští lekci, Unity (C#) Android - MenuPart, Eraser a pozadí, se budeme zabývat odstraňováním již zdolaných překážek a také nekonečným opakováním pozadí. Přidáme i další herní menu.