Lekce 6 - Unity (C#) Android: GUI - Menu 1

V minulé lekci, Unity (C#) Android: Generování stalagů, 2. část, jsme se podívali na to, jak tvořit překážky.

Dnes se podíváme na herní menu. V tomto Unity tutoriálu se podíváme na dva způsoby jak menu naprogramovat.

Příprava scény pro menu

Vytvoříme si novou scénu a uložíme si ji jako Menu1.

Reaction

Dále si v této scéně vytvoříme gameObject, který si pojmenujeme Reaction. Následně na tento objekt přidáme skript ReactionScript. Tento skript bude obsahovat co se má stát, když se na jednotlivá tlačítka v menu klikne. Ze skriptu si odmažeme metody Start() a Update(). A vytvoříme jednotlivé metody pro různá tlačítka:

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

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

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

Hra bude mít tedy 2 módy:

• Arcade a
• Survival.

Prozatím budeme kliknutím na tlačítka pouze volat výpis do konzole. Objekt Reaction si uložíme do prefabu, abychom ho mohli snadno použít i v další lekci.

Hlavní kamera

Hlavní kameře přidáme nový skript, který si pojmenujeme OnGUIScriptMenu. Opět odmažeme metody Start() i Update().

Na vytváření grafického uživatelského rozhraní budeme využívat Unity metodu OnGUI(). S touto metodou si ukážeme dva různé přístupy jak můžeme vytvořit menu a nebo jakýkoliv jiný GUI prvek. Proto si do skriptu přidáme 2 další metody:

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()
    {

    }
}

Jak asi tušíte, metoda GUIUseLayout() se použije v případě, že zvolíme tvorbu menu pomocí GUILayout, viz dále. A metoda GUIDontUseLayout() se spustí v opačném případě. Naučíme se tak oba způsoby a vy si budete moci zvolit, který vám více vyhovuje.

GUILayout

Začneme se způsobem, kde využijeme třídu GUILayout. Kód příslušné metody bude následující:

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šimnout, že názvy některých metod začínají na Begin a End. To jsou párové metody. Je to podobné jako například u HTML. Pokud použijeme funkci začínající Begin, musíme jí i někde v kódu ukončit variantou začínající na End.

GUISkin

Samozřejmě nechceme, aby naše menu vypadalo obyčejně. Proto mu přidáme skin.

Skin v kódu

Založíme si ve třídě novou proměnnou uchovávající GUISkin:

public GUISkin menuSkin;

Skin nastavíme přímo v metodě OnGUI():

GUI.skin = menuSkin;

Skin v Assets

Skin jsme nastavili, ale ještě neexistuje. Proto jej musíme v Unity vytvořit. V Assets klikneme klasicky pravým tlačítkem myši -> Create -> GUISkin. Pojmenujeme si ho menuSkin. Jelikož používáme pouze tlačítka, tak si v menuSkin najdeme Button, rozbalíme a dle libosti si můžeme cokoliv upravit. Já upravím pouze Normal a Hover. Tudíž pouze normální stav tlačítka a stav pokud přes něj přejedeme myší. Náš vytvořený skin nesmíme zapomenout vložit do našeho skriptu na kameře. Již hotové sprity na tlačítka najdete v souborech ke stažení. Zájemci si mohou samozřejmě vytvořit své vlastní sprity.

Pokud zapneme hru a budeme přejíždět přes tlačítka, můžeme vidět, jak se mění jejich vzhled.

Reakce na kliknutí

Pokud na tlačítko klikneme, nic se nestane, protože všechny naše metody pro tlačítka máme ve skriptu ReactionScript, tudíž se na něj nějak musíme odkázat.

To můžeme udělat jednoduše tak, že vytvoříme novou proměnnou s tímto skriptem:

public ReactionScript reaction;

Takto se můžeme snadno odkazovat na různé skripty a jejich metody nebo proměnné. My využijeme metody z tohoto skriptu, které se spustí po kliknutí na příslušné tlačítko. Předpřipravený kód tedy doplníme voláním metod 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 pozicovat s využitím GUILayout. Výsledek vypadá více než uspokojivě:

Bez GUILayout

Na závěr si ukážeme i jak vytvořit herní menu bez využití 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ódu voláme metodou Window():

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

Pojďme si vysvětlit co dělá:

• Parametr 0 indikuje ID okna. Pokud máte ve scéně více oken, každé musí mít vlastní ID.
• Jako druhý parametr předáváme Rect, tudíž nějaký obdélník, kterému nastavíme velikost a pozici.
• Třetím parametrem je funkce, na kterou se bude okno odkazovat. Touto funkcí zajistíme vykreslování potřebných prvků.
• Posledním parametrem je nadpis okna. Pokud ho necháme prázdný, budeme mít prakticky identicky vypadající menu jako s použitím GUILayout- pokud tam cokoliv napíšeme, vytvoří se nám nadpis okna.

Hlavní rozdíl je v tom, že v pozadí menu je obdélník:

V příští lekci, Unity (C#) Android: Generování stalagů, 2. část, se budeme zabývat tvorbou menu bez programování.