# De Wereld

Nu we een speler hebben die door een grijze "void" kan bewegen is het tijd om de wereld wat meer kleur te geven. Hiervoor gaan we gebruik maken van "tegels" waarmee we de wereld kunnen tekenen. Het "asset pack" wat we hebben gedownload heeft een aantal "tilesets" (verzamelingen van dit soort "tegels" voor verschillende typen gebieden) die we kunnen gebruiken. Deze kun je vinden in de Backgrounds/Tilesets map.

In eerste instantie zullen we ons vooral bezig houden met het tekenen van de grond "buiten" in de bovenwereld. Hiervoor gaan we de TilesetFloor tileset gebruiken. Deze tileset geeft ons acht verschillende soorten "grond" waar we de wereld vorm mee kunnen geven.

# Gras

• Open de "boven wereld".
• Maak een nieuwe node en kies de TileMapLayer.
• Verander de naam van de TileMapLayer naar Gras.
• Klik in de Inspector op naast Tile Set.
• Kies voor TileSet onder New.
• Klik op TileSet om de eigenschappen te openen.
• Zorg er voor dat onder Tile Size beide waardes op 16px staan.
• Klik onderaan in het midden van het scherm op TileSet.
• Zoek het Backgrounds/Tilesets/TilesetFloor.png bestand in het FileSystem gebied.
• Sleep het TilesetFloor bestand naar het lege vlak onder Tile Sources.
• Er wordt gevraagd of de fileset automatisch in tiles moet worden opgesplitst. Antwoord hierop Yes.

We kunnen nu beginnen met tekenenen

• Kies onderin het scherm voor TileMap
• Zorg ervoor dat het potlood geselecteerd is in de menubalk boven de weergave van de tilemap (en dat de muisaanwijzer geselecteeerd is in de bovenste menubalk)
• Kies een "tegel" in de tilemap en begin te tekenen door de linker muisknop in te drukken en de muis over de weergave van de wereld te bewegen.
• Je kunt "tegels" weer verwijderen door er met de rechter muisknop op de klikken.

Je zult misschien zien dat je over de speler heen kunt tekenen. Dat is natuurlijk niet de bedoeling. Gelukkig is dit eenvoudig op te lossen.

• In de "scene tree" staat de Speler in dit geval "boven" de Gras node.
• Sleep de Gras node omhoog naar boven de Speler.
• De speler is nu weer zichtbaar.

We zullen nu wat meer gras tekenen waarbij we de editor automatisch willekeurig stukjes gras laten kiezen.

• Selecteer de grastegels die je wilt plaatsen door deze te selecteren, bijvoorbeeld door de linker muisknop ingedrukt te houden en over de verschillende tegels heen te bewegen, of door shift ingedrukt te houden en de tegels die je wilt aan te klikken.
• Klik op de dobbelsteen in de menubalk boven de TileMap.
• Door de linker muisknop ingedrukt te houden in de weergave van de wereld en de muis rond te bewegen kun je nu willekeurig gras tekenen.
• In de menubalk staan ook een lijn en rechthoek tool om sneller grotere vlakken te tekenen.
• Je kunt ook de randen van een gebied tekenen en dan met de verfemmer de binnenkant invullen.

Afhankelijk van de gekozen grastegels kan het zijn dat het gras er wat "wild" uitziet.

We kunnen de editor vertellen om sommige grastegels vaker te gebruiken dan anderen wanneer het willekeurig tegels plaatst. Hiervoor volgen we de volgende stappen

• Klik onderin het scherm op TileSet.
• Klik op Select.
• Klik op de grastegel die we vaker of minder vaak willen voor laten komen.
• Er verschijnen in de middelste kolom een aantal eigenschappen voor deze tegel.
• Klik op Miscellaneous.
• Verander de probability naar een hoger getal, bijvoorbeeld 6, als je wilt dat de tegel relatief vaker gebruikt wordt, of naar een getal tussen 0 en 1, bijvoorbeeld 0.25, als je wilt dat de tegel relatief minder vaak gebruikt wordt.
• Klik weer op TileMap en ga verder met tekenen.

# Wegen

