Introduzione a Tiled Map Editor uno strumento agnostico per piattaforme per mappe di livello

In questo articolo ti fornirò un'introduzione di base all'editor di mappe di Tiled e al processo di progettazione che lo circonda, illustrando al contempo i motivi del suo utilizzo. Ti mostrerò anche rapidamente come creare una mappa all'interno di Tiled.


Requisiti

  • Versione piastrellata 0.8.1: http://www.mapeditor.org/
  • Tileset da qui. Queste tessere sono un set leggermente modificato dal Tileset della Comunità di OpenGameArt.org: http://opengameart.org

Cosa è piastrellato?

Tiled è un editor di mappe di tile generico. Funziona come uno strumento gratuito per consentire la facile creazione di layout di mappe. È abbastanza versatile da consentire di specificare più elementi astratti come aree di collisione, posizioni di spawn nemici o posizioni di accensione. Salva tutti questi dati in un comodo, standardizzato tmx formato.


Come funziona Tiled?

Al centro, il processo di progettazione dell'utilizzo di Tiled per creare mappe funziona seguendo questi passaggi:

  1. Scegli la dimensione della tua mappa e le dimensioni della piastrella di base.
  2. Aggiungi tileset dall'immagine (s).
  3. Posiziona i tileset sulla mappa.
  4. Aggiungi eventuali oggetti aggiuntivi per rappresentare qualcosa di astratto.
  5. Salva la mappa come tmx file.
  6. Importa il tmx file e interpretalo per il tuo gioco.

Perché dovrei usare Tiled?

Avere un sistema standardizzato e un potente strumento flessibile già pronto ti consente di concentrarti su cose più importanti del tuo gioco. Con Tiled sarai in grado di prendere alcuni tileset, creare il tuo livello ed essere sulla buona strada.

Anche se non vuoi che il tuo gioco abbia mappe a tessere, Tiled è ancora una scelta eccellente come editor di livelli. Con Tiled puoi specificare la dimensione di ogni piastrella nell'immagine; puoi creare la tua mappa senza una dimensione precisa sulle immagini. Quindi puoi usare Tiled per tutte quelle entità invisibili come aree di collisione o oggetti spawn all'interno della tua mappa.

Una volta che sei in grado di interpretare il tmx dati al tuo gioco, gli strumenti di Tiled diventano un'opera d'arte veloce per mappare la pipeline. Poiché la creazione di mappe in Tiled è così semplice e richiede zero esperienze di programmazione, anche i non sviluppatori possono usarlo.

Un altro motivo per usare Tiled è che tutte le informazioni sul layout della mappa sono memorizzate nel tmx file. Questo è potente perché ti permette di inviare il tmx file su un player, e avranno istantaneamente il layout senza dover scaricare di nuovo il client (assumendo il file tmx la mappa usa le trame già sul computer del giocatore).


Creazione della prima mappa

Nella parte successiva del tutorial, dove useremo il set di tessere menzionato sopra, per creare una mappa.

Impostare

Dopo il lancio di Tiled andare a File> Nuovo ... per iniziare a creare una nuova mappa. Verrà visualizzato un nuovo menu in cui sono disponibili alcune opzioni:

Orientamento: Abbiamo una selezione tra isometrica e ortogonale. Per questo articolo, selezionare Ortogonale.

Dimensione della mappa: Seleziona 20 sia per la larghezza che per l'altezza poiché per questo esempio non ci sarà bisogno di una mappa di grandi dimensioni. Questo può essere ridimensionato in seguito.

Dimensione delle piastrelle: Per il tutorial imposta sia la larghezza che l'altezza a 32 px. Dimensione delle piastrelle non può essere cambiato dopo averlo selezionato. Dovrai iniziare una nuova mappa da zero se vuoi una nuova dimensione di piastrella

Ora che abbiamo la nostra impostazione delle dimensioni della mappa, vogliamo creare un tileset per il terreno. Seleziona Mappa> Nuovo set di riquadri ...

Immagine: Seleziona grass-tessere-2-small.png dalle immagini del tileset incluse. Il Nome il campo verrà automaticamente impostato sul nome del file, ma sentiti libero di cambiarlo secondo i tuoi desideri.

piastrelle: Ancora una volta, imposta larghezza e altezza a 32px.

Le piastrelle dovrebbero assomigliare a questo:

Aggiungere il terreno

