7. diel - Unity (C #) Android - MenuPart, Eraser a pozadia

V dnešnom Unity Android tutoriálu sa pozrieme na odstraňovanie už zdolaných prekážok a tiež na nekonečné opakovanie pozadia. Nakoniec rozšírime i herné menu.

Obrázky pozadia

Už v predchádzajúcich lekciách som dával na stiahnutie pozadia, ktoré som vytvoril a teraz ho dám k stiahnutiu ik tejto lekcii. To ak nechcete žiadna pozadia hľadať a alebo tvoriť vlastné. Myslím si, že je pre naše účely postačujú. Docela pekne nadväzuje ak ho skladáme za seba, teda sa vám nebudú tvoriť žiadne "zuby". Tiež ho môžete voľne šíriť bez obáv z právnikov:-)

Ide o tieto 3 vrstvy pozadia:

Môžete si vybrať, aký sa vám bude viac páčiť, my v tutoriálu budeme používať toto pozadie:

Vrstvy

Začneme tým, že si pridáme dve nové vrstvy. Zvolíme si ľubovoľný objekt, vyberieme Layers -> Add Layer a tu si pridáme dve vrstvy, ktoré si pomenujeme Background (pozadie) a Eraser vrstvu:

Bude sa teda jednať o pozadí a "Vymazávacia". Ten bude na ľavom konci obrazovky (pretože letíme doprava) a bude odstraňovať objekty pri kolízii s nimi, aby nám v hre nezostávali a nebrzdila ju, keď už budú rovnako mimo obrazovku.

Tiež sa pozrieme do nastavení vrstiev pomocou Edit -> Project Settings -> Physics 2D a nastavíme ich ako na obrázku nižšie:

Vrstva Background - Nekonečné pozadie

Pozadie si vycentrujeme na nulu. Obrázok pozadia si skopírujeme tak, aby boli 2 rovnaké obrázky za sebou. Kópiu posunieme pred prvou tak, aby sa máličko prekrývali. Obom obrázkom pridáme Box Collider 2D, ktorý nastavíme na trigger zaškrtnutím Is Trigger. Tiež nastavíme Layer na Background:

Ďalej pridáme Rigidbody2D. Pridaným Rigidbody nastavíme Freeze Rotation na osi Z, aby sme zaistili, že sa nám nikdy obrázky omylom nezačnú točiť. Tiež nastavíme Gravity Scale na 0, aby nám nepadali dolu. Pozadím tiež pridáme nový skript, ktorý pomenujeme BGMover. Skript bude vyzerať nasledovne:

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 umiestnený na pozadí, ktoré má zároveň nastavený Layer na pozadí, kolidujúce iba s vrstvou eraser. Ak sa tieto 2 objekty s týmito dvoma vrstvami stretnú, resp. pozadia vyjde za obrazovku, tak pozadie poskočí opäť dopredu, aby mohlo znovu prísť sprava. Vďaka tomu tvoria efekt nekonečného obrázku.

Ak teraz hru spustíme, môžeme si všimnúť, že sa nám pozadie už presúva. Posúvanie máme teda hotové, ďalej urobíme likvidáciu nadbytočných prekážok.

Eraser

Vytvoríme nový prázdny objekt, ktorý si pomenujeme Eraser a pridáme mu vrstvu Eraser. Objekt presunieme ako podobjektoch kamery, aby sa hýbal spoločne s hráčom. Logika je taká, že čoho sa tento objekt dotkne, to buďto zmaže (prekážky) a alebo presunie (pozadia). Vynulujeme ho na nulové súradnice a pridáme Box Collider 2D. Pridaný Collider nastavíme na trigger a zväčšíme ho po osi Y, aby ideálne zaberal čo najviac miesta na obrazovke.

Eraser posunieme dozadu po osi X, aby bol za hráčom. Posuňme ho ale dostatočne ďaleko, aby bol mimo záber kamery. Síce nebude v scéne vidieť, ale nebolo by pekné, keby hráč videl, ako za ním prekážky miznú, preto to urobíme až za hranicou kamery.

Zelene je zvýraznený ereser, a biely obdĺžnik znázorňuje kameru.

Na všetky Prefab prekážok umiestnime Rigidbody 2D, aby mohli kolidovať a nastavíme je rovnako ako u pozadie. Ďalej im pridáme Tag Stalag. To urobíme pomocou Inspector na Prefab -> Tag -> add Tag. Tiež musíme Prefab Stalag nastaviť Body Type na Static, aby sa nám prekážky rôzne nehýbali. Ak hru spustíme a narazíme do prekážky, hráč sa o ňu zasekne a už sa ďalej nedostane. To ale nevadí, pretože v ďalších dieloch zariadime, aby sa prekážka po dotyku zmazala a hráč prišiel o časť životov. Na Eraser si pridáme skript EraserScript, ktorý vyzerá nasledovne:

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

V podstate ak sa náš Eraser dotkne niečoho, čo má Tag nastavený na Stalag, tak sa dotyčný objekt zničí. Opäť máme hotovo.

Menu

V hre máme jedno menu s možnosťami:

• Survival
• Arcade
• Exit

Dnes vytvoríme ďalšie nové menu, ktoré sa zobrazí po kliknutí na arkádu a užívateľ si v ňom rovnakými tlačidlami zvolí úroveň.

Už sme si ukázali dve možnosti, ako menu vytvárať. Ja teraz budem používať skôr ten naklikávacie štýl. Ak si to ale niekto chce skúsiť vytvoriť sám programovo, určite neváhajte a pustite sa do toho.

Budeme chcieť, aby nám tlačidlá po kliknutí konečne niečo urobila. Konkrétne, aby zmenila obrazovku, kde sa hráč nachádza. Vytvoríme si novú scénu ArcadeSelect. Do novej scény si pridáme Canvas, ktorý nastavíme tak, aby sa zobrazoval na hlavnej kamere. Scénu prerobíme do podobného vzhľadu:

ReactionScript

Zas si pridáme prázdny objekt ScriptHolder, na ktorý si pridáme skript ReactionScript. Keďže žiadne levely nemáme zatiaľ vytvorené, tak to bude všetko na tejto scéne.

Teraz sa presunieme do nášho hlavného menu a tlačidlám pridáme funkcie. Tlačidlu "Survival" pridáme funkciu ClickedSurvival() z ReactionScript a tlačidlu "Arcade" pridáme ClickedArcade(). Aby sme sa mohli prepínať medzi scénami, musíme si ich "načítať" do zoznamu scén. To urobíme cez File -> Build Settings. Teraz si každú scénu musíme otvoriť a pridať tlačidlom Add Open Scenes:

Poradie scén si môžeme ľubovoľne prehodiť ako sa nám to páči. Upravíme si ReactionScript do tejto podoby:

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

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

Načítanie iné scény sa v podstate vykonáva na jednom riadku. Ako je vidieť, do parametra metódy LoadScene() možno dosadiť ako číslo scény, pod ktorým je uložená, tak aj jej názov. V ukážkovom skriptu sú schválne pre ilustráciu použité obe možnosti.

Aby sme užívateľovi spríjemnili hranie našej hry, do ArcadeSelect scény pridáme tlačidlo "Back", ktoré nás vráti do hlavného menu:

Tlačidlu potom pridáme nasledujúce metódu.

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

Pre tento diel je to všetko.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.