Vi devo confessare una cosa. Sono un amante della pixel art. Il fascino retrò degli anni 80, suscita in me sempre grandi emozioni.
Implementare la Pixel Art in Android nelle proprie applicazione è semplice, ma bisogna utilizzare qualche piccola accortezza affinché le proprie immagini non vengano deformate.

Antialiasing: L’incubo della pixel art

da quando la tecnologia si è evoluta, la nemesi della pixel art è sempre stata l’Antialiasing.
L’Antialiasing, fatta eccezione per la pixel art, è una cosa positiva.

Quando un immagine dalle piccole dimensioni viene ridimensionata in una più grande, viene applicata, nella maggior parte dei casi, una tecnica per impedire l’ aliasing (“Gradinatura”, “Scalettatura”): esso consiste nell’ammorbidire le linee smussandone i bordi e migliorando l’immagine.
La pixel art si basa invece sulla “Scalettatura”. Essa è improntata sul far vedere all’utente i pixel che realizzano l’opera.
L’antialiasing, applicata su un immagine in pixel art, la trasforma come se fosse patinata (effetto miope senza occhiali per essere più precisi!), creando un forte disagio all’osservatore.

Dithering

Il dithering è una tecnica che aggiunge all’immagine del “rumore”, minimizzando eventuali distorsioni causate dal ridimensionamento dell’immagine.
In realtà questa tecnica viene usata anche per disegnare in pixel art.
La pixel art si basa sul colorare il singolo pixel di un determinato colore. Come è quindi possibile in un immagine creare delle sfumature?
“Ingannando” l’occhio umano con dei “pattern” (disposizione in un certo ordine dei pixel) che simulino questa graduazione:

Finché il Dithering è un processo deciso volontariamente dall’autore, nessun problema. Quando il dithering è generato automaticamente dai computer per scalare un immagine, può creare delle mutazioni che rendono l’immagine deformata.
Un immagine in pixel art è creata generando delle simmetrie precise tra i vari pixel. Un solo pixel modificato può rovinare l’intera opera.

Visualizzare Pixel Art in Android: L’approccio sbagliato

Proviamo a visualizzare un icona in pixel art come se fosse un immagine come tante, utilizzando una ImageView. L’icona creata da me è di dimensioni 16×16, e la ridimensioneremo a 160dp:

<ImageView
            android:layout_width="160dp"
            android:layout_height="160dp" 
            app:srcCompat="@drawable/sword"
            android:id="@+id/imageView"/>

Come vedete, qualcosa non torna. L’immagine sembra opaca. Questo effetto è l’Antialiasing!
Android tenta di smussare le linee, dato che abbiamo aumentato di dieci volte la sua reale dimensione.

Come visualizzare correttamente la pixel art in Android

Per visualizzare correttamente l’immagine, è necessario creare una Bitmap e disabilitare l’antialiasing su di essa. Creiamo nella cartella drawable un xml “sword_pixel_perfect.xml”:

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/sword"
        android:antialias="false"
        android:dither="false"
        android:filter="false"
        >
</bitmap>

• src
  Specifichiamo l’immagine bersaglio.
• antialias
  Questa variabile permette la disattivazione/attivazione della tecnica di antialiasing. Impostiamola a false.
• dither
  Possiamo, con questa impostazione, disattivare i dithering.
• filter
  FilterBitmap, se abilitato, esegue delle trasformazioni dell’immagine simile all’ antialiasing. Questo parametro si usa quando viene rotata un immagine, in modo tale da ammorbidire le linee.

Ora che abbiamo creato la giusta risorsa, non occorre altro che sostituire l’immagine dell’ ImageView con questo xml:

<ImageView
            android:layout_width="160dp"
            android:layout_height="160dp" 
            app:srcCompat="@drawable/sword_pixel_perfect"
            android:id="@+id/imageView"/>

Ed ecco qua la nostra immagine in pixel art perfettamente visualizzata in una applicazione Android!

Anche per oggi è tutto!
Spero che questa guida vi sia stata utile!
Fatemi sapere cosa ne pensate!

Alla prossima!

Buon codice a tutti!