Come puoi vedere in basso a destra nell'immagine in tilesets vista, ho selezionato quattro tessere. Puoi selezionare una o più tessere semplicemente cliccando e trascinando nel tilesets finestra. Quando fai clic sull'ampia area grigia, queste tessere verranno stampate sulla coordinata (con la coordinata elencata nella parte in basso a sinistra dell'area grigia). Tieni d'occhio questo, dato che non sarai in grado di timbrare al di fuori della coordinata della mappa - 20 in questo caso (come specificato nelle nostre impostazioni della mappa) - o su coordinate negative.

Si può notare che è possibile trascinare il timbro sulla mappa per posizionare velocemente le tessere; tuttavia, questo può essere problematico quando hai più di una tessera selezionata per il tuo tileset, poiché sovrascrive solo le tessere precedenti. Una buona soluzione è una selezione casuale tra le tessere selezionate. Puoi abilitarlo facendo clic sull'icona dei dadi nella parte superiore della finestra. Con questo abilitato, Tiled selezionerà casualmente la tessera da quelli che hai selezionato e la posizionerà mentre trascini.

Assicurati di salvare spesso!

C'è anche uno strumento di riempimento e uno strumento gomma che sono sicuro che troverai utile! Puoi anche ruotare e invertire la tessera selezionata con i tasti Z e X..

Dopo aver giocato con esso per un po ', puoi aspettarti di avere qualcosa del genere:

Aggiunta di un oggetto in primo piano

Ora la nostra piccola mappa sembra un po 'spoglia, quindi aggiungiamo un albero alla scena. Vai a Mappa> Nuovo set di riquadri ... e questa volta seleziona il file tree2-final.png. Ancora una volta usa una larghezza e un'altezza di 32 px.

Quindi vogliamo creare un nuovo layer di tessere per andare oltre il livello di erba. Selezionare Livello> Aggiungi livello tile.

Dovremmo avere Tile Layer 2 ora elencato nel Livelli menu. Non è un nome molto carino, quindi rinominiamolo in Primo piano, e rinominare Tile Layer 1 a sfondo.

Prima di aggiungere l'intero albero, seleziona la base dell'albero e aggiungi l'albero dove vuoi, come mostrato nell'immagine sottostante.

Questo potrebbe sembrare un po 'strano ma portami qui. Quando abbiamo questa mappa nel nostro gioco, vorremmo che il nostro personaggio appaia dietro l'albero quando passa, quindi dovremo dare all'albero delle proprietà per dire al tuo gioco di renderlo sopra il personaggio. Potresti aver notato che questo non corrisponde perfettamente alle dimensioni delle piastrelle, ma può essere ottimizzato modificando le dimensioni dell'immagine o le dimensioni delle piastrelle.

In questo caso, creiamo un nuovo livello e assegniamolo Superiore, per dire al nostro gioco di mostrarlo in cima al personaggio.

Ora con il Superiore strato selezionato, selezionare il resto del set di tessere albero (tutto tranne il tronco) e posizionarlo sul tronco. Puoi selezionare aree più complesse del tileset tenendo premuto il tasto Ctrl.

Ci sono diversi modi per dire al gioco che vogliamo rendere le cose sopra ad altre come aggiungere una proprietà a un livello o una tessera specifica. Preferisco usare un livello per tutto ciò che sarà reso al di sopra del personaggio poiché aiuta a mantenere tutto organizzato.

Piastrellato senza piastrelle

Come ho detto, puoi usare Tiled senza che sia "piastrellato". Ecco un rapido esempio.

Aggiungi un nuovo tileset con Mappa> Nuovo set di riquadri ... e seleziona nuovamente l'albero, ma questa volta imposta la larghezza e l'altezza della piastrella a 256 px. Essenzialmente stai creando un tileset dalle dimensioni esatte dell'immagine, rendendolo quindi una tessera grande. Questo crea molto più spazio libero per il posizionamento dal momento che puoi essenzialmente rendere la tua intera mappa con qualsiasi editor di immagini senza essere limitato alle dimensioni delle piastrelle, e quindi importarlo usando questo metodo. Da lì puoi aggiungere oggetti che permettono qualsiasi cosa.

Specifica di collisioni

Ora se volessimo specificare le collisioni ci sono alcuni modi in cui possiamo farlo anche noi. Userò un livello oggetto dal momento che possono essere utilizzati per qualsiasi cosa, quindi sarà una bella introduzione.

Selezionare Livello> Aggiungi livello oggetto. Con il livello dell'oggetto selezionato, seleziona "Inserisci oggetto" nella parte superiore del menu. Ora puoi fare clic e trascinare un riquadro attorno al tronco dell'albero per definire la casella di collisione.

Questo è tutto! Pat te stesso sulla schiena come hai appena completato la mappa iniziale.


Conclusione

Grazie per aver letto questo articolo - spero che tu abbia trovato un'utile introduzione a Tiled. Successivamente, scopri come interpretare il formato TMX e ottenere questa mappa nel tuo motore di gioco.