Di nuovo On-Line: Tile 2D e texture affiancabili
Dopo un piccolo periodo off-line avviso che italianGames è di nuovo operativo XD. Non stavo più nella pelle di poter rimettere le mani sul computer dopo il periodo di manutenzione. (Il Pc è stato riparato anche prima di quanto mi aspettassi). Per questo motivo volevo subito iniziare con un articolo di grafica 2D/3D. Invece di scendere in dettagli tecnici (che lascio ai tutorial) farò solo considerazioni generali che potranno essere di aiuto nel creare tile. Ebbene si:
Nonostante il tutorial che gia ho scritto:
http://italiangames.over-blog.it/pages/ita-textures-affiancabili-come-tiles-3666429.html
Il tema dei "tile" è molto utile (e soprattutto MOLTO UTILIZZATO NEI VIDEOGIOCHI), un semplice tutorial non è sufficiente per dare un idea delle potenzialità dei tile.
- 1° Requisito: I Tile devono essere affiancabili geometricamente
Normalmente per un tile è richiesta un'immagine quadrata, ma non è una regola fissa.
Infatti è possibile ottenere composizioni con forme geometriche diverse dal quadrato:
Le celle delle api ne sono un ottimo esempio:
(questa immagine è stata rilasciata da Sean Hoyland nel pubblico dominio e può essere trovata su wikipedia)
Ci sono parecchie altre forme geometriche possibili, le più usate oltre al quadrato sono i rombi, gli esagoni e i triangoli equilateri.
A seconda di cosa scegliete di utilizzare nel vostro videogioco ci saranno approcci diversi alle tecniche di realizzazione dei tile e al loro utilizzo:
- I quadrati offrono un approccio semplice
- Gli esagoni se realizzati correttamente sono molto più realistici. (Civilization V).
- I triangoli sono generalmente usati per fare esagoni e quadrati quindi non mi dilunqherò sulla forma geometrica preferita dai grafici 3d ( lol ).
- I rombi sono usati in molti giochi 2D (quelli isometrici), un esempio sono i primi The Sims.
Inoltre esistono anche dei "tile" irregolari, ovvero le cui forme non sono mai le stesse. E' il caso della tessellazione di Vonroi, nell'immagine sotto ne vedete un esempio. Dato un insieme di punti posizionato casualmente possiamo ricavarne una tessellazione di Vonroi (bizzarra non trovate?). Ovviamente la regola matematica che la genera può essere applicata su QUALUNQUE insieme di punti (se ad esempio abbiamo dei punti equispaziati e applichiamo questa tessellazione verranno fuori delle celle d'ape).
(questa immagine è stata rilasciata da wikipedia e fa parte del pubblico dominio)
Sebbene a prima vista una composizione di questo tipo possa non sembrare utile invece lo è. Ad esempio possiamo disegnare la vetrata di una chiesa usando questa tecnica, oppure possiamo usarla per determinare il territorio di un castello in un gioco medievale (ad esempio Stronghold), infatti dati i castelli di vari feudatari che corrispondono ai punti necessari per generare la tessellazione possiamo ricavare le aree colorate (il colore è a piacimento) che corrispondono ai territori dei feudatari. Non so se si nota ma la linea che corrisponde al confine tra due punti è situtata esattamente a metà (qualora voleste provare a disegnarla non è nulla di complicato).
Uno dei tiling più singolari che ho visto però è quello di Penrose:
Lui usa 2 forme geometriche diverse (2 rombi):
(questa immagine è stata rilasciata nel pubblico dominio da inductiveload e si può trovare su wikipedia)
Sebbene il disegno risultante sembri regolare , invece non lo è. Infatti il tiling di Penrose è aperiodico, significa che voi potete continuare ad aggiungere pezzi e questi continueranno ad incastrarsi in composizioni sempre diverse. Esistono varianti al tiling di Penrose, a seconda infatti di quali pezzi usate per iniziare, potrete ottenere composizioni (all'apparenza dell'occhio umano) più o meno regolari.
- 2° prerequisito: i bordi devono combaciare anche come immagine
Questo punto spesso cruccia molte persone, ma vi assicuro che apprese le basi è più facile a farsi che a dirsi (infatti ho avuto molte difficoltà a scegliere in che modo spiegarlo per questo articolo XD).
Se vogliamo creare una composizione, non sempre vogliamo che sia visibile il bordo (se ad esempio facciamo un pavimento con le piastrelle il bordo ci sta bene, ma se vogliamo fare un prato il bordo deve essere nascosto. Per questo motivo molte soluzioni geometricamente semplici possono diventare complesse a seconda di cosa vogliamo fare).
Esaminiamo la seguente immagine (è un pezzetto che ho ritagliato da una fotografia):
A prima vista non esiste alcun modo semplice di crearci un tile, tuttavia noi possiamo sempre fare in modo che ci sia un altro doppione dell'immagine i cui bordi combaciano perfettamente:
Questi 2 esempi sono stati fatti creando dei doppioni dell'immagine e specchiandoli, con un po di fantasia è possibile ottenere risultati carini e soddisfacenti:
Specchiando 1 volta:
Specchiando 2 volte:
Ora avrete gia notato che abbiamo appena creato un tile, infatti ora possiamo affiancarlo quante volte vogliamo: Questa è una cosa molto utile, infatti ora abbiamo un mattone che si affianca ad altri mattoni, ci basta crearne delle copie e su ogni copia possiamo disegnarci qualcosa di diverso in modo da avere mattoni diversi che combaciano tra di loro (con programmi come Photoshop o GIMP è molto facile perchè permettono di disegnare usando le sfumature).
Questo esempio è stato fatto usando paint di windows:
Al momento non ho sottomano un buon programma grafico così mi sono arrangiato usando il buon vecchio paint. Non è sempre obbligatorio usare strumenti avanzati per realizzare qualcosa di soddisfacente (Anche se GIMP ve lo consiglio ugualmente).
Ovviamente la regola di "mirroring" è solo una delle tante regole che ci permette di far combaciare i pezzi. Ne esistono altre ovviamente abbastanza semplici da comprendere ma che sono un po più complicate da mettere in atto.
La seconda regola per eccellenza che viene usata in tanti videogiochi è l'interpolazione lineare. A sentire la parola sembra qualcosa di complicato invece non lo è.
Immaginiamo di avere due immagini (userò immagini monocrome per semplicità):
Se vogliamo affiancarle senza che il bordo sia visibile dobbiamo prima metterci in mezzo un tile di transizione, per fare questo dobbiamo interpolare linearmente un terzo tile in modo che abbia una transizione graduale da un immagine all'altra.
Questo ovviamente è valido per 2 tile, quando in gioco ci sono più di 2 tile le cose sono leggermente più complicate: in uno dei prossimi articoli parlerò di come viene effettuata l'interpolazione bilineare, inoltre dedicherò un articolo ai terreni esagonali. Alla prossima! Ciauz