Dimensioni degli sprite

La dimensione degli sprite determina il look, il carico di lavoro e il layout dello schermo di un gioco in pixel art. Ecco come sceglierla, e come mantenere coerenti le dimensioni.

Un goblin che cammina, renderizzato da Pixor
Una moneta che gira, renderizzata da Pixor
Cavaliere renderizzato alto 32 pixel
32 px
Cavaliere renderizzato alto 64 pixel
64 px

Cos’è

La dimensione dello sprite è la dimensione del fotogramma in cui è disegnato un oggetto, spesso un quadrato come 16×16 o 32×32. È strettamente legata ad altri due numeri: la risoluzione di base del gioco (quanti pixel dell’arte stanno sullo schermo) e la scala (quanti pixel dello schermo diventa ogni pixel dell’arte).

Dimensioni comuni

  • 16 px. Tile classici, oggetti e piccoli personaggi. Molto leggibili, poco spazio per i dettagli, rapidi da disegnare. Adatti a platform retrò e avventure dall'alto con tanti elementi sullo schermo.
  • 32 px. Una dimensione comune dei personaggi nei giochi moderni in pixel art. Spazio per un volto, vestiti e pose chiare. I tile sono spesso di 16 o 32 px.
  • 48 px. Una via di mezzo per personaggi con equipaggiamento e animazioni espressive, senza la mole di lavoro di 64.
  • 64 px e oltre. Personaggi dettagliati, picchiaduro, boss e scene ravvicinate. Ogni fotogramma richiede molto più tempo per essere disegnato a mano.

Tile e personaggi

Tile e personaggi non devono coincidere. Una griglia di tile da 16 px con un eroe alto 24 o 32 px è comune: l’eroe è alto un tile e mezzo o due tile. Scegli la dimensione del personaggio per leggibilità e animazione, e quella dei tile per costruire i livelli. Poi mantieni la stessa dimensione dei pixel per entrambi, o ottieni dei mixel.

Scalare di numeri interi

La pixel art si disegna piccola e si mostra grande. Scegli una risoluzione di base, poi scalala di un numero intero:

  • 320×180 scalato di 6 diventa 1920×1080, e di 8 diventa 2560×1440.
  • 640×360 scalato di 3 diventa 1920×1080, e di 6 diventa 3840×2160.

Con scale intere ogni pixel dell'arte diventa un quadrato nitido. A 2.5× alcuni pixel diventano due pixel dello schermo e altri tre, il che appare irregolare. Disattiva il filtro delle texture (usa il nearest-neighbour) così i pixel restano nitidi.

Errori comuni

  • Sceglierli troppo grandi. Personaggi da 64 px stanno benissimo in un mock-up e costano molti più fotogrammi di quanti un piccolo team possa disegnare.
  • Scalare gli sprite singolarmente. Creare un nemico grande scalandone uno piccolo di 2× rompe la griglia dei pixel.
  • Ignorare lo schermo. Un personaggio da 64 px su uno schermo 320×180 lascia poco spazio per giocare.

Come scegliere a mano

  1. Decidi la risoluzione di base e cosa deve stare sullo schermo.
  2. Prepara un mockup di una schermata con un personaggio, qualche tile e l’interfaccia.
  3. Prova il personaggio a due dimensioni, per esempio 24 e 32 px, e fai un test di gioco a velocità reale.
  4. Fissa la dimensione, poi misura tutto il resto rispetto a essa.

Come lo fa Pixor

In Pixor, dai alle camere un unico valore fisso di Pixel/m (per impostazione predefinita ognuna adatta il suo sprite a una dimensione propria). Impostalo in modo che il tuo personaggio principale sia alto quanto vuoi, e ogni altro modello viene renderizzato in proporzione con la stessa dimensione di pixel. Per provare 32 contro 64, cambia la scala e renderizza di nuovo; non c’è niente da ridisegnare. Il pivot resta bloccato su un pixel in ogni fotogramma e lato, così gli sprite si allineano sulla griglia dei tile.

Domande

La dimensione dello sprite indica la larghezza o l’altezza?

Di solito si intende la dimensione del fotogramma o del tile, come 32×32. I personaggi spesso ne riempiono solo una parte, quindi controlla anche l’altezza del personaggio.

Tile e personaggi dovrebbero avere la stessa dimensione?

Non necessariamente. Una configurazione comune è tile da 16 px con personaggi alti da 16 a 32 px. Ciò che conta è che tutta l’arte usi la stessa dimensione di pixel.

Perché la mia pixel art sembra sfocata nel motore?

Viene scalato di un numero non intero o filtrato. Usa il filtro nearest-neighbour e scale intere.

Leggi anche

Provalo sul tuo modello, gratis nel browser, o prendi la versione completa.

Prova nel browser Ottieni Pixor