Share
Allt gammalt är nytt igen, och retrospel är mer populära än någonsin. Inbäddat av nostalgi och överflöd av casual och arkadspel på IOS och Android-enheter, gör gamla skolspel en comeback. I denna handledning ger jag dig tips om hur du skapar ett framgångsrikt retro-tema spel.
Vad menar vi när vi pratar om "retro" -spel? Det finns ingen konkret definition, men jag tänker vanligtvis på spel som gjorts före 1990. Detta inkluderar spel från konsoler som GameBoy, NES, Atari 2600 och Commodore 64, samt klassiska arkadespel som Pac Man, Tusenfoting, och Space Invaders.
Alla dessa exempel använder blocky, pixelated, bitmap (eller raster) grafik. Det här är den typ av spel som förmodligen kommer att tänka på för de flesta människor när de tänker på retrospel.
Men de tidigaste videospelen använde faktiskt vektorgrafik. Spel som Battle, asteroider och Storm gjordes med starka glödande linjer istället för blockiga pixlar.
En annan typ av spel som vi gamla folk brukade spela var enkla handhållna spel som använde en monokrom LCD-skärm och extremt enkla spelmekanik.
I den här handledningen kommer vi att prata om de mer populära raster grafikspel, men jag nämner dessa andra typer av spel eftersom de inte ofta emuleras, och jag tror att det finns mycket möjlighet för speldesigners att göra något riktigt coolt med dessa stilar.
För att skapa en övertygande retro look, vill du arbeta med en begränsad uppsättning färger.
Gamla skolspelskonsoler kunde bara visa ett begränsat antal färger. Beroende på systemet visas grafik i svartvitt, gråskala eller 8- eller 16-bitars färg. Du kan se exempel på exakta färgpaletter från specifika system på Wikipedia, men det är inte viktigt att välja historiskt noggranna färger så länge du behåller en konsekvent stil i ditt spel.
Vi möter inte samma hårdvarubegränsningar som vi gjorde tidigare, men med att hålla paletten begränsad till några noggrant utvalda färger kommer inte bara att betona retroestetiken, det kommer också att bidra till att definiera identiteten på ditt spel. Titta på dessa två exempel på färgpaletter från Super Mario bröderna.:
Färgerna är så tydliga, du kan nästan känna igen spelet bara från färgproverna.
David Sommers har en fin samling av klassiska spelpaletter på ColourLovers.com.
De exakta färgerna du väljer beror på ditt spelets tema och humör, men om du tar dig tid att välja en bra uppsättning färger kommer ditt spel att känna sig som ikoniskt som klassikerna. Ta en titt på dessa moderna exempel:
Om du har problem med att välja färger som fungerar bra tillsammans, kolla in den här bra handledningen av Tyler Seitz, plocka en färgpalett för ditt spels konstverk.
Retro raster spel känns lättast av sina stora, klara pixlar, från en tid när skärmupplösningarna var mycket lägre. I dagens värld av HD-skärmar och Retina-skärmar är de fysiska bildpunkterna på våra enheter knappast synliga - inte så framträdande nog för att få det retro blockiga utseendet.
För att ta hänsyn till detta måste vi använda flera fysiska pixlar för att visa varje synlig pixel i vår spelgrafik.
Du kan bestämma vilken nivå av skalning som passar ditt spel beroende på hur blockerad du vill att ditt spel ska se ut. Vanligen skalar upp till två eller tre gånger normal storlek ger en bra effekt. Tänk på att ju större du går desto mindre kommer du att kunna passa på skärmen.
Jag rekommenderar att du alltid låter din spelmotor göra din pixelskalning för dig. Det betyder att alla dina tillgångar och text är ritade på 100% (liten) och spelet vetter bara upp hela spelduken för att komma till den slutliga storleken. Du kan faktiskt dra tillgångar med större pixlar, men det ökar filstorlekar och laddningstider, och kan också få negativ inverkan på spelprestanda.
Att försöka skala dina tillgångar manuellt kan också leda till inkonsekvenser i din pixelskala. I exemplet ovan märker du hur pixlarna i spelets titel är enorm jämfört med de små pixlarna i "Play Now" -knappen. Vårt speltecken är också blockerare än hans pärla eller grotta golvet. Några av dessa är subtila skillnader men de lägger allt för att få spelet att se lite ut.
Neven Mrgan (medskapare av Olyckan) pratar lite mer om detta på hans blogg.
Att skapa snygg pixelkonst kan vara extremt utmanande. Det tar mycket träning, och är ett ämne för långt för att helt täcka i den här handledningen. Här är några länkar som du kan komma igång om:
Många använder vanliga grafikprogram som Photoshop, Gimp eller till och med MS Paint för att rita pixelkonst.
Jag tyckte att det var frustrerande att använda Photoshop när jag började försöka animera tecken och lägga ut sömlösa plattor. Så jag skapade ett verktyg som kallades Pickle för att hjälpa till att fylla i en del av funktionaliteten som saknades från traditionella redaktörer, som förhandsvisningar av live animation, förhandsgranskningar av sömlösa brickor och förhandsgranskningar av terrängplattor.
Pickle har en begränsad funktion och uppfyller inte allas behov. Lyckligtvis finns det andra liknande appar som Pyxel Edit, ASEPRITE och GraphicsGale.
Det finns mycket av bra tutorials på pixel art online. Här är några som jag har hittat till hjälp tidigare:
Att utforma övertygande tecken med lo-res grafik kan vara svårt. Hur kan du avbilda noggrann detalj för att skapa en unik karaktär med så få pixlar och färger att arbeta med?
Som med att tegna pixelkonst i allmänhet är karaktärsdesign något som tar tålamod och övning. Vi kan lära oss några hjälpsamma strategier från klassiska speltecken.
Ta en titt på vår vän Mario här. Lägg märke till hur få pixlar används för att avbilda en igenkännbar mänsklig karaktär. Tre färger, inga konturer, ingen skuggning. Hur kan du rita ett ansikte med dessa begränsningar? Titta på hur de pixlar som ritar marios mustasch också tjänar till att definiera hans näsa och mun också.
Det skulle också vara svårt att dra Mario's armar på denna detaljnivå utan att få dem att smälta in i kroppen, vilket gör att hans kropp ser ut som en liten blob. Mario skapare löste detta problem genom att klä honom överallt. Se hur linjerna i hans kläder separerar armarna tydligt från resten av kroppen? Geni!
I detta fall gör det faktiskt lättare att dra honom inom de grafiska begränsningarna när man lägger till specifika fysiska attribut för karaktären (ansiktshår och overaller). Begränsningarna själva informerar karaktärens design.
En annan teknik för att hantera grafiska begränsningar är att gå abstrakt. Varför bry sig om att försöka rita en igenkännlig mänsklig karaktär, om du inte behöver? Titta på Pac-Man där. Han är inte en igenkännlig något. Han är bara en gul blob med en mun.
Pac-Man är en minnesvärd karaktär trots hans brist på fysiska egenskaper. Han får sin personlighet från gameplayet - hur han rör sig genom labyrinten, hans ljudeffekter och hur han interagerar med sina fiender.
Vem säger att du måste ha mänskliga tecken i ditt spel? Varför inte göra nästa Pac-Man, Q * Bert eller Qix?
När du skapar grafik för din titelskärm, menyerna i spelet och andra textelement som betyg måste du hålla dig överens med stilen på dina grafiska tillgångar. Det betyder att du håller samma färgpalett, pixelstorlek och konststil.
De flesta teckensnitt är utformade för att vara anti-aliased (smoothed) när de visas på skärmen. Det betyder att om vi försöker blåsa dem för att matcha vår pixelstorlek ser vi mycket bullriga pixlar runt kanterna på bokstäverna. Det matchar inte bara den estetiska vi ska gå för. Det är allt mjukt och suddigt istället för skarpa och blockiga.
Så vi vill visa teckensnitt utan anti-aliasing. Men bara att visa en normal typsnitt utan utjämning kommer vanligtvis att se hemskt ut. De är bara inte utformade för att fungera så. Se hur funky och svårt att läsa det är på 100%? När vi blåser upp kan vi se en hel del stränga pixlar och ojämna slag.
Svaret är att alltid använda teckensnitt som är utformade för att visas utan anti-aliasing. De läser snygga och rena i små storlekar och har det stora, klumpiga retroutseende när vi blåser upp dem stora.
Några av mina favoritpixelfonter är gjorda av Matthew Bardram från Atomic Media.
Ett försök att använda pixelfonter är att varje teckensnitt är utformat för att fungera i en viss storlek. Se till att du bara använder teckensnittet i den här specifika storleken eller en multipel av den storleken. Så om du använder ett teckensnitt som är utformat för att fungera på 10pt, ser det också bra ut på 20 eller 30pt, men inte i storlekar mellan.
Tänk på vilken typ av spelmekanik som fungerar bäst med din konststil. Att välja en förenklad, klassiker mekaniker hjälper dina spelare att komma in i retro humör. Vissa klassiska spelmekaniker är rymdskyttar (asteroider, Space Invaders), plattformar (Super Mario bröderna., Donkey Kong) och äventyrsspel (Äventyr, Zelda).
Tänk på att din begränsade konststil gör det svårare för dig att förmedla komplicerad information till spelaren, så en enkel mekaniker kan vara en stor fördel.
Hur enkelt kan du göra ditt spel? Kan du designa ett spel som bara använder en knapp för kontrollerna?
En-knapp spel fungerar bra på touch-baserade enheter, eftersom spelaren bara kan masha på skärmen utan att behöva oroa sig för att slå på icke-taktila knappområden.
Många oändliga runner-stil spel använder kontrollknappen med en knapp (Canabalt, Jetpack Joyride, Små vingar). Kan du komma med en annan spelstil som fungerar lika bra med bara en knapp för kontroll?
Om du någonsin har spelat en av dina favoritskola arkadspel i en emulator på din dator, kanske du har märkt att det inte känns som detsamma. Allt är lite för skarpt och rent på din datorskärm jämfört med det suddiga, blinkande, förvrängda utseendet på en arkadskärm eller din gamla CRT-tv från barndomen.
Vissa tror förmodligen att det är bra att vi inte behöver klara av dessa förvrängningsartiklar från en svunnen tid, men det kan vara roligt att lägga till lite fuzziness i ett retroinspirerat spel.
Här är några exempel på hur du kan efterlikna en gammal CRT-skärm:
Skanlinjer: Du kan använda en statisk grafik av tunna, smalt åtskilda, horisontella vita linjer för att simulera CRT-scanningslinjer. Bara laga dem ovanpå ditt spel. Justera opacitet och blandningsläge för att uppnå stil och intensitet du vill ha.
Ljud: Gaussiskt ljud kan lägga till en fin struktur till ditt spel. Helst skulle ljudet animeras, men en statisk bild fungerar bra nog om det ständigt animerade ljudet påverkar ditt spelets prestanda.
Fläck: en väldigt liten oskärpa ger lite fin mjukhet till bilden. Gå inte för långt med den här; du vill fortfarande kunna se pixlarna.
Color Fringing: En av mina favoritålders skolverkningar är att lägga till lite RGB-färgfransning. Du kan göra detta genom att separera spelens duk i separata kanaler för rött, grönt och blått och förskjutning dem lite av justering. Denna effekt ser väldigt bra ut när den är animerad, men den kan vara ganska processorintensiv, så du kan behöva begränsa användningen. Jag har en annan handledning där jag visar hur man implementerar effekten med AS3: Skapa en Retro CRT Distortion Effect med hjälp av RGB Shifting.
Kombination: Kombinera flera effekter för maximal kul!
Du kan också lägga till en animerad rullefält för att simulera en felaktig CRT.
Flash-spelet Cronus X implementerar mycket av dessa effekter snyggt under menyövergångar. Det här är en bra lösning om du är orolig för effekterna som påverkar spelprestandan negativt.
Får inte försvängas av de begränsningar som spelar i gamla skolor. Det är viktigare för spelet att vara kul, ha en retro "känsla" än att vara historiskt korrekt.
Och försök att inte bara återskapa en klassisk rymdskytt eller plattform. Lägg till lite innovation för att göra ditt spel unikt. Använd retro-estetiken som utgångspunkt, men lägg till lite av din egen unika stil och element för att skapa något nytt. Det kan till och med vara roligt att blanda i någon modern musik, ljud eller element (som partikeleffekter) för att skapa en ny serie på klassisk arkadspel.
Några bra exempel på detta är Geometry Wars som blandar bländande moderna effekter till ett vektorstil arkadespel, Space Invaders Extreme där ett klassiskt arkadespel är lagrat på toppen av snygg bakgrundsgrafik och inställd på modern elektronisk musik, eller Fez, en klassisk 2D pixel art platformer som låter dig förvandla världen i 3D-utrymme.
Det var allt tills vidare. Lycka till där ute! Släpp en länk i kommentarerna och visa mig vad du gör. Jag skulle gärna se din ta på den retro estetiska.
Accentsconagua