Archive for the 'Pixel art' Category

Page 2 of 4

Mi consenta!

Aaaaaah *sospiro*… è da un po’ che non aggiorno il blog. E’ stata una settimana di noia totale che mi ha tenuto lontano dal piazzare pixel per tanto tempo. La causa di tutto è molto probabilmente il caldo, che alimenta la mia pigrizia ed il conseguente mio ozio.

Per questo, per spronarmi a riprendere, mi son detto: appena viene proposta una sfida interessante su PixelJoint colgo l’occasione e partecipo. E così fu, capitò a proposito.

Crea una caricatura di uno degli attuali leader del mondo, elencati in questa pagina. Dal momento che è una caricatura dovresti enfatizzare e attenuare alcune caratteristiche in modo da rappresentare il leader scelto. Non deve per forza essere il leader della tua stessa città. Tra l’altro, per favore assicurati di dirci nella tua descrizione a quale leader ti riferisci.

Punti bonus se non fai Barack Obama*
*non è vero.

Questo pezzo di Jalonso potrebbe dare l’ispirazione per la sfida.

  • Dimensione massima: 128×128
  • Colori: massimo 32
  • Trasparenza: opzionale
  • Animazione: no

In un contesto normale questa non sarebbe proprio una sfida adatta a me, ma dopo aver ricevuto l’influenza di Luttazzi la prima volta che lo vidi, e dopo averla divampata grazie alla palestra che da giorni popolava il suo blog (dal momento che la palestra ha chiuso per ferie, questo era anche un po’ un modo per fare tesoro di quel che ho appreso) sono riuscito ad inquadrare perfettamente e velocemente il pezzo che avrei poi in seguito fatto.

Nonostante presi coscienza della sfida il Lunedì, aspettai il Giovedì per mettermi all’opera. Quindi dopo uno schizzo su carta pronto a fare caricature in pixelart.

018

Per chi non lo sapesse, quello è il nostro “papi” Berlusconi, insieme alla escort Patrizia D’Addario

I dettagli come il fiore ed il bastone assicurano al Premier un look da mafioso d’alto cinema. L’ombretto azzurro ed il rossetto della D’Addario, d’altro canto, le donano un look da baldracca d’alto borgo.

berlusca wipAd un certo punto della sfida non avevo più voglia di continuare il pezzo, mi arresi. Non mi ricordo bene come però il giorno seguente ripresi il lavoro e lo finii, e adesso ha riscontrato un particolare successo su PixelJoint (una decina di preferiti, vari commenti positivi, nessuno negativo, ed il pezzo è presente nella bacheca dei migliori 4 pezzi della settimana). Mi dico: meno male!

Tra l’altro, voglio condividere con voi questa splendida caricatura del Cavaliere del suo pene in una versione astratta, ma nonostante tutto riconoscibile. Mi piacerebbe tanto sapere chi sia l’autore!

Berlusconi_caricatura

challenges2BAM! Secondo posto.

Juro – Combattimento [inconcluso]

Era da molto tempo che non mi stressavo così tanto per via della difficoltà di un pezzo, da quando intrapresi il title del gioco.

Però è qualcosa che va fatto, e purtroppo non solo per il protagonista principale. Parlo del battler, o meglio delle pose animate da combattimento, che sono 10 (4 frame ciascuno).

Per quanto possa essere un principiante quando si tratta di animare, ho dato comunque il meglio di me e soprattutto più il lavoro è difficile più si impara qualcosa (entro i limiti).

Poche chiacchiere, più animazioni:

stand
Animazione di fermo

foward
Salto in avanti

backward
Salto indietro

defense
Difesa

hit
Danno subito (nessuna animazione)

lowhp
Pochi HP, status alterati

item
Uso di un oggetto

attack1-5
Attacco (sia normale che critico)

Su 10 pose, soltanto 8 sono pronte. Quel che manca ancora è la posa di vittoria insieme alla posa dell’utilizzo delle abilità.

La posa che vede il personaggio morto non è presente, e non è prevista. Infatti il motore del combattimento non visualizza nessuno sprite durante la morte. Nonostante ciò il personaggio sarà presente nel campo nella sua posizione, però sarà trasparente. All’inizio può sembrare una cosa strana, ma utilizzare una magia/oggetto per riportare in vita un membro del gruppo risulterà più appagante, in quanto sembrerà di averlo riportato indietro dall’oltretomba.

