Pagine    Articoli    Prodotti    Forum    Cerca  
Nickname

Password


Non sei registrato?
Registrati a GPI qui!

Puoi anche attivare un vecchio utente GPI e chiedere una nuova password.
I Team

Mappa Team
I nostri utenti

Mappa Utenti
  Pixellare un Dungeon
Pubblicato da Dario Oliveri il 2012-07-22 08:39:33

-

1) Decidere il tiling

-

Alcuni giochi 2d sono creati a partire da innumerevoli mattoncini messi insieme. Il vantaggio di usare questi "tiles" è che partendo da un numero ridotto di pezzi si possono creare innumerevoli cose. Giochi come i primi Final Fantasy ad esempio avevano i livelli interamente creati da Tiles (più ovviamente anche contenuti unici inseriti nelle mappe). Esistono infiniti modi di far incastrare i tiles, il modo più semplice è di usare tanti quadratini delle stesse dimensioni. Ma nessuno vi vieta di creare "incastri" più complessi (come i puzzle ad esempio).


Per decidere le regole di tiling è necessario crearsi un template, ovvero un file base da cui partire per poter disegnare tutti gli altri tileset.


Template per i Muri: Sono previsti muri di spessore massimo 1. I muri vengono posizionati su una griglia dove ogni tile di base è 16x8 pixel (sono tile rettangolari). Un muro è alto 24 pixel.



Template per il pavimento: I pavimenti invece sono composti da tile di 16x16 pixel (quadrati) e permettono di creare aree di forme arbitrarie usando 2 tipi diversi di pavimento. (come vedete ho usato 2 colori, il bianco e il nero. Questo tornerà parecchio utile. Infatti potete usarlo come maschera di livello per mischiare 2 tipi diversi.)



Prima di iniziare a fare tutta la grafica, dovrete verificare che il template sia corretto: semplice, vi basta provare ad affiancare i vari pezzi e vedere se combaciano (windows' paint è più che sufficiente per fare ciò)

-

2) Decidere un tema

-

Il gioco è vostro, siete voi a decidere quindi ambientazioni etc. Quando si tratta di disegnare un dungeon pixel per pixel è impossibile aggiungere una quantità di dettagli enorme, per lo più avrete a che fare con tiles di dimensioni ridottissime (16x16, 32x32, 8x32 etc..). Dovrete quindi scegliere qualcosa di impatto, che renda l'idea con una quantità minima di dettagli. Anche qualcosa di semplice va bene. Capiterà anche che sarà qualcun'altro a dirvi che ambientazione fare. Se siete fortunati però vi verrà lasciata carta bianca (dipende tutto dal vostro team).


Tema: Cantina abbandonata


Muro di mattoni + Piastrelle Esagonali (terra cotta, e terra cotta usurata dal tempo).


Preview sulla grafica ultimata:


 -

3) Palette

-

Le Palette sono I colori che utilizzerete. Non preoccupatevi troppo dei colori (potrete sempre cambiarli in post-produzione). Tuttavia le Palette sono importantissime per via del NUMERO DEI COLORI. Se infatti i vostri

lavori sono creati con numeri di colori troppo diversi risulteranno disomogenei. Con lo strumento "succhiello" potrete usare come fonte di colori una foto qualunque. Sarà raro che utilizziate più di un centinaio di colori quando fate pixel-art. Quindi prendere i colori da una foto aiuta a focalizzare la vostra attenzione sui colori più importanti. Partire dalla paletta RGB completa il più delle volte causerà una perdità di "focus" da parte vostra e il disegno finale risulterà colorato come un cartone animato (magari è il risultato che vorrete, ma di sicuro un dungeon "vivace" è l'ultima cosa che volete vedere). A voi importano i colori per ora, quindi non importano i MegaPixel della vostra fotocamera (anche se avete un Nintendo DS va benissimo).

-

4) Creare il tile base

-

