Going Old School Efectuarea de jocuri cu o estetică retro

Totul vechi este din nou nou, iar jocurile retro sunt mai populare ca niciodată. Stimulate de nostalgie și abundența jocurilor casual și arcade pe dispozitivele iOS și Android, jocurile vechi ale școlii fac o revenire. În acest tutorial vă voi oferi câteva sfaturi despre crearea unui joc cu tematică retro.


Alegerea unui stil retro

Ce inseamna atunci cand vorbim de jocuri "retro"? Nu există o definiție concretă, dar de obicei mă gândesc la jocuri făcute înainte de 1990. Aici sunt incluse jocuri de la console precum GameBoy, NES, Atari 2600 și Commodore 64, precum și jocuri arcade clasice, cum ar fi Pac Man, Centiped, și Space Invaders.

Toate aceste exemple utilizează grafică blocată, pixelată, bitmap (sau "raster"). Acestea sunt tipurile de jocuri care probabil vin în minte pentru majoritatea oamenilor când se gândesc la jocurile retro.


Raster Graphics: Pac Man (Arcade), Frogger (Atari 2600), Super Mario Bros. (GameBoy)

Dar cele mai vechi jocuri video au folosit de fapt grafică vectorială. Jocuri ca Battlezone, Asteroizii și Furtună au fost redate cu linii strălucitoare în loc de pixeli blocați.


Vector Graphics: Battlezone (Arcade), Tempest (Arcade), MineStorm (Vectrex)

Un alt tip de joc pe care ne-au folosit-o jucatorii buni au fost jocurile handheld simple care folosesc un ecran LCD monocrom si mecanica extrem de simpla a jocului.


Grafica LCD: Donkey Kong Jr. (Joc și ceas), Fabrica de ciment a lui Mario (Game & Watch)

În acest tutorial vom vorbi despre cele mai populare jocuri grafice raster, dar menționez aceste alte tipuri de jocuri, deoarece acestea nu sunt adesea emulate și cred că există o mulțime de oportunități pentru designerii de jocuri pentru a face ceva cu adevărat cool cu acele stiluri.


Crearea unei palete de culori

Pentru a crea un aspect retro convingător, veți dori să lucrați cu un set limitat de culori.

Jocurile de console pentru jocuri de limbă școală au fost capabile să afișeze doar un număr limitat de culori. În funcție de sistem, grafica ar fi afișată în alb-negru, în tonuri de gri sau în culori de 8 sau 16 biți. Puteți vedea exemple de palete de culori exacte de la anumite sisteme de pe Wikipedia, dar nu este important să alegeți culori exacte istoric, atâta timp cât vă mențineți un stil consistent în cadrul jocului.

Nu ne confruntăm cu aceleași limitări hardware pe care le-am făcut în trecut, dar păstrarea paletei dvs. limitată la câteva culori alese cu grijă nu numai că va accentua estetica retro, ci va contribui și la definirea identității jocului dvs. Uită-te la aceste două exemple de palete de culori de la frații Super Mario.:

Culorile sunt atât de distincte, încât aproape că puteți recunoaște jocul numai din exemplele de culoare.
David Sommers are o colecție frumoasă de palete de jocuri clasice la ColourLovers.com.

Culorile exacte pe care le alegeți depind de tema și starea de spirit a jocului dvs., dar dacă vă acordați timp pentru a alege un set bun de culori, jocul dvs. se va simți la fel de iconic ca și clasicul. Aruncați o privire la aceste exemple moderne:


Canabalt de Adam Atomic, Ultima rachetă de Shaun Inman, Fez de Polytron

Dacă aveți probleme la alegerea culorilor care funcționează bine, verificați acest tutorial minunat de Tyler Seitz, selectând o paletă de culori pentru opera dvs. de joc.


Alegerea unei dimensiuni a pixelilor

Jocurile retro raster sunt cele mai ușor de recunoscut de către pixelii lor mari, din moment ce rezoluțiile ecranului au fost mult mai mici. În lumea de astăzi a ecranelor HD și a ecranelor Retina, pixelii fizici de pe dispozitivele noastre sunt abia vizibili - nu sunt destul de proeminenți pentru a obține un look retro blocky.


