Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Tile-Based Games
Gamedevelopment

Introduzione alla creazione di un Engine per Tile Map

by
Difficulty:IntermediateLength:LongLanguages:

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

In questo tutorial, vi aiuterò a creare livelli per qualsiasi genere di gioco e a progettarli più facilmente. Stare per imparare come creare il primo motore di mappe tile da usare nei vostri progetti futuri. Userò Haxe con OpenFL, ma dovreste essere in grado di seguire con qualsiasi altro linguaggio.

Ecco cosa vedremo:

  • Che cosa è un gioco tile-based?
  • Trovare o disegnarsi le vostre tiles.
  • Scrivere il codice per visualizzare tiles sullo schermo.
  • Layout delle tiles ed editing per i diversi livelli.

Potreste anche ottenere degli spunti per una nuova idea di gioco!


Che cosa è un gioco Tile-Based?

Naturalmente, Wikipedia Wikipedia contiene una definizione più approfondita di ciò che è un gioco tile-based, ma per andare alla sostanza ci sono solo alcune cose che dovete sapere:

  1. Una tile (tessera) è una piccola immagine, di solito rettangolare o isometrica, che si comporta come un pezzo di un puzzle per la costruzione di immagini di grandi dimensioni.
  2. Una mappa è un raggruppamento di tiles messe insieme per creare una "sezione" (si spera) visivamente accattivante (come un livello o un'area).
  3. Tile-based si riferisce al metodo di costruzione di livelli in un gioco. Il codice dispone le tiles in posizioni specifiche per coprire l'area destinata.

Per farla ancora più semplice, la metto in questo modo:

Un gioco tile-based piazza le tiles, al fine di crearci ciascun livello.

Con riferimento alle tipologie di tiles comuni - rettangolare e isometrica - in questo articolo per la loro semplicità, useremo tiles rettangolari. Se si decidesse, un giorno o l'altro, di provare con i livelli isometrici, c'è della matematica addizionale prevista per farlo funzionare. (Una volta che avrete finito qui, controllate questa introduzione sulla creazione di mondi isometrici.)

Ci sono alcuni benefici piuttosto belli che si ottengono dall'utilizzare un motore di tiles. Il vantaggio più evidente è che non avrete bisogno di creare immagini in gran quantità a mano per ogni singolo livello. Questo ridurrà i tempi di sviluppo e ridurrà le dimensioni dei file. Avere 50 1280x768px immagini per un gioco di 50 livelli vs avere una immagine con 100 tiles fa una differenza enorme.

Un altro effetto collaterale è che piazzare le cose sulla mappa utilizzando il codice diventa più facile. Invece di controllare cose come la collisione sulla base o di un pixel esatto, è possibile utilizzare una formula semplice e veloce per determinare a quali tiles è necessario accedere. (Ci andremo su, più tardi.)


Trovare o disegnare le vostre Tiles da soli

La prima cosa che vi servirà quando costruirete il vostro motore di tiles è un set di tiles. Sono disponibili due opzioni: utilizzare tilesdi qualcun altro, o creare di proprie.

Se si decide di utilizzare tiles che sono già fatte, è possibile trovarne di liberamente disponibili in tutto il web. L'aspetto negativo di questo è che non sono state realizzate appositamente per il vostro gioco. D'altra parte, se si sta solo facendo un prototipo o cercando di imparare un nuovo concetto, le tiles libere sono una buona soluzione.

Dove trovare le vostre Tiles

Ci sono un bel po' di risorse per questo materiale libero e aperto. Qui ci sono alcuni siti per iniziare la ricerca:

  1. OpenGameArt.org
  2. Let's Make Games
  3. Pixel Prospector

Questi tre collegamenti dovrebbero fornire posti più che sufficienti per cercare alcune tiles decenti per i vostri prototipi. Prima di impazzire afferrando tutto ciò che trovate, assicuratevi di aver compreso prima bene tutto quello che riguarda le licenze e a quali restrizioni portano con se. Molte licenze vi permetteranno di utilizzare il materiale liberamente e per uso commerciale, ma potrebbero richiedere riconoscimenti.

Per questo tutorial, ho utilizzato alcune tiles da The Open Game Art Bundle per giochi platform. È possibile scaricare la mia versione in scala ridotta o gli originali.

Come creare le vostre Tiles da soli

Se non avete mai provato l'ebrezza di farvi da soli il materiale per i vostri giochi, la cosa potrebbe un po' intimorirvi. Per fortuna ci sono alcuni incredibili e semplici software che vi possono aiutare con la pratica.

Molti sviluppatori iniziano con la pixel art per i loro giochi e qui ci sono alcuni grandi strumenti proprio per questo:

  1. Aseprite
  2. Pyxel Edit
  3. Graphics Gale
  4. Pixen per utenti Mac

Questi sono alcuni dei più popolari programmi per fare pixel art. Se volete qualcosa di un po' più potente, GIMP è una scelta eccellente. Si può anche fare un po' di grafica vettoriale con Inkscape e seguire alcuni incredibili tutorial su 2D Game Art per i programmatori.

Una volta preso il software è possibile iniziare a sperimentare per fare le proprie tiles. Dal momento che questo tutorial ha lo scopo di mostrare come creare il motore di tile map non voglio entrare troppo nel dettaglio su come disegnare le tiles stesse, ma c'è una cosa da tenere sempre a mente:

Assicurati che le tue tiles si incastrino perfettamente, e aggiungi qualche variazione per renderle interessanti.

Se le vostre tiles mostrano linee evidenti tra di loro quando sono messe insieme, il gioco non sarà molto bello. Impegnate del tempo nella creazione di un bel "puzzle" di tiles rendendole senza soluzione di continuità e aggiungendovi qualche variazione.


Scrivere il codice per visualizzare Tiles

Ora che abbiamo tutto questo materiale, siamo in grado di analizzare il codice per piazzare le vostre tiles appena acquisite (o create) sullo schermo.

Come visualizzare una singla Tile sullo schermo

Cominciamo con il compito di base, la visualizzazione di una singola tile su schermo. Assicuratevi che le tiles siano tutte della stessa dimensione e salvatele in un file di immagini separato (ne parleremo di più con i fogli di sprite più avanti).

Una volta che avete le tiles nella cartella degli assets del progetto, è possibile scrivere una classe Tile molto semplice. Ecco un esempio in Haxe:

Dal momento che tutto quello che stiamo facendo ora è piazzare una singola tile sullo schermo, l'unica cosa che la classe fa non è altro che importare l'immagine della tile dalla cartella degli assets e aggiungerla come figlio per l'oggetto. Questa classe sarà probabilmente molto diversa in base al linguaggio di programmazione utilizzato, ma dovreste essere in grado di trovare facilmente una guida su come visualizzare un'immagine a schermo.

Ora che abbiamo una classe Tile, abbiamo bisogno di creare un'istanza di un Tile e aggiungerla alla nostra classe Main:

La classe Main crea una nuova Tile quando il (la funzione new(), chiamata quando il gioco inizia) costruttore viene richiamato, e la aggiunge all'elenco di visualizzazione.

Quando il gioco viene eseguito, la funzione main() sarà chiamata, e un nuovo oggetto Main sarà aggiunto al palcoscenico. Ora si dovrebbe vedere apparire la vostra tile in cima a sinistra dello schermo. Fin qui tutto bene.

Suggerimento: se tutto questo ancora non ha un sensp - non preoccupatevi! E' solo codice Haxe standard. La cosa fondamentale da capire è che questo crea un oggetto Tile e lo aggiunge alla schermata.

Utilizzo di un array per posizionare un'intera schermata di Tiles

Il prossimo passo è quello di trovare una modo per riempire l'intero schermo con le tiles. Uno dei modi più semplici per farlo è quello di riempire un array con numeri interi che rappresentano ciascuno un ID tile. Quindi è possibile scorrere la matrice per decidere quali tiles e dove visualizzarle.

Avete la possibilità di utilizzare un tipico array o una matrice a 2 dimensioni. Nel caso in cui non si abbia familiarità con gli array 2D, è fondamentalmente un singolo array che viene riempito con più array. La maggior parte dei linguaggi lo indicheranno come NomeDelArray[x] [y] dove x e y sono gli indici di accesso ad un unico elemento.

Poiché x e y sono utilizzati anche per coordinate dello schermo, potrebbe avere senso utilizzare x e y come coordinate per le nostre tiles. Il trucco con matrici 2D è capire come sono organizzati i numeri interi. Potrebbe essere necessario invertire la y e x quando iterate attraverso le matrici (esempio qui sotto).

Si noti che in questa implementazione, l'elemento "0mo" nella matrice è di per sé un array, di cinque interi. Ciò significa che si accede ad ogni elemento con y, poi x. Se si tenta di accedere exampleArr[1][0], si averbbe accesso alla sesta tile.

Se non riuscite a capire come le matrici 2D lavorano in questo momento, non vi preoccupate. Per questo tutorial userò una normale matrice, al fine di mantenere le cose semplici e per rendere le cose più facili da visualizzare:

L'esempio precedente mostra come una normale matrice può essere un po' più semplice. Possiamo visualizzare esattamente dove la tile sarà e tutto quello che dobbiamo fare è usare una formula semplice (non preoccupatevi, poi arriva) Per ottenere la tile che vogliamo.

Ora scriviamo un po' di codice per creare il nostro array e riempirlo con loro. Il numero uno sarà l'ID che rappresenta la nostra prima tile.

Per prima cosa dobbiamo creare una variabile all'interno della nostra classe Main per tenere il nostro array:

Questo potrebbe sembrare un po' strano, quindi lo scomponiamo per voi.

Il nome della variabile è map e gli ho dato un tipo molto specifico: Array. la parte <Int> dice al nostro programma che l'array conterrà solo numeri interi. Gli array possono contenere praticamente qualsiasi tipo che si desidera, quindi se si utilizza qualcosa di diverso per identificare le tile, sentitevi liberi di modificare il parametro.

Ora dobbiamo aggiungere del codice al costruttore della nostra classe Main (ricordate, questa è la funzione new()), in modo da poter creare un'istanza della nostra mappa:

Questa linea crea un array vuoto che potremo presto riempire con le nostre tile per fare un test. Per prima cosa definiamo alcuni valori che ci aiuteranno con la nostra matematica:

Ho fatto questi valori public static perché avremo accesso ad essi da qualsiasi punto nel nostro programma (via Main.Tile_WIDTH e così via). Inoltre, potreste aver notato che dividendo SCREEN_WIDTH da TILE_WIDTH ci dà 10 e dividendo SCREEN_HEIGHT da TILE_HEIGHT ci dà 6. Questi due numeri saranno utilizzati per decidere quanti interi memorizzare nel nostro array.

In questo blocco di codice, assegniamo 10 e 6 a w e h, come detto in precedenza. Poi abbiamo bisogno di saltare in un ciclo for per creare un array che possa contenere 10 * 6 numeri interi. Questo conterrà abbastanza tiles per riempire l'intero schermo.

tileMapDiagram1

Ora abbiamo costruito la nostra mappa di base, ma come faremo ad indicare alle tiles di piazzarsi esattamente in un certo punto? Per questo abbiamo bisogno di tornare alla classe Tile e creare una funzione che ci permetta di spostarle a giro a volontà:

Quando chiamiamo la funzione setLoc(), passiamo in coordinate x e y secondo la nostra classe mappa (la formula a presto, ve lo prometto!). La funzione prende tali valori e li traduce in coordinate pixel moltiplicandoli rispettivamente per TILE_WIDTH e TILE_HEIGHT.

L'unica cosa che resta da fare per piazzare le nostre tile sullo schermo è quello di indicare alla nostra classe Main come creare le tiles e metterle in base alle loro posizioni all'interno della mappa. Torniamo a Main e implementiamo quanto segue:

Oh si! Proprio così, ora abbiamo uno schermo pieno di tiles. Analizziamo che cosa sta accadendo sopra.

La Formula

La formula che avevo menzionato fin'ora è finalmente arrivata.

Si calcola x prendendo il modulo (%) di i e w (che è 10, ricordate).

Il modulo è solo il resto della divisione intera: 14\3=4 e resto 2 quindi 14mod(3) = 2.

Lo usiamo perché vogliamo che il nostro valore di x ritorni di nuovo a 0 all'inizio di ogni riga, quindi disegniamo la rispettiva tile all'estrema sinistra:

tile_grid_cols

Per quanto riguarda la y, prendiamo floor() di i/w (cioè, arrotondiamo per difetto il risultato) perché vogliamo aumentare solo la y una volta che abbiamo raggiunto la fine di ogni riga e ci siamo spostati verso il basso di un livello:

tile_grid_rows
Suggerimento: La maggior parte dei linguaggi non richiedono di chiamare Math.floor() quando dividono numeri interi; solo Haxe gestisce la divisione tra interi in modo diverso. Se si utilizzasse un linguaggio che fa la divisione intera, si potrebbe semplicemente utilizzare i/w (ammesso che siano entrambi interi).

Infine, ho voluto parlare di un po' dei livelli a scorrimento. Di solito non creerete livelli che si adattano perfettamente all'interno della vostra finestra. Le mappe saranno probabilmente molto più grandi dello schermo e non vorremmo continuare a disegnare le immagini che il giocatore non sarà in grado di vedere. Con un po' di matematica semplice e veloce, si dovrebbe essere in grado di calcolare quali tiles devono essere sullo schermo e quali tiles evitano il disegno.

Ad esempio: La dimensione dello schermo è 500x500, le vostre tiles sono 100x100 e la dimensione del mondo è 1000x1000. Avreste semplicemente bisogno di fare un rapido controllo prima di disegnare le tiles per scoprire quali sono quelle sullo schermo. Utilizzando la posizione del viewport - diciamo 400x500 - avremo bisogno solo di disegnare le tiles dalle righe da 4 a 9 e le colonne da 5 a 10. È possibile ottenere quei numeri dividendo la posizione dal formato delle tiles, quindi compensando quei valori con le dimensioni dello schermo diviso per il formato delle tiles. Semplice.

Potrebbe non sembrare molto dal momento che tutte le tiles sono uguali, ma l'essenza è quasi tutta qua. Le uniche cose rimaste da fare sono creare diversi tipi di tiles e progettare la nostra mappa in modo che sia allineata e creare qualcosa di bello.


Editare la posizione delle Tiles per diversi livelli

Va bene, ora abbiamo una mappa piena di una tile che copre lo schermo. A questo punto dovremmo avere più di un tipo di tiles, il che significa che dobbiamo cambiare il nostro costruttore Tile per tenere conto che:

Dal momento che ho usato sei caselle diverse per la mia mappa, avevo bisogno di un'istruzione switch che coprisse i numeri da uno a sei. Noterete che il costruttore ora prende un intero come parametro in modo da sapere che tipo di tile creare.

Ora, dobbiamo tornare al nostro costruttore Main e correggere la creazione delle tiles nel nostro ciclo for:

Tutto ciò che dovevamo fare era passare la map[i] al costruttore Tile in modo da farlo funzionare di nuovo. Se si tenta di eseguire senza passare un intero a Tile, vi darà alcuni errori.

E' quasi tutto a posto, ma ora abbiamo bisogno di un modo per progettare le mappe invece di riempirle con tiles casuali. Innanzitutto, rimuoviamo il ciclo for nel costruttore Main che imposta ogni elemento a uno. Poi possiamo creare la nostra mappa a mano:

Se si forma l'array come ho detto, si potrà facilmente vedere come saranno organizzate le nostre tiles. È anche possibile immettere la matrice come una lunga serie di numeri, ma il primo è migliore perché si può vederle 10 per lungo e 6 in basso.

Quando ora si tenta di eseguire il programma, dovreste prendere alcune eccezioni di puntatore nullo. Il problema è che stiamo usando gli zeri nella nostra mappa e la nostra classe Tile non sa cosa fare con uno zero. In primo luogo, ripareremo il costruttore con l'aggiunta di un controllo prima di aggiungere l'immagine figlia:

Questa rapida verifica consente di controllare che non stiamo aggiungendo figli nulli agli oggetti Tile che creiamo. L'ultima modifica di questa classe è la funzione steLoc(). In questo momento stiamo cercando di impostare i valori x e y per una variabile che non è stata inizializzata.

Aggiungiamo un altro rapido controllo:

Con queste due semplici correzioni in atto, e le tile che ho fornito sopra, si dovrebbe essere in grado di eseguire il gioco e vedere un semplice livello platform. Da quando abbiamo lasciato 0 come un "non-tile", possiamo lasciarlo trasparente (vuoto). Se si vuole vivacizzare il livello, si può mettere un background prima di posare le tiles; ho appena aggiunto una sfumatura blu chiara per farla sembrare un cielo in background.

tileMapDiagram2

Che è praticamente tutto il necessario per impostare in modo semplice un editing di livelli. Provate a sperimentare un po' con l'array e vedete che design potete trovare per gli altri livelli.

Software di terze parti per la progettazione di livelli

Una volta che avete acquisito le basi, potreste considerare l'utilizzo di altri strumenti per aiutarvi a progettare i livelli rapidamente e vedere il loro aspetto prima di buttarli nel gioco. Una possibilità è quella di creare il proprio editor di livelli. L'alternativa è quella di prendere un po' di software che è disponibile gratuitamente per usarlo. I due strumenti più popolari sono Tile Map Editor e Ogmo Editor. Entrambi rendono l'editing molto più facile con molteplici opzioni di esportazione.

Posts Correlati


Avete appena creato un motore di Tile-Based!

Ora sapete cosa è un gioco tile-based, come ottenere alcune tiles da utilizzare per i livelli, e come sporcarvi le mani scrivendo il codice per il vostro motore, e potete anche fare qualche editing basilare con un semplice array . Basta ricordare che questo è solo l'inizio; c'è un sacco di sperimentazione che si può fare per rendere un motore ancora migliore.

Inoltre, vi ho fornito i file sorgente originali per controllare. Ecco come sembra il SWF finale:

Scarica il file SWF qui.

... e qui, di nuovo, è l'array con cui è generato:

Non fermatevi qui!

Il vostro successivo compito  è quello di fare qualche ricerca e provare alcune cose nuove per migliorare quello che avete fatto fino a qui. I fogli di sprite (sprite sheets) sono un ottimo modo per migliorare le prestazioni e rendere la vita un po' più facile. Il trucco è quello di ottenere un codice solido e predisposto per la lettura da un foglio di sprite in modo che il gioco non abbia bisogno di leggere ogni singola immagine.

Dovreste anche iniziare a far pratica delle vostre capacità artistiche facendo alcuni tileset a vostra scelta. In questo modo otterrete il materiale artistico giusto per i vostri giochi futuri.

Come sempre, lasciare alcuni commenti qui sotto su come il motore sta funzionando per voi - e forse anche alcuni demo in modo da provare il vostro prossimo gioco di tiles.

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.