Cosa rende il ridimensionamento della pixel art diverso dalle altre immagini?


13

Di recente ho allenato uno sviluppatore che è nuovo nel creare giochi di pixel art e mi sono reso conto che c'è un po 'di "saggezza convenzionale" nel ridimensionare la pixel art che non è ovvio per un nuovo arrivato e potrebbe non essere ben documentato. Quindi, ecco un tentativo di risolverlo ....


  1. Ho sentito che dovrei ridimensionare la pixel art solo del 200%, 300% ecc., Non tra dimensioni come il 120%

    • Perché? Il ridimensionamento non dovrebbe "funzionare" come fa con altre immagini?
    • E se avessi davvero bisogno di rendere il mio personaggio solo una frazione più grande o più piccola per ottenere il gameplay o l'aspetto giusto? Come posso risolvere questo problema?
  2. Mi è stato detto che è "cattivo" utilizzare la pixel art a diverse scale in un gioco - perché?

    • Ad esempio, se ho ridimensionato il mio personaggio in modo che ogni sprite texel sia pixel dello schermo 4x4, mentre la mia grafica di sfondo è ingrandita in modo che ogni sprite texel sia pixel dello schermo 6x6. Un pixel non è un pixel alla fine della giornata?

Risposte:


31

Ridimensionamento in base a numeri interi

Il ridimensionamento di 2x, 3x ... n x è semplice: ogni pixel diventa solo un n x n quadrato di pixel e l'aspetto dello sprite originale è perfettamente conservato (comprese tutte le linee nitide, gli angoli e gli zig-zag della scala) .

Tuttavia, ci si imbatte in problemi quando si ridimensiona la pixel art di quantità frazionarie (ad es. 1,5x) perché i pixel sono discreti per natura. Non possiamo davvero avere "mezzo pixel".

Per altri tipi di arte possiamo spesso scappare con la fusione di pixel sorgente adiacenti in cui il pixel dovrebbe essere "mezzo colorato" e ad alte risoluzioni gli artefatti di solito non sono evidenti. Ma su una grande pixel art che distrugge rapidamente l'aspetto nitido.

Quindi, invece, di solito utilizzeremo il filtro "Prossimo prossimo" (chiamato anche Filtro punti) in modo che ogni pixel dopo il ridimensionamento prenda il suo colore esattamente da un pixel nello sprite originale.

Ciò ha un'altra ruga: poiché il numero di pixel dopo il ridimensionamento non è un multiplo del numero intero del numero di pixel di origine, alcuni pixel di origine verranno duplicati più di altri (se ridimensionati) o saltati del tutto (se ridimensionati).

Sfortunatamente, il software di modifica delle immagini e il filtro delle trame della GPU non sono molto esigenti su dove duplicano o saltano i pixel - seguono solo le regole di arrotondamento di base - il che può rendere il risultato distorto e irregolare.

Guarda l'esempio qui sotto. Nel mezzo abbiamo ridimensionato lo sprite di funghi del 150% usando il filtro Neighbor più vicino, e il risultato sembra traballante e casuale. Un occhio è più grande dell'altro, alcuni contorni sono spessi mentre altri rimangono sottili e le macchie arrotondate sembrano bloccate ... non sembra qualcosa che un artista di pixel disegnerebbe apposta.

Esempio di artefatti derivanti dall'uso di una scala non intera

Se abbiamo davvero bisogno che lo sprite sia più grande del 150% (diciamo, per far sembrare il gameplay giusto o per supportare risoluzioni di visualizzazione alternative ), allora possiamo ridipingere le aree problematiche come nell'esempio a destra. Ora sembra più qualcosa che un artista vorrebbe fare e stilisticamente coerente con altre opere d'arte nel gioco. (Anche se non sono un grande artista di pixel, quindi potrebbe essere ancora meglio 😉)

Sfortunatamente non ci sono molte scorciatoie per questo. Per le scale di numeri interi, puoi utilizzare algoritmi di upscaling di pixel art appositamente progettati - una vasta gamma è disponibile in strumenti come ImageResizer - per ottenere un punto di partenza meno bloccato rispetto al vicino più vicino, ma ci vuole ancora l'occhio di un artista e un po 'di grasso al gomito per ottenere un risultato di alta qualità.


