Lekce 8 - Unity (C#) Android - MenuPart, Eraser a pozadí

V minulé lekci, Unity (C#) Android: GUI - Menu 2, jsme se zabývali tvorbou menu bez programování.

V dnešním Unity Android tutoriálu se podíváme na odstraňování již zdolaných překážek a také na nekonečné opakování pozadí. Nakonec rozšíříme i herní menu.

Obrázky pozadí

Již v předchozích lekcích jsem dával ke stažení pozadí, které jsem vytvořil a nyní ho dám ke stažení i k této lekci. To pokud nechcete žádná pozadí hledat a nebo tvořit vlastní. Myslím si, že je pro naše účely dostačující. Docela pěkně navazuje pokud ho skládáme za sebe, tudíž se vám nebudou tvořit žádné "zuby". Také ho můžete volně šířit bez obav z právníků

Jedná se o tyto 3 vrstvy pozadí:

Můžete si vybrat, jaký se vám bude více líbit, my v tutoriálu budeme používat toto pozadí:

Vrstvy

Začneme tím, že si přidáme dvě nové vrstvy. Zvolíme si libovolný objekt, vybereme Layers -> Add Layer a zde si přidáme dvě vrstvy, které si pojmenujeme Background (pozadí) a Eraser vrstvu:

Bude se tedy jednat o pozadí a "vymazávač". Ten bude na levém konci obrazovky (protože letíme doprava) a bude odstraňovat objekty při kolizi s nimi, aby nám ve hře nezůstávaly a nezpomalovaly ji, když již budou stejně mimo obrazovku.

Také se podíváme do nastavení vrstev pomocí Edit -> Project Settings -> Physics 2D a nastavíme je jako na obrázku níže:

Vrstva Background - Nekonečné pozadí

Pozadí si vycentrujeme na nulu. Obrázek pozadí si zkopírujeme tak, aby byly 2 stejné obrázky za sebou. Kopii posuneme před první tak, aby se maličko překrývaly. Oběma obrázkům přidáme Box Collider 2D, který nastavíme na trigger zaškrtnutím Is Trigger. Také nastavíme Layer na Background:

Dále přidáme Rigidbody2D. Přidaným Rigidbody nastavíme Freeze Rotation na ose Z, abychom zajistili, že se nám nikdy obrázky omylem nezačnou točit. Také nastavíme Gravity Scale na 0, aby nám nepadaly dolů. Pozadím také přidáme nový skript, který pojmenujeme BGMover. Skript bude vypadat následovně:

void OnTriggerEnter2D(Collider2D col)
{

    Bounds b = GetComponent<SpriteRenderer>().bounds;
    float sizeX = b.size.x;

    Vector3 pos = transform.position;
    pos.x += 2 * sizeX - 10;
    transform.position = pos;
}

Skript máme umístěný na pozadí, které má zároveň nastavený Layer na background, kolidující pouze s vrstvou Eraseru. Pokud se tyto 2 objekty s těmito dvěma vrstvami střetnou, resp. pozadí vyjede za obrazovku, tak pozadí poskočí opět dopředu, aby mohlo znovu přijet zprava. Díky tomu tvoří efekt nekonečného obrázku.

Pokud teď hru spustíme, můžeme si všimnout, že se nám pozadí již přesouvá. Posouvání máme tedy hotové, dále uděláme ničení přebytečných překážek.

Eraser

Vytvoříme nový prázdný objekt, který si pojmenujeme Eraser a přidáme mu vrstvu Eraser. Objekt přesuneme jako podobjekt kamery, aby se hýbal společně s hráčem. Logika je taková, že čeho se tento objekt dotkne, to buďto smaže (překážky) a nebo přesune (pozadí). Vynulujeme ho na nulové souřadnice a přidáme Box Collider 2D. Přidaný collider nastavíme na trigger a zvětšíme ho po ose Y, aby ideálně zabíral co nejvíce místa na obrazovce.

Eraser posuneme dozadu po ose X, aby byl za hráčem. Posuňme ho ale dostatečně daleko, aby byl mimo záběr kamery. Sice nebude ve scéně vidět, ale nebylo by hezké, kdyby hráč viděl, jak za ním překážky mizí, proto to uděláme až za hranicí kamery.

Zeleně je zvýrazněn ereser, a bílý obdélník znázorňuje kameru.

Na všechny prefaby překážek umístíme Rigidbody 2D, aby mohly kolidovat a nastavíme je stejně jako u pozadí. Dále jim přidáme Tag Stalag. To uděláme pomocí Inspectoru na prefabu -> Tag -> add Tag a přiřadíme ho prefabu Stalag z rozbalovacího menu. Také musíme prefabu Stalag nastavit Body Type na Static (v komponentě Rigidbody2D), aby se nám překážky různě nehýbaly. Pokud hru spustíme a narazíme do překážky, hráč se o ni zasekne a již se dál nedostane. To ale nevadí, protože v dalších dílech zařídíme, aby se překážka po dotyku smazala a hráč přišel o část životů. Na Eraser si přidáme skript EraserScript, který vypadá následovně:

void OnTriggerEnter2D(Collider2D col)
{
    if (col.tag == "Stalag")
    {
        Destroy(col.gameObject);
    }
}

Pokud se náš Eraser dotkne něčeho, co má Tag nastaven na Stalag, tak se dotyčný objekt zničí. Opět máme hotovo.

Menu

Ve hře máme jedno menu s možnostmi:

• Survival
• Arcade
• Exit

Dnes vytvoříme další nové menu, které se zobrazí po kliknutí na arkádu a uživatel si v něm stejnými tlačítky zvolí úroveň.

Již jsme si ukázali dvě možnosti, jak menu vytvářet. Já nyní budu používat spíše ten naklikávací styl. Pokud si to ale někdo chce zkusit vytvořit sám programově, určitě neváhejte a pusťte se do toho.

Budeme chtít, aby nám tlačítka po kliknutí konečně něco udělala. Konkrétně, aby změnila obrazovku, kde se hráč nachází. Vytvoříme si novou scénu ArcadeSelect. Do nové scény si přidáme Canvas, který nastavíme tak, aby se zobrazoval na hlavní kameře. Scénu předěláme do podobného vzhledu:

ReactionScript

Přidáme prázdný objekt ScriptHolder, na který si přidáme skript ReactionScript. Jelikož žádné levely nemáme zatím vytvořené, tak to bude vše na této scéně.

Nyní se přesuneme do našeho hlavního menu a tlačítkům přidáme funkce. Tlačítku "Survival" přidáme funkci ClickedSurvival() z ReactionScript a tlačítku "Arcade" přidáme ClickedArcade(). Abychom se mohli přepínat mezi scénami, musíme si je "načíst" do seznamu scén. To uděláme přes File -> Build Settings. Nyní si každou scénu musíme otevřít a přidat tlačítkem Add Open Scenes:

Pořadí scén si můžeme libovolně prohodit jak se nám to líbí, ale pak musíme upravit i kód s načítáním scény (změnit index SceneManager.LoadScene(index scény)).

Upravíme si Reaction skript do této podoby:

public void ClickedArcade()
{
    SceneManager.LoadScene(2);
}

public void ClickedSurvival()
{
    SceneManager.LoadScene(1);
}

Načtení jiné scény se v podstatě provádí na jednom řádku. Jak je vidět, do parametru metody LoadScene() lze dosadit jak číslo scény, pod kterým je uložena, tak i její název. V ukázkovém skriptu jsou schválně pro ilustraci použity obě možnosti.

Abychom uživateli zpříjemnili hraní naší hry, do ArcadeSelect scény přidáme tlačítko "Back", které nás vrátí do hlavního menu:

Tlačítku pak přidáme následující metodu.

public void BackToMenu()
{
    SceneManager.LoadScene(0);
}

Pro tento díl je to vše.

V příští lekci, Unity (C#) Android: MenuPart, Eraser, pozadí 2, vylepšíme odstraňování překážek, detekci objektu a přidáme levely.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.