Hoewel gras natuurlijk heel leuk is, is het ook wel fijn om wat wegen te hebben, zodat we weten waar de speler zoal heen zou kunnen lopen. De wegen zullen we op een nieuwe "laag" in de bovenwereld tekenen.

• Om niet dezelfde setup te hoeven doen als voor het gras, klikken we met de rechter muisknop op de Gras node en klikken op Duplicate. Of selecteer de Gras node en druk op het toetsenbord op Control+D.
• Verander de naam van de node van Gras2 naar Wegen.
• Selecteer de "gum" in de menubalk in het midden van het scherm en wis al het gras op deze laag. Bijvoorbeeld door een groot vierkant te tekenen. In plaats van de "gum", kun je het vierkant ook tekenenen door de rechter muisknop ingedrukt te houden.
• Zet de "gum" en de "dobbelsteen" uit.
• Kies een stuk weg uit de TileMap en tekenen een paar kleine wegen.

Het zal vast opvallen dat de wegen die we tekenen er nogal hoekig uitzien. Maar het zal misschien ook opgevallen zijn dat er ook "randen" voor de wegen in de TileMap zijn die de wegen er beter uit kunnen laten zien. Voor elke hoek in de weg de juiste tegel zoeken kost erg veel tijd. Gelukkig heeft de editor ook hier een truc om automatisch de juiste tegels te kiezen. Hiervoor moeten we wel wat voorbereidend werk doen door "terreinen" te definiëren.

• Zorg dat de Wegen node geselecteerd is in de "scene tree".
• Klik aan de rechterkant van het scherm in de Inspector op TileSet.
• Vouw het Terrain Sets menu open en klik op Add element.
• Selecteer Match Sides bij de Mode optie. De optie die we hier selecteren bepaalt hoe goed de editor automatisch de juiste tegel zal kiezen, maar de betere opties (Match Corners and Sides) vereisen ook meer werk van tevoren.
• Open Terrains en klik op Add element.
• Verander de Name naar "Bos" of een andere naam die beter past bij de type grond of gras die je hebt gekozen.
• Kies bij Color voor een kleur die niet lijkt op de kleur van de wegen. Dit lijkt misschien een beetje vreemd, maar we zullen snel zien waarom dit handig is.

Nu kunnen we exta informatie toevoegen aan de tegels in onze TileSet, zodat de editor ze automatisch kan plaatsen wanneer we wegen tekenen.

• Klik onderin het scherm op TileSet.
• Klik op Paint.
• Klik op Select a Property Editor en klik op Terrains.
• Selecteer Terrain Set 0 bij Terrain Set.
• Selecteer Bos (of de andere naam die je het terrein hebt gegeven) bij Terrain.
• Selecteer de tegels die je voor je wegen wilt gebruiken in in het overzicht van de tileset. De geselecteerde tegels worden lichter van kleur.
• Klik ook in het midden van elke tegel om aan te geven dat de tegel gebruikt moet worden voor de weg. Hier komt de eerder geselecteerde kleur van pas en is duidelijk waarom het het beste een andere kleur kan zijn dan het terrein, aangezien het dan beter zichtbaar is.

Nu komt het lastigste gedeelte. We moeten van elke tegel aangeven wanneer deze precies gebruikt moet worden tijdens het tekenen. Dit doen we door de kanten van de tegel in te kleuren waar andere tegels van de weg getekend worden. Dus bijvoorveeld als we naar de tegel rechts onderin kijken, dan willen we dat die tegel getekend wordt als er ook weg is links van en boven de tegel. We kleuren dan ook de linkerkant en de bovenkant van de tegel in.

Als het goed is gegaan ziet het terrein er als volgt uit

We kunnen nu wegen tekenen met dit terrein.

• Ga naar TileMap onderin het scherm.
• Klik in de middelste menubalk op Terrains
• Selecteer het Bos terrein.
• Teken een aantal vierkante "wegen".

De vierkante blokken "weg" zullen er al best goed uitzien. Mocht je toevallig een paar vierkanten getekend hebben die elkaar raken, zal het misschien opvallen dat sommige hoeken niet helemaal kloppen.

