30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Game Development
  2. Tile-Based Games
Gamedevelopment

Introduzione a Tiled Map Editor: un ottimo strumento indipendente da piattaforme per la creazione di mappe di livello

by
Difficulty:BeginnerLength:MediumLanguages:

Italian (Italiano) translation by Chip (you can also view the original English article)

In questo articolo darò un'introduzione di base al Tiled Map Editor e al processo di progettazione che la circonda, mentre illustrerò le ragioni per il suo utilizzo. Mostrerò anche come si realizza velocemente una mappa con Tiled.


Requisiti


Cosa è Tiled?

Tiled è un editor generico di mappe con tile (piastrelle). E' uno strumento gratuito per consentire la facile creazione di layout di mappa. E' abbastanza versatile da permettere la specifica dipiù cose astratte come le aree di collisione, le posizioni di spawn del nemico, o le posizioni dei power-up. Tutti questi dati sono salvati in un comodo formato tmx standard .

Introduction to Tiled Map Editor

Come funziona Tiled?

Essenzialmente, il processo di progettazione per usare Tiled nella creazione di mappe funziona nel seguente modo:

  1. Scegliete la dimensione della vostra mappa e la dimensione base delle tile.
  2. Aggiungete tilesets dalla immagine(i).
  3. Posizionate le tileset sulla mappa.
  4. Aggiungete eventuali altri oggetti per rappresentare qualcosa di astratto.
  5. Salvare la mappa come un file tmx.
  6. Importate il file tmx per interpretarlo nel vostro gioco.

Perché dovrei usare Tiled?

Avere un sistema standardizzato ed un potente strumento flessibile già pronto consente di concentrarsi su cose più importanti nel vostro gioco. Con Tiled sarete in grado di prendere un paio di tileset, creare il vostro livello, e di essere già su una buona strada.

Anche se non si desidera che il gioco abbia mappe basate su tile, Tiled è ancora una scelta eccellente come editor di livelli. Con Tiled è possibile specificare la dimensione di ogni tile nella vostra immagine; è possibile creare la vostra mappa senza una dimensione rigorosa sulle immagini. Quindi è possibile utilizzare Tiled per tutte quelle entità invisibili come le aree di collisione, o per lo spawns di oggetti all'interno della mappa.

Una volta che siete in grado di interpretare i dati tmx nel vostro gioco, gli strumenti di Tiled diventeranno veloci strumenti artistici nel processo di mappatura. Dal momento che la creazione di mappe in Tiled è così semplice e non richiede esperienza di programmazione, anche i non sviluppatori possono usarlo.

Un altro motivo per usare Tiled è che tutte le informazioni dei layout della mappa sono registrate nel file tmx. Questa è una cosa molto potente perché consente di inviare il file tmx ad un giocatore, fornendogli subito il layout, senza dover riscaricare il client del gioco (assumendo che la mappa tmx utilizzi textures già presenti sul computer del giocatore).


Creazione della vostra prima mappa

Nella parte successiva del tutorial, al fine di creare una mappa, useremo il set di tile di cui sopra.

Setup

Dopo il lancio di Tiled andare su File> New... per iniziare a fare una nuova mappa. Un nuovo menu apparirà dove avete alcune opzioni:

Introduction to Tiled Map Editor

Orientation: Abbiamo una selezione tra i isometric e orthogonal. Per questo articolo, selezionare Orthogonal.

Map Size: Seleziona 20 sia per la larghezza che l'altezza dal momento che non avremo bisogno di una grande mappa per questo esempio. Potrà essere ridimensionata in seguito.

Tile Size: Per il tutorial impostare sia la larghezza che l'altezza a 32 px. Il formato della tile non può essere cambiato una volta che selezionato. Dovrete iniziare con una nuova mappa da zero se si desidera una nuova dimensione delle tile.

Ora che abbiamo messo a punto le dimensioni della mappa vogliamo creare un set di riquadri per il terreno. Selezionare Map>New Tileset...

Introduction to Tiled Map Editor

Image: Selezionare grass-tiles-2-small.png dalle immagini incluse nella tileset. Il campo Name verrà impostato automaticamente col nome del file, ma sentitevi liberi di cambiarlo a vostro desiderio.

Tiles: Anche in questo caso, impostare la larghezza e l'altezza a 32px.

Tiled dovrebbe essere simile a questo:

Introduction to Tiled Map Editor

Aggiungere il Terreno

Come potete vedere in basso a destra dell'immagine nella vista Tilesets, ho quattro tiles selezionate. È possibile selezionare una o più tiles semplicemente cliccando e trascinandole nella finestra Tilesets. Quando si fa clic nella grande zona grigia queste tiles saranno timbrate alle coordinate (e le coordinate verranno indicate in basso a sinistra della zona grigia). Tenete d'occhio questo, dal momento che non sarete in grado di timbrare fuori della coordinate di mappa - 20 in questo caso (come specificato nelle nostre impostazioni della mappa) - o su coordinate negative.

