Share
Alt gammelt er nytt igjen, og retro spill er mer populære enn noensinne. Støttet av nostalgi og overflod av casual og arcade-stil spill på iOS og Android-enheter, gjør old school-spill et comeback. I denne opplæringen vil jeg gi deg noen tips om å skape et vellykket retro-tema spill.
Hva mener vi når vi snakker om "retro" spill? Det er ingen konkret definisjon, men jeg tenker vanligvis på spill laget før 1990. Dette inkluderer spill fra konsoller som GameBoy, NES, Atari 2600 og Commodore 64, samt klassiske arkadespill som Pac Man, Skolopender, og Space Invaders.
Alle disse eksemplene bruker blokkert, pixelert, bitmap (eller "raster") grafikk. Dette er typen spill som trolig kommer til å tenke for de fleste når de tenker på retrospill.
Men de tidligste videospillene brukte faktisk vektorgrafikk. Spill som Battlezone, Asteroids og Tempest ble gjengitt med lyse glødende linjer i stedet for blokkerte piksler.
En annen type spill vi gamle folk pleide å spille var enkle håndholdte spill som brukte en monokrom LCD-skjerm og ekstremt enkle spillmekanikk.
I denne opplæringen skal vi snakke om de mer populære raster-grafikkspillene, men jeg nevner disse andre typer spill fordi de ikke ofte er emulert, og jeg tror det er mye mulighet for spilldesignere til å gjøre noe veldig kul med de stilene.
For å skape et overbevisende retrolook, vil du ønske å jobbe med et begrenset sett med farger.
Gamle skolen spillkonsoller var bare i stand til å vise et begrenset antall farger. Avhengig av systemet vil grafikken bli vist i svart-hvitt, gråtoner eller 8- eller 16-biters farge. Du kan se eksempler på de nøyaktige fargepalettene fra bestemte systemer på Wikipedia, men det er ikke viktig å velge historisk nøyaktige farger så lenge du opprettholder en konsekvent stil i spillet ditt.
Vi møter ikke de samme maskinvarebegrensningene vi gjorde tidligere, men å holde paletten begrenset til noen nøye utvalgte farger, vil ikke bare understreke retroestetikken, det vil også bidra til å definere identiteten til spillet ditt. Se på disse to eksemplene på fargepaletter fra Super Mario Bros.:
Fargene er så forskjellige, du kan nesten gjenkjenne spillet bare fra fargeprøver.
David Sommers har en fin samling av klassiske spillpaletter på ColourLovers.com.
De nøyaktige fargene du velger vil avhenge av temaet og stemningen i spillet ditt, men hvis du tar deg tid til å velge et godt sett med farger, vil spillet føles som ikonisk som klassikerne. Ta en titt på disse moderne eksemplene:
Hvis du har problemer med å velge farger som fungerer godt sammen, sjekk ut denne fantastiske opplæringen av Tyler Seitz, plukke en fargepalett for spillets kunstverk.
Retro raster spill er lettest gjenkjent av deres store klumpete piksler, fra en tid da skjermoppløsninger var mye lavere. I dagens verden med HD-skjermer og Retina-skjermer, er de fysiske pikslene på enhetene våre knapt synlige - ikke så langt fremtredende at de får det retroblokkete utseendet.
For å ta hensyn til dette, må vi bruke flere fysiske piksler til å vise hvert synlig bildepunkt i vår spillgrafikk.
Du kan bestemme hvilket nivå av skalering som passer for spillet ditt, avhengig av hvor blokkert du vil at spillet skal se ut. Vanligvis skalering opptil to eller tre ganger normal størrelse gir en god effekt. Husk at jo større du går, desto mindre vil du kunne passe på skjermen.
Jeg anbefaler at du alltid lar spillmotoren gjøre pikselskalering for deg. Dette betyr at alle dine eiendeler og tekst er trukket til 100% (liten), og spillet skaller opp hele leketøyet for å komme til den endelige størrelsen. Du kan faktisk tegne eiendeler med større piksler, men dette vil øke filstørrelser og belastningstider, og kan også ha en negativ innvirkning på spillytelsen.
Hvis du prøver å skalere dine eiendeler manuelt, kan det også føre til uoverensstemmelser i pikselskalaen din. I eksemplet ovenfor legger du merke til hvordan pikslene i spilltittelen er enorm sammenlignet med de små pikslene i "Play Now" -knappen. Også vår spilltegn er blokkere enn sin perle eller hulgulvet. Noen av disse er subtile forskjeller, men de legger alle sammen for å få spillet til å se litt ut av.
Neven Mrgan (medskaperen av Hendelsen) snakker litt mer om dette på bloggen hans.
Å lage flotte pikselkunst kan være svært utfordrende. Det trengs mye øvelse, og er et emne for langt til å dekke fullt ut i denne opplæringen. Her er noen få koblinger for å komme i gang skjønt:
Mange bruker vanlige grafikkprogrammer som Photoshop, Gimp eller MS Paint til å tegne pixelkunst.
Jeg fant det frustrerende å bruke Photoshop når jeg begynte å prøve å animere tegn og legge ut sømløse fliser. Så laget jeg et verktøy som heter Pickle for å fylle ut noen av funksjonaliteten som manglet fra tradisjonelle redaktører, for eksempel live animasjon previews, seamless fliser previews og terreng fliser previews.
Pickle har et begrenset sett og oppfyller ikke alles behov. Heldigvis finnes det andre lignende programmer som Pyxel Edit, ASEPRITE og GraphicsGale.
Det er mye av god piksel kunst opplæring online. Her er noen som jeg har funnet nyttig i det siste:
Å designe overbevisende tegn med lo-res grafikk kan være veldig vanskelig. Hvordan kan du skildre nok detalj for å skape en unik karakter med så få piksler og farger som du kan jobbe med?
Som med tegning av pikselkunst generelt, er tegnet design noe som tar tålmodighet og praksis. Vi kan lære noen nyttige strategier fra klassiske spilltegn.
Ta en titt på vår venn Mario her. Legg merke til hvor få piksler brukes til å skildre en gjenkjennelig menneskelig karakter. Tre farger, ingen konturer, ingen skygge. Hvordan kan du tegne et ansikt med disse begrensningene? Se på hvordan pikslene som tegner Mario's overskje, også tjener til å definere sin nese og munn også.
Det vil også være vanskelig å tegne Mario's armer på dette detaljnivået uten at de smelter sammen i kroppen, slik at kroppen ser ut som en liten blomstring. Mario's skapere løst dette problemet ved å kle ham overalls. Se hvordan linjene i klærne adskiller armene sine fra resten av kroppen sin? Geni!
I dette tilfellet legger du til bestemte fysiske attributter for tegnet (ansiktshår og overalls), og gjør det lettere å tegne ham innenfor de grafiske begrensningene. Begrensningene selv informerer tegnet av tegnet.
En annen teknikk for å håndtere grafiske begrensninger er å gå abstrakt. Hvorfor bry deg om å prøve å tegne en gjenkjennelig menneskelig karakter, hvis du ikke trenger? Se på Pac-Man der. Han er ikke gjenkjennelig hva som helst. Han er bare en gul blomst med en munn.
Pac-Man er en minneverdig karakter til tross for hans mangel på fysiske egenskaper. Han får sin personlighet fra gameplayet - måten han beveger seg gjennom labyrinten, hans lydeffekter og måten han samhandler med sine fiender på.
Hvem sier at du må ha menneskelige tegn i spillet ditt? Hvorfor ikke lage neste Pac-Man, Q * bert eller Qix?
Når du lager grafikk for tittelskjermbildet, menyene i spillet og andre tekstelementer som poengsum, må du være i overensstemmelse med stilen til grafiske eiendeler. Dette betyr at du beholder samme fargepalett, pikselstørrelse og kunststil.
De fleste skriftene er utformet for å være anti-aliased (glatt) når de vises på skjermen. Dette betyr at hvis vi prøver å blåse dem opp for å matche vår pikselstørrelse, ser vi mye støyende piksler rundt kantene på bokstavene. Det passer heller ikke med den estetiske vi skal til. Det er alt mykt og uklart i stedet for skarp og blokkert.
Så vi vil vise skrifter uten anti-aliasing. Men bare å vise en vanlig skrifttype uten utjevning vil vanligvis se forferdelig ut. De er bare ikke designet for å fungere på den måten. Se hvor funky og vanskelig å lese det er på 100%? Når vi blåser den opp kan vi se mange svarte piksler og ujevn slag.
Svaret er å alltid bruke skrifter som er utformet for å bli vist uten anti-aliasing. De leser fint og rent i små størrelser, og har det flotte, klare retro-utseendet når vi blåser dem opp store.
Noen av mine favorittpixelfonter er laget av Matthew Bardram fra Atomic Media.
En advarsel om å bruke pikselfonter er at hver skrift er utformet for å fungere i bare en viss størrelse. Pass på at du bare bruker skriften på denne bestemte størrelsen eller et flertall av den størrelsen. Så hvis du bruker en skrifttype utformet for å fungere på 10pt, vil den også se fint ut på 20 eller 30pt, men ikke i størrelser mellom.
Tenk på hvilken type spillmekanikk som skal fungere best med din kunststil. Å velge en forenklet, klassisk mekaniker vil hjelpe spillerne til å komme inn i retrostemningen. Noen klassiske spillmekanikere er space shooters (Asteroids, Space Invaders), plattformspillere (Super Mario Bros., Donkey Kong), og eventyrspill (Eventyr, Zelda).
Husk at din begrensede kunststil gjør det vanskeligere for deg å formidle komplisert informasjon til spilleren, så en enkel mekaniker kan være en stor fordel.
Hvor enkelt kan du gjøre spillet ditt? Kan du designe et spill som bare bruker en knapp for kontrollene?
Én-knappspill fungerer bra på berøringsbaserte enheter, siden spilleren bare kan moske på skjermen uten å måtte bekymre seg for å treffe ikke-taktile knapper.
Mange uendelige runner-stil spill bruker kontrollknappen med en knapp (Canabalt, Jetpack Joyride, Små vinger). Kan du komme opp med en annen spillstil som fungerer like bra med bare en enkelt knapp for kontroll?
Hvis du noen gang har spilt en av dine favoritt gammeldags arkadespill i en emulator på datamaskinen, har du kanskje lagt merke til at det ikke føles helt det samme. Alt er litt for skarpt og rent på datamaskinmonitoren din i forhold til det uklare, flimrende, forvrengte utseendet til en arkademonitor eller din gamle CRT-TV fra barndommen.
Noen tror kanskje det er en god ting at vi ikke trenger å gjøre opp med disse forvrengningsartefaktene i en svunnen tid, men det kan være gøy å legge litt fuzziness tilbake i et retro-inspirert spill.
Her er noen eksempler på måter du kan etterligne en gammel CRT-skjerm på:
Skannelinjer: Du kan bruke en statisk grafikk av tynne, snevre mellomrom, horisontale hvite linjer for å simulere CRT-skanningslinjer. Bare lag dem på toppen av spillet ditt. Juster opacity og blend modus for å oppnå stil og intensitet du vil ha.
Bråk: Gaussisk støy kan legge til en fin tekstur til spillet ditt. Ideelt sett ville støyen bli animert, men et statisk bilde vil fungere godt nok hvis det stadig er animerende støy, påvirker spillets ytelse.
Uklarhet: EN veldig liten uskarphet legger til litt mykhet i bildet. Ikke gå for langt med denne; du vil fortsatt kunne se pikslene.
Color Fringing: En av mine favoritt gamle skoleeffekter er å legge til en liten RGB-farge fringing. Du kan gjøre dette ved å skille spillet lerret i separate kanaler for rød, grønn og blå og skifte dem litt ut av justering. Denne effekten ser veldig bra ut når den er animert, men det kan være ganske prosessorintensiv, så du må kanskje begrense bruken. Jeg har en annen opplæring hvor jeg viser hvordan å implementere effekten med AS3: Lag en Retro CRT-forvrengningseffekt ved hjelp av RGB-skifting.
Kombinasjon: Kombiner flere effekter for maksimal moro!
Du kan også legge til en animert rullefelt for å simulere en feilfunksjonell CRT.
Flash-spill Cronus X implementerer mange av disse effektene pent under menyoverganger. Dette er en god løsning hvis du er bekymret for effektene som påvirker spillytelsen negativt.
Ikke bli forvoldt av begrensningene i gammeldags spill. Det er viktigere for spillet å være morsomt å ha en retro "følelse" enn å være historisk nøyaktig.
Og prøv å ikke bare gjenskape en klassisk space-shooter eller platformer. Legg til litt innovasjon for å gjøre spillet ditt unikt. Bruk retro estetikk som utgangspunkt, men legg til litt av din egen unike stil og elementer for å skape noe nytt. Det kan til og med være morsomt å blande i noen moderne musikk, lyder eller elementer (som partikkeleffekter) for å skape en frisk ta på klassisk arkadespill.
Noen gode eksempler på dette er Geometry Wars som blander blendende moderne effekter inn i et vektor-stil arkadespill, Space Invaders Extreme der et klassisk arkadespill er lagdelt på toppen av fancy bakgrunnsgrafikk og satt til moderne elektronisk musikk, eller Fez, en klassisk 2D pixel art platformer som lar deg forandre verden i 3D-rom.
Det er alt for nå. Lykke til der ute! Slett en lenke i kommentarene og vis meg hva du gjør. Jeg vil gjerne se din retro-estetikk.
Accentsconagua