Dit komt doordat ons terrein alleen maar tegels heeft voor grote hoeken en langere rechte stukken. Voor dit soort kleinere details zullen we een gedetaileerder terrein moeten maken. Als je bijvoorveeld probeert een rechte lijn te tekenen, zul je zien dat dit ook niet goed werkt.

Gelukkig kan dit beetje voor beetje opgelost worden door steeds meer detail aan het terrein toe te voegen. Voor de dunnere rechte wegen kunnen we de tegels toevoegen die direct naast en onder de voorgaande tegels liggen. Ook deze tegels markeren door aan te geven aan welke kanten van de tegel er stukken weg moeten zijn voordat de tegel gekozen wordt om getekend te worden.

Hoewel dit er al een stuk beter uitziet, zijn er nog steeds kleine foutjes zichtbaar als wegen op een bepaalde manier bij elkaar komen.

Ook dit is weer op te lossen door meer tegels en informatie toe te voegen aan het terrein. In dit geval zullen we niet alleen moeten aangeven aan welke kanten van een tegel aangrenzende tegels zijn, maar ook aan de hoeken.

Als eerste stap moeten we de "mode" van onze "terrain set" aanpassen naar Match Corners and Sides.

• Zorg dat de Wegen node geselecteerd is in de "scene tree".
• Ga in de Inspector, aan de rechterkant van het scherm, naar Terrain Sets en verander de Mode van de terrain set naar Match Corners and Sides.
• Klik onderin het scherm weer op TileSet.

Het zal misschien opvallen dat de geselecteerde kanten veranderd zijn naar kleine vierkantjes. Dit komt omdat we nu ook moeten aangeven aan welke hoeken van de tegels andere tegels grenzen. Om op hetzelfde niveau te komen als toen Match Sides de mode was, moeten we de binnenste vierkanten van de al ingekleurde tegels nu ook zelf inkleuren.

Ook kunnen we nu de andere tegels toevoegen die we nodig hebben om gedetailleerde wegen te tekenen. Dit ziet er misschien wat uitdagend uit, maar er is een relatief eenvoudige truc om te kiezen welke stukken van de tegels ingekleurd moeten worden. De stukken die "aarde" laten zien moeten ingekleurd worden en de stukken die "gras" voorstellen willen we niet inkleuren. Dit is een nauwkeurig werk, dus neem je tijd. Als je klaar bent moet de tileset er als volgt uitzien.

We kunnen nu proberen meer gedetailleerde wegen te tekenen en deze zouden nu allemaal goed aan moeten sluiten.

• Klik onderin het scherm op TileMap.
• Klik op Terrains.
• Selecteer het Bos.
• Teken een ingewikkeldere weg en kijk of er nog foutjes zichtbaar zijn.

# Bomen, rotsen en andere obstakels

De wereld begint inmiddels redelijk vorm te krijgen met gras en wegen waarover onze speler kan lopen. Maar de wereld is wel een beetje plat. Om dit te verhelpen kunnen we dingen toevoegen als bomen, rotsen, etc. waar de speler omheen moet lopen. Hiervoor zullen we dezelfde technieken gebruiken als we gebruikt hebben voor de Gras en Wegen lagen.

• Klik met de rechter muisknop in de "scene tree".
• Klik op "Add Child Node…"
• Selecteer de TileMapLayer.
• Verander de naam van de nieuwe TileMapLayer naar "Obstakels".
• Zorg ervoor dat de Obstakels node boven de Speler node staat in de "scene tree".

Voor de volgende stap moeten we een nieuwe "tilemap" definiëren waarmee we de obstakels kunnen tekenen. We gaan hiervoor de "TilesetNature" tileset gebruiken. Deze tileset kun je, net als de vorige tileset, vinden in de Backgrounds/Tileset map. Deze tileset bevat sprites voor (groepen van) bomen, rotsen, etc.

• Klik in de Inspector naast Tile Set op .
• Selecteer TileSet.
• Klik onderin het scherm op TileSet.
• Navigeer in het FileSystem gebied naar de Backgrounds/Tilesets map in de asset pack.
• Sleep de "TilesetNature.png" vanuit het FileSystem gebied naar het gebied on de Tile Sources map.
• Kies deze keer No wanneer de editor vraagt of er automatisch tegels gemaakt moeten worden. Dit is nodig aangezien niet alle tegels even groot zijn. We zullen zelf moeten aangeven hoe groot elke tegel is.

