Inleiding tot de Tiled Map Editor een platform-agnostische tool voor niveaukaarten

In dit artikel zal ik u een basisinleiding geven voor de Tiled Map Editor en het ontwerpproces dat eromheen bestaat, terwijl ik de redenen voor het gebruik ervan uiteenzet. Ik zal je ook snel laten zien hoe je in Tiled een kaart kunt maken.


Vereisten

  • Betegelde versie 0.8.1: http://www.mapeditor.org/
  • Tileset vanaf hier. Deze tegels zijn een enigszins aangepaste set uit de OpenGameArt.org Community Tileset: http://opengameart.org

Wat is betegeld?

Tiled is een editor voor algemene tegelontwerpen. Het functioneert als een gratis hulpmiddel om eenvoudig kaartlay-outs te maken. Het is veelzijdig genoeg om meer abstracte dingen te specificeren, zoals aanvaringsgebieden, vijandelijke spaaiposities of power-up-posities. Het slaat al deze gegevens op in een handige, gestandaardiseerde tmx formaat.


Hoe werkt Betegeld?

In de kern werkt het ontwerpproces van het gebruik van Tiled om kaarten te maken door deze stappen te volgen:

  1. Kies de kaartgrootte en de basistegelgrootte.
  2. Voeg tilesets toe van afbeelding (en).
  3. Plaats de tilesets op de kaart.
  4. Voeg extra objecten toe om iets abstracts te vertegenwoordigen.
  5. Sla de kaart op als een tmx het dossier.
  6. Importeer de tmx bestand en interpreteer het voor je spel.

Waarom zou ik Betegeld gebruiken??

Als je een gestandaardiseerd systeem en een krachtige flexibele tool hebt, kun je je richten op belangrijker dingen in je game. Met Tiled kun je een paar tilesets maken, je level creëren en op je pad komen.

Zelfs als je niet wilt dat je spel op tegels gebaseerde kaarten heeft, is Tiled nog steeds een uitstekende keuze als een niveau-editor. Met Tegel kunt u de grootte van elke tegel in uw afbeelding specificeren; je kunt je kaart maken zonder een strikte maat op de afbeeldingen. Dan kun je Betegeld gebruiken voor al die onzichtbare entiteiten, zoals aanvaringsgebieden of object-spawns op je kaart.

Zodra u in staat bent om het te interpreteren tmx data naar je spel, de Tiled-tools worden een snel kunstwerk om de pipeline in kaart te brengen. Omdat het maken van kaarten in Tiled zo eenvoudig is en geen programmeerervaring vereist, kunnen zelfs niet-ontwikkelaars het gebruiken.

Een andere reden om met Tiled te werken, is dat alle informatie over de kaartlay-out wordt opgeslagen in de tmx het dossier. Dit is krachtig omdat u hiermee het bestand kunt verzenden tmx bestand naar een speler, en ze zouden meteen de lay-out hebben zonder de client opnieuw te hoeven downloaden (in de veronderstelling van tmx kaart gebruikt texturen die al op de computer van de speler staan).


Uw eerste kaart maken

Op naar het volgende deel van de tutorial, waar we de eerder genoemde tileset zullen gebruiken, om een ​​kaart te maken.

Opstelling

Na het starten van Tiled ga je naar Bestand> Nieuw ... om een ​​nieuwe kaart te maken. Een nieuw menu zal verschijnen waar je een paar opties hebt:

oriëntering: We hebben een selectie tussen isometrisch en orthogonaal. Selecteer voor dit artikel orthogonal.

Kaart grootte: Selecteer 20 voor zowel de breedte als de hoogte, omdat we voor dit voorbeeld geen grote kaart nodig hebben. Dit formaat kan later worden aangepast.

Tegelafmetingen: Stel voor de zelfstudie zowel de breedte als de hoogte in op 32 px. Tegelgrootte kan niet worden veranderd nadat je het hebt geselecteerd. U moet helemaal opnieuw een nieuwe kaart starten als u een nieuwe tegelgrootte wilt

Nu we onze kaartdimensies hebben ingesteld, willen we een tileset voor de grond maken. Selecteer Kaart> Nieuwe tegelset ...

Beeld: Selecteer grass-tiles-2-small.png van de meegeleverde afbeeldingen met tilesets. De Naam veld zal automatisch worden ingesteld op de bestandsnaam, maar voel je vrij om het naar je wensen te veranderen.

tegels: Stel opnieuw de breedte en hoogte in op 32 px.

Betegeld moet er als volgt uitzien:

Het terrein toevoegen

Zoals u kunt zien aan de rechteronderzijde van de afbeelding in de tilesets view, ik heb vier tegels geselecteerd. U kunt één of meerdere tegels selecteren door in de knop te klikken en te slepen tilesets venster. Wanneer u op het grote grijze gebied klikt, worden deze tegels op de coördinaat gestempeld (met de coördinaat linksonder in het grijze gebied). Houd dit in de gaten, want u kunt niet buiten de kaartcoördinaat afstempelen - 20 in dit geval (zoals aangegeven in onze kaartinstellingen) - of op negatieve coördinaten.

