Základy tvorby v Unity

01. Úvod do vektorov a sprajtov

V tejto sérii vyrobíme jednoduchú 2D hru, v ktorej sa bude opustená astronautka snažiť prežiť vo vesmíre, kde jej dochádza vzduch. Čakajú nás nasledujúce novinky:

  • 2D projekt v Unity a práca so sprajtami
  • Vektory, ich vlastnosti a využitie
  • Cyklus v programe

2D projekt

Začnime tým, že si vytvoríme nový Unity projekt. Pri vytváraní cez Unity Hub vyberieme možnosť 2D projekt:

Takto vytvorený 2D projekt sa od 3D projektu líši len v detailoch:

  • Kamera nepoužíva perspektívu, takže veci ďalej od kamery sú rovnako veľké ako tie bližšie.
  • Na pozadí je štandardne len jednoliata farba
  • Obrázky sa defaultne neimportujú ako assety typu textúra ale ako ako assety typu sprite. K tomu, čo je sprajt sa hneď dostaneme.

Všetky tieto veci idú dodatočne zmeniť, takže nie je problém počas práce prestaviť 2D projekt na 3D projekt alebo naopak. Je to len vec toho, ako budú niektoré parametre prednastavené.

Pozrite si dokumentáciu k 2D a 3D projektom v Unity.

Sprajty (Sprites)

Štandardne sa v 3D režime obrázky do Unity importujú podľa ako textúry, ktoré sa majú neskôr použiť v materiáloch na 3D modeloch. V dvojrozmernom režime s veľmi textúrované 3D modely nevyskytujú, tak sa 2D obrázky pri importe automaticky pretvoria na 2D sprajty.

Sprite je typ obrázkového assetu, ktorý slúži na 2D objekty a obvykle sa pohybuje alebo vznáša na nejakom pozadí. Môže obsahovať priesvitné pixely, môže obsahovať viacero rozanimovaných fáz pohybu a má ďalšie vychytávky. Nám zatiaľ postačí tá priesvitnosť a neskôr sa dostaneme k animácii.

Názov sprite pochádza z angličtiny, kde slovo sprite označuje aj vílu, ktorá – podobne ako naše sprajty – sa vznáša a je priesvitná.

Vytvorte v assetoch adresár Sprites

Naimporujte do neho obrázky: astronaut.png a alien-aircraft.png

Takto naimportované assety môžeme rovno natiahnuť do scény:

Editor nám pre ne automaticky vytvoril nové game objekty v hierarchii, aby sme ich nemýlil s assetmi, premenujme game objekty na UFO a Sandra. Lebo UFO je UFO a náš astronaut je astronautka Sandra.

Ešte si pridajme do pozadia nejaký vesmír, napríklad tu od NASA: https://www.nasa.gov/image-feature/stars-glitter-in-the-night-sky-above-earths-atmospheric-glow

  • Naimportujte do assetov obrázok vesmíru
  • Pridajte naimportovaný sprajt ho do scény

Novopridaný sprajt prekrýva tie predošlé. To je asi problém a hneď to aj vyriešime. V 3D projekte by sme objekt, ktorý zacláňa, jednoducho posunuli v 3D priestore ďalej od kamery, až do pozadia. Dá sa to tak urobiť aj v 2D projekte, ale to je vhodné len v špeciálnych prípadoch, a tam my nie sme.

V 2D sa poradie vykresľovania sprajtov nastavuje v komponente Sprite Renderer.

  • Nastavte gameobjektu UFO v jeho Sprite Renderer komponente vlastnosť Order in Layer na 2.
  • Sandre nastavte to isté na 1.

Naškálujte pozadie tak, aby vypĺňalo celý záber kamery. V scéne vám pomôžu viditeľné okraje záberu kamery:

Zmenšite UFO aj Sandru na 1/4 pôvodnej veľkosti. Lebo vesmír je veľký a ľudia v ňom sú maličkí.

Zapnúť vektory motory!

Najprv rozpohybujeme Sandru. Budeme ju ovládať klávesovými šípkami a v každom Update() ju budeme posúvať o malý kúsok do smeru podľa stlačených šípok.

  • Vytvorte v assetoch adresár Scripts a v ňom nový skript Astronaut.
  • Priraďte skript Astronaut na game objekt Sandra.

Aby sme mohli regulovať rýchlosť pohybu, budeme do skriptu potrebovať pridať vlastnosť na rýchlosť.

