Share
Tutto vecchio è di nuovo nuovo, e i giochi retrò sono più popolari che mai. Sostenuti dalla nostalgia e dall'abbondanza di giochi in stile casual e arcade su dispositivi iOS e Android, i giochi della vecchia scuola stanno tornando in auge. In questo tutorial ti darò alcuni suggerimenti su come creare un gioco a tema retro di successo.
Cosa intendiamo quando parliamo di giochi "retro"? Non c'è una definizione concreta, ma di solito penso ai giochi realizzati prima del 1990. Questo include giochi da console come GameBoy, NES, Atari 2600 e Commodore 64, oltre a giochi arcade classici come Pac Man, Centopiedi, e Invasori spaziali.
Tutti questi esempi utilizzano grafica blocky, pixelata, bitmap (o "raster"). Questi sono il tipo di giochi che probabilmente vengono in mente per la maggior parte delle persone quando pensano ai giochi retrò.
Ma i primi videogiochi utilizzavano effettivamente la grafica vettoriale. Giochi come Battlezone, Asteroids e Tempesta sono stati renderizzati con linee luminose brillanti anziché pixel a blocchi.
Un altro tipo di gioco che i vecchi erano soliti giocare erano semplici giochi portatili che utilizzavano un display LCD monocromatico e meccaniche di gioco estremamente semplici.
In questo tutorial, parleremo dei più popolari giochi di grafica raster, ma menziono questi altri tipi di giochi perché non sono spesso emulati, e penso che ci siano molte opportunità per i game designer di fare qualcosa di veramente interessante con quegli stili.
Per creare un look retrò convincente, ti consigliamo di lavorare con un set limitato di colori.
Le console di gioco della vecchia scuola erano in grado di visualizzare solo un numero limitato di colori. A seconda del sistema, la grafica verrebbe visualizzata in bianco e nero, in scala di grigi o a 8 o 16 bit. Puoi vedere esempi delle tavolozze dei colori esatte da specifici sistemi su Wikipedia, ma non è importante scegliere colori storicamente accurati purché tu mantenga uno stile coerente all'interno del tuo gioco.
Non affrontiamo le stesse limitazioni hardware che abbiamo fatto in passato, ma mantenere la tavolozza limitata ad alcuni colori scelti con cura non solo enfatizzerà l'estetica retrò, ma aiuterà anche a definire l'identità del tuo gioco. Guarda questi due esempi di tavolozze colori da Super Mario Bros.:
I colori sono così distinti, puoi quasi riconoscere il gioco solo dai campioni di colore.
David Sommers ha una bella collezione di tavolozze di gioco classiche su ColourLovers.com.
I colori esatti che scegli dipendono dal tema e dallo stato d'animo del tuo gioco, ma se ti prendi il tempo di scegliere un buon set di colori il tuo gioco si sentirà iconico come i classici. Dai un'occhiata a questi esempi moderni:
Se hai problemi a scegliere i colori che funzionano bene insieme, dai un'occhiata a questo fantastico tutorial di Tyler Seitz, Selezionando una tavolozza di colori per l'opera d'arte del tuo gioco.
I giochi raster retrò sono facilmente riconoscibili dai loro grandi pixel grossi, da quando le risoluzioni dello schermo erano molto più basse. Nel mondo odierno degli schermi HD e dei display Retina, i pixel fisici dei nostri dispositivi sono appena visibili, non abbastanza prominenti da ottenere l'aspetto retrò.
Per tener conto di ciò, dobbiamo utilizzare più pixel fisici per visualizzare ogni pixel visibile nella nostra grafica di gioco.
Puoi decidere quale livello di ridimensionamento è appropriato per il tuo gioco a seconda di quanto vuoi che il gioco guardi. Solitamente il ridimensionamento fino a due o tre volte la dimensione normale dà un buon effetto. Tieni presente che più vai avanti, meno sarai in grado di adattarlo allo schermo.
Ti consiglio di lasciare sempre che il tuo motore di gioco esegua il ridimensionamento dei pixel per te. Ciò significa che tutte le risorse e il testo sono disegnati al 100% (piccolo) e il gioco semplicemente ridimensiona l'intera area di gioco per arrivare alla dimensione finale. È possibile disegnare asset con pixel più grandi, ma ciò aumenterà le dimensioni dei file e i tempi di caricamento e può anche avere un impatto negativo sulle prestazioni del gioco.
Provare a ridimensionare manualmente le risorse può anche portare a incongruenze nella scala dei pixel. Nell'esempio sopra, nota come sono i pixel nel titolo del gioco enorme rispetto ai minuscoli pixel nel testo del pulsante "Gioca ora". Inoltre, il nostro personaggio di gioco è più ostico della sua gemma o del pavimento della caverna. Alcune di queste sono sottili differenze, ma tutte si sommano per rendere il gioco un po '"spento".
Neven Mrgan (co-creatore di L'incidente) parla un po 'di più sul suo blog.
Creare fantastici pixel art può essere estremamente difficile. Ci vuole molta pratica ed è un argomento troppo lungo da coprire completamente in questo tutorial. Ecco alcuni link per iniziare:
Molte persone usano programmi di grafica regolari come Photoshop, Gimp o anche MS Paint per disegnare pixel art.
Ho trovato frustrante l'utilizzo di Photoshop una volta che ho iniziato a provare ad animare i personaggi e ad aggiungere piastrelle senza soluzione di continuità. Così ho creato uno strumento chiamato Pickle per aiutare a riempire alcune delle funzionalità che mancavano agli editor tradizionali, come le anteprime delle animazioni live, le anteprime dei riquadri senza interruzioni e le anteprime dei riquadri del terreno.
Pickle ha un set di funzionalità limitate e non soddisfa le esigenze di tutti. Fortunatamente ci sono altre app simili come Pyxel Edit, ASEPRITE e GraphicsGale.
Ci sono Un sacco di buone esercitazioni di pixel art online. Ecco alcuni che ho trovato utili in passato:
Progettare personaggi convincenti con grafica lo-res può essere davvero difficile. Come puoi descrivere abbastanza dettagli per creare un personaggio unico con così pochi pixel e colori con cui lavorare?
Come nel disegnare l'arte dei pixel in generale, il character design è qualcosa che richiede pazienza e pratica. Possiamo imparare alcune strategie utili dai personaggi classici del gioco.
Dai un'occhiata al nostro amico Mario qui. Nota come pochi pixel vengono usati per rappresentare un personaggio umano riconoscibile. Tre colori, nessun contorno, nessuna sfumatura. Come puoi disegnare una faccia con questi limiti? Guarda come i pixel che disegnano i baffi di Mario servono anche a definire naso e bocca.
Sarebbe anche difficile disegnare le braccia di Mario a questo livello di dettaglio senza che si uniscano al suo corpo, facendo apparire il suo corpo come un piccolo blob. I creatori di Mario hanno risolto questo problema vestendogli la tuta. Vedi come le linee dei suoi vestiti separano chiaramente le sue braccia dal resto del suo corpo? Genio!
In questo caso, l'aggiunta di attributi fisici specifici al personaggio (peli del viso e tuta) rende effettivamente più facile disegnarlo entro i limiti grafici. Le limitazioni stesse informano il design del personaggio.
Un'altra tecnica per affrontare i limiti grafici è di andare astratto. Perché preoccuparsi di cercare di disegnare un personaggio umano riconoscibile, se non è necessario? Guarda Pac-Man lì. Lui non è riconoscibile nulla. È solo un blob giallo con una bocca.
Pac-Man è un personaggio memorabile nonostante la sua mancanza di attributi fisici. Ottiene la sua personalità dal gameplay - il modo in cui si muove attraverso il labirinto, i suoi effetti sonori e il modo in cui interagisce con i suoi nemici.
Chi dice che devi avere personaggi umani nel tuo gioco? Perché non creare il prossimo Pac-Man, Q * bert o Qix?
Quando crei elementi grafici per la schermata del titolo, i menu di gioco e altri elementi di testo come i punteggi devi essere coerente con lo stile delle tue risorse grafiche. Ciò significa mantenere la stessa tavolozza dei colori, la dimensione dei pixel e lo stile artistico.
La maggior parte dei caratteri è progettata per essere anti-alias (lisciata) quando viene visualizzata sullo schermo. Ciò significa che se proviamo a ingrandirli per adattarli alla nostra dimensione di pixel, vedremo molti pixel rumorosi attorno ai bordi delle lettere. Inoltre, non combacia con l'estetica che stiamo cercando. È tutto morbido e sfocato invece di nitido e blocky.
Quindi vogliamo mostrare i caratteri senza anti-aliasing. Ma la semplice visualizzazione di un font normale senza smoothing di solito sembra terribile. Semplicemente non sono progettati per funzionare in questo modo. Vedi quanto è divertente e difficile da leggere è al 100%? Quando lo facciamo saltare in aria possiamo vedere molti pixel vaganti e tratti irregolari.
La risposta è di utilizzare sempre i font progettati per essere visualizzati senza anti-aliasing. Loro leggono bello e pulito a piccole dimensioni, e hanno quell'aspetto grintoso e retrò quando li facciamo saltare in aria.
Alcuni dei miei font pixel preferiti sono realizzati da Matthew Bardram di Atomic Media.
Un avvertimento per usare i font pixel è che ogni font è progettato per funzionare solo con una certa dimensione. Assicurati di utilizzare il carattere solo con questa dimensione specifica o con un multiplo di quella dimensione. Quindi, se stai usando un font progettato per funzionare a 10pt, apparirà bene anche a 20 o 30pt, ma non a dimensioni intermedie.
Pensa a quale tipo di meccanica di gioco funzionerà meglio con il tuo stile artistico. La scelta di una meccanica classica semplificata aiuterà i tuoi giocatori a entrare nell'umore retrò. Alcune meccaniche di gioco classiche sono sparatutto spaziali (Asteroids, Invasori spaziali), platformers (Super Mario Bros., Donkey Kong) e giochi di avventura (Avventura, Zelda).
Tieni presente che il tuo stile artistico limitato renderà più difficile per te trasmettere informazioni complesse al lettore, quindi una semplice meccanica può essere un grande vantaggio.
Quanto puoi rendere semplice il tuo gioco? Puoi progettare un gioco che usa un solo pulsante per i controlli?
I giochi a un tasto funzionano alla grande sui dispositivi touch-based, dal momento che il giocatore può semplicemente schiacciare sullo schermo senza doversi preoccupare di colpire aree pulsanti non tattili.
Un sacco di infiniti giochi stile runner usano lo schema di controllo a un tasto (canabalt, Jetpack Joyride, Piccole ali). Puoi venire con uno stile di gioco diverso che funziona allo stesso modo con un solo pulsante per il controllo?
Se hai mai giocato a uno dei tuoi giochi arcade di vecchia scuola preferiti in un emulatore sul tuo computer, potresti aver notato che non sembra affatto lo stesso. Tutto è un po 'troppo nitido e pulito sul monitor del tuo computer rispetto allo sguardo sfocato, tremolante, distorto di un monitor arcade, o alla tua vecchia televisione CRT fin dall'infanzia.
Alcune persone probabilmente pensano che sia una buona cosa che non dobbiamo sopportare questi artefatti di distorsione di un'epoca passata, ma può essere divertente aggiungere un po 'di confusione in un gioco di ispirazione retrò.
Ecco alcuni esempi di modi in cui puoi emulare un vecchio schermo CRT:
Linee di scansione: È possibile utilizzare un grafico statico di linee bianche orizzontali sottili e con spaziatura ristretta per simulare le linee di scansione CRT. Basta sovrapporli al tuo gioco. Regola l'opacità e la modalità di fusione per ottenere lo stile e l'intensità desiderati.
Rumore: Il rumore gaussiano può aggiungere una bella trama al tuo gioco. Idealmente il rumore sarebbe animato, ma un'immagine statica funzionerà abbastanza bene se il rumore di animazione costante influisce sulle prestazioni del gioco.
Blur: UN molto leggero la sfocatura aggiunge una certa morbidezza all'immagine. Non andare troppo lontano con questo; vuoi comunque essere in grado di vedere i pixel.
Colore frange: Uno dei miei effetti preferiti della vecchia scuola è quello di aggiungere un po 'di frange colorate RGB. Puoi farlo separando la tela del gioco in canali separati per rosso, verde e blu e spostandoli leggermente fuori allineamento. Questo effetto sembra davvero buono quando è animato, ma può essere piuttosto impegnativo per il processore, quindi potrebbe essere necessario limitarne l'uso. Ho un altro tutorial in cui mostro come implementare l'effetto con AS3: Creare un effetto di distorsione CRT retrò usando la funzione di spostamento RGB.
Combinazione: Combina più effetti per il massimo divertimento!
È anche possibile aggiungere una barra di scorrimento animata per simulare un CRT malfunzionante.
Il gioco Flash Cronus X implementa molti di questi effetti piacevolmente durante le transizioni di menu. Questa è una buona soluzione se sei preoccupato per gli effetti che hanno un impatto negativo sulle prestazioni del gioco.
Non impantanarti per i limiti dei giochi della vecchia scuola. È più importante che il gioco sia divertente avere un "tocco" retrò che essere storicamente accurato.
E cerca di non ricreare semplicemente un classico sparatutto spaziale o un platform. Aggiungi un po 'di innovazione per rendere unico il tuo gioco. Usa l'estetica retrò come punto di partenza, ma aggiungi alcuni dei tuoi stili ed elementi unici per creare qualcosa di nuovo. Può anche essere divertente mescolare musica moderna, suoni o elementi (come effetti particellari) per creare una nuova versione del classico gioco arcade.
Alcuni grandi esempi di questo sono Geometry Wars che mescola effetti moderni abbaglianti in un gioco arcade in stile vettoriale, Space Invaders Extreme dove un classico gioco arcade è sovrapposto a una grafica di sfondo di fantasia e impostato su musica elettronica moderna, o Fez, un classico platform in 2D pixel art che ti consente di trasformare il mondo in uno spazio 3D.
È tutto per ora. Buona fortuna là fuori! Lascia un link nei commenti e mostrami cosa fai. Mi piacerebbe vedere la tua visione dell'estetica retrò.
Accentsconagua