Mogelijk merkt u dat u de stempel over de kaart kunt slepen voor een snelle plaatsing van een tegel; dit kan echter problematisch zijn als u meer dan één tegel voor uw tileset hebt geselecteerd, omdat deze alleen de vorige tiles zal overschrijven. Een mooie oplossing is een willekeurige selectie uit de tegels die je hebt geselecteerd. U kunt dit inschakelen door op het dobbelstenenpictogram boven in het venster te klikken. Als dit is ingeschakeld, selecteert Tiled willekeurig de tegel uit de tegels die je hebt geselecteerd en plaatst deze tijdens het slepen.

Zorg ervoor dat u vaak opslaat!

Er is ook een vulhulpmiddel en een gumtool waarvan ik zeker weet dat je ze nuttig zult vinden! Je kunt ook je geselecteerde tegel draaien en omkeren met de Z- en X-toetsen.

Nadat je er een tijdje mee hebt gespeeld, kun je verwachten dat je zoiets als dit hebt:

Een voorgrondobject toevoegen

Nu ziet onze kleine kaart er wat kaal uit, dus laten we een boom aan de scène toevoegen. Ga naar Kaart> Nieuwe Tileset ... en selecteer deze keer het bestand tree2-final.png. Gebruik opnieuw een breedte en hoogte van 32 px.

Vervolgens willen we een nieuwe tegellaag maken om over de graslaag te gaan. kiezen Laag> Voeg tegellaag toe.

We zouden moeten hebben Tegellaag 2 nu opgenomen in de Lagen menu. Geen erg mooie naam, dus laten we de naam ervan veranderen Voorgrond, en hernoem Tegellaag 1 naar Achtergrond.

Voordat we de volledige boom toevoegen, selecteert u gewoon de basis van de boom en voegt u de boom toe waar u wilt, zoals te zien is in de onderstaande afbeelding.

Dit lijkt misschien een beetje vreemd, maar wees hier geduldig. Wanneer we deze kaart in onze game hebben, willen we dat ons personage achter de tree verschijnt als deze voorbij komt, dus we moeten de boombladeren wat eigendommen geven om je game te vertellen dat deze over het personage moet worden weergegeven. U hebt misschien gemerkt dat dit niet perfect overeenkomt met de tegelformaten, maar het kan worden aangepast met het wijzigen van de afbeeldingsgrootte of tegelafmetingen.

Laten we in dit geval een nieuwe laag maken en deze een naam geven Top, om onze game te vertellen dat deze bovenop het personage moet worden weergegeven.

Nu met de Top geselecteerde laag, selecteer de rest van de boomset (alles behalve de stam) en plaats deze op de stam. U kunt complexere gedeelten van de tegelset selecteren door de Ctrl-toets ingedrukt te houden.

Er zijn verschillende manieren om het spel te vertellen dat we dingen boven op anderen willen weergeven, zoals het toevoegen van een eigenschap aan een laag of een specifieke tegel. Ik gebruik liever een laag voor alles dat boven het personage wordt weergegeven, omdat het helpt alles overzichtelijk te houden.

Betegeld zonder tegels

Zoals ik al zei, kun je Tiled gebruiken zonder dat het "betegeld" is. Hier is een snel voorbeeld.

Voeg een nieuwe tileset toe met Kaart> Nieuwe Tileset ... en selecteer de boom opnieuw, maar stel deze keer de tegelbreedte en -hoogte in op 256 px. In essentie maak je een tileset van de exacte grootte van de afbeelding, waardoor het een tegel is die groot is. Dit creëert veel meer vrije ruimte voor plaatsing, omdat je in wezen je hele kaart kunt maken met elke beeldbewerker zonder te worden beperkt tot tegelformaten en deze vervolgens met deze methode kunt importeren. Vanaf daar kunt u objecten toevoegen die alles toestaan.

Botsingen specificeren

Als we nu botsingen willen specificeren, zijn er een paar manieren waarop we dat ook kunnen doen. Ik ga een objectlaag gebruiken omdat ze voor bijna alles kunnen worden gebruikt, dus het zal een leuke introductie zijn.

kiezen Laag> Objectlaag toevoegen. Selecteer de objectlaag en klik op 'Object invoegen' boven aan het menu. Nu kunt u klikken en een vak rond de stam van de boom slepen om het aanvaringsvak te definiëren.

Dat is het! Pat zich op de rug aangezien u net de aanvankelijke kaart hebt voltooid.


Conclusie

Bedankt voor het lezen van dit artikel - ik hoop dat u het een nuttige introductie tot Tiled vond. Bekijk vervolgens hoe je het TMX-formaat interpreteert en deze kaart in je game-engine krijgt.