Differences

This shows you the differences between two versions of the page.

Link to this comparison view

pjv:laboratoare:2020:02 [2020/10/27 23:48]
alexandru.gradinaru
pjv:laboratoare:2020:02 [2021/11/10 20:16] (current)
alexandru.gradinaru
Line 3: Line 3:
 ==== Animatii 2D in Unity ==== ==== Animatii 2D in Unity ====
  
-In Unity (versiunea curenta) avem doua posibilitati de a face animatii 2D: //​sprite-sheet//​ si //​bone-based//​.+In Unity (versiuni dupa 2018) avem doua posibilitati de a face animatii 2D: //​sprite-sheet//​ si //​bone-based//​.
  
 {{ :​pjv:​laboratoare:​ninja.jpg?​200 |}}  {{ :​pjv:​laboratoare:​ninja.jpg?​200 |}} 
Line 225: Line 225:
 </​code>​ </​code>​
  
-=== Cerinte ​===+===== Tilemaps 2D =====
  
-  ​Descarcati ​scena de start de aici: [[https://www.dropbox.com/s/8lo09g081ni0j2c/​2DTilemapsStarter.zip?dl=0 | Download ZIP]] +==== Elemente componente ==== 
-  - Creati o paleta de sprite-uri +  ​Grid: componenta de tip canvas, in care se pot adauga tilemap-uri 
-  Adaugati ​un tilemap+  - Tilemap: obiectul in care se vor adauga tile-urile 
 +  - Tilemap Renderer: componenta care controleaza cum se deseneaza tile-urile 
 +  - Tile Palette: asset ce defineste o colectie de tile-urile ce ar putea fi folosite 
 +  - Tile: asset ce poate contine un Sprite, o culoare sau un colider 
 +   
 +Tile-urile pot fi scriptate astfel incat sa se creeze comportamente personalizate,​ spre exemplu in functie de vecini sau pozitia tile-ului. 
 +  
 +==== Palette ====  
 + 
 +Pentru a utiliza tilemaps, in primul rand trebuie definita o paleta folosind utilitarul Window -> 2D -> Tile Palette. 
 + 
 +Acest utilitar va permite sa creati palete diferite pentru a construi usor tilemap-ul. 
 + 
 +{{ :​pjv:​laboratoare:​tile-palette-window.png?​direct&​300 |}} 
 + 
 +La aceasta paleta se adauga sprite-uri ce se vor putea folosi ulterior ca template-uri de desenare (brush). 
 + 
 +{{ :​pjv:​laboratoare:​create-tiles-from-spritesheet.gif?​direct&​300 |}} 
 + 
 +Se pot folosi si brush-uri standard sau personalizate,​ prefab-uri etc. 
 + 
 +{{ :​pjv:​laboratoare:​2018-10-31_1_.png?​direct&​300 |}} 
 + 
 +==== Tile maps ==== 
 + 
 +Pentru a adauga un tilemap in scena, adaugati un GameObject ​de tipul 2D -> Tilemap. Acesta va genera un Grid parinte si un tilemap. 
 + 
 +Folosind paleta construita, se poate `picta` tilemap-ul. 
 + 
 +{{ :​pjv:​laboratoare:​select-sandy-brush.png?​direct&​300 |}} 
 + 
 +{{ :​pjv:​laboratoare:​paint-sand.gif?​direct&​300 |}} 
 + 
 +Exista si posibiltatea ​de a folosi un prefab pentru un tile prin ''​PrefabBrush''​. Acest lucru ne permite definirea de obiecte mai complexe (scriptate, de ex pickups sau inamici) si generarea lor in tile-uri. 
 + 
 +{{ :​pjv:​laboratoare:​setup-prefab-brush.png?​direct&​300 |}} 
 + 
 +{{ :​pjv:​laboratoare:​painting-prefabs-down.gif?​direct&​300 |}} 
 + 
 +Se pot adauga mai multe tilemap-uri in grid (spre ex unul pentru teren, unul pentru vegetatie, inamici etc) 
 + 
 +{{ :​pjv:​laboratoare:​switch-layer-to-dungeonfloor.png?​direct&​300 |}} 
 + 
 +Un tilemap poate avea si coliziuni, prin adaugarea unei componente de ''​Tilemap Collider 2D''​. 
 + 
 +Separarea in mai multe layere de tilemap ne ajuta sa adaugam coliziuni doar pentru elementele importante: de exemplu pot avea un tilemap cu pereti (care vor avea coliziune) si un tilemap cu elemente de podea sau decor in fundal, care de regula nu au coliziuni. 
 + 
 +{{ :​pjv:​laboratoare:​wall-colliding.gif?​direct&​300 |}} 
 + 
 +O componentă utilă este Colliderul ''​Composite Collider''​. Adăugarea acestuia Tilemap Collider 2D va fuziona toate coliderele într-o plasă de coliziune mult mai optimizată a geometriei! 
 + 
 +{{ :​pjv:​laboratoare:​composite-collider-2d.png?​direct&​300 |}} 
 + 
 +==== Tiles ==== 
 + 
 +Tile-urile pot fi scriptate, astfel ca se pot defini reguli pentru afisarea lor. Pentru a usura acest lucru, se poate folosi pachetul de add-on de ``2D extras`` de la unity: [[https://github.com/Unity-Technologies/2d-extras]]. 
 + 
 +Astfel, aveti la dipozitie crearea simpla de tile-uri: 
 +  * RuleTile: script de baza pentru contruirea de reguli manuale in plasarea automata a tile-urilor 
 +  * Animate: creaza o animatie prin afișarea unei liste de sprite în ordine (sprite animation pentru tile) 
 +  * Pipeline: iau în considerare tile-urile ortogonale învecinate și afișează un sprite daca tile-ul vecin este simlar sau nu 
 +  * Random: aleg aleator un sprite dintr-o listă dată de sprites și o locație țintă și afișează sprite-ul 
 +  * Terrain: iau in considerare vecinii ortogonali si diagonali si afiseaza un sprite daca tile-urile vecine este simlar sau nu 
 + 
 +Crearea unui RuleTile va permite sa definiti usor scripturi automate de generare a terenului folosind un tile, care se afiseaza diferit in functie de amplasare. 
 + 
 +{{ :​pjv:​laboratoare:​rule-tile-selection.png?direct&​300 |}} 
 + 
 + 
 +Acest tip de tile imi permite sa definesc reguli pentru existenta sau nu a vecinilor. In functie de aceste reguli se poate folosi un sprite sau altul. X rosu inseamna ca nu trebuie sa existe, iar sageata verde indica necesitatea vecinilor. 
 + 
 +{{ :​pjv:​laboratoare:​finishedruletile.png?​direct&​300 |}} 
 + 
 +Ouput-ul unei reguli poate fi un singur sprite, o animatie sau alegerea random a unui sprite. 
 + 
 +{{ :​pjv:​laboratoare:​makesensof-this-1024x899.png?​direct&​300 |}} 
 + 
 +==== Generare procedurala ==== 
 + 
 +Tilemaps-urile ofera, dupa cum ati vazut prin RuleTile, posibilitatea de a seta tile-urile dinamic, folosind scripturi. Asta inseamna ca se pot genera procedural tilemap-uri intregi. 
 + 
 +{{ :​pjv:​laboratoare:​image3.gif?​direct&​300 |}} 
 + 
 +Un mod usor de a genera procedural o scena, este prin folosirea de RuleTile. Astfel, se genereaza un grid care se completeaza pe alocuri cu tile-ul dinamic (RuleTile), sprite-ul afisat fiind in functie de pozitia si vecinii tile-ului curent. 
 + 
 +Pentru a seta un tile, se poate folosi functia 
 +<​code>​ 
 + 
 +using UnityEngine.Tilemaps;​ 
 + 
 +[Tooltip("​The Tilemap to draw onto"​)] 
 +public Tilemap tilemap; 
 +[Tooltip("​The Tile to draw (use a RuleTile for best results)"​)] 
 +public TileBase tile; 
 + 
 +//​SetTile(position,​ tile) 
 +tilemap.SetTile(new Vector3Int(x,​ y, 0), tile); 
 +</​code>​ 
 + 
 +Pentru a genera random o scena, se pot folosi tehnici precum Perlin Noise, Random Walk, Cellular Automata etc. 
 +Mai multe detalii si exemple de implementare gasiti aici: [[https://​blogs.unity3d.com/​2018/​05/​29/​procedural-patterns-you-can-use-with-tilemaps-part-i/​|Part I]] [[https://​blogs.unity3d.com/​2018/​06/​07/​procedural-patterns-to-use-with-tilemaps-part-ii/​|Part II]] 
 + 
 +De asemenea, in proiectul de starter, mai este definit un tip de tile, denumit PrefabTile, prin care practic se pot adauga prefab-uri ca tile-uri efectiv (se inlocuieste gameObjectul tile-ului cu cel al prefab-ului). Puteti verifica in Add-Ons > PrefabTile. Astfel, se pot folosi prefab-uri pentru generare automata de tile-uri. 
 + 
 +===== Cerinte ===== 
 + 
 +Leapşa 2D platformer: realizati un 2D platformer cu interactiuni simple care sa includa: 
 +  ​- Un mediu de joaca prin folosirea de tilemap: 
 +    ​- Creati o paleta de sprite-uri 
 +    Creati ​un tilemap
     - Desenati tilemap-ul folosind paleta definita, adaugand coliziune pe alocuri     - Desenati tilemap-ul folosind paleta definita, adaugand coliziune pe alocuri
     - Desenati tilemap-ul cu diverse tipuri de brush, inclusiv cu cel definit custom (GemBrush)     - Desenati tilemap-ul cu diverse tipuri de brush, inclusiv cu cel definit custom (GemBrush)
-  - Adaugati un nou tilemap+  - Un mediu generat aleator
     - Definiti un RuleTile si reguli pentru un tile (de ex JungleTile - aveti deja exemplu cu GrassPlatform)     - Definiti un RuleTile si reguli pentru un tile (de ex JungleTile - aveti deja exemplu cu GrassPlatform)
 +    - Creati un tilemap
     - Creati un script pentru a genera random o suprafata de teren/​obstacole cu coliziune folosind RuleTile     - Creati un script pentru a genera random o suprafata de teren/​obstacole cu coliziune folosind RuleTile
-    - 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) +    - [bonus] ​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) 
-    - Creati un script pentru a genera random elemente de pickup (aveti un prefab ''​CollectableGem''​ la dispozitie pe care il puteti folosi intr-un PrefabTile) +    - [bonus] ​Creati un script pentru a genera random elemente de pickup (aveti un prefab ''​CollectableGem''​ la dispozitie pe care il puteti folosi intr-un PrefabTile) 
-  - Adaugati ​in scena o imagine ​care reprezinta fundalul ​de joc (animat)+  - Un fundal animat ​in scena (o imagine, sau obiecte) 
 +  - Minim doua tipuri ​de inamici animati ​(prin orice tehnica prezentata) 
 +    - trag cu proiectile aleator/in jucator: la atingerea jucatorului iau damage 
 +    - animat ​in mai multe stari (minim 3: miscare, atac, distrugere) 
 +    - la coliziune cu jucatorul se distrug 
 +    - sunt generati dinamic, la pozitii aleatoare si se deplaseaza continuu 
 +  - Un personaj principal 
 +    - Configurati camera astfel incat sa urmareasca personajul principal din scena 
 +    - Se poate controla de la tastatura 
 +    - Animat in mai multe stari (minim 3: mers, sarit, damage) 
 +    - Health (viata jucatorului):​ se decrementeaza in momentul in care este atins de proiectile inamice 
 +    - Score (scorul jucatorului):​ se incrementeaza in momentul in care atinge inamicii sau [bonus] trece prin obiecte colectabile
  
-==== Resurse ====+<note tip>​Descarcati scena de start de aici, cu personaj deja configurat si cu rule-tile-uri:​ [[https://​www.dropbox.com/​s/​8lo09g081ni0j2c/​2DTilemapsStarter.zip?​dl=0 | Download ZIP]]</​note>​ 
 + 
 +===== Resurse ​=====
  
 [[https://​felgo.com/​game-resources/​make-pixel-art-online|Aplicatii de desenat sprite-uri]] [[https://​felgo.com/​game-resources/​make-pixel-art-online|Aplicatii de desenat sprite-uri]]
 +
 +
pjv/laboratoare/2020/02.1603835319.txt.gz · Last modified: 2020/10/27 23:48 by alexandru.gradinaru
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0