În acest exemplu, fiecare pixel din graficul nostru de caractere este afișat pe ecran cu patru pixeli fizici.

Pentru a ține cont de acest lucru, trebuie să folosim mai mulți pixeli fizici pentru a afișa fiecare pixel vizibil în grafica noastră de joc.

Puteți decide ce nivel de scalare este adecvat pentru jocul dvs., în funcție de modul în care doriți să vedeți jocul. De obicei, scalarea până la dimensiunea normală de două sau trei ori oferă un efect bun. Rețineți că, cu cât vă duceți mai mult, cu atât mai puțin veți putea să vă potriviți pe ecran.

Vă recomandăm să permiteți întotdeauna motorului dvs. de joc să vă scaldeze pixelii pentru dvs. Acest lucru înseamnă că toate activele și textul dvs. sunt extrase la 100% (mic), iar jocul scade pur și simplu întreaga pânză de joc pentru a ajunge la dimensiunea finală. Ați putea să atrageți active cu pixeli mai mari, dar acest lucru va crește dimensiunile fișierelor și timpul de încărcare și poate avea un impact negativ asupra performanței jocului.


Dimensiunile pixelilor inconsistente nu arată destul de bine.

Încercarea de a scala activele dvs. manual poate duce, de asemenea, la incoerențe în scala dvs. de pixeli. În exemplul de mai sus, observați cum sunt pixelii din titlul jocului imens în comparație cu pixelii mici din textul "Joacă acum". De asemenea, caracterul nostru de joc este mai blocant decât bijuteria sau podeaua peșteră. Unele dintre acestea sunt diferențe subtile, dar toate se adaugă pentru a face jocul să arate puțin "oprit".

Neven Mrgan (co-creator al Incidentul) vorbeste putin despre acest lucru pe blogul sau.


Desenare Pixel Art

Crearea unei arta pixel arata excelent poate fi extrem de provocatoare. Este nevoie de o mulțime de exerciții și este un subiect prea lung pentru a acoperi în totalitate acest tutorial. Iată câteva linkuri pentru a vă începe:

Instrumente de desenare și animație

Mulți oameni folosesc programele grafice obișnuite, cum ar fi Photoshop, Gimp sau chiar MS Paint, pentru a desena arta pixelilor.

Mi-a fost frustrant sa folosesc Photoshop odata ce am inceput sa incerc sa animez personajele si sa dau gresie perfecta. Așadar, am creat un instrument numit Pickle pentru a ajuta la completarea unor funcționalități care lipseau de la editorii tradiționali, cum ar fi previzualizări de animație live, previzualizări fără întreruperi de țiglă și previzualizări de tigla de teren.

Pickle are un set limitat de caracteristici și nu satisface nevoile tuturor. Din fericire există alte aplicații similare, cum ar fi Pyxel Edit, ASEPRITE și GraphicsGale.

Tutoriale

Sunt mult de bune tutoriale arta pixel art online. Iată câteva dintre ele pe care le-am găsit utile în trecut:

  • Tutorialul Pixel Art de la Forumul Pixel Joint
  • Tutorialul pixelilor lui Derek Yu
  • Photon Storm 16x16 Pixel Art Tutorial

Design de caractere

Proiectarea de caractere convingătoare cu grafica lo-res poate fi cu adevărat dificilă. Cum puteți descrie suficiente detalii pentru a crea un personaj unic cu atât de puține pixeli și culori pentru a lucra cu?

Ca și în ceea ce privește desenarea pixelilor în general, designul de caractere este ceva care are răbdare și practică. Putem învăța câteva strategii utile de la personaje clasice de joc.

Utilizați limitele în avantajul dvs.

Uitați-vă la prietenul nostru Mario aici. Observați cât de puțini pixeli sunt utilizați pentru a descrie un caracter uman recunoscut. Trei culori, fără contururi, fără umbrire. Cum poți să faci față cu aceste limitări? Uită-te la modul în care pixelii care atrag mustața lui Mario servesc și pentru a-și defini nasul și gura.