Il tile base è il punto di partenza, creato quello, gli altri vengono da se. Nel mio caso servivano 2 diversi tile base. (il muro di mattoni e il pavimento). Potrete sorprendere gli altri anche con soli 16x16 pixel. Molti giochi che fanno uso di tile di dimensioni ridotte utilizzano forme geometriche semplici come rettangoli o quadrati (far combaciare forme così semplici è facile, ma si rischia di rendere troppo monotono il tutto). Creare un tiling usando esagoni ad esempio può essere una mossa azzeccata. Sembra difficile? In realtà non lo è affatto. Vi basterà creare degli esagoni e poi "ridimensionarli" in modo che combacino tra loro . La seguente griglia di esagoni si può facilmente creare con Inkscape. Non siate troppo tirchi sul numero di esagoni, quando convertirete la griglia a bitmap, avere tanti esagoni vi consentirà di pastrocchiare parecchio senza preoccuparvi di perdere gli esagoni. (In questo caso usare un qualsiasi strumento per il disegno geometrico ad esempio una versione di prova di autocad può essere più semplice che usare Inkscape. Siete voi gli artisti, qualunque strumento vi permetta di raggiungere il risultato è lecito. Siate creativi non solo nel risultato ma anche nei mezzi).



Unica cosa visto che andremmo a ridurre di molto la dimensione dei tile è meglio creare linee più spesse di quelle qui sopra. Io al momento non ci pensavo, così le ho sfocate, poi ho regolato luminosità e contrasto fino ad ottenere linee più spesse e più morbide (ricordatevi di mettere come sfondo la trasparenza con GIMP).


Ora non vi resta che prendere un quadrato che vada da un esagono ad un altro e ridimnesionarlo fino a farlo diventare 16x16 pixel.



Perfetto. Ora non vi basta che creare uno sfondo da mettere ai vostri esagoni (potete già regolare tonalità-saturazione e luminosità-contrasto volendo)


 

-

5) Assemblare i tile base con il template

-

Ora non vi resta che mettere insieme i tile base usando il template. Potete benissimo usare la maschera bianca e nera come una maschera di livello in GIMP o Photoshop, io ho usato FreeImageMixer, un tool che permette di mischiare immagini usando semplici comandi C++.



Ovviamente il risultato finale può e deve essere corretto nei colori, i più minuziosi diranno che non è più pixel art. Ma stare a rimodificare tutti i colori uno per uno prende troppo tempo. Quindi direi che una semplice correzione di colore è ammessa.


-

 

6) Altri esempi:

-

Ecco alcuni altri tileset che ho creato, tutti i tile base sono stati creati pixel per pixel. Poi ovviamente la combinazione è stata fatta usando un template e poi è stata applicata una correzione di colore. Invece che usare direttamente i miei tileset vi invito a crearne voi stessi di migliori e magari più elaborati. Una volta che avete impostato una piccola catena di produzione non vi prenderà troppo tempo crearli. (Per usare questi tileset, vi serve il mio permesso che potete benissimo chiedere per email o per messaggio privato su questo sito)


 

 

 

7) Mini tutorial (usare maschere di livello in GIMP 2.8):

 

-

Create un nuovo file con GIMP che abbia già le dimensioni richieste (in questo caso 224x16). Colore di sfondo bianco. Aprite come livelli il file con il template. Click destro sul livello appena caricato ->Aggiungi maschera di livello (copia in scala di grigi del livello).



Assicuratevi di togliere la spunta da "Modifica maschera di livello"



Aprite con paint questa immagine, poi selezionatela tutta e fate COPIA:


Ritornate in GIMP, selezionate il vostro livello e incollate (control + V). Dovete assicurarvi che sia selezionato il livello e non la sua maschera (altrimenti modificherete la maschera!).



Risultato:



Ora aprite come nuovo livello quest'altra immagine:



posizionatela sotto il livello con la maschera:



Salvatevi a parte questo file: avere il file .xcf diviso in due livelli vi permetterà di modificarlo facilmente in futuro e di aggiustare i colori. Per poter salvare un file utilizzabile dal vostro videogioco non vi resta che andare su "file"

e poi su "esporta...". Siccome i tile sono piccoli vi sconsiglio di usare formati come JPEG (che degraderanno visibilmente la vostra immagine). Invece potete usare PNG, BMP o qualunque altro formato senza perdita di qualità



Campagne crowfunding

Just One Line
Siamo presenti su

     
Copyright ©2016 - Manifesto - Privacy - Termini di Servizio - Community - Collaboratori - Contattaci