Differences
This shows you the differences between two versions of the page.
|
pjv:laboratoare:04 [2018/10/31 14:24] alexandru.gradinaru |
pjv:laboratoare:04 [2019/10/23 16:13] (current) alexandru.gradinaru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== Tilemaps 2D ===== | ===== Tilemaps 2D ===== | ||
| + | |||
| + | ==== Elemente componente ==== | ||
| + | - Grid: componenta de tip canvas, in care se pot adauga tilemap-uri | ||
| + | - 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 === | ||
| + | |||
| + | - Descarcati scena de start de aici: [[https://www.dropbox.com/s/8lo09g081ni0j2c/2DTilemapsStarter.zip?dl=0 | Download ZIP]] | ||
| + | - Creati o paleta de sprite-uri | ||
| + | - Adaugati un tilemap | ||
| + | - Desenati tilemap-ul folosind paleta definita, adaugand coliziune pe alocuri | ||
| + | - Desenati tilemap-ul cu diverse tipuri de brush, inclusiv cu cel definit custom (GemBrush) | ||
| + | - Adaugati un nou tilemap | ||
| + | - Definiti un RuleTile si reguli pentru JungleTile (aveti deja exemplu cu GrassPlatform) | ||
| + | - 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) | ||
| + | - Creati un script pentru a genera random elemente de pickup (aveti un prefab ''CollectableGem'' la dispozitie pe care il puteti folosi intr-un PrefabTile) | ||
| + | |||
| + | ==== Resurse ==== | ||
| + | |||
| + | [[https://felgo.com/game-resources/make-pixel-art-online|Aplicatii de desenat sprite-uri]] | ||