Om te beginnen gaan we verder met het voorbereiden van één boom om onze wereld verder mee in te vullen. Het proces om andere objecten vanuit deze tileset toe te voegen is hetzelfde waarna de andere objecten beschikbaar zijn om mee te tekenen.

• Selecteer het Setup menu uit de middelste
• Kies een type boom die je wilt toevoegen aan de wereld en selecteer een van de tegels waar de boom uit bestaat.
• Selecteer het Select menu uit de middelste menubalk.
• Selecteer de eerder gekozen tegel en gebruik de rondje bolletjes die verschijnen om het vak net zo groot te maken als de boom.

De boom kan nu gebruikt worden om mee te tekenen.

• Selecteer onderin het scherm TileMap.
• Selecteer de zojuist bewerkte boom.
• Teken de boom in je wereld.

Als je nu het spel start, zul je zien dat de speler gewoon door de boom heen kan lopen en dat de speler altijd bovenop de boom zichtbaar is. Dat is natuurlijk niet hoe de echte wereld werkt. Dus laten we daar wat aan doen.

"Y-sorting" is functionaliteit in de editor die er voor zorgt dat verschillende objecten, zoals bomen en de speler, achter elkaar langs kunnen bewegen. Dit is eenvoudig aan te zetten.

• Selecteer de Obstakels node in de "scene editor".
• Vouw in de Inspector het Ordering menu open en zet een vinkje bij Y Sort Enabled.
• Sleep de Speler bovenop de Obstakels.

De Speler node is nu "genest" in de Obstakels laag en als je nu het spel start zul je zien dat wanneer je naar een boom toe loopt dat de speler halverwege achter de boom verdwijnt. Wanneer de speler precies achter een obstakel moet verdwijnen hangt van het obstakel af. Bij de meeste bomen zal het opvallen dat de speler misschien later achter de boom verdwijnt dan je zou verwachten. Dit kan worden opgelost door de "Texture Origin" van de obstakels aan te passen. Dit kan met de volgende stappen.

• Klik onderin het scherm op TileSet.
• Klik in de middelste menubalk op Select.
• Selecteer de boom/het obstakel om aan te passen.
• Vouw het Rendering menu open.
• Pas de y waarde by Texture Origin aan, zodat de speler eerder of later achter het obstakel verdwijnt. Hogere getallen zorgen ervoor dat de speler later achter het obstakel verdwijnt als de speler er op af loopt vanaf de onderkant, lagere (en negatieve waardes) zorgen ervoor dat dit eerder gebeurt.

Maar de speler kan nog steeds door de boom heen lopen… Om dit te voorkomen, moeten we aan elk obstakel een "collission"/"botsing" shape toevoegen, net zoals we dat voor de speler hebben gedaan.

• Klik in de Inspector op Physics Layers.
• Klik op Add Element.

• De Inspector zou er dan als volgt uit moeten zien.

  

Nu kunnen we voor elk obstakel een "collision shape" toevoegen.

• Klik onderin het scherm op TileSet.
• Klik in de middelste menubalk op Select.
• Selecteer het obstakel waar je een "collision shape" aan toe wilt voegen, bijvoorveeld een boom.
• Open in de middelste kolom het Physics en dan Physics Layer 0 menu.
• Klik op de knop met de magneet (Toggle Grid Snap) en selecteer Grid Snap. Dit maakt het makkelijker om de "collision shape" te tekenen.
• Klik op de knop met de vier naar buiten wijzende pijltjes om de collision shape editor groter te maken.
• Klik op de knop met groene plus en klik op een aantal kruizingen in het raster om de "collision shape" te tekenen. Getekende punten kunnen worden verplaatst door eerst op de blauwe knop te klikken en ze dan te verslepen en verwijderd door op de rode knop te klikken en ze dan aan te klikken.

Voor een boom kan de "collision shape" bijvoorbeeld om de stronk getekend worden. Dit ziet er dan als volgt uit