Un’altra peculiarità del motore di combattimento è la modalità con cui il personaggio si avvicina al mostro per attaccare (che volendo si può anche disattivare e rendere i personaggi “statici”). Mentre il personaggio intraprende il balzo in avanti verso il mostro, il suo sprite diventerà sempre più trasparente verso il centro dell’immagine, per poi tornare perfettamente opaco all’avvicinarsi verso il mostro. La stessa cosa ripetuta anche per il balzo indietro dal mostro verso la posizione iniziale. Un po’ così:

engine

E’ davvero tosta! Ed ora che mancano soltanto due pose non so più cosa inventarmi. Inizio a sentire qualche difficoltà con l’uso dell’abilità, ma prima o poi qualcosa ne verrà fuori.

What are these strawberries doing on my nipples I need them for the fruit salad

Ispirato da questa immagine:

strawnipples

Mi sono deciso a fare una versione alternativa di questo vecchio. Ed eccola:

nak001Forse avrei dovuto avvisare il mio pubblico prima, ci sono parti di nudo.

Ora che il pezzo è finalmente concluso (è stato iniziato il 9 Luglio) posso toglierlo dalla cartella dei lavori in corso. Devo dire che è stato un ottimo esercizio di anatomia ed ombreggiatura, che mi ha visto impegnato soprattutto nell’addome. Non credevo che un vecchio nudo potesse essere così difficile da raffigurare.

E’ stato divertente inoltre raffigurare il pene flaccido. Il tatuaggio lascia a pensare ad un passato come Heavy metaller, o a qualche mese passato in prigione.

Rispetto al pezzo originale, i colori sono notevolmente bassi, ma la pelle ha due tonalità in più. Chi riesce a zoommare noterà che le foglioline delle fragole sono in realtà blu e marroni (capelli e pelle).

E’ venuto fuori che tutta questa storia del “What are these srawberries doing on my nipples I need them for the fruit salad” (Cosa ci fanno queste fragole nei miei capezzoli mi servono per l’insalata di frutta”) sia in realtà il titolo di un libro:

41527Q2KP1L._SL500_AA240_

Se non vado errato tratta di consigli sessuali per donne indecise

Il libro è disponibile su Amazon.com qui.

Ho le emorroidi ma sono ancora in pista!

Salve gente, mi do il bentornato da solo. E lo apprezzo molto da me stesso.

E’ stata una settimana lenta ed inesorabilmente atroce, ero d’esame, ma non tanto per lo studio quanto per la creatività.
Infatti credo di non aver studiato più del mio solito durante tutto l’anno scolastico.

Questi giorni a seguire avranno quindi come tema comune “cosa ho fatto invece che studiare per superare l’esame di maturità, che era sì e no atteso da un po’ tutti i componenti della classe e se vogliamo anche dai docenti della stessa”.

Gradirei partire subito con il pezzo che ho creato in vista della sfida su Pixel Joint.

Crea un ritratto di un busto oppure un corpo a 3/4 di un personaggio che potrebbe venire usato durante una sequenza di dialogo in un gioco. Alcuni esempi di questo sono mostrati qui (in senso orario partendo da in alto a sinistra: Disgaea, Disgaea 2, Prince of Persia: The fallen King, The World Ends With You). Ricorda, l’immagine in basso a destra è un esempio di cosa non dev’essere fatto.

Il personaggio può essere qualunque cosa fin tanto che sia capace di parlare. La pixelart dovrebbe comprendere il personaggio soltanto. Qualunque cosa al di fuori dello stesso dev’essere completamente trasparente.

Dovrai creare un ritratto che possa essere usato per dialoghi multipli; l’espressione dev’essere adatta per tutti e tre i dialoghi seguenti:

Dovrai creare un ritratto che possa essere usato per dialoghi multipli; l’espressione dev’essere adatta per tutti e tre i dialoghi seguenti:

  • Ho perso il mio cristallo, potresti trovarlo e portarmelo?
  • Non è rimasto molto tempo per salvare la principessa.
  • Sono grato/a per il tuo aiuto nella mia avventura.