Pridajte do triedy Astronaut vlastnosť speed, bude verejná a bude to float, lebo chceme presnosť na desatinky.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Astronaut : MonoBehaviour
{
    public float speed = 1;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

Už vieme, že ak chceme, aby sa niečo dialo neustále, tak to skriptujeme do metódy Update(). A teraz, že čo tam napísať. Chceme asi toto:

  • Ak je stále stlačená šípka doprava
    • Pohni game objektom kúsok doprava. A tento kúsok závisí od rýchlosti.

Podmienka „Ak“ (čiže if) teda bude vyzerať takto:

    void Update()
    {
        // Ak je stlacena sipka doprava
        if (Input.GetKey(KeyCode.RightArrow))
        {
            // ... sem doplnime kod na posunutie doprava
        }
    }
  • if (...) je podmienka
  • Input je trieda, ktorá nám poskytuje info o interakcii, napríklad z klávesnice
  • GetKey() je metóda, ktorá zisťuje, či je stlačený nejaký kláves.
  • KeyCode.RightArrow povie metóde GetKey(), že sa pýtame na šípku doprava.

A ako posunieme objektom? Poloha objektu je skrytá v jeho vlastnosti transform. Už sme takto hýbali prekážkou v gulečníkovom tutoriáli. Teraz do toho zapojíme rýchlosť aj čas:

    void Update()
    {
        // Ak je stlacena sipka doprava
        if (Input.GetKey(KeyCode.RightArrow))
        {
            // Pohni sa kusok smerom doprava
            transform.Translate(Vector2.right * speed * Time.deltaTime);
        }
    }
  • transform je vlastnosť, kde je uložená poloha game objektu
  • Translate() je metóda na posunutie polohy
  • Vector2.right je konštanta pre posun doprava o 1 jednotku
  • Vynásobíme ju rýchlosťou speed, lebo chceme, aby sme sa hýbali tým rýchlejšie, čím väčšiu rýchlosť nastavíme
  • Vynásobíme to celé ešte Time.deltaTime. Tým dosiahneme, že sa budeme hýbať v závislosti od aktuálneho času. K tomu viac tu (… sem ešte pribudne vysvetlenie mágie okolo Time.deltaTime)

Čo je teda Vector?

V geometrickom priestore sa poloha zadáva súradnicami X,Y,Z (alebo v 2D len X,Y). Pozrime sa napríklad na tohto koňa na šachovnici:

Teraz chvíľu ignorujme, že na šachovnici sa poloha zvykne udávať ako Písmeno-Číslo (Napríklad G1) a pozrime sa na koňa vpravo. Je na siedmom políčku zľava a na prvom políčku zdola. Jeho poloha je preto [7,1]. Tieto dvojice čísel v Unity ukladáme do premenných či vlastností typu Vector2. Alebo v 3D do typu Vector3.

Vector ale v Unity nereprezentuje len polohu ale aj smer. Napríklad kôň v šachu sa hýbe o 2 políčka dopredu a o 1 doľava. Asi takto:

Ak sa takto pohne, pohyb o 1 políčko doľava a 2 políčka dopredu sa vyjadrí ako posun (-1, +2).

Teraz sa pozrime na toto: Pozícia bola (7, 1) a posunuli sme sa o (-1, +2). Aká je nová pozícia?
(7, 1) + (-1, +2) = (7 – 1, 1 + 2) = (6, 3)

A to je základný princíp narábania s pozíciami a posunmi:
Pozícia + Posun = Nová pozícia

V Unity sa pozície aj posuny ukladajú do toho istého typu: Vector2 (resp. Vector3 v 3D). Niekoľko často používaných vektorov je už preddefinovaných, napríklad: Vector2.right je to isté ako (1,0), čiže posun o 1 políčko doprava.

Pozrite si aké sú ostatné preddefinované smery vo Vector2

Teraz doplňte do metódy Update() príkazy pre posun do ostatných 3 smerov po stlačení príslušných šipiek. Uložte skript a odskúšajte v hre.

Len pre kontrolu, určite to máte aj sami:

    void Update()
    {
        // Ak je stlacena sipka doprava
        if (Input.GetKey(KeyCode.RightArrow))
        {
            // Pohni sa kusok smerom doprava
            transform.Translate(Vector2.right * speed * Time.deltaTime);
        }
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            transform.Translate(Vector2.left * speed * Time.deltaTime);
        }
        if (Input.GetKey(KeyCode.DownArrow))
        {
            transform.Translate(Vector2.down * speed * Time.deltaTime);
        }
        if (Input.GetKey(KeyCode.UpArrow))
        {
            transform.Translate(Vector2.up * speed * Time.deltaTime);
        }
    }

V ďalšej lekcii sa pozrieme na pohyb lietajúceho taniera, ktorý nebude ovládaný klávesami, ale bude sa musieť vedieť hýbať sám.

Hotový projekt na stiahnutie: SpaceGame_01.zip