Lekce 3 - Unity (C#) Android: Pohyb, grafika, particles

Vítám vás u dalšího dílu tutoriálu pro Unity, kde si naprogramujeme pohyb hráče a trochu té grafiky. Minule, v lekci Unity (C#) Android: Nastavení prostředí, jsme si nastavili scénu tak, abychom mohli hru buildnout na Android a spustit.

V dnešním díle se podíváme na přípravu hráče, jeho fyziku a particles.

Pozadí

Začneme tím, že si do Unity přidáme nějaký obrázek jako pozadí, aby bylo vidět, že se pohybujeme. Sprity si do Unity naimportujeme podobně jako jsme v minulém díle tvořili složky. Obrázek pozadí si tedy vložíme do naší složky s grafikou. Můžeme si stáhnout libovolný z internetu, který se nám líbí. Ideální by bylo, aby měl rozlišení aspoň 1920x1080, díky tomu naše pozadí bude vypadat hezky a ostře:

Začneme s tím, jak si přidat sprite do scény. Prvně přidáme sprite do složky pro sprity a potom ho přetáhneme do scény. Naším obrázkem můžeme také ve scéně hýbat. Obrázek si zvětšíme, aby zabíral celou plochu hry. To uděláme tak, že na něj klikneme ve scéně kolem Spritu, čímž se nám objeví ohraničení s tečkami v rozích. Stačí za nějakou část táhnout a obrázek zvětšíme. Nebo můžeme Sprite zvětšit přes komponentu Transform na objektu. Jestli je přes celou naši hrací plochu zjistíme, pokud se například přepneme do okna Game:

Hráč

Dále budeme pokračovat přidáním hráče.

Vytvoření

Začneme tím, že si vytvoříme prázdný objekt. Stačí kliknout pravým tlačítkem do okna Hierarchy, kde se například nachází i naše kamera, a zvolit Create Empty. Objekt vynulujeme, aby byl na nulových souřadnicích. Klikneme si na náš objekt a napravo (v okně Inspector) vidíme všechny komponenty, které na sobě má. Vynulujeme jej tak, že klikneme na ozubené kolečko v kolonce Transform a zde zvolíme Reset. Rovnou si objekt pojmenujeme Player.

Dále, jelikož budeme chtít současný pohyb kamery s hráčem, přesuneme kameru pod hráče.

Grafika

Sice jsme si vytvořili hráče, ale stále nic nevidíme, jelikož hráč nemá žádnou grafiku. Pokud chceme, můžeme si obrázek sami vytvořit a nebo stáhnout, což bude pro naše účely dostačující. Já jsem si například stáhl obrázek draka, který najdete ke stažení pod článkem, ale co si zvolíte vy nechám na vašich představách.

Přiložený obrázek je složený z vícero draků, proto si ho budeme muset rozdělit. Pokud klikneme v Assets na obrázek draků, uvidíme napravo takovýto panel:

Sprite mode nastavíme na Multiple a klikneme na Sprite Editor. Otevře se nám takovéhle okno:

V horní levé části klikneme na Slice. Mělo by zde být již přednastavené Type na Automatic, pokud není nastavíme a ve finále zvolíme Slice. Pro uložení postačí klepnout na Apply v horním pravém rohu.

V Assets se nám nyní zobrazila šipička u obrázku, na tu pokud klikneme rozbalíme všechny sprity:

Grafiku na hráče přidáme kliknutím na Add Component na objektu a najdeme si `Sprite Renderer`. Poté stačí náš požadovaný obrázek pouze přetáhnout do kolonky Sprite. Z rozbalených spritů si zvolíme hned ten první. Obrázek je trochu menší, tak scale nastavíme jak je na obrázku:

Pro doladění detailu nastavíme drakovi nějakou barvu, ve Sprite Rendereru klikneme na Color a zvolíme pěkně červenou.

V pozdějších lekcích využijeme i zbývající obrázky a vytvoříme animaci, takže si je nemažte ze šložky v Unity.

Fyzika hráče

Když již máme hráče ve hře, můžeme začít přidávat fyziku a trochu si s ním hrát. Každý objekt, který má s něčím interagovat, potřebuje collider, který pak umožňuje Unity zjistit, zda se hráč s něčím střetl. Tudíž našemu hráči přidáme komponentu Circle Collider 2D, ta bude s hráčem pracovat jako by byl kruh. Mohli bychom vytvořit i jiné a složitejší collidery, pokud si ale všimneme, tak náš drak do kruhu zapadá dost pěkně. Nemusíme tedy vytvářet zbytečně složitý collider. Jelikož jsme ve 2D, musíme si dávat vždy pozor na to, aby za naším colliderem bylo napsáno 2D, jinak nebude fungovat správně a nebo vůbec. Dále, aby měl hráč vlastní fyziku, musíme přidat Rigidbody 2D. V tento okamžik, když hru spustíme, hráč spadne dolů.

V Rigidbody máme několik atributů, kterými se prozatím zabývat nebudeme a dostaneme se k nim až časem.

První skript

Budeme pokračovat skriptem na pohyb hráče. Jelikož bude naše hra na styl Flappy Bird, tak se bude ovládat jedním tlačítkem, kliknutím myši a nebo dotykem na telefonu. Abychom mohli hrát kdekoliv, budeme podporovat všechny tři varianty ovládání najednou.

Skript můžeme přidat buď přes Add Component, kde napíšeme název skriptu, a nebo můžeme v naší vytvořené složce se skripty kliknout pravým tlačítkem myši, následně v menu vybrat Create a poté C# Script.

Skript si pojmenujeme PlayerMov. Na skript dvakrát poklepeme a otevře se nám editor.

Události

Co se týče programování, Unity funguje na principu událostí. Máme vždy nějakou metodu, která se spustí za určité události, např. na začátku - Start() a Awake(). Rozdíly si povíme později. My v našem skriptu použijeme událost Update(). Je to smyčka, která se vykonává několikrát za sekundu.

Vytvoříme si nové proměnné, které budeme potřebovat. Abychom s naší postavou "flappovali" (pohybovali se), budeme potřebovat hodnotu typu Vector3, kterou si například pojmenujeme vel (jako velocity = rychlost). velocity je jeden z parametrů Rigidbody2D a udává změnu pozice za jeden frame.

Teď musíme zajistit, aby například při stisknutí klávesy náš hráč popolétl:

float flapAmount = 10;
void Start()
{

}
// Update is called once per frame
void Update()
{
    Vector3 vel = gameObject.GetComponent<Rigidbody2D>().velocity;
    if (Input.GetMouseButtonDown(0))
    {
        vel.y = flapAmount;
    }
    gameObject.GetComponent<Rigidbody2D>().velocity = vel;
}

V tento moment, když naši hru spustíme a budeme klikat, můžeme vidět, že náš hráč opravdu skáče namístě a padá. Můžeme si všimnout, že skáče poměrně vysoko. To můžeme vyřešit snížením flapAmount v našem skriptu a nebo zvýšením gravitace na Rigibody2D našeho hráče například na 2.5. Dále musíme zařídit pohyb dopředu. V našem kódu si založíme novou proměnnou speed a nastavíme si ji například na 2. Bude to fungovat velice jednoduše. Pokaždé, když se provede Update(), posuneme se v ose x o naší hodnotu speed:

float flapAmount = 10;
float speed = 2;
void FixedStart()
{

}
// Update is called once per frame
void Update()
{
    Vector3 vel = gameObject.GetComponent<Rigidbody2D>().velocity;
    if (Input.GetMouseButtonDown(0))
    {
        vel.y = flapAmount;
    }
    vel.x = speed;
    gameObject.GetComponent<Rigidbody2D>().velocity = vel;
}

Může se stát, že se nám hráč bude při pohybu nepříjemně otáčet, ale to můžeme vyřešit velice jednoduše, když si v Rigibody2D našeho hráče zaškrtneme Fixed Angle. Co se týče pohybu máme zatím vše hotovo. Teď se můžeme začít soustředit na grafiku.

Particle effect

Řekli jsme si, že budeme hrát za ohnivou kouli a chceme, aby z ní šlehaly pořádné plameny. To zařídíme přidáním Particle Systemu pod našeho hráče. To můžeme udělat kliknutím na našeho hráče pravým tlačítkem myši, dále na effects a Particle System:

Particle system je přímo součást Unity, která zařizuje generování částic. Po vhodném nastavení může efekt vypadat jako oheň, déšť, dým a spousty dalšího. My si ukážeme pouze oheň. Pokud by někteří z vás rádi experimentovali, tak doporučuji například vodní kouli a různé pokusy s nastavením pro ideální vzhled. Pojďme se do toho pustit.

Náš Particle System si otočíme v ose X na 180 a pozici Z nastavíme na 20:

Vytvoříme si nový materiál. Pravým tlačítkem myši klikneme do okénka Assety -> Create -> Material. Pojmenujeme si ho například FireMat. Nastavíme typ Materiálu, kliknutím na Shader -> Legacy Shaders -> Particles -> Additive. Potřebujeme vložit obrázek, který se bude vykreslovat. Stáhneme si tedy obrázek ohně a vložíme ho do volného okénka:

Materiál vložíme do našeho particle systemu. Klikneme si na náš particle system, kde najdeme Renderer a vložíme ho do řádky material. Dále si nastavíme Color over Lifetime. To funguje způsobem, že během toho, co je částice řekněme "naživu", mění svou barvu. Podobnou věc uděláme s Rotation over time, aby náš oheň nebyl tolik statický. Oheň vylepšíme snížením počtu particlů v Emission. Dále v Shape nastavíme menší radius a v samotném Particle systemu nastavíme menší Start Size, menší Start Speed a zmenšíme i Start Lifetime, což je doba existence každé částice:

Pokud bychom s výsledkem po spuštění nebyli spokojení, stačí si s nastavením libovolně pohrát, čímž můžeme docílit mnohem hezčího efektu.

Závěr

Pro dnešek to bude vše. Doufám, že se vám série tutoriálů líbí a naučili jste se něco nového. Pokud máte nějaké připomínky či nápady, zanechte komentář, rád se inspiruji.

Příště, v lekci Unity (C#) Android: Generování stalagů, se podíváme na vytváření naší mapy.