Disegnare un livello intero come un'unica, enorme immagine sarebbe costoso in memoria e scomodo da modificare. Fin dai primi giochi per console e computer domestici, la soluzione è stata costruire i livelli con tasselli (tile): piccole immagini quadrate riutilizzate più volte, come le piastrelle di un pavimento. La tilemap è la griglia che indica quale tassello va in ogni cella.
Tileset e mappa
Gli ingredienti sono due:
- il tileset: un'immagine che raccoglie tutti i tasselli disponibili, per esempio erba, terra, mattoni, acqua, ciascuno di 16 × 16 pixel;
- la mappa: un array bidimensionale di numeri interi, dove ogni numero è l'indice di un tassello nel tileset e lo zero indica spesso una cella vuota.
mappa = [
[0, 0, 0, 0, 0, 0],
[0, 0, 7, 7, 0, 0],
[1, 1, 2, 2, 1, 1],
[3, 3, 3, 3, 3, 3],
]
Un livello di 200 × 30 celle occupa 6.000 numeri, una quantità trascurabile rispetto a un'immagine equivalente di 3.200 × 480 pixel. E modificare il livello significa cambiare qualche numero.
Più livelli sovrapposti
Raramente basta una sola griglia. Di solito si usano più strati:
| Strato | Contenuto | Collisioni |
|---|---|---|
| Sfondo | Cielo, montagne lontane, muri decorativi | No |
| Terreno | Pavimenti, muri, piattaforme | Sì |
| Decorazioni | Erba, fiori, crepe, ombre | No |
| Primo piano | Elementi davanti al personaggio | No |
| Oggetti | Punti di partenza, nemici, monete | Gestite dal codice |
Lo strato degli oggetti non contiene tasselli ma posizioni e proprietà: dove nasce il giocatore, dove si trova un nemico e di che tipo, dove scatta un dialogo. Il codice lo legge al caricamento e crea le entità corrispondenti.
Proprietà dei tasselli
Un tassello non è solo un'immagine. Si possono associare proprietà a ciascun indice del tileset:
- solido, attraversabile dal basso, pendenza;
- dannoso, come spine o lava;
- tipo di superficie, utile per scegliere il suono dei passi o l'attrito;
- animato, con una sequenza di indici per acqua e cascate.
In questo modo la logica di gioco interroga la mappa: «il tassello sotto i piedi del giocatore è ghiaccio?» e adegua il comportamento senza codice specifico per ogni livello.
Autotiling
Disegnare a mano bordi, angoli e transizioni tra erba e terra è lungo e soggetto a errori. L'autotiling sceglie automaticamente il tassello corretto in base ai vicini. Il metodo più diffuso assegna un bit a ciascun vicino:
valore = 0
se sopra è terreno: valore += 1
se destra è terreno: valore += 2
se sotto è terreno: valore += 4
se sinistra è terreno: valore += 8
tassello = tabella[valore]
Con quattro vicini si ottengono 16 combinazioni, sufficienti per bordi semplici. Considerando anche le diagonali si arriva a 256 combinazioni, che si riducono a 47 casi visivamente distinti: è la base dei cosiddetti tileset «blob». L'artista disegna i casi una volta, e il level designer dipinge solo «terreno» o «vuoto».
Rendering efficiente
Disegnare ogni tassello di un livello grande a ogni fotogramma è uno spreco. Due tecniche lo evitano.
Disegnare solo il visibile
Dalla posizione della telecamera si ricavano le righe e le colonne visibili, con un piccolo margine. Su uno schermo di 320 × 180 pixel con tasselli da 16, si disegnano circa 21 × 12 celle, qualunque sia la dimensione del livello.
Blocchi pre-renderizzati
Per gli strati che non cambiano si può dividere la mappa in blocchi (chunk), per esempio di 16 × 16 tasselli, e preparare per ciascuno una texture o un unico insieme di vertici. A ogni fotogramma si disegnano pochi blocchi invece di centinaia di tasselli. Quando un tassello cambia, per esempio un blocco distrutto, si rigenera solo il blocco interessato.
Editor di livelli
Scrivere mappe a mano in un array è utile solo per i prototipi. Gli editor di tilemap, sia indipendenti come Tiled e LDtk sia integrati nei motori, permettono di dipingere i tasselli, gestire gli strati, posizionare oggetti con proprietà ed esportare in formati leggibili come JSON o XML. Conviene scrivere presto il caricatore per il formato scelto e non modificare mai a mano i file esportati, per evitare divergenze tra l'editor e il gioco.
Oltre la griglia quadrata
Lo stesso principio si applica ad altre geometrie:
- isometrica: celle a rombo per una vista dall'alto inclinata, con attenzione all'ordine di disegno;
- esagonale: diffusa nei giochi di strategia, con sei vicini per cella e sistemi di coordinate specifici.
La logica di base, una griglia di indici e un insieme di immagini riutilizzabili, resta la stessa.
In sintesi
- Una tilemap è una griglia di indici che rimanda a un tileset di piccole immagini riutilizzabili.
- Più strati separano sfondo, terreno, decorazioni e oggetti.
- Le proprietà dei tasselli guidano collisioni, danni, suoni e attrito.
- L'autotiling sceglie bordi e angoli in base ai vicini.
- Disegnare solo il visibile e usare blocchi pre-renderizzati mantiene alte le prestazioni.
