2. diel - Unity (C #) Android: Pohyb, grafika, particles

V minulej lekcii, Úvod do Unity 3D , sme si povedali o programovaní 3D a 2D hier v Unity.

Vítam vás u ďalšieho dielu tutoriálu pre Unity, kde sa naprogramujeme pohyb hráča a trochu tej grafiky.

Minule, v lekcii Úvod do Unity 3D , sme si nastavili scénu tak, aby sme mohli hru buildnout na Android a spustiť. V dnešnom diele sa pozrieme na prípravu hráča, jeho fyziku a particles.

Pozadia

Začneme tým, že si do Unity pridáme nejaký obrázok ako pozadie, aby bolo vidieť, že sa pohybujeme. Sprity si do Unity importujete podobne ako sme v minulom diele tvorili zložky. Obrázok pozadia si teda vložíme do našej zložky s grafikou. Môžeme si stiahnuť ľubovoľný z internetu, ktorý sa nám páči. Ideálne by bolo, aby mal rozlíšenie aspoň 1920x1080, vďaka tomu naše pozadie bude vyzerať pekne a ostro:

Začneme s tým, ako si pridať sprite do scény. Najprv pridáme sprite do našej zložky. Ak ho teda chceme pridať do scény, jednoducho ho z nej pretiahneme na scénu. Naším obrázkom môžeme tiež v scéne hýbať. Obrázok si zväčšíme, aby zaberal celú plochu hry. To urobíme tak, že na neho klikneme v scéne okolo Spritu, čím sa nám objaví ohraničenie s bodkami v rohoch. Stačí za nejakú časť ťahať a obrázok zväčšíme. Alebo môžeme Sprite zväčšiť cez komponent Transform na objekte. Ak je cez celú našu hraciu plochu zistíme, ak sa napríklad prepneme do okna Game:

Hráč

Ďalej budeme pokračovať pridaním hráča.

Vytvorenie

Začneme tým, že si vytvoríme prázdny objekt. Stačí kliknúť pravým tlačidlom do pravej časti, kde sa napríklad nachádza aj naše kamera, a zvoliť Create Empty. Objekt vynulujeme, aby bol na nulových súradniciach. Klikneme si teda na náš objekt a napravo vidíme všetky komponenty, ktoré na sebe má. Vynulujeme ho tak, že klikneme na ozubené koliesko v kolónke Transform a tu zvolíme Reset. Rovno si objekt pomenujeme Player.

Ďalej, pretože budeme chcieť súčasný pohyb kamery s hráčom, presunieme kameru pod hráča.

Grafika

Síce sme si vytvorili hráčov, ale stále nič nevidíme, pretože hráč nemá žiadnu grafiku. Ak chceme, môžeme si obrázok sami vytvoriť a alebo stiahnuť, čo bude pre naše účely dostačujúci. Ja som si napríklad stiahol ohnivú guľu, ale čo si zvolíte vy nechám na vašich predstavách.

Grafiku na hráča pridáme kliknutím na Add Component na objekte a nájdeme si Sprite Renderer. Potom stačí náš obrázok len pretiahnuť do kolónky Sprite. Obrázok bude pravdepodobne moc veľký, tak si ho zmenšíme.

Fyzika hráča

Keď už máme hráča v hre, môžeme začať pridávať fyziku a trochu si s ním hrať. Každý objekt, ktorý má s niečím interagovať, potrebuje Collider, ktorý potom umožňuje Unity zistiť, či sa hráč s niečím stretol. Teda nášmu hráči pridáme komponent Circle Collider 2, tá bude s hráčom pracovať ako by bol kruh. Keďže sme v 2D, musíme si dávať vždy pozor na to, aby za naším Collider bolo napísané 2D, inak nebude fungovať správne a alebo vôbec. Ďalej, aby mal hráč vlastný fyziku, musíme pridať Rigidbody 2D. V tento okamih, keď hru spustíme, hráč spadne dolu.

V Rigidbody máme niekoľko atribútov, ktorými sa zatiaľ zaoberať nebudeme a dostaneme sa k nim až časom.

Prvý skript

Budeme pokračovať skriptom na pohyb hráča. Keďže bude naša hra na štýl Flappy Bird, tak sa bude ovládať jedným tlačidlom, kliknutím myši a alebo dotykom na telefóne. Aby sme mohli hrať kdekoľvek, budeme podporovať všetky tri varianty ovládania naraz.

Skript môžeme pridať buď cez Add Component, kde napíšeme názov skriptu, a alebo môžeme v našej vytvorenej zložke sa skriptami kliknúť pravým tlačidlom myši, následne v menu vybrať Create a potom C# Script.

Skript si pomenujeme PlayerMov. Na skript dvakrát poklepeme a otvorí sa nám editor.

Udalosti

Čo sa týka programovania, Unity funguje na princípe udalostí. Máme vždy nejakú metódu, ktorá sa spustí za určité udalosti, napr. Na začiatku - Start() a Awake(). Rozdiely si povieme neskôr. My v našom skripte použijeme udalosť Update(). Je to slučka, ktorá sa vykonáva niekoľkokrát za sekundu.

Vytvoríme si nové premenné, ktoré budeme potrebovať. Aby sme s našou postavou "flappovali" (pohybovali sa), budeme potrebovať hodnotu typu Vector3, ktorú si napríklad pomenujeme vel (ako velocity = rýchlosť). Vector3 je jeden z parametrov rigidbody a udáva zmenu smeru za jeden frame.

Teraz musíme zabezpečiť, aby napríklad pri stlačení 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, keď naši hru spustíme a budeme klikať, môžeme vidieť, že náš hráč naozaj skáče namieste a padá. Môžeme si všimnúť, že skáče pomerne vysoko. To môžeme vyriešiť znížením flapAmount v našom skriptu a alebo zvýšením gravitácie na Rigibody2D nášho hráča napríklad na 2.5. Ďalej musíme zariadiť pohyb dopredu. V našom kóde si založíme novú premennú speed a nastavíme si ju napríklad na 2. Bude to fungovať veľmi jednoducho. Zakaždým, keď sa vykoná Update(), posunieme sa v osi x o našej 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 sa stať, že sa nám hráč bude pri pohybe nepríjemne otáčať, ale to môžeme vyriešiť veľmi jednoducho, keď si v Rigibody2D nášho hráča zaškrtneme Fixed Angle. Čo sa týka pohybu máme zatiaľ všetko hotové. Teraz sa môžeme začať sústrediť na grafiku.

Particle effect

Povedali sme si, že budeme hrať za ohnivú guľu a chceme, aby z nej šľahali poriadnej plamene. To zariadime pridaním Particle Systemu pod nášho hráča. To môžeme urobiť kliknutím na nášho hráča pravým tlačidlom myši, ďalej na effects a Particle System:

Particle system je priamo súčasť Unity, ktorá zariaďuje generovanie častíc. Po vhodnom nastavení môže efekt vyzerať ako oheň, dážď, dym, a veľa ďalších. My si ukážeme iba oheň. Ak by niektorí z vás radi experimentovali, tak odporúčam napríklad vodné guľu a rôzne pokusy s nastavením pre ideálne vzhľad. Poďme sa do toho pustiť.

Náš Particle System si otočíme v osi X na 180 a pozíciu Z nastavíme na 20:

Vytvoríme si nový materiál. Pravým tlačidlom myši klikneme do okienka asset -> Create -> Material. Pomenujeme si ho napríklad FireMat. Nastavíme typ Materiálu, kliknutím na Shader -> Legacy Shaders -> Particles -> Additive. Potrebujeme vložiť obrázok, ktorý sa bude vykresľovať. Stiahneme si teda obrázok ohňa a vložíme ho do voľného okienka:

Materiál vložíme do nášho particle systemu. Klikneme si na náš particle system, kde nájdeme Renderer a vložíme ho do riadky material. Ďalej si nastavíme Color over time. To funguje spôsobom, že počas toho, čo je častica povedzme "nažive", mení svoju farbu. Podobnú vec urobíme s Rotation over time, aby náš oheň nebol toľko statický. Oheň vylepšíme znížením počtu Particle v Emission. Ďalej v Shape nastavíme menšie radius a v samotnom Particle systéme nastavíme menšie Štart Size, menšie Štart Speed a zmenšíme aj Štart Lifetime, čo je doba existencie každej častice:

Ak by sme s výsledkom po spustení neboli spokojní, stačí si s nastavením ľubovoľne pohrať, čím môžeme docieliť oveľa krajšieho efektu.

Záver

Pre dnešok to bude všetko. Dúfam, že sa vám séria tutoriálov páči a naučili ste sa niečo nové. Ak máte nejaké pripomienky či nápady, zanechajte komentár, rád sa inšpirujem. Nabudúce, v lekcii Unity (C #) Android: Generovanie Stalag , sa pozrieme na vytváraní našej mapy.