In Unity (versiunea curenta) avem doua posibilitati de a face animatii 2D: sprite-sheet si bone-based.

În prima imagine, caracterul este prezentat în mai multe poziții, cu o secvență de poziții pentru diferite acțiuni. Aceasta imagine reprezinta un sprite-sheet, fiind foarte popular in jocurile 2D. Aceasta vă permite să vă imaginați în mod clar modul în care se va mișca în joc.

In a doua imagine, balaurul este împărțit în mai multe părți ale corpului (cap, corp, brațe și așa mai departe), necesitand o tehnică mai recentă de animație 2D, denumită în mod normal animație bazată pe oase (bone-based). După cum sugerează și numele, animația va fi pe bază de os, în care fiecare os din corp poate avea o acțiune sau o animație specifică. Având toate părțile principale ale corpului separat, permite dezvoltatorilor să creeze animațiile direct în editor. Această tehnică nouă de animație este foarte asemănătoare cu cea utilizată în animația 3D.

Puteti descarca imaginea urmatoare ca exemplu: Pentru a folosi sprite-sheet-ul, incarcati imaginea in Unity si configurati Sprite Mode ca Multiple, dupa care accesati Sprite Editor.

In editor accesati meniul de Slice si puteti folosi varianta automata, sau manuala pentru a selecta diferitele stari ale animatiei. Dupa aceasta operatie, veti avea fiecare sprite individual.

Pentru a crea animatii din secvente de sprite-uri, puteti selecta sprite-urile si din folositi functia de Create Animation sau, mai simplu, puteti face drag-and-drop in scena si vi se creaza automat o animatie pe care va trebui sa o salvati.

Pentru sprite-ul oferit animatiile sunt asezate in felul urmator:

• idle = 0 - 9
• walk = 10 - 20
• hadooken = 21 - 31
• crouch = 32 - 37
• jump = 38 - 48

Folosirea animatiilor pe baza de oase necesita mai multa munca.

In primul rand, plecand de la o imagine (puteti folosi imaginea de mai sus), trebuie despartita in slice-uri, similar cu procesul de la sprite sheet.

Apoi, aceste sprite-uri trebuie asamblate in scena, astfel incat sa formeze un obiect. Este indicat sa aveti o structura arborescenta. Acest lucru va fi folositor in crearea animatiilor, deoarece atunci cand misc bratul (arm), evident trebuie sa misc si mana (hand).

Pentru ordine puteti folosi urmatoarele valori

• Dragon: 0
• Body: 3
• Head: 4
• Left Leg: 4
• Left Upper Arm: 5
• Left Arm: 4
• Left Hand: 5
• Right Leg: 1
• Right Upper Arm: 2
• Right Arm: 1
• Right Hand: 2
• Tail: 4
• Tail Tip: 5

Urmatorul pas este crearea animatiilor, care de aceasta data trebuie facuta manual folosind utilitarul de animatie (Window > Animation). Vedeti subcapitolul de mai jos.

Incepand cu versiunea din 2018 (2018.2.0f2), Unity are suport si pentru animatii Bone-based pentru 2D, functionalitate accesibila prin instalarea pachetului de 2D Animation.

Puteti folosi imaginea de mai jos ca exemplu:

Fluxul de lucru:

Se construieste ierarhia de oase în editor (Sprite Editor > Bone Editor).

Se genereaza geometria și se atribuie greutăți ale pielii în editor (Sprite Editor > Geometry And Weight Editor).

Se adauga componenta Sprite Skin pentru a genera oasele.

Mai multe detalii aici:

• https://github.com/Unity-Technologies/2d-animation-samples/blob/master/Documentation/2DAnimation.md
• https://blogs.unity3d.com/2018/11/09/getting-started-with-unitys-2d-animation-package/
• https://docs.unity3d.com/Packages/com.unity.2d.animation@1.0/manual/index.html

Urmeaza crearea de animatii pentru obiect folosind oasele.

Crearea animatiilor se poate face folosind utilitarul de animatie (Window > Animation).

Pentru a crea animatia unui obiect, puteti selecta acel obiect si sa creati un animator pentru acesta (in cazul in care nu exista). Cum se foloseste animatorul: Folositi butonul de Record si creati key-frame-uri in care sa se diversi parameri de Transform sau Render. Spre exemplu puteti roti capul dragonului:

Pentru a crea o noua animatie folositi butonul de Create new Clip (spre exemplu pentru Jump):

Urmatorul pas este sa configuram aceste animatii astfel incat sa le putem folosi, si sa putem tranzitiona intre ele. Pentru acest lucru, vom folosi un Animator Controller. Acest controller functioneaza ca un automat de stari, fiecare stare putand fi o animatie.

Pentru a folosi animatiile se pot adauga cu drag-and-drop in Animator.

Pentru animatii fluente si controlate, trebuie sa definim tranzitii intre acestea. Tranzitiile au mai multe proprietati, printre care timpi de activare, conditii etc.

Conditiile sunt folosite pentru a controla cand are loc o tranzitie. Spre exemplu, putem folosi un parametru de stare, pentru a trece dintr-o animatie in alta, sau alte conditii (spre exemplu daca este pe sol, in aer, primeste damage etc.)

