Come creare una Tilemap con Unity e costruire un livello di gioco

Come creare una Tilemap con Unity e costruire un livello di gioco

Unity è uno dei migliori software per la creazione di videogiochi bidimensionali, oltre che tridimensionali. Una recente implementazione di Unity, ti permette di costruire un livello di gioco 2D in maniera molto semplice e veloce grazie all’utilizzo delle Tilemap. Se vuoi sapere come creare una Tilemap con Unity dovrai familiarizzare con gli sprites, e cioè con le immagini in grafica bidimensionale che compongono la scena di gioco.
Il punto di partenza di ogni Tilemap sono gli Sprites.

Se vogliamo creare una Tilemap con Unity e costruire un livello di gioco, avremo bisogno di una serie di immagini in grafica 2d. Queste andranno inserite appunto nella Tilemap e saranno utilizzate per comporre l’ambiente di gioco. Gli Sprites necessari allo scopo, potranno essere creati con un software di grafica come photoshop. In alternativa alla soluzione “fai da te”, gli Sprites necessari alla realizzazione della Tilemap, potranno essere scaricati gratuitamente (o a pagamento) dagli innumerevoli siti che ospitano i lavori delle community sparse per il mondo. Ecco alcuni link utili per il download degli sprites: https://opengameart.org/ – https://itch.io/https://craftpix.net/

Per la realizzazione di questo tutorial, io ho utilizzato gli Sprites di OpenGameArt.org scaricabili a questo indirizzo https://opengameart.org/content/inca-tileset. Dopo aver scaricato il file, questo dovrà essere salvato all’interno di una cartella a tua scelta, che a sua volta andrà inserita dentro la cartella Assets di Unity. In questo caso, per esempio, trattandosi di immagini utili a costruire l’ambiente del livello di gioco, potremo inserire il file all’interno di una cartella “Enviroment”, che si trova dentro “Sprites”, che si trova dentro la cartella “Assets” di Unity.

Normalmente gli Sprites per l’ambiente di gioco si presentano così:

Sprite immagini 2D pixel art Tileset
Inca Tileset
Modifichiamo lo Sprite per creare un Tileset

Selezionando lo Sprite appena importato nella finestra “project”, avremo una serie di opzioni da modificare nella finestra “Inspector” di Unity. Le impostazioni da modificare dipenderanno dal tipo di grafica che vogliamo utilizzare per il nostro gioco. Nel mio caso utilizzerò grafica 2d in pixel art, per cui volendo riprodurre lo stile dei vecchi giochi 8 e 16 bit, dovrò impostare “Filter mode > Point (no filter)” e la compressione su “None”.

Adesso dovrò specificare quanti pixel per unità voglio che ci siano nella mia scena di gioco. Questo valore dipenderà dalla risoluzione dello sprite con cui stiamo lavorando, nonchè da quanto grandi vogliamo che gli sprites appaiano su schermo. Normalmente per una grafica in pixel art, questo valore andrà impostato a 16 pixel o 32 pixel per unità di Unity. Io utilizzerò il valore di 16 pixel per unità. Infine come puoi notare, lo sprite con cui vogliamo lavorare, è composto da una moltitudine di  singoli sprites che andranno a comporre il nostro livello di gioco.  Per cui l’opzione “Sprite mode” dovremo impostarla su “Multiple”.

Impostazioni sprite Inspector Unity
Inspector di Unity – modifiche del tileset
Separiamo lo Sprite per ultimare il Tileset

A questo punto dobbiamo separare l’immagine in tanti singoli sprites in modo da creare una tilemap con Unity che ci servirà per costruire un livello di gioco. Per farlo clicchiamo su “Sprite Editor“, successivamente nella finestra che si aprirà, in alto a sinistra clicchiamo su “Slice” > Grid by cell size”. Qui impostiamo il valore delle celle corrispondente al numero di pixel per unità che abbiamo impostato precedentemente, per cui 16 pixel nel campo X e 16 pixel nel campo Y. Cliccando su “Slice” ed infine su “Apply”, avremo suddiviso l’immagine in una moltitudine di singoli sprites che andranno a comporre il nostro tileset, dal quale creare una Tilemap con Unity.

Tileset Unity
Sprite Editor
Creare la Tilemap con Unity

E’ arrivato il momento di creare la nostra Tilemap con Unity, per farlo clicchiamo su “Create > 2D Object > Tilemap”  nella finestra “Hierarchy”. Potremo notare che la finestra “Scene” è stata suddivisa in quadrati (Tiles). Ognuno di questi quadrati vale una unità di Unity ed andrà ad ospitare una quantità di pixel pari al valore che abbiamo impostato in precedenza, ovvero 16 pixel per unità di Unity. Abbiamo quindi ottenuto una mappa sulla quale costruire un livello di gioco, abbiamo creato una tilemap con Unity. Adesso non ci resta che riempirla con gli sprites che abbiamo suddiviso in precedenza, per farlo dobbiamo creare un Tile palette.  

Creare una Tilemap con Unity
Creare una Tile Palette

Una Tile Palette non è altro che una sorta di tavolozza che ci permetterà di dipingere la nostra Tilemap, così creando il nostro livello di gioco. Per creare una Tile Palette clicchiamo su “Window > 2D > Tile Palette“. Si aprirà una finestra in cui dovremo cliccare su “Create New Palette”, dare il nome alla tavolozza ed infine cliccare su “Create” e salvare il file dove si ritiene più opportuno.

Nuova Tile Palette
Create New Palette

Dopo aver creato la nuova Tile Palette, dobbiamo semplicemente trascinare il nostro sprite, che abbiamo modificato e suddiviso in precedenza, dalla finestra “Project” alla finestra “Tile Palette”. A questo punto si aprirà una finestra nella quale dovremo indicare dove vogliamo salvare tutti gli “assets” che compongono la Tile Palette, possiamo salvarli direttamente nella cartella “Environment” creata in precedenza. Otteniamo in questo modo la tavolozza pronta per essere utilizzata, così come illustrato nella prossima immagine.  

Tile Palette di Unity
Tile Palette
Costruiamo il nostro livello di gioco 

Finalmente possiamo costruire un livello di gioco, abbiamo infatti creato una Tilemap con Unity, sulla quale poter disegnare le piattaforme su cui camminerà il protagonista del nostro gioco. Per farlo dobbiamo selezionare lo strumento pennello come indicato nell’immagine precedente. Successivamente selezioniamo uno sprite a scelta dalla Tile Palette per poterlo disegnare nella Tilemap della finestra “Scena” di Unity. Se ci accorgiamo di aver sbagliato qualcosa, si possono cancellare i singoli sprite con lo strumento gomma selezionabile in alto a destra nella finestra della Tile Palette oppure usando semplicemente il tasto shift della tastiera.   

Creare una Tilemap con Unity

Per adesso è tutto, non è stato poi cosi difficile non ti pare? Se volessi approfondire l’argomento ti consiglio di leggere questo articolo in lingua inglese direttamente dal blog di Unity https://blogs.unity3d.com/2018/01/25/2d-tilemap-asset-workflow-from-image-to-level/. Se hai delle domande non esitare a scrivere sotto nei commenti 🙂

Rispondi

%d blogger hanno fatto clic su Mi Piace per questo: