Share
Alles oud is weer nieuw en retro-games zijn populairder dan ooit. Verlamd door nostalgie en de overvloed aan casual en arcade-achtige games op iOS- en Android-apparaten, komen old school-games terug. In deze tutorial zal ik je wat tips geven over het maken van een succesvol spel met een retro-thema.
Wat bedoelen we als we het hebben over 'retro' spellen? Er is geen concrete definitie, maar ik denk meestal aan games die gemaakt zijn vóór 1990. Dit omvat spellen van consoles zoals de GameBoy, NES, Atari 2600 en Commodore 64, evenals klassieke arcade-spellen zoals Pac Man, Duizendpoot, en Space Invaders.
Al deze voorbeelden gebruiken blocky, pixelated, bitmap (of 'raster') afbeeldingen. Dit zijn de soort games die waarschijnlijk bij de meeste mensen opkomen als ze denken aan retro games.
Maar de eerste videogames maakten in werkelijkheid gebruik van vectorafbeeldingen. Games zoals Battlezone, Asteroids en Storm werden weergegeven met fel gloeiende lijnen in plaats van blokvormige pixels.
Een ander type spel dat wij oude mensen speelden waren eenvoudige handheld-games die een monochroom LCD-scherm gebruikten en extreem eenvoudige spelmechanica..
In deze tutorial gaan we het hebben over de meer populaire raster grafische spellen, maar ik noem deze andere soorten games omdat ze niet vaak worden nagebootst en ik denk dat er veel kans is voor gameontwerpers om iets echt cools te doen met die stijlen.
Om een overtuigende retro-look te creëren, wilt u met een beperkt aantal kleuren werken.
Old-school gameconsoles konden slechts een beperkt aantal kleuren weergeven. Afhankelijk van het systeem worden grafische afbeeldingen weergegeven in zwart-wit, grijstinten of 8- of 16-bits kleuren. U kunt voorbeelden van de exacte kleurenpaletten zien van specifieke systemen op Wikipedia, maar het is niet belangrijk om historisch correcte kleuren te kiezen, zolang u maar een consistente stijl in uw spel behoudt.
We ondervinden niet dezelfde hardwarebeperkingen als in het verleden, maar door je palet beperkt te houden tot enkele zorgvuldig gekozen kleuren, benadruk je niet alleen de retro-esthetiek, maar wordt ook de identiteit van je game bepaald. Bekijk deze twee voorbeelden van kleurenpaletten uit Super Mario Bros.:
De kleuren zijn zo verschillend dat je het spel bijna alleen uit de kleurstalen kunt herkennen.
David Sommers heeft een mooie verzameling klassieke spelpaletten bij ColourLovers.com.
De exacte kleuren die je kiest, zijn afhankelijk van het thema en de sfeer van je spel, maar als je de tijd neemt om een goede set kleuren te kiezen, zal je spel net zo iconisch aanvoelen als de klassiekers. Bekijk deze moderne voorbeelden:
Als je problemen hebt met het kiezen van kleuren die goed bij elkaar passen, bekijk dan deze geweldige tutorial van Tyler Seitz, Een kleurenpalet uitkiezen voor het artwork van je spel.
Retro rasterspellen worden het gemakkelijkst herkend door hun grote dikke pixels, uit een tijd dat de schermresoluties veel lager waren. In de hedendaagse wereld van HD-schermen en Retina-schermen zijn de fysieke pixels op onze apparaten nauwelijks zichtbaar - lang niet prominent genoeg om het retro-blocky uiterlijk te krijgen.
Om dit te verantwoorden, moeten we meerdere fysieke pixels gebruiken om elke zichtbare pixel in onze spelafbeeldingen weer te geven.
Je kunt bepalen welk schaalniveau geschikt is voor je spel, afhankelijk van hoe blocky je wilt dat je spel eruit ziet. Meestal geeft een schaalvergroting tot twee of drie keer de normale grootte een goed effect. Houd er rekening mee dat hoe groter je bent, hoe minder je op het scherm kunt passen.
Ik raad je aan om je game-engine altijd je pixelschaling voor je te laten doen. Dit betekent dat al uw bedrijfsmiddelen en tekst voor 100% (klein) worden getekend en dat het spel eenvoudigweg het hele spelcanvas opschaalt om de uiteindelijke grootte te bereiken. Je zou eigenlijk assets kunnen tekenen met grotere pixels, maar dit zal de bestandsgrootte en laadtijden doen toenemen en kan ook een negatieve invloed hebben op de spelprestaties.
Als u uw items handmatig wilt schalen, kan dit ook leiden tot inconsistenties in uw pixelschaal. In het bovenstaande voorbeeld ziet u hoe de pixels in de gametitel zijn reusachtig vergeleken met de kleine pixels in de tekstknop 'Nu afspelen'. Ons gamekarakter is ook blockier dan zijn juweel of de grotvloer. Sommige hiervan zijn subtiele verschillen, maar ze tellen allemaal op om de game een beetje 'uit' te laten lijken.
Neven Mrgan (mede-bedenker van Het incident) praat hier wat meer over op zijn blog.
Het maken van geweldig uitziende pixelart kan een enorme uitdaging zijn. Het kost veel oefening en is een onderwerp dat te lang is om volledig in deze tutorial te behandelen. Hier zijn enkele links om je op weg te helpen:
Veel mensen gebruiken reguliere grafische programma's zoals Photoshop, Gimp of zelfs MS Paint om pixelart te tekenen.
Ik vond het frustrerend om Photoshop te gebruiken zodra ik personages begon te animeren en naadloze tegels lay-out. Daarom heb ik een tool met de naam Pickle gemaakt om een deel van de functionaliteit te vullen die ontbrak in traditionele editors, zoals live-animatievoorbeelden, naadloze tegelvoorbeelden en terreintegelweergaven.
Pickle heeft een beperkte functieset en voldoet niet aan ieders behoeften. Gelukkig zijn er andere vergelijkbare apps zoals Pyxel Edit, ASEPRITE en GraphicsGale.
Er zijn veel van goede zelfstudies over pixelillustraties online. Hier zijn een paar die ik in het verleden nuttig vond:
Het ontwerpen van overtuigende personages met lo-res graphics kan heel moeilijk zijn. Hoe kun je genoeg detail weergeven om een uniek personage te maken met zo weinig pixels en kleuren om mee te werken?
Net als bij het tekenen van pixelart in het algemeen, is het ontwerpen van tekens iets dat geduld en oefening vergt. We kunnen een paar nuttige strategieën leren van klassieke gamekarakters.
Bekijk hier onze vriend Mario. Merk op hoe weinig pixels worden gebruikt om een herkenbaar menselijk karakter weer te geven. Drie kleuren, geen contouren, geen schaduw. Hoe kun je een gezicht trekken met deze beperkingen? Kijk hoe de pixels die de snor van Mario tekenen ook dienen om zijn neus en mond te definiëren.
Het zou ook moeilijk zijn om Mario's armen op dit niveau van detail te trekken zonder dat ze in zijn lichaam samenkomen, waardoor zijn lichaam eruit ziet als een kleine klodder. De makers van Mario hebben dit probleem opgelost door hem een overall aan te kleden. Zie je hoe de lijnen van zijn kleding duidelijk zijn armen van de rest van zijn lichaam scheiden? Genie!
In dit geval maakt het toevoegen van specifieke fysieke kenmerken aan het personage (gezichtshaar en overalls) het eigenlijk gemakkelijker om hem binnen de grafische beperkingen te trekken. De beperkingen zelf geven informatie over het ontwerp van het personage.
Een andere techniek om met grafische beperkingen om te gaan, is om abstract te worden. Waarom zou je proberen om een herkenbaar menselijk karakter te trekken, als dat niet zo is? Kijk daar Pac-Man. Hij is niet herkenbaar iets. Hij is gewoon een gele klodder met een mond.
Pac-Man is een memorabel personage, ondanks zijn gebrek aan fysieke eigenschappen. Hij haalt zijn persoonlijkheid uit de gameplay - de manier waarop hij zich door het doolhof beweegt, zijn geluidseffecten en de manier waarop hij omgaat met zijn vijanden.
Wie zegt dat je personages in je spel moet hebben? Waarom niet de volgende Pac-Man, Q * bert of Qix maken?
Bij het maken van afbeeldingen voor uw titelscherm, in-game menu's en andere tekstelementen zoals scores moet u consistent blijven met de stijl van uw grafische elementen. Dit betekent hetzelfde kleurenpalet, pixelgrootte en kunststijl behouden.
De meeste lettertypen zijn ontworpen om anti-aliased (vloeiend gemaakt) te zijn wanneer ze op het scherm worden weergegeven. Dit betekent dat als we proberen ze op te blazen zodat deze overeenkomt met onze pixelgrootte, we veel ruispixels rondom de randen van de letters zullen zien. Het komt ook niet overeen met de esthetiek waar we voor gaan. Het is allemaal zacht en wazig in plaats van helder en blokkerig.
Dus we willen de lettertypen weergeven zonder anti-aliasing. Maar gewoon een normaal lettertype weergeven zonder vloeiend maken, ziet er meestal vreselijk uit. Ze zijn gewoon niet ontworpen om op die manier te werken. Zie je hoe funky en moeilijk te lezen het voor 100% is? Wanneer we het opblazen, zien we veel losse pixels en ongelijke streken.
Het antwoord is om altijd lettertypen te gebruiken die zijn ontworpen om zonder anti-aliasing te worden weergegeven. Ze lezen mooi en schoon in kleine maten en hebben die geweldige stevige retro-look als we ze groot opblazen.
Sommige van mijn favoriete pixellettertypen zijn gemaakt door Matthew Bardram van Atomic Media.
Een waarschuwing voor het gebruik van pixeldocumenten is dat elk lettertype is ontworpen om op een bepaald formaat te werken. Zorg ervoor dat u alleen het lettertype op deze specifieke grootte of een veelvoud van dat formaat gebruikt. Dus als u een lettertype gebruikt dat is ontworpen om te werken met 10pt, ziet het er ook goed uit met 20 of 30pt, maar niet met de grootte ertussenin.
Bedenk eens welk type game-mechanica het beste bij jouw stijl van werken past. Het kiezen van een vereenvoudigde, klassieke monteur helpt je spelers in de retro-sfeer te komen. Sommige klassieke game mechanics zijn space shooters (Asteroids, Space Invaders), platformgames (Super Mario Bros., Donkey Kong) en adventure-spellen (Avontuur, Zelda).
Houd in gedachten dat je beperkte kunststijl het voor je moeilijker zal maken om ingewikkelde informatie over te brengen aan de speler, dus een eenvoudige monteur kan een groot voordeel zijn.
Hoe eenvoudig kun je je spel maken? Kun je een game ontwerpen die maar één knop gebruikt voor de besturing?
Spellen met één knop werken geweldig op apparaten met aanraakbediening, omdat de speler gewoon op het scherm kan prikken zonder zich zorgen te hoeven maken over niet-tactiele knopgebieden.
Veel eindeloze runner-achtige spellen maken gebruik van het besturingsschema met één knop (Canabalt, Jetpack Joyride, Tiny Wings). Kun je een andere stijl van spel bedenken die even goed werkt met slechts één knop voor controle?
Als je ooit een van je favoriete arcadespellen in de oude school hebt gespeeld in een emulator op je computer, is het je misschien opgevallen dat het niet helemaal hetzelfde aanvoelt. Alles is een beetje te scherp en schoon op je computerscherm in vergelijking met het wazige, flikkerende, verwrongen uiterlijk van een arcade-monitor, of je oude CRT-televisie uit je kindertijd.
Sommige mensen denken waarschijnlijk dat het goed is dat we deze vervormingsartefacten uit vervlogen tijden niet hoeven te verdragen, maar het kan leuk zijn om een beetje vaagheid terug te brengen in een retro-geïnspireerd spel.
Hier zijn enkele voorbeelden van manieren waarop u een oud CRT-scherm kunt emuleren:
Scanlijnen: U kunt een statische afbeelding van dunne, nauw gespreide, horizontale witte lijnen gebruiken om CRT-scanlijnen te simuleren. Leg ze gewoon bovenop je spel. Pas dekking en overvloeimodus aan om de gewenste stijl en intensiteit te bereiken.
Lawaai: Gaussiaanse ruis kan een leuke textuur toevoegen aan je spel. In het ideale geval zou de ruis geanimeerd zijn, maar een statische afbeelding zal goed genoeg werken als constant bewegende ruis de prestaties van uw spel beïnvloedt.
Blur: EEN een heel klein beetje onscherpte voegt wat mooie zachtheid toe aan de afbeelding. Ga hier niet te ver mee; je wilt nog steeds de pixels kunnen zien.
Kleur franjes: Een van mijn favoriete old school-effecten is om een beetje RGB-kleurranding toe te voegen. U kunt dit doen door het spelcanvas te scheiden in afzonderlijke kanalen voor rood, groen en blauw en ze enigszins uit de pas te laten schuiven. Dit effect ziet er erg goed uit als het is geanimeerd, maar het kan behoorlijk processorintensief zijn, dus je moet misschien het gebruik ervan beperken. Ik heb nog een tutorial waarin ik laat zien hoe je het effect met AS3 kunt implementeren: Creëer een Retro CRT Distortion-effect met behulp van RGB Shifting.
Combinatie: Combineer meerdere effecten voor maximaal plezier!
U kunt ook een geanimeerde rolbalk toevoegen om een defecte CRT te simuleren.
Het Flash-spel Cronus X implementeert veel van deze effecten mooi tijdens menu-overgangen. Dit is een goede oplossing als je je zorgen maakt over de effecten die de spelprestaties negatief beïnvloeden.
Laat je niet teveel vasthouden aan de beperkingen van oldschool gaming. Het is belangrijker dat het spel leuk is om een retro 'gevoel' te hebben dan om historisch accuraat te zijn.
En probeer niet gewoon een klassieke space-shooter of platformer te maken. Voeg wat innovatie toe om uw spel uniek te maken. Gebruik de retro-esthetiek als uitgangspunt, maar voeg een aantal van je eigen unieke stijl en elementen toe om iets nieuws te creëren. Het kan zelfs leuk zijn om wat moderne muziek, geluiden of elementen (zoals partikeleffecten) te mixen om een nieuwe kijk te creëren op klassieke arcade-gaming.
Enkele geweldige voorbeelden hiervan zijn Geometry Wars die oogverblindende moderne effecten combineert in een arcade-game in vectorstijl, Space Invaders Extreme waar een klassiek arcadespel gelaagd is bovenop mooie achtergrondafbeeldingen en ingesteld is op moderne elektronische muziek, of Fez, een klassieke 2D-pixelart-platformgame waarmee je de wereld in 3D-ruimte kunt transformeren.
Dat is het voor nu. Veel succes daar! Plaats een link in de reacties en laat me zien wat je maakt. Ik zou graag zien dat je de retro-esthetiek overneemt.
Accentsconagua