Si può notare che è possibile trascinare il timbro in giro per la mappa, per il posizionamento delle tilese veloce; tuttavia, questo può essere problematico quando si hanno più di una tile selezionata per il tileset, dal momento che basta sovrascrivere le tiles precedenti. Una bella soluzione è una selezione casuale dalle tiles che avete selezionato. È possibile attivare questa cosa facendo clic sull'icona con i dadi nella parte superiore della finestra. Con questa opzione abilitata, Tiled selezionerà casualmente la tile tra quelle che avete selezionato e la posizionerà durante il trascinamento.

Assicurarsi di salvare spesso!

Vi è anche uno strumento di riempimento, e lo strumento gomma che sono sicuro troverete utili! È anche possibile ruotare e capovolgere la vostra tile selezionata con i tasti Z e X.

Dopo aver giocato un pò, ci si potrebbe aspettare di avere qualcosa di simile:

Introduction to Tiled Map Editor

Aggiunta di un oggetto in primo piano

Ora la nostra piccola mappa è un pò spoglia, quindi aggiungiamo un albero alla scena. Vai alla Map > New Tileset... e questa volta selezionate il file tree2-final.png. Anche in questo caso utilizzate una larghezza e un'altezza di 32px.

Ora vogliamo creare un nuovo livello di tile per andare oltre oltre lo strato di erba. Selezionare Layer > Add Tile Layer.

Ora dovremmo avere Tile Layer 2 presente nel Layers menu. Non è un bel nome, quindi rinominiamolo Foreground e rinominiamo Tile layer 1 in Background.

Prima di aggiungere l'intero albero, è sufficiente selezionare la base dell'albero e aggiungere l'albero dove si desidera, come si vede nell'immagine qui sotto.

Introduction to Tiled Map Editor

Può apparire un pò strano ma seguitemi. Quando questa mappa sarà nel nostro gioco, vorremmo che il nostro personaggio comparisse dietro l'albero quando ci cammina dietro, per questo avremo bisogno saremo all'albero alcune proprietà per dire al gioco di disegnarlo sopra il personaggio. Avrete notato non coincide perfettamente con il formato delle tiles, ma può essere ottimizzato con alterando le dimensioni dell'immagine dimensioni o la dimensione delle tiles.

In questo caso, creiamo un nuovo livello e chiamiamolo Top, per indicare al nostro gioco di visualizzarlo sopra al personaggio.

Ora, con il livello Top selezionato, selezionare il resto delle tiles della struttura dell'albero (tutto tranne il tronco), e posizionatela sul tronco. È possibile selezionare le aree più complesse del tileset tenendo premuto il tasto Ctrl.

Ci sono una varietà di modi di indicare al gioco che vogliamo disegnare alcune cose in cima rispetto ad altre come aggiungere una proprietà a un layer o su una tile specifica. Io preferisco usare un layer specifico per tutto quello che verrà disegnato sopra al personaggio in quanto aiuta a mantenere tutto più organizzato.

Tiled senza le tiles

Come ho già detto, è possibile utilizzare Tiled senza usare le "tile". Ecco un esempio veloce.

Aggiungete un nuovo set di tessere con Map > New Tileset... e selezionate nuovamente l'albero, ma questa volta impostate la larghezza e l'altezza della tile a 256px. In sostanza stiamo un tileset dell'esatta dimensione dell'immagine, rendendolo quindi una tile enorme. Questo crea più spazio libero per il posizionamento in quanto potremmo in sostanza creare l'intera mappa con qualsiasi editor di immagini senza essere limitati dai formati delle tiles, e quindi importarla utilizzando questo metodo. Partendo da qui è possibile aggiungere oggetti che permettono qualsiasi cosa.

Introduction to Tiled Map Editor

Spedificare le Collisioni

Ora, se volessimo indicare collisioni ci sono alcuni metodi per farlo. Ho intenzione di utilizzare un livello/layer di oggetti dal momento che possono essere utilizzati per qualsiasi cosa, quindi sarà una bella introduzione.

Selezionate Layer > Add Object Layer Con il livello oggetto selezionato, selezionare l'opzione "Insert Object" nella parte superiore del menu. Ora è possibile fare clic e trascinare un riquadro intorno al tronco dell'albero per definire la casella di collisione.

Introduction to Tiled Map Editor

E' tutto! Congratulazioni avete appena completato la mappa iniziale.


Conclusioni

Grazie per la lettura di questo articolo - spero lo abbiate trovato utile come introduzione a Tiled. Il prossimo passo leggere come interpretare il formato TMX e ottenere questa mappa nel vostro motore di gioco.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.