Share
Cosa starai creandoMolti sviluppatori di giochi sono prima i programmatori e gli artisti seconde. Sia che tu stia usando la pixel art perché preferisci il look "retro", o semplicemente non hai il tempo o l'esperienza per portare la tua arte al livello successivo, questo semplice effetto può aumentare notevolmente l'attrattiva visiva del tuo gioco.
Questo stile di pixel smussato si ottiene ingrandendo prima la tua pixel art 1: 1 mantenendo le proporzioni originali. Quindi, attraverso un processo molto semplice che può essere applicato durante la creazione degli asset o in fase di runtime, puoi trasformare la tua arte pixel standard in qualcosa che sembra bello anche con risoluzioni HD. L'effetto è così semplice che può essere applicato praticamente a qualsiasi linguaggio di programmazione, ambiente di sviluppo e motore. In questo tutorial, ti introdurrò ai pixel smussati in modo tale che sarai in grado di implementare questo effetto nel tuo progetto di gioco.
Quindi cos'è esattamente un pixel smussato? Un singolo pixel è l'elemento grafico più piccolo utilizzato per rappresentare l'arte in forma digitale, quindi, in un certo senso, puoi pensare ai pixel come blocchi di costruzione 2D. Un pixel smussato si limita ad espandersi su quel concetto di base introducendo profondità artificiale.
Le cose diventano un po 'confuse quando ti rendi conto che i pixel smussati sono composti da più pixel "regolari", ma in realtà non è così complicato come sembra. Per comprendere appieno il processo, inizieremo dall'inizio con una comprensione di base dei pixel.
Innanzitutto, parliamo delle dimensioni e dei rapporti dei pixel. L'immagine sopra mostra lo stesso sprite alla sua dimensione originale e quindi ingrandita fino a cinque volte quella dimensione. Per ogni ingrandimento, anche il "blocco predefinito" del pixel originale aumenta di dimensioni. Quando un pixel standard viene ingrandito cinque volte (500%), diventa un blocco di pixel 5x5. Ora ti rimane uno sprite con un rapporto di 1: 5 pixel. Questo numero indica semplicemente che ogni pixel 1x1 nello sprite originale è ora rappresentato da un blocco di pixel 5x5. L'intero sprite, che in origine misurava 14x15 pixel, ora ha una dimensione di 70x75 pixel.
Ora che il nostro sprite è composto da "blocchi" di pixel molto più grandi, possiamo vedere come funzionano i pixel smussati.
L'immagine sopra mostra lo stesso sprite usando i pixel standard a sinistra e i pixel smussati a destra. Con i pixel standard, ogni blocco 5x5 è composto dallo stesso colore. Nell'esempio di pixel smussati, possiamo vedere che il blocco 5x5 ora è composto da diverse tonalità dello stesso colore.
Il primo quadrato in ogni versione è il blocco 5x5 pixel che rappresenta il pixel standard 1x1 nell'immagine originale. La seconda serie di quadrati è una versione ingrandita di questo blocco 5x5 per mostrare la composizione del blocco di pixel smussato. Questi pixel sono disposti in modo tale da dare l'illusione della profondità, con luci sull'angolo in alto a destra del blocco 5x5 e ombre sull'angolo in basso a sinistra. Quando combinati per creare l'immagine finale, questo si traduce in uno sprite che sembra costituito da piccoli blocchi smussati, invece di pixel 2D piani.
Ora che hai compreso le basi dei pixel smussati, riassumiamo brevemente come si ottiene questo effetto.
Innanzitutto, devi determinare se implementerai questo effetto in fase di runtime nel tuo gioco attuale o genererai le tue risorse artistiche con pixel "smussati" smussati. In entrambi i casi, l'effetto pixel smussato viene ottenuto più o meno allo stesso modo.
Si inizia creando uno sprite smusso che ha la stessa dimensione della dimensione finale del blocco dello sprite. Ad esempio, se il tuo artwork finale sarà 1: 4 (ingrandito quattro volte), creerai un blocco smussatura 4x4. Questa smussatura viene quindi applicata sulla parte superiore dello sprite o della finestra di gioco ingrandita e ripetuta per riempire l'intero schermo. Giocando con le modalità di fusione e l'opacità, puoi ottenere risultati diversi.
Tratterò entrambi i metodi più dettagliatamente in seguito, ma per ora dovremmo prestare attenzione ad alcune regole e linee guida critiche.
Mentre questo effetto si ottiene facilmente applicando una semplice sovrapposizione, ci sono diverse cose importanti che possono impedire il corretto allineamento dei pixel smussati.
Il problema più ovvio è la dimensione dello sprite rispetto alla dimensione della sovrapposizione dello smusso. Tutti i tuoi beni devono seguire il rapporto di ingrandimento dettato dalla dimensione del tuo blocco di smusso, o le linee di smussatura non saranno coerenti.
È anche importante decidere le dimensioni della finestra di gioco prima di ingrandire qualsiasi risorsa. Se la dimensione della finestra di gioco è 640x480px e si desidera utilizzare una smussatura 4x4 (rapporto 1: 4), le risorse originali dovrebbero essere progettate a 160x120 px. Quando ingrandisci le risorse artistiche, ricorda che tutto deve essere "X" volte più grande della dimensione originale, dove "X" è un numero intero.
Qualsiasi modifica nella visualizzazione di gioco o posizionamento di sprite individuale deve essere attentamente considerata quando si tenta di disegnare la sovrapposizione di smussatura. Questo ci porta alla regola più importante da seguire:
Il movimento basato sulla griglia è obbligatorio! Nell'immagine sopra, abbiamo un esempio corretto di movimento basato sulla griglia a sinistra e un esempio errato a destra. Poiché le risorse originali sono state ingrandite quattro volte, tutti i movimenti verticali e orizzontali dovrebbero essere inseriti in una griglia 4x4. Il gatto sprite, a destra, ha spostato un pixel a destra e un pixel in basso, provocando lo sprite che interrompe il flusso anche di blocchi smussati.
Quello era un esempio di un effetto pixel smussato che era "cotto" nelle risorse. L'esempio seguente mostra cosa succede quando non si segue il movimento basato sulla griglia mentre si implementa l'effetto su runtime:
Si noti come la sovrapposizione del pixel smussato sia leggermente disallineata sull'intera immagine. Questo perché la sovrapposizione di smussi copre l'intera finestra di gioco e non si muove, mentre gli sprite sottostanti si muovono ma non si agganciano alla griglia 4x4. Ricordatelo tutti il movimento di gioco deve essere conforme alla griglia dettata dalla dimensione del blocco di smusso, che è determinato dal rapporto di ingrandimento del bene.
Sì, ha più senso logico implementare questo effetto all'interno del codice di gioco piuttosto che durante la creazione degli asset. Applicare questo effetto durante la creazione degli asset, tuttavia, consente una maggiore libertà di sperimentare rapidamente e trovare lo stile perfetto che si adatta al tuo progetto. Puoi applicare varie sovrapposizioni utilizzando diversi stili di fusione, regolare la saturazione e il contrasto della tua arte sottostante e sostituire i colori per trovare il giusto equilibrio prima di decidere il tuo aspetto finale.
Questo è un esempio ingrandito di un blocco di smussatura 6x6. Ti consigliamo di mantenere i blocchi di smussatura su uno sfondo trasparente, ma ho usato il blu qui in modo da poter vedere la differenza di opacità.
Per creare questo blocco smussato, ho iniziato con una tela che si adattava alle dimensioni della mia arte finale. In questo particolare esempio, ho creato un'immagine 6x6 per l'arte pixel 1: 6 (ingrandimento del 600%). Quindi, con un pennello da un pixel, ho iniziato nell'angolo in basso a sinistra e ho applicato tre pixel di nero al 75% di opacità. Quando mi sono allontanato dall'angolo, ho ridotto l'opacità del mio pennello al 50% e infine al 25%. Ho quindi rispecchiato la stessa tecnica, ma con il bianco, iniziando nell'angolo in alto a sinistra.
Molti strumenti comuni, come Photoshop e GIMP, consentono di creare e definire modelli personalizzati. Questo è il modo più rapido e semplice per riempire l'intero canvas con una sovrapposizione di pixel smussati. Per l'esempio sopra, ho rimosso lo sfondo blu e salvato il blocco smussato come un motivo. Ora, ogni volta che voglio applicare questo overlay alla mia arte, tutto ciò che devo fare è usare lo strumento secchiello per eliminare il pattern sullo strato più in alto.
Dopo aver definito alcuni modelli di blocco smusso personalizzati, puoi iniziare a sperimentare con stili diversi. Sopra, abbiamo applicato quattro stili di smussatura diversi alla stessa immagine. Si noti come i sottili cambiamenti nella costruzione e l'opacità dei vari blocchi di smusso possono alterare notevolmente la forma e la vividezza degli sprite risultanti. Sperimenta con diverse dimensioni e stili per trovare il tipo di smusso che complimenta la tua pixel art.
Le varie modalità di fusione offerte dalla maggior parte degli strumenti di disegno possono anche produrre effetti drasticamente differenti.
Nell'immagine sopra, lo stesso stile di smusso viene applicato utilizzando tre diverse modalità di fusione. La modalità Sovrapposizione standard crea un'immagine molto sorprendente e vibrante, con un contrasto intenso tra le aree chiare e scure della smussatura. La modalità Color Burn silenzia completamente le aree chiare dello smusso, creando uno smusso quasi triangolare e disgiunto. La modalità Luce soffusa è perfetta per i colori tenui, creando un bordo smussato meno pronunciato.
Piuttosto che inserire risorse nel tuo gioco con questo effetto inserito, puoi invece generare l'overlay di pixel smussato in fase di runtime. Ciò si tradurrà in un gioco che è molto più scalabile e adattabile se decidessi di cambiare le risorse, il movimento della griglia o le dimensioni della finestra di gioco in un secondo momento.
Mentre non posso dirti esattamente come implementare questo effetto nel tuo progetto specifico, posso sicuramente indicarti la giusta direzione. La maggior parte degli IDE di giochi hanno le funzionalità generali richieste per questo effetto, quindi non dovresti avere alcun problema nell'integrare una sovrapposizione di pixel smussati nel tuo progetto. Gli utenti di Flash e ActionScript, ad esempio, possono utilizzare ColorMatrixFilter per applicare le modalità di fusione alla sovrapposizione di smussatura e gli utenti di Game Maker possono utilizzare gli strumenti di primo piano integrati o persino creare un oggetto di sovrapposizione di smussatura dedicato che poggia su un livello specifico sopra l'arte risorse.
In primo luogo, è necessario decidere come gestire l'allargamento del patrimonio iniziale. Raccomando l'uso di pixel art 1: 1 e ridimensionamento di tutto prima di disegnarlo sullo schermo, quindi applicare lo smusso sovrapposto come effetto di post-elaborazione.
In secondo luogo, dovresti pensare a creare un menu di debug che ti permetta di testare varie dimensioni dello smusso e metodi di fusione. Non sai mai come reagiranno diversi colori e movimenti a certe sovrapposizioni di smussi, quindi vai sul sicuro e sperimenta quante più combinazioni possibili. Potresti scoprire che è necessario modificare l'opacità o la modalità di fusione durante alcune scene del gioco, quindi essere in grado di testarle in tempo reale ti tornerà sicuramente utile.
Dovresti anche pianificare come gestirai l'HUD o la GUI per il tuo gioco. Vuoi che questi elementi si trovino sopra o sotto la sovrapposizione di pixel smussati?
L'effetto pixel smussato applicato ad alcuni giochi familiari della vecchia scuola.Questo effetto è un modo meraviglioso per ravvivare la tua arte di gioco senza richiedere complessi algoritmi, shader o artisti follemente talentuosi. Ti sei precipitato per un po 'di tempo in un inceppamento di giochi? Questo è un modo semplice e veloce per aggiungere un tocco di lucentezza extra al tuo lavoro.
L'aspetto più importante di questo effetto, tuttavia, è che ti incoraggia a sporcarti le mani ea sperimentare, il che ti porterà senza dubbio a una serie di altre scoperte lungo la strada.
Accentsconagua