Le restrizioni sono:

  • Dimensioni – massimo 180×240.
  • Colori – massimo 32.
  • Trasparenza – richiesta.
  • Animazione – opzionale.

La cosa che fa paura di questa sfida, che ha lasciato tutti perplessi e che ha fatto sì che questa fosse davvero una sfida, è il fatto che il pezzo dev’essere buono per tutti e tre i tipi di espressione, che sono completamente diversi tra loro.

Alla fine sono giunto alla conclusione che il miglior modo per rappresentare più di una espressione diversa sia proprio rendere il personaggio inespressivo, che ironico!

Quindi, questo è il pezzo che ho portato nella sfida:

talk8fixIl movimento del pomo d’Adamo è così ipnotizzante!

L’animazione non è stata poi così difficile, anche se devo dire che mi son serviti diversi video di youtube su persone che ingoiavano ripetutamente la propria saliva chiamando questo movimento esercizio per la gola.
Esercizio un corno, fate schifo feticisti del pomo!

Ancora una volta devo ringraziare la mia ragazza per avermi fatto notare che in quasi tutti i miei pezzi c’è carenza di contrasto. Questo ha particolarmente contribuito a rendere la colorazione spacca culi!

Ed ecco il Work in Progress:

wip talk

Le dimensioni sono 150×240 e i colori sono 31 + la trasparenza, quindi 32.
A breve la seconda versione, per tutte le vecchie vedove in calore.

Ps. ci tengo a precisare che il titolo dell’articolo non è niente di meno che il titolo del pezzo!

Ultimo aggiornamento:
challenges1BAM! Primo posto!
monthlyart10BAM! Tra i migliori del mese!

Icons made by Larwick from and for pixel joint.

Botan

Nella smania di dover fare una miriade di personaggi non giocanti quasi mi dimenticavo di quelli giocanti, che andranno a far parte del tuo gruppo di eroi.

Visto che le battaglie si avvicinano non potevo certo pensare di farvele affrontare da soli, usando soltanto Juro!
Ecco perché al party si unirà anche Botan, il secondo eroe.

botan-joint

E’… una rana. Una rana-robot! Niente di più cattivo di così!
Nasconde il suo corpo robotico sotto al suo mantello. Dentro il suo sacco da barbone tiene tutti i proiettili che può utilizzare, armando il suo braccio. In assenza di questi spara piccole pallette di piombo.

Botan è un mercante, quindi avere lui tra i membri del tuo party farà diminuire il prezzo degli oggetti… anche se a dire il vero ancora non so se questo potrà venire incorporato in rpgmaker XP. Beh, speriamo bene.

Autoritratto

ritratto

Ecco il risultato di circa 12 ore di pixelling continui! Il pezzo parla da se, un autoritratto. Mi piacerebbe farne un design per una t-shirt, ma al momento non sono propenso a cercare una serigrafia che abbia anche lo stesso colore azzurrino sporco di fondo come colore della t-shirt.

Ispirato da una foto che mi fece mio fratello durante un momento di relax, mentre mangiavo un dessert:

IMG_7469Mi son preso la libertà di scurirmi la pelle e di rimuovere il cucchiaino.

Le uniche cose che ho tracciato sovrapponendo la foto sono alcune linee del viso a destra del pezzo, il naso (che odio) e l’orecchio (che odio). Questo è il classico procedimento:

wip ritratto

Pixel? This way! – Lineart + Dithering

1-026

Ora possiamo iniziare con una vera pixelart! La maggior parte dei pezzi potrebbe rubarvi ore, giorni… ma il risultato è sempre buono, serve sempre a qualcosa e ripaga. Per i primi passi è bene partire con un pezzo di piccole dimensioni: per fare degli esempi ho scelto un 150×100. Quindi, così come si potrebbe iniziare un disegno e così come si potrebbe iniziare un olio su tela partiamo con quella che viene definita lineart (ovvero il concetto lineare):

1-001

Dopo aver focalizzato in linea di massima cosa si vuole fare, si può partire col tracciare le linee base senza essere troppo puntigliosi e precisi, perché il principale obiettivo è quello di mettere in chiaro le idee iniziali così come l’organizzazione e la composizione generale dei componenti del pezzo.

