Hoe je pixelart-sprites met vier richtingen op klein formaat duidelijk leesbaar maakt

Stel de spritecel af op de game waarvoor je hem maakt, in plaats van een canvasformaat te kiezen omdat het gebruikelijk is. Een cel van 16×16 laat weinig ruimte voor details binnenin; een cel van 32×32 biedt meer ruimte voor kleding en accessoires. Dit zijn handige uitgangspunten, geen regels: de belangrijkste beperking is hoeveel pixels zichtbaar blijven op het verwachte schermformaat van het personage. Een tutorial van Pinnguaq laat zien hoe je een personage van 32×32 maakt, terwijl een gids met personages in verschillende formaten de detailbeperkingen van 16×16 en 32×32 beschrijft. (Pinnguaq, “Pixel Power: Sprite Creation”; Pixnote, “How to Draw Pixel Art Characters”)

Teken op het oorspronkelijke pixelraster en bekijk tijdens het werken een voorbeeld op de beoogde weergaveschaal. Als de game sprites vergroot, controleer dan de vergrote afbeelding met dezelfde schaalmethode als de game; als de game ze op hun oorspronkelijke resolutie weergeeft, controleer ze dan op 100%. Een ingezoomde weergave in de editor helpt bij het plaatsen van pixels, maar laat niet zien of een accessoire van één pixel in de game zichtbaar blijft. Een gids voor gamesprites raadt aan de leesbaarheid op ware grootte te controleren en details te verwijderen die op die schaal onduidelijk worden. (Wayline, “Making a game-ready sprite”)

Maak voordat je kostuumdetails tekent voor elke richting een eenvoudige hulpcel. Houd de geschatte hoogte, de positie van de voeten op de grond en het zwaartepunt van het personage consistent terwijl het aanzicht verandert. De omtrek zal vanzelf verschillen: een zijaanzicht is smaller dan een vooraanzicht en bij een achteraanzicht zijn sommige kenmerken mogelijk niet zichtbaar. Het personage moet echter niet lijken te springen of kleiner te worden alleen omdat de speler draait.

Een praktische manier om dit aan te pakken is om in elke cel een middenlijn en een grondlijn te tekenen en vervolgens een ruwe vorm voor hoofd, romp en voeten langs die hulplijnen te plaatsen. Vergelijk de vier basisvormen naast elkaar. Houd de afmetingen van de cellen vast, ook als er transparante ruimte rond het lichaam overblijft; zo kun je houdingen makkelijker vergelijken en ze later in rijen rangschikken. In de documentatie van Aseprite wordt de afbeelding beschreven als iets met een pixelafmeting en animatieframes met tijdsduren. Dat ondersteunt het idee om afmetingen en frames als expliciete onderdelen van het bronbestand te behandelen. (Aseprite-documentatie, “Sprite structure”)

Vul de basisvorm van elk personage met één effen kleur en bekijk de vier aanzichten samen. Vraag jezelf af: welk uiteinde is het hoofd? Kan ik het vooraanzicht onderscheiden van het achteraanzicht? Is het profiel herkenbaar als zijaanzicht en niet als smal vooraanzicht? Als het antwoord afhangt van oogpixels of kledingaccenten, pas dan eerst de grote vormen aan. Een werkwijze waarbij je met het silhouet begint, wordt ook aanbevolen in de gidsen van Wayline en Pixnote voor gamesprites. (Wayline, “Making a game-ready sprite”; Pixnote, “How to Draw Pixel Art Characters”)

Gebruik een of twee grote, aanzichtspecifieke kenmerken om de oriëntatie duidelijk te maken. Het vooraanzicht kan bijvoorbeeld een gezicht of borstmarkering tonen, het achteraanzicht een naad in de capuchon of een rugzak en de zijaanzichten een neus, paardenstaart of gedragen voorwerp. Maak die kenmerken groot genoeg om op de doelschaal zichtbaar te blijven. Een kenmerkende vorm aan de buitenrand, zoals een hoedrand of schouderaccessoire, kan meer helpen dan meerdere interne pixels, omdat die zichtbaar blijft in het silhouet.

Voeg zodra elk aanzicht als vorm herkenbaar is de grootste interne vlakken toe: hoofd of haar, romp, armen en benen. Kies tinten die aangrenzende vlakken van elkaar onderscheiden. Een sprite kan een beperkt palet gebruiken, maar twee aangrenzende delen met bijna dezelfde helderheid kunnen samenvloeien wanneer de sprite kort in beeld is of tegen een drukke achtergrond staat. Controleer de sprite tegen verschillende waarschijnlijke achtergrondkleuren; de tutorial van Pinnguaq raadt specifiek aan het contrast te beoordelen, omdat sprites tegen meerdere achtergronden kunnen verschijnen. (Pinnguaq, “Pixel Power: Sprite Creation”)

Houd het patroon van licht en schaduw consistent tussen de aanzichten, tenzij een bewuste verandering van aanzicht iets anders vereist. Een schaduw die abrupt van kant wisselt wanneer het personage draait, kan kleding er als een ander materiaal uit laten zien of de indruk wekken dat de lichaamsvorm is veranderd. Zorg ook dat kleurcodering nuttig blijft: een opvallende sjaal, haarkleur of riem moet van achteren en opzij op een voorspelbare plek zitten. Vertrouw niet alleen op kleurtoon om onderdelen te onderscheiden; controleer ook of verschil in helderheid of omtrek het onderscheid duidelijk maakt.

Een naar links gerichte sprite spiegelen om het aanzicht naar rechts te maken kan tekentijd besparen als het personage en de uitrusting symmetrisch zijn. Het is ongeschikt als spiegelen een belangrijke asymmetrie omkeert, zoals een tas aan één kant, insigne, haarscheiding, wapen of detail aan de lichtzijde. Vergelijk het gespiegelde resultaat met het ontwerp voordat je het gebruikt. Als de identiteit van het personage afhangt van de asymmetrie, teken en bewerk beide aanzichten afzonderlijk.

Ook symmetrische ontwerpen kunnen na het spiegelen kleine aanpassingen nodig hebben. Pixelclusters die aan de ene kant in balans lijken, kunnen er in de andere richting vreemd uitzien, vooral rond het gezicht, de voeten of een uitstekend accessoire. Gebruik spiegelen als uitgangspunt, controleer vervolgens beide profielen op de doelschaal en pas pixels aan waar het silhouet of de tussenruimte ongelijk aanvoelt. Dit is een praktische ontwerpaanbeveling: de bronnen onderbouwen controles van silhouet en schaal, terwijl de vraag wanneer asymmetrie ertoe doet afhangt van het personage en de game.

Zet de vier rustaanzichten samen op de oorspronkelijke schaal van de game tegen een effen achtergrond met een middentoon en herhaal dit met representatieve lichte en donkere scènes. Vergelijk eerst de effen silhouetten. Vergelijk vervolgens de gekleurde sprites zonder in te zoomen. Kijk ten slotte van het ene naar het andere aanzicht in de volgorde waarin een speler draait: voorkant, zijkant, achterkant, zijkant. Met deze controle op één overzichtsblad vallen verschillen in hoogte, onduidelijke oriëntatie of een accessoire dat verdwijnt makkelijker op dan wanneer je één vergrote sprite tegelijk bekijkt.

Gebruik deze korte diagnose als een aanzicht onduidelijk is:

• Als voor- en achterkant op elkaar lijken, maak dan een aanzichtspecifiek kenmerk groter of eenvoudiger, zoals het gezicht, het haar, de capuchon of een voorwerp op de rug.
• Als een profiel op een vormeloze klodder lijkt, scheid dan hoofd, romp en gedragen voorwerp met een duidelijkere contour of een verschil in helderheid.
• Als kleding samenvloeit met de achtergrond, pas dan de omtrek of de helderheid van de buitenste kleurvlakken aan.
• Als het personage bij het draaien lijkt te deinen, vergelijk dan de rij waar de voeten de grond raken en de plaatsing van het lichaam tussen de richtingen.
• Als een detail alleen zichtbaar is wanneer je inzoomt, verwijder het dan of vervang het door een grotere vorm.

Deze controles zijn bedoeld om problemen op te sporen, niet als regels waar een ontwerp wel of niet aan voldoet. Een ontwerp kan de achterkant bewust eenvoudiger houden dan de voorkant; toch moet de oriëntatie en identiteit voor het beoogde gebruik duidelijk zijn. Als de sprite later wordt geanimeerd, gebruik dan cellen van gelijke grootte en vergelijk de rusthoudingen voordat je beweging toevoegt. Aseprite beschrijft frames en tijdsduren als onderdelen van de spriteopbouw, en Pixnotes gids voor spritesheets raadt aan om frames even groot te houden en de voeten op één rij uit te lijnen. (Aseprite-documentatie, “Sprite structure”; Pixnote, “How to Draw Pixel Art Characters”)

Voeg fijne details pas toe als het silhouet, de oriëntatieaanwijzingen en de belangrijkste kleurvlakken in alle vier de aanzichten werken. Vraag jezelf bij elk detail af of het helpt om het personage te herkennen, de richting te bepalen of twee delen van elkaar te onderscheiden. Als het op de schaal van de game niets daarvan doet, neemt het pixels in beslag zonder de lezer van de sprite te helpen. Ook de gids voor gamesprites raadt aan kleine details pas als laatste toe te voegen en alleen details te behouden die op ware grootte zichtbaar blijven. (Wayline, “Making a game-ready sprite”)

Een goed moment om te stoppen is wanneer de vier sprites dezelfde stabiele hoogte en grondpositie hebben, duidelijke silhouetten van de voorkant, achterkant en profielen hebben en hun belangrijkste herkenningskenmerk in elk relevant aanzicht behouden. Bewaar een laatste voorbeeld van de vier naast elkaar in het project, zodat je latere bewerkingen op dezelfde schaal en tegen dezelfde achtergronden kunt beoordelen. Zo wordt elke revisie een concrete vraag: maakte deze pixel de richting of het personage duidelijker?

• “Pixel Power: Sprite Creation,” Pinnguaq
• “Making a game-ready sprite,” Wayline
• “How to Draw Pixel Art Characters,” Pixnote
• “Sprite structure,” Aseprite-documentatie