~~NOTOC~~
{{ :images:banner_mysticwoods.png |}}

===== Level design =====

I denne øvelse vil du lære om:

  * Sprites
  * Tilesets
  * Tilemaps
  * Layers
  * (ysort)

----

==== Ressourcer ====

I denne øvelse vil vi benytte os af en gratis grafik-pakke ved navn 'Mystic Woods'.
Hent denne pakke via nedenstående link.\\

<WRAP round classes download>
[[https://game-endeavor.itch.io/mystic-woods|Mystic Woods tileset v2.1]]
</WRAP>
//**obs!**// Ved download er der mulighed for at donere, dette er ikke obligatorisk. Du kan klikke //'No thanks, just take me to the downloads'//. (Du må gerne donere hvis du har lyst ;-) ) 

Udpak den downloadede zip-fil, og træk filerne ind i dit 'File-system' vindue. Så du har nedenstående struktur.


{{ :images:mystic_woods_unpacked.png?220 |}}

//**obs!**// Du kan med fordel, allerede nu, manuelt oprette foldere til //scenes// og //scripts// til din 'File-system' struktur.

----


==== Tilemap ====
{{ :images:tilemap_example.png?300|}}
Når du opbygger din 2D 'verden' i Godot foregår det i et **tilemap**. Som navnet antyder er et tilemap, et map of tiles. (Et 'kort' af 'felter', .frit oversat)

Kortet er opdelte i rækker og kolloner, som f.eks et skakbræk.

Hver felt indeholder en //sprite// og disse sprites udgør tilsammen dit level design.\\

<WRAP round width 100% classes tip>
Tænk på tilemap som en et ternet canvas, hvori du kan placere grafik af en given størrelse. fx. 16x16 pixels.
</WRAP>

Tilføj et Tilemap til rood node ('World'), ved CTRL-A, søg efter Tilemap. (marker og klik 'Add')

Marker dit tilemap i Scenen,  og du kan nu se dit tilemaps egenskaber, i inspector.

Et Tileset er en mængde af grafik-stumper, der kan bruges til at sætte i dit tilemap.
Opret et nyt tileset, som vist nedenstående.

{{ :images:new_tileset.png |}}

Bemærk der er nu er et 'Tileset' link i bundet af din skærm. 

Nu skal vi importere den grafik som vores tileset udgør. 
Træk tilesettet 'plains' in i 'Tiles' vinduet. 

{{ :images:autocreate_tiles_.png |}}

Godot tilbyder at auto importere vores tileset,.. lad os tage imod tilbudet.:-) (klick Yes)

{{ :images:tiles_imported.png |}}

<WRAP classes info round>
Et tileset er en mængde af ikke-arrangede sprites.\\ __Bemærk hver sprite er kun repræsenteret én gang i et tileset__.\\
Vi kan betragte tileset'et som den 'palette' vi kan bruge til at male vores tilemap med.
</WRAP>

  * Træk ligeledes '//grass//' og '//objects//' tileset'et ind i Tiles.

----

=== Vælg tiles fra tileset ===

Som udgangspunkt er alle tiles aktive, i default størrelse 16x16 pixels.... men.

  - Vi ønsker ikke at benytte alle tiles.
  - I 'objects' er der træer m.m. som består af flere små 16x16px tiles, disse vil vi gerne have samlet til en enkelt tile.

Fravælg de "tomme" 'brune' tiles ved at vælge 'viskelæder' ikon, og derefter klikke på de uønskede til som vist nedenstående.

{{ :images:deleting_tiles.png |}}

  * Fravælg ligeledes uønskede tiles på '//objects//' tileset. ..  infact fravælg alle tiles på 'Objects'. 

----

=== Gruppering af tiles ===

I 'objects' har elementer som består af flere tiles. fx. Seng, Træ, rod-stub. Vi vil nu gruppere disse tiles således de hver især udgør én større tile.

For tilvælge tiles, ..klik igen på viskelæder icon. (off)

Enkelt sprites, kan nu tilvælges ved at klikke på dem.

For at tilvælge og __gruppere__ sprites holdes **SHIFT** inde, men du trækker musen over de ønskede tiles.

{{ :images:tiles_gruppered.png |}}

Vi kan nu begynde at dekorere vores tilmap, med vores nyvalgte tiles.

----

==== Udsmykning af tilemap ====

Vælg nu 'Tilemap', og klik paint (blyant ikon).

Vælg den tile du vil 'male' med, og begynd nu at indsætte tiles til dit level.

<WRAP round classes tip>
Start med at male __ground niveau__, det niveau som spilleren går på som udgangspunkt.
Senere vil vil tilføje lag (Layers) til de andre niveauer.
</WRAP>

Nedenstående er basen for dette level-design, hvorpå vi kan tilføje yderligere layers.

{{ :images:ground.png?400 |}}

Lav dit eget ground layer.


----

==== Layers ====

Når vi designer et level ønsker vi at differentiere mellem forskellige **Layers** (lag). Et Layer kan du betragte som en 'glasplade' du lægger oven på dit foregående lag. Dette tillader dig at give tiles på samme lag, samme egenskaber- f.eks. hvis du ønsker alle tiles i et layer skal have en kollisions-box, og derfor ikke vil kunne passeres af player.\\

Vi vil i dette level arbejde med tre forskellige lag:

  * **ground ** (bunden af vores scene, der hvor Player kan gå)
  * **cliffs ** (bakker/klipper)
  * **ysort  ** (i dette lag placeres de elementer som Player kan stille sig bag ved, fx. træer & buske)

I inspector navngiver vi nuværende layer som 'ground' og tilføjer endnu to layers og navngiver disse layers 'cliffs' og 'ysort'

{{ :images:layer_add.png |}}

Du kan nu skifte mellem dine Layers i drop-down pox, i det Tilemap vindue (nederst). Vælg layer 'cliffs' og påbegynd at male dine bakker/bjerge.

{{ :images:layer_select.png?300 |}}

Med cliff som valgt layer, vil du nu se et semi-transperent layer, hvorpå du kan placere dine bakker/klipper.
Jeg har placeret mine bakker/klipper som vist nedenstående.

{{ :images:cliffs.png?500 |}}

Vælg nu 'ysort' layer, placer de elementer som vores spiller skal kunne gå ind bag ved.
Mit 'ysort' layer ser således ud:
{{ :images:ysort_layer.png?500 |}}

==== Y-sorting ====

Du kan læse mere om Y-sorting [[godot:ysorting|her]]

----

Denne tutorial er lavet pga.: https://www.youtube.com/watch?v=HYnKrIM2s8s