La parte migliore della lineart inizia ora: la pulizia. In questo caso nella pixelart ci sono delle forme da rispettare per dare un buon effetto al tutto:

1-002

Ecco come risulterà la lineart dopo una corretta pulizia. La sostanza è quella di eliminare ogni pixel adiacente lasciati dal tratto della matita 1×1, per pixel adiacenti si intendono quelli colorati di rosso.

general clean

1-detailsQuindi, la regola applicata al pezzo. Nel mentre che si esegue la pulizia, viene quasi naturale, in caso di necessità, apportare anche qualche modifica alle linee della lineart stessa, per questo motivo non ci si deve preoccupare di fare da subito una lineart perfettamente pulita; è bene invece disegnare di getto e tenere il primo tentativo come buono (a meno che le linee non risultino troppo storte rispetto a quel che ci si aspettava).

Per quanto riguarda la lineart, non c’è molto altro da sapere. Possiamo passare alla fase successiva, la più complessa e sicuramente quella che darà un salto di qualità devisivo al pezzo: la colorazione. Per prima cosa gettiamo i colori di base:

1-003

Esistono tante tecniche al riguardo, citando le più utilizzate:

Dithering  - il dithering consiste nel piazzare dei pixel secondo uno schema preciso che varia a seconda della profondità del colore che si vuole dare. Alcuni esempi possono essere il dithering a scacchiera ed il dithering a granelli, ma ne esistono in realtà molti altri.

dithering bigdithering

In questo esempio ho creato almeno tre sfumature dal rosso al giallo, utilizzando solamente i due colori interessati. Quindi invece di cinque colori ce ne sono in realtà soltanto due. Un ottimo esempio di dithering a granelli è invece questo pezzo di ThePeach, un grafico bolognese:

circleskate_17http://pixeljoint.com/pixelart/42681.htm

grdither1grdither2grdither3 

Ora, supponiamo di voler aggiungere qualche strato di colore in più per iniziare a sfumare, per esempio preso il colore base che abbiamo già abbozzato si aggiungono due chiari e uno scuro. Dopodiché testiamo il dithering:

1-0041-0051-0061-007

1-007detailsAnalizziamo la trama di questa sfumatura. Come nel dithering precedentemente mostrato, questo è formato da una scacchiera normale ed una scacchiera distanziata di un pixel. E’ l’unico metodo di dithering che mi sono dilettato a provare nella mia breve vita, e devo dire che per sfumare funziona davvero bene! Ma se volete usare delle trame più complesse, provate. Mi ricordo ancora il mio primissimo pezzo, nel quale usai un dithering con una trama particolare:

dithering saggio di danzaQuesto pezzo lo si può trovare qui: http://asukicco.wordpress.com/2008/12/09/linizio-di-una-vita-artistica-che-non-ha-ancora-inzio/

Per il momento questo è tutto: conoscendo i concetti di lineart e di coloring potete iniziare a sbizzarrirvi! Molti più metodi e concetti nel prossimo intervento.

Pixel? This way! – Softwares


1-026

Per prima cosa, iniziamo questa serie di interventi su come potersi orientare verso la pixelart parlando un po’ della base del proprio lavoro digitale: il graphic software.

Come scelgo una buona applicazione per fare pixelart? Possiamo dividere in due grandi categorie le funzioni che questo software può offrire, distinguendole in necessarie e ausiliari. Le funzioni necessarie sono quelle che caratterizzano la pixelart, ovvero:

  • Matita 1×1 a bordi duri (hard edges);
  • Selettore di colore (anche chiamato contagocce);

In verità questi due strumenti bastano, ma includeremo nella categoria anche quegli altri strumenti che sono necessari all’uomo per non morire più volte durante il processo. Questi comprendono:

  • Riempimento solido (o secchiello);
  • Selezione rettangolare;
  • Tavolozza di colori personalizzabile (o custom palette);
  • Zoom.

Nella categoria degli ausiliari fanno parte tutte quelle funzioni che servono ad agevolare il lavoro, o anche solo ad organizzarlo meglio:

  • Livelli;
  • Gomma a bordi duri (se si utilizzano i livelli);
  • Selezione a zona (o bacchetta magica);
  • Cambio di tinta/colore (hue shifting);
  • Nuova visualizzazione;
  • Scorciatoie da tastiera.