Spre exemplu putem folosi urmatoarea conventie pentru un parametru de stare:

• ken_idle = 0
• ken_walk = 1
• ken_crouch = 2
• ken_jump = 3
• ken_hadooken = 4

si punem conditia de tranzitie de la Idle la Walk state=1. Acest lucru îi va spune personajului, dacă este în Idle, pentru a tranzitiona la animația de Walk dacă parametrul de stare se schimbă la 1.

Pentru a schimba starile unui animator, trebuie in primul rand adaugata componenta de Animator pe obiect. Apoi, putem controla parametrii definiti prin functii disponibile in clasa Animator.

const int STATE_IDLE = 0;
const int STATE_WALK = 1;
const int STATE_CROUCH = 2;
const int STATE_JUMP = 3;
const int STATE_HADOOKEN = 4;
 
string _currentDirection = "left";
void Start()
{
        //define the animator attached to the player
        animator = this.GetComponent<Animator>();
}
 
void Update()
{
        if (Input.GetKey ("right")) {
          changeDirection ("right"); //schimba directia personajului
          transform.Translate(Vector3.left * walkSpeed * Time.deltaTime); //muta personajul
          animator.SetInteger ("state", STATE_WALK); //activeaza animatia
 
        }
}
 
void changeDirection(string direction)
     {
 
         if (_currentDirection != direction)
         {
             if (direction == "right")
             {
             transform.Rotate (0, 180, 0);
             _currentDirection = "right";
             }
             else if (direction == "left")
             {
             transform.Rotate (0, -180, 0);
             _currentDirection = "left";
             }
         }
 
     }

Petru a anima fundalul unui joc 2D, putem altera pozitia texturii. Astfel, trebuie sa definim un material cu o textura, si sa o aplicam pe un obiect (de obicei un quad). Dupa care avem la dispozitie componenta de Render in care putem accesa materialul si implicit texturile, la care putem adauga un offset, in functie de pozitia caracterului, sau o miscare in timp etc.

   renderer = GetComponent<Renderer>();
   
   renderer.material.SetTextureOffset("_MainTex", offset);
   
   // "_MainTex" is the main diffuse texture. This can also be accessed via mainTextureOffset property. 
   // "_BumpMap" is the normal map. 
   // "_Cube" is the reflection cubemap.

Pentru a functiona corect, textura pe care o folositi trebuie sa fie setata pe Repeat

Pentru animatia de tragere, se foloseste in general o stare pentru a actualiza animatia jucatorului, iar proiectilul se genereaza in felul urmator (recomandat):

• Pe arma (care se afla in scena) se adauga un script care gestioneaza generarea si directia proiectilelor
• Plecand din locatia armei, se instantiaza (folosind functia Instantiate, studiata deja) un proiectil (prefab de regula, nu trebuie sa existe deja in scena, folosind pozitia armei). Proiectilul are atasat un script ce contine detalii de viteza, damage etc
• Proiectilul are o miscare de translatie continua pe o directie, pana la atingerea unei limite sau a unui collider cand produce un trigger

Pentru instantiere se foloseste functia Instantiate(gameobject, position). Pentru a genera continut doar in spatiu vizil pe ecran, se pot defini obiecte care fixeaza acest cadru, si generat random apoi in acest interval. Obiectele generate pot fi scriptate astfel incat sa aiba animatii si miscari continui.

Miscarea personajului se poate face folosind o componenta de RigidBody2D si aplicand forte sau miscari.

rb = GetComponent<Rigidbody2D>();
float moveHorizontal = Input.GetAxis ("Horizontal");
float moveVertical = Input.GetAxis ("Vertical");

Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);

rb.AddForce (movement * speed);

rb.MovePosition (transform.position + offset * Time.deltaTime);

Pentru detectia coliziunilor se poate folosi un collider2D. Pentru o interactiune usoara, se poate genera un Trigger la evenimentul de coliziune bifand caseta de Trigger din componenta. Dupa care se poate prelua evenimentul si obiectul cu care se face coliziunea.

void OnTriggerEnter(Collider otherObject) {

		score += 10;
		scoreText.text = score.ToString();
		Destroy(otherObject.gameObject);

	}

1. Descarcati scena de start de aici: Download ZIP
2. Creati o paleta de sprite-uri
3. Adaugati un tilemap
   1. Desenati tilemap-ul folosind paleta definita, adaugand coliziune pe alocuri
   2. Desenati tilemap-ul cu diverse tipuri de brush, inclusiv cu cel definit custom (GemBrush)
4. Adaugati un nou tilemap
   1. Definiti un RuleTile si reguli pentru un tile (de ex JungleTile - aveti deja exemplu cu GrassPlatform)
   2. Creati un script pentru a genera random o suprafata de teren/obstacole cu coliziune folosind RuleTile
   3. Creati un script pentru a genera random elemente de mediu fara coliziune (le gasiti in EnvironmentProps; puteti folosi un output de Random sau direct un RandomTile)
   4. Creati un script pentru a genera random elemente de pickup (aveti un prefab CollectableGem la dispozitie pe care il puteti folosi intr-un PrefabTile)
5. Adaugati in scena o imagine care reprezinta fundalul de joc (animat)

Aplicatii de desenat sprite-uri