De asemenea, ar fi dificil să desenezi brațele lui Mario la acest nivel de detaliu fără să le fuzionezi în corpul lui, făcându-i corpul să arate ca un mic pic. Creatorii lui Mario au rezolvat această problemă prin îmbrăcarea sa cu salopeta. Vedeți cum liniile îmbrăcămintei sale separă clar brațele sale de restul corpului? Geniu!

În acest caz, adăugarea atributelor fizice specifice personajului (părul facial și salopete) face de fapt mai ușor să-l atrageți în limitele grafice. Limitările însele informează despre designul personajului.

Du-te la Rezumat

O altă tehnică pentru a face față limitărilor grafice este aceea de a se abate. De ce vă deranjează să încercați să desenați un caracter uman recunoscut, dacă nu este necesar? Uită-te la Pac-Man acolo. Nu e recunoscut orice. E doar o pată galbenă cu o gură.

Pac-Man este un personaj memorabil, în ciuda lipsei de atribute fizice. El își ia personalitatea de la modul de joc - modul în care se mișcă prin labirint, efectele sale sonore și modul în care interacționează cu dușmanii săi.

Cine spune că trebuie să ai personaje umane în jocul tău? De ce să nu faceți următorul Pac-Man, Q * bert sau Qix?


Meniu și text scor

Când creați grafică pentru ecranul dvs. de titlu, meniurile în joc și alte elemente de text, cum ar fi scorurile, trebuie să păstrați consecvența stilului activelor grafice. Aceasta înseamnă păstrarea aceleiași palete de culori, a dimensiunii pixelilor și a stilului de artă.


Gotham Bold de Hoefler și Frere-Jones (anti-aliasing)

Majoritatea fonturilor sunt proiectate pentru a fi anulate (netezite) când sunt afișate pe ecran. Aceasta înseamnă că dacă încercăm să le aruncăm în aer pentru a se potrivi dimensiunii pixelilor, vom vedea mulți pixeli zgomotoși în jurul marginilor literelor. De asemenea, nu se potrivește cu estetica pe care o căutăm. Totul este moale și neclară, în loc de crisp și blocky.


Gotham Bold fără anti-aliasing

Așadar, dorim să afișăm fonturile fără o alianță. Dar simpla afisare a unui font normal fara a netezi va arata, de obicei, teribil. Pur și simplu nu sunt proiectate să funcționeze așa. Vedeți cât de funky și greu de citit este 100%? Când o aruncăm în aer, vedem o mulțime de pixeli vagabonzi și accidente neregulate.


Bionika Black de Atomic Media

Răspunsul este de a utiliza întotdeauna fonturi care sunt proiectate să fie afișate fără a alianța. Ei citesc frumos și curat la dimensiuni mici, și au acel aspect grosolan retro când le aruncam în aer.

Unele dintre fonturile mele preferate de pixeli sunt realizate de Matthew Bardram de la Atomic Media.

Un avertisment cu privire la utilizarea fonturilor pixel este că fiecare font este proiectat să funcționeze doar la o anumită dimensiune. Asigurați-vă că utilizați numai fontul la această dimensiune specifică sau un multiplu de dimensiunea respectivă. Deci, dacă utilizați un font destinat să lucreze la 10pt, va arăta, de asemenea, bine la 20 sau 30pt, dar nu la dimensiuni între.


Mecanica jocurilor

Gândiți-vă la ce tip de mecanică a jocului va funcționa cel mai bine cu stilul dvs. de artă. Alegerea unui mecanic simplificat, clasic vă va ajuta pe jucătorii dvs. să intre în atmosfera retro. Unele mecanici clasice de joc sunt shooters spațiu (Asteroizii, Space Invaders), platformeri (frații Super Mario., Donkey Kong) și jocuri de aventură (Aventură, Zelda).

Rețineți că stilul tău artistic limitat va face mai greu pentru tine să transmiți informații complexe jucătorului, astfel încât un mecanic simplu poate fi un beneficiu mare.

Cât de simplu vă puteți face jocul? Puteți proiecta un joc care utilizează un singur buton pentru comenzi?
Jocurile cu un singur buton funcționează excelent pe dispozitive bazate pe atingere, deoarece player-ul poate purta doar pe ecran fără a fi nevoie să vă faceți griji în legătură cu apăsarea pe zonele cu butoane non-tactile.

