5. diel - Unity (C #) Android: GUI - Menu 1

Dnes sa pozrieme na herné menu. V tomto Unity tutoriálu sa pozrieme na dva spôsoby ako menu naprogramovať.

Príprava scény pre menu

Vytvoríme si novú scénu a uložíme si ju ako Menu1.

Reaction

Ďalej si v tejto scéne vytvoríme gameObject, ktorý si pomenujeme Reaction. Následne na tento objekt pridáme skript ReactionScript. Tento skript bude obsahovať čo sa má stať, keď sa na jednotlivé tlačidlá v menu klikne. Zo skriptu si odmazať metódy Start() a Update(). A vytvoríme jednotlivé metódy pre rôzne tlačidlá:

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

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

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

Hra bude mať teda 2 módy:

• Arcade a
• Survival.

Zatiaľ budeme kliknutím na tlačidlá iba volať výpis do konzoly. Objekt Reaction si uložíme do Prefab, aby sme ho mohli ľahko použiť aj v ďalšej lekcii.

Hlavná kamera

Hlavné kamere pridáme nový skript, ktorý si pomenujeme OnGUIScriptMenu. Opäť odmazať metódy Start() i Update().

Na vytváranie grafického užívateľského rozhrania budeme využívať Unity metódu OnGUI(). S touto metódou si ukážeme dva rôzne prístupy ako môžeme vytvoriť menu a alebo akýkoľvek iný GUI prvok. Preto si do skriptu pridáme 2 ďalšie metódy:

public class OnGUIScriptMenu : MonoBehaviour
{
    public bool useLayout;
    void OnGUI()
    {
        if (useLayout)
            GUIUseLayout();
        else
            GUIDontUseLayout();
    }

    // budeme využívat GUILayout
    void GUIUseLayout()
    {

    }

    // nebudeme využívat  GUILayout
    void GUIDontUseLayout()
    {

    }
}

Ako asi tušíte, metóda GUIUseLayout() sa uplatní v prípade, že zvolíme tvorbu menu pomocou GUILayout, viď ďalej. A metóda GUIDontUseLayout() sa spustí v opačnom prípade. Naučíme sa tak oba spôsoby a vy si budete môcť zvoliť, ktorý vám viac vyhovuje.

GUILayout

Začneme so spôsobom, kde využijeme triedu GUILayout. Kód príslušné metódy bude nasledujúci:

void GUIUseLayout()
{
    // počáteční area, obaluje celý screen, umožňuje nám pozicovat
    // pomocí GUILayout pozicovacích příkazů
    GUILayout.BeginArea(new Rect(0, 0, Screen.width, Screen.height));

    // vyplní místo maximální možnou mezerou
    GUILayout.FlexibleSpace();

    GUILayout.BeginHorizontal();

    GUILayout.FlexibleSpace();
    GUILayout.BeginVertical();

    // funkce GUILayout.Button() vrací bool, což znamená, že ho můžeme dát
    // rovnou do podmínky
    if (GUILayout.Button("Survival", GUILayout.Width(300), GUILayout.Height(100)))
    {

    }

    if (GUILayout.Button("Arcade", GUILayout.Width(300), GUILayout.Height(100)))
    {

    }

    if (GUILayout.Button("Exit", GUILayout.Width(300), GUILayout.Height(100)))
    {

    }


    GUILayout.EndVertical();

    GUILayout.FlexibleSpace();
    GUILayout.EndHorizontal();

    GUILayout.FlexibleSpace();

    GUILayout.EndArea();
}

Môžete si všimnúť, že názvy niektorých metód začínajú na Begin a End. To sú párové metódy. Je to podobné ako napríklad u HTML. Ak použijeme funkciu začínajúcich Begin, musíme jej aj niekde v kóde ukončiť variantou začínajúce na End.

GUISkin

Samozrejme nechceme, aby naše menu vyzeralo obyčajne. Preto mu pridáme skin.

Skin v kóde

Založíme si v triede novú premennú uchovávajúce GUISkin:

public GUISkin menuSkin;

Skin nastavíme priamo v metóde OnGUI():

GUI.skin = menuSkin;

Skin v Assets

Skin sme nastavili, ale ešte neexistuje. Preto ho musíme v Unity vytvoriť. V Assets klikneme klasicky pravým tlačidlom myši -> Create -> GUISkin. Pomenujeme si ho menuSkin. Keďže používame iba tlačidlá, tak si v menuSkin nájdeme Button, rozbalíme a podľa ľubovôle si môžeme čokoľvek upraviť. Ja upravím iba Normal a Hover. Teda len normálny stav tlačidla a stav ak cez neho prejdeme myšou. Náš vytvorený skin nesmieme zabudnú vložiť do nášho skriptu na kamere. Už hotové sprity na tlačidlá nájdete v súboroch na stiahnutie. Záujemcovia si môžu samozrejme vytvoriť svoje vlastné sprity.

Ak zapneme hru a budeme prechádzať cez tlačidlá, môžeme vidieť, ako sa mení ich vzhľad.

Reakcie na kliknutie

Pokiaľ na tlačidlo klikneme, nič sa nestane, pretože všetky naše metódy pre tlačidlá máme v skripte ReactionScript, teda sa na neho nejako musíme odkázať.

To môžeme urobiť jednoducho tak, že vytvoríme novú premennú s týmto skriptom:

public ReactionScript reaction;

Takto sa môžeme ľahko odkazovať na rôzne skripty a ich metódy alebo premenné. My využijeme metódy z tohto skriptu, ktoré sa spustí po kliknutí na príslušné tlačidlo. Predpripravený kód teda doplníme volaním metód v ReactionScript:

if (GUILayout.Button("Survival", GUILayout.Width(300), GUILayout.Height(100)))
{
    reaction.SendMessage("ClickedSurvival");
}

if (GUILayout.Button("Arcade", GUILayout.Width(300), GUILayout.Height(100)))
{
    reaction.SendMessage("ClickedArcade");
}

if (GUILayout.Button("Exit", GUILayout.Width(300), GUILayout.Height(100)))
{
    reaction.SendMessage("ClickedExit");
}

Takto môžeme pozicový s využitím GUILayout. Výsledok vyzerá viac ako uspokojivo:

Bez GUILayout

Na záver si ukážeme aj ako vytvoriť herný menu bez využitia GUILayout:

void GUIDontUseLayout()
{
    // funkce pro vytvoření okna s callback funkcí WindowFunc
    GUI.Window(0, CenterRect(320, 350), WindowFunc, "");
}

// metoda, která nám vrátí vycentrovaný Rect o správné velikosti
Rect CenterRect(int width, int height)
{
    Rect r = new Rect();
    r.width = width;
    r.height = height;

    r.x = Screen.width / 2 - width / 2;
    r.y = Screen.height / 2 - height / 2;

    return r;
}

// Callback funkce, která slouží k vykreslení obsahu uvnitř okna
void WindowFunc(int id)
{
    if (GUILayout.Button("Survival", GUILayout.Width(300), GUILayout.Height(100)))
    {
        reaction.SendMessage("ClickedSurvival");
    }

    if (GUILayout.Button("Arcade", GUILayout.Width(300), GUILayout.Height(100)))
    {
        reaction.SendMessage("ClickedArcade");
    }

    if (GUILayout.Button("Exit", GUILayout.Width(300), GUILayout.Height(100)))
    {
        reaction.SendMessage("ClickedExit");
    }
}

V kód voláme metódou Window():

GUI.Window(0, CenterRect(320, 350), WindowFunc, "");

Poďme si vysvetliť čo robí:

• Parameter 0 indikuje ID okna. Pokiaľ máte v scéne viacerých okien, každé musí mať vlastné ID.
• Ako druhý parameter odovzdávame Rect, teda nejaký obdĺžnik, ktorému nastavíme veľkosť a pozíciu.
• Tretím parametrom je funkcia, na ktorú sa bude okno odkazovať. Touto funkciou zaistíme vykresľovanie potrebných prvkov.
• Posledným parametrom je nadpis okna. Pokiaľ ho necháme prázdny, budeme mať prakticky identicky vyzerajúce menu ako s použitím GUILayout - Ak tam čokoľvek napíšeme, vytvorí sa nám nadpis okna.

Jediný rozdiel je, že tento spôsob vyzerá podstatne menej pekne:

V budúcej lekcii, Unity (C #) Android: Generovanie Stalag, 2. časť , sa budeme zaoberať tvorbou menu bez programovania.