A parte: scale razionali possono anche spuntare in fase di esecuzione .

Immagina che il tuo gioco sia in risoluzione NES (256 x 240) e che tu voglia visualizzarlo su uno schermo 1080p.

1080: 240 = 4.5, quindi alcuni dei pixel sorgente o "texel" nella tua scena vengono fatti saltare fino a 5 pixel dello schermo, mentre altri sono solo 4, creando distorsioni come abbiamo visto sopra. In movimento tendono a far increspare e luccicare gli sprite in modo distratto, senza una causa ovvia:

Esempio di movimento di un fungo in scala frazionaria, che mostra artefatti increspati

Spesso vedrai le persone suggerire di arrotondare le posizioni della videocamera o dell'oggetto a coordinate di pixel interi, ma ciò non risolve davvero il problema. L'arrotondamento si verifica già come parte del filtro del vicino più vicino: il problema è che alcuni pixel dello schermo si arrotondano allo stesso texel di origine (duplicandolo), mentre altri no, portando a un risultato non uniforme.

La soluzione consiste nell'utilizzare una combinazione di riempimento / ritaglio o set di risorse alternative per tornare a un rapporto coerente, in numero intero, tra pixel dello schermo e texel per ciascuna risoluzione dello schermo che si desidera supportare - vedere alcuni esempi di Unity qui . Questo è un altro caso in cui non esiste una soluzione universale facile e dovrai applicare un po 'di giudizio e abilità per mantenere il tuo gioco nitido.

Mantenere coerente la scala dei pixel

Questa "regola" si riduce alla coerenza stilistica.

Quando usi la pixel art a diverse scale, può sembrare che le risorse siano state messe insieme da giochi diversi, invece di avere un'estetica unificata.

Esempio di ridimensionamento delle risorse in modo diverso in un singolo gioco

Nell'esempio a sinistra, ho messo insieme alcuni sprite di Super Mario World, tutti sulla stessa scala, e sembra fantastico.

Nel mezzo, ho ridimensionato Mario e il livello a due volte la risoluzione dello sfondo e la talpa per triplicare la risoluzione. Dal momento che ho usato scale di numeri interi, non otteniamo distorsioni o increspature da nessuna parte, ma sembra ancora un po 'divertente.

Per uno, lo sfondo è molto più dettagliato del primo piano. È in grado di rappresentare curve morbide e luci nitide, il che rende il primo piano particolarmente "bloccato" in contrasto, piuttosto che avere una coerente pixel art. E i contorni della talpa sono notevolmente più spessi e più frastagliati rispetto al resto del primo piano.

A destra mostro di nuovo che, ridipingendo le risorse in una scala di pixel comune, possiamo riportare un aspetto più unificato e intenzionale con le nuove dimensioni delle risorse.

Ma devo?

No, non proprio. È il tuo gioco e puoi farlo come vuoi.

Soprattutto quando si prototipa e trova il divertimento nel tuo gioco, essere in grado di provare cose velocemente è più importante che avere un aspetto perfetto. Probabilmente avrai la dimensione di cose importanti come il tuo personaggio sbagliata molte volte prima di trovare ciò che è meglio per il tuo gioco, e sarebbe schifoso dover ridipingere ogni fotogramma di animazione ogni volta che vuoi provare qualcosa di diverso. Quindi, all'inizio, non sudare.

Per il gioco rilasciato, è un giudizio. Nessuna polizia di pixel art ti vieterà di distribuire il tuo gioco se non segui le regole e molti giocatori non sarebbero in grado di descrivere la differenza. Ma l'attenzione a questi dettagli di pixel è qualcosa che molti giocatori (e recensori) considerano un importante segno di qualità - quindi conosci il tuo pubblico e decidi qual è il migliore per l'esperienza che vuoi offrire loro.

Un'ultima considerazione è che molti giochi pixel art hanno un gameplay di altissima precisione. Pensa a saltare tra le piattaforme da 1 blocco nei primi giochi di Mega Man. In queste situazioni, una griglia di pixel coerente (e griglia di tessere) può essere un indizio importante per il giocatore nel giudicare ed eseguire le proprie mosse. L'introduzione di irregolarità nell'arte potrebbe effettivamente rendere il gioco più difficile da imparare, il che può essere frustrante.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.