E bastano pure!
Quanti e quali sono i software che offrono tali funzioni?

Per citarne alcuni:

MSPaint
Photoshop (http://www.adobe.com/it/products/photoshop/photoshop/)
Gimp (http://www.gimp.org/)
ProMotion (http://www.cosmigo.com/promotion/index.php)
Paint.Net (http://www.getpaint.net/)
e Grafx2 (http://code.google.com/p/grafx2/).

ProMotion e Grafx2 sono pensati appositamente per la pixelart, in particolare ProMotion che è fornito di funzioni molto interessanti soprattutto per il gamemaking (spriting, animazioni di vario genere, tilemapping…). Il mio giudizio però è negativo, soprattutto per quelli che vogliono iniziare, in quanto è un tool inutilmente complesso da usare, a prima occhiata. Paint.Net è come prendere la semplicità di paint e fornirla di plugin per gestire livelli, filtri grafici, cronologia delle azioni illimitata… insomma, una vera delizia!

photoshop_iconParlando della mia impostazione software: utilizzo soltanto Photoshop, occasionalmente Gimp. Per lo più per abitudine, ma anche per comodità, in quanto Photoshop possiede tutto quello che è stato citato fino ad ora. In particolare bisogna sapere le scorciatoie da tastiera, che facilitano di gran lunga il lavoro (ecco perché trovo inutilmente pesante e massacrante fare qualcosa con MSPaint):

B – matita matita M – selezione rettangolare selez G – riempimento riemp W – bacchetta magica wand E – gomma erase Alt (tenuto premuto) – contagocce goc V – movimento move. Spazio (tenuto premuto) + click sposta l’immagine.
Più o meno vale lo stesso principio per Gimp, le scorciatoie sono:

N – matita, R – selezione rettangolare, O – contagocce, M – movimento, Shift+B riempimento, Shift+E gomma, Spazio (tenuto premuto) sposta l’immagine.

Inoltre, in Photoshop è possibile organizzare il proprio ambiente di lavoro, scegliendo quali finestre visualizzare. Tra le mille che vengono proposte alla prima apertura, io ne utilizzo soltanto due: i livelli e gli swatches.

layersswat
Gli swatches sono degli ottimi segnaposti di colori – cliccando sul pulsante in basso a destra si segna il colore che si sta utilizzando, in modo da creare così la vostra palette di colori! Per eliminare uno swatch basta trascinarlo nel cestino, sempre in basso a destra.

La funzione più utile che ho trovato è senza ombra di dubbio la nuova vista, ovvero una seconda finestra dello stesso file, in modo da poter lavorare sotto zoom in una e tener d’occhio il lavoro nel complesso con lo zoom 1x. Per abilitare questo è sufficiente cliccare su Window -> Arrange -> New View for <nome file>:

botan2

Qualunque lavoro fate, i formati in cui si deve salvare una pixelart sono gif e png8, come spiega questo articolo di Wikipedia (http://en.wikipedia.org/wiki/Pixel_art#Saving_and_compression) con degli esempi (non svolgo le prove sui miei lavori perché non voglio vederli rovinati dalla compressione!):

formati

Il mio formato preferito è il png, utilizzo il formato gif solo ed esclusivamente quando voglio animare un pezzo. E questo mi porta a parlare di Gimp, il tool che uso per animare i miei lavori.

gimp_icon_smCome applicazione è odiosa. Abbastanza odiosa. Per lo più per la sua interfaccia grafica confusionaria, disordinata e… e… odiosa! Ecco, l’ho detto. Odiosa. Un buon modo per smettere di litigare con Gimp è quella di installarsi Tweak UI 2.10 per Windows XP (http://windowsxp.mvps.org/tweakui.htm). Tweak UI è un ottimo powerapp che consente di apportare modifiche all’interfaccia di Windows, in particolare per non fare a botte con Gimp basterà attivare l’opzione Focus follow mouse, sotto X-Mouse.

tweaks opt

In questo modo le finestre sparse di Gimp si attiveranno con il semplice passaggio del mouse.

Creare una gif con Gimp è semplicissimo. Dopo che i singoli frame sono stati posizionati ognuno su un layer diverso in ordine di come devono venire eseguiti, basterà salvare il file come gif, ed una finestra chiederà se si vuole creare un’animazione. A questo punto si aprirà una seconda finestra (quella delle opzioni):

gif opt

1. Permette di ciclare l’animazione all’infinito;
2. il tempo in millisecondi che passa tra un frame e l’altro;
3. il metodo di disposizione dei frame, ovvero a livelli cumulativi (ogni livello si pone sopra l’altro, senza cancellare il livello, e quindi il frame, precedente) e un frame per livello (il livello sucessivo sovrascrive il livello precedente).

Un’altra ottima funzione di Gimp, diciamo la funzione chiave per l’animazione, è il playback! Ti consente di poter vedere in anteprima come sta venendo l’animazione. La funzione si trova sotto Filters -> Animation -> Playback. In realtà faccio i singoli frame su Photoshop, li dispongo uno per livello, e poi li compongo con Gimp. Se grazie al Playback noto che qualcosa non va, apporto qualche modifica. Un grazie a The Peach per avermi mostrato questa funzione!

Per il momento questo è tutto riguardo ai due software che utilizzo. Per iniziare è bene prendere confidenza col proprio programma. Per finire, il WIP del bannerino a inizio articolo:

banner 1 wip

Lizard (Lizard-Man)

Un altro personaggio non giocante, un’altra razza… ma molto più comune nei vari giochi di ruolo: il Lizard (lucertola, altrimenti conosciuto come Lizard-Man).

carpet2Devo dire che questo pezzo mi ha dato del filo da torcere, la testa di una lucertola ha un’anatomia che non è congeniale alla mia mano. Ho dovuto usare dei riferimenti casuali da google immagini.

argonianCome accennato, la razza è presente in altri RPG, per il momento però ricordo soltanto la serie di The Elder Scroll, sotto il nome di Argoniani. E’ un po’ una delle classiche razze da aggiungere in un qualsiasi gioco/racconto del genere. Niente di nuovo insomma.

Jauzi

- Wiz! Enshi numa?
- Lu mu numa enshi u.
- Ah! Biente numa, lettimi struff rarff.
- Jauzi!

No, no, no! La faccenda non è così idiota! Jauzi è una parola, che esiste!

Ebbene sì, tra le mie tante lingue quali italiano, inglese, cinese, francese, spagnolo, tedesco, cinese mandarino, google, quelli della pasta al sugo, vietnamita e cristallizzazione delle gocce di resina, spunta anche l’arabo. Per l’appunto, jauzi significa “marrone”.

Se avete pensato che il seguito del post parli di scat-game, non uscite. Potete continuare a leggere, ma con la delusione nel vostro sorriso.

Jauzi, altro non è che il nome scelto per una razza di Scriba. Lo Jauzi, appunto.

giffi2Tipico Jauzi socievole.

In origine avrei dovuto chiamarlo Bald Horter, da bald (calvo) e Horter, una storpiatura di worker (lavoratore). L’idea che qualcuno potesse ricondurre il significato di bald al fatto che non ha capelli mi indisponeva, quindi cercai nel mio immenso vocabolario mentale.

Perché dovrebbero chiamarsi “marroni”? Hanno la particolarità di potersi mimetizzare tra le rocce.
Sono degli assidui lavoratori; non adorano faticare, ma lo fanno comunque senza lamentarsi.
Per resistere al caldo e al sole che picchia forte sulla loro pelata, con la giusta dose di calma, concentrazione e risparmio dei movimenti fisici possono alterare la loro temperatura interna per meglio adattarsi a lavorare nelle grandi distese isolate, dove è più possibile trovare risorse o lavoro non commissionato da nessuno, e quindi indipendente.

Sono di statura enorme, più del doppio di un essere umano. All’incirca così:

jauzi sizeIn sostanza sono direttamente riconducibili all’uomo medio grezzo palestrato, che è più indaffarato nel pomparsi i muscoli del petto e delle braccia trascurando completamente il potenziamento delle gambe.

fake jauziSe hai notato per prima la tazza sulla sinistra, sei me.

La realtà ci offre talmente tante cose, che non abbiamo bisogno di inventarcele. Basta attingere fantasiosamente da essa.

bald-real