O mulțime de jocuri de stil cu ruter fără sfârșit utilizează schema de control cu ​​un singur buton (Canabalt, Jetpack Joyride, Aripi mici). Puteți să veniți cu un stil diferit de joc care funcționează la fel de bine cu un singur buton pentru control?


Efecte de distorsiune

Dacă ați jucat vreodată unul dintre jocurile arcade vechi preferate într-un emulator de pe computer, ați fi observat că nu se simte la fel. Totul este puțin prea curat și curat pe monitorul computerului, comparativ cu aspectul neclar, pâlpâitor, distorsionat al unui monitor arcade sau vechiul televizor CRT din copilărie.

Unii oameni cred probabil că este un lucru bun că nu trebuie să ne confruntăm cu aceste artefacte de distorsionare ale unei ere cele mai vechi, dar poate fi distractiv să adăugăm puțină neclaritate într-un joc retro inspirat.

Iată câteva exemple de moduri în care puteți emula un ecran CRT vechi:

Linii de scanare: Aveți posibilitatea să utilizați o imagine statică a liniilor albe subțiri, distanțate pe orizontală, pentru a simula liniile de scanare CRT. Doar puneți-le pe partea de sus a jocului. Reglați opacitatea și modul de amestecare pentru a obține stilul și intensitatea dorită.

Zgomot: Gaussianul poate adăuga o textura frumoasă în jocul tău. În mod ideal, zgomotul ar fi animat, dar o imagine statică va funcționa suficient de bine dacă zgomotul animat constant afectează performanța jocului.

Estompa: A foarte ușoară estomparea adaugă o anumită blândețe imaginii. Nu mergeți prea departe cu acest lucru; totuși doriți să vedeți pixelii.

Culoare: Unul dintre efectele mele vechi de scoala este de a adauga un pic de culoare RGB fringing. Puteți face acest lucru separând pânza de joc în canale separate pentru roșu, verde și albastru și mutându-le ușor din aliniere. Acest efect arată foarte bine atunci când este animat, dar poate fi destul de intens pentru procesor, deci este posibil să trebuiască să-i limitați utilizarea. Am un alt tutorial în care am arătat cum să implementez efectul cu AS3: Crearea unui efect de distorsiune CRT retrograd folosind schimbarea RGB.

Combinaţie: Combinați mai multe efecte pentru distracție maximă!

De asemenea, puteți adăuga o bară de animație animată pentru a simula o CRT defectuoasă.

Jocul Flash Cronus X implementează foarte mult aceste efecte frumos în timpul tranzițiilor meniului. Aceasta este o soluție bună dacă vă faceți griji cu privire la efectele care afectează negativ performanța jocului.


Inovați

Nu vă îngreunează prea mult de constrângerile jocului școlar vechi. Este mult mai important ca jocul să fie distractiv să aibă un "simț" retro, decât să fie corect din punct de vedere istoric.

Și încercați să nu recreați doar un spațiu-shooter clasic sau platformer. Adăugați unele inovații pentru a vă face jocul unic. Utilizați retro estetica ca punct de plecare, dar adăugați unele din stilul dvs. unic și elemente pentru a crea ceva nou. Poate fi chiar distractiv să se amestece în unele muzică, sunete sau elemente moderne (cum ar fi efectele particulelor) pentru a crea o nouă experiență în jocurile arcade clasice.

Câteva exemple mărețe sunt: Geometrie războaie care combină efectele orbitoare moderne într-un joc arcade vectorial, Space Invaders Extreme în cazul în care un joc arcade clasic este stratificat pe partea de sus de grafică fundal fantezie și stabilite pentru a muzicii electronice moderne, sau Fes, un platformer clasic de pixeli 2D care vă permite să transformați lumea în spațiu 3D.


Felicitări plăcute!

Asta este tot pentru acum. Mult noroc acolo! Aruncați un link în comentarii și arătați-mi ce faceți. Mi-ar plăcea să vă văd să vă luați pe estetica retro.