Så får du sprites med fyra riktningar att framträda tydligt i liten storlek

Anpassa sprite-cellen efter det avsedda spelet i stället för att välja en storlek bara för att den är vedertagen. En cell på 16×16 ger lite utrymme för detaljer inne i formen, medan en cell på 32×32 ger mer plats för kläder och accessoarer. Det här är användbara utgångspunkter, inte regler: den viktiga begränsningen är hur många pixlar som förblir synliga i figurens förväntade storlek på skärmen. En handledning från Pinnguaq visar hur man bygger en figur på 32×32, medan en figurguide som jämför olika storlekar beskriver detaljbegränsningarna för 16×16 och 32×32. (Pinnguaq, ”Pixel Power: Sprite Creation”; Pixnote, ”How to Draw Pixel Art Characters”)

Rita i den ursprungliga pixelrutnätsstorleken och förhandsgranska i den avsedda visningsskalan medan du arbetar. Om spelet förstorar sprites ska du granska den förstorade bilden med samma skalningsmetod som spelet använder. Om spelet visar dem i den ursprungliga upplösningen granskar du dem i 100 %. En inzoomad vy i bildredigeraren hjälper dig att placera pixlar, men den visar inte om en detalj på en pixel överlever i spelet. En guide till spelsprites rekommenderar att kontrollera läsbarheten i faktisk storlek och ta bort detaljer som blir otydliga i den skalan. (Wayline, ”Making a game-ready sprite”)

Gör en enkel hjälpcell för varje riktning innan du ritar kostymdetaljer. Håll figurens ungefärliga höjd, markkontakt och tyngdpunkt konsekventa när vyn ändras. Konturen kommer naturligtvis att variera: en sidovy är smalare än en vy framifrån, och en vy bakifrån kan dölja drag som syns framifrån. Men figuren ska inte se ut att hoppa eller krympa bara för att spelaren vänder på den.

Ett praktiskt sätt att få till detta är att rita en mittlinje och en marklinje i varje cell och sedan placera grova former för huvud, överkropp och fötter utifrån dessa hjälplinjer. Jämför de fyra grova formerna sida vid sida. Behandla cellernas mått som fasta även när bilden lämnar genomskinligt utrymme runt kroppen. Då blir det lättare att jämföra poser och senare ordna dem i rader. I Aseprites dokumentation om sprites beskrivs bilden som en pixelbild med animeringsrutor och visningstider, vilket stödjer att mått och rutor behandlas som uttryckliga delar av arbetsfilen. (Aseprites dokumentation, ”Sprite structure”)

Fyll varje grov figurform med en enda platt färg och granska de fyra vyerna tillsammans. Fråga dig: Vilken ände är huvudet? Kan jag skilja en vy framifrån från en bakifrån? Ser profilen ut som en sidovy snarare än en smal vy framifrån? Om svaret hänger på ögonpixlar eller högdagrar på kläderna ska du först justera de stora formerna. Att börja med silhuetten är också arbetsordningen som rekommenderas i Waylines och Pixnotes vägledning för spelsprites. (Wayline, ”Making a game-ready sprite”; Pixnote, ”How to Draw Pixel Art Characters”)

Använd ett eller två stora, vysspecifika kännetecken för att göra riktningen tydlig. Vyn framifrån kan till exempel visa ett ansikte eller ett märke på bröstet, vyn bakifrån en söm på huvan eller en ryggsäck, och sidovyerna en näsa, hästsvans eller ett föremål som figuren bär. Se till att kännetecknen är tillräckligt stora för att synas i målskalan. En tydlig konturform, som en hattbrätte eller en axelaccessoar, kan hjälpa mer än flera pixlar inne i formen eftersom den syns i silhuetten.

När varje riktning fungerar som form lägger du till de största inre partierna: huvud eller hår, överkropp, armar och ben. Välj valörer som håller intilliggande partier åtskilda. En sprite kan använda en liten palett, men två angränsande delar med nästan samma ljushet kan flyta ihop när spriten bara syns ett ögonblick eller mot en rörig scen. Kontrollera spriten mot flera tänkbara bakgrundsfärger. I Pinnguaqs handledning rekommenderas särskilt att bedöma kontrasten, eftersom sprites kan visas mot olika bakgrunder. (Pinnguaq, ”Pixel Power: Sprite Creation”)

Håll mönstret av ljus och skugga konsekvent mellan riktningarna, såvida inte en medveten förändring av vyn kräver något annat. En skugga som plötsligt byter sida när figuren vänder kan få kläderna att se ut att vara av ett annat material eller kroppen att se annorlunda ut. Se också till att färgkodningen fungerar: en särskiljande halsduk, hårfärg eller ett bälte bör sitta på en förutsägbar plats när figuren ses bakifrån och från sidan. Förlita dig inte enbart på nyans för att skilja delar åt. Kontrollera också att skillnaden i ljushet eller kontur hjälper till att hålla dem åtskilda.

Att spegelvända en sprite som vetter åt vänster för att skapa vyn åt höger kan spara ritningstid när figuren och utrustningen är symmetriska. Det passar inte när spegelvändningen vänder på en viktig asymmetri, som en väska på ena sidan, ett märke, en bena, ett vapen eller en detalj som vetter mot ljuset. Jämför den spegelvända versionen med utformningen innan du använder den. Om figurens identitet bygger på asymmetrin ska du rita och justera de två vyerna separat.

Även symmetriska utformningar kan behöva små korrigeringar efter spegelvändning. Pixelkluster som ser balanserade ut på ena sidan kan se märkliga ut åt andra hållet, särskilt kring ansiktet, fötterna eller en utstickande accessoar. Använd spegelvändningen som utgångspunkt, granska sedan båda profilerna i målskalan och ändra pixlar där silhuetten eller mellanrummen känns ojämna. Detta är en praktisk designrekommendation: källorna stödjer kontur- och skalgranskning, medan beslutet om när asymmetri spelar roll beror på figuren och spelet.

Placera de fyra stillastående vyerna tillsammans i spelets ursprungliga skala mot en enfärgad bakgrund med medelhög ljushet. Gör sedan om kontrollen mot representativa ljusa och mörka scener. Jämför först deras fyllda silhuetter. Jämför därefter de färglagda spritesen utan att zooma in. Till sist växlar du snabbt mellan dem i den ordning spelaren kommer att vända: framifrån, från sidan, bakifrån, från sidan. Med den här översikten blir det lättare att upptäcka ojämn höjd, otydlig riktning eller en accessoar som försvinner än om du granskar en förstorad sprite i taget.

Använd den här korta felsökningsguiden när en vy känns otydlig:

• Om fram- och baksidan ser likadana ut kan du förstora eller förenkla ett vysspecifikt kännetecken, som ansiktet, håret, huvan eller ett föremål på ryggen.
• Om profilen ser ut som en klump kan du skilja huvudet, överkroppen och föremålet som figuren bär åt med en tydligare kontur eller valörskillnad.
• Om kläderna flyter ihop med bakgrunden kan du justera konturen eller ljusheten i de yttre färgfälten.
• Om figuren verkar guppa när den vänder ska du jämföra raden där fötterna möter marken och kroppens placering mellan riktningarna.
• Om en detalj bara syns när bilden är förstorad kan du ta bort den eller ersätta den med en större form.

Det här är felsökningsråd, inte godkänd-eller-underkänd-regler. En utformning kan medvetet ha enklare detaljer bakifrån än framifrån; ändå behöver riktning och identitet vara begripliga för den avsedda användningen. Om spriten senare ska animeras använder du lika stora celler och jämför viloposerna innan du lägger till rörelse. I Aseprites dokumentation beskrivs bildrutor och visningstider som delar av spritestrukturen, och i Pixnotes guide till spriteark beskrivs hur man håller bildrutorna lika stora och riktar in fötterna längs samma rad. (Aseprites dokumentation, ”Sprite structure”; Pixnote, ”How to Draw Pixel Art Characters”)

Lägg bara till fina detaljer när silhuetten, riktningskännetecknen och de stora färgfälten fungerar i alla fyra vyerna. Fråga dig för varje detalj om den hjälper till att identifiera figuren, läsa av riktningen eller skilja två delar åt. Om den inte gör något av detta i spelets skala upptar den pixlar utan att göra spriten lättare att läsa. Vägledningen för spelsprites rekommenderar också att lägga till små detaljer sist och bara behålla sådana som syns i faktisk storlek. (Wayline, ”Making a game-ready sprite”)

En bra slutpunkt är fyra sprites med samma stabila höjd och markposition, tydliga silhuetter framifrån, bakifrån och från sidan, och huvuddraget som kännetecknar figuren bevarat i varje relevant vy. Spara en förhandsvisning av alla fyra sida vid sida i projektet, så att senare ändringar kan jämföras i samma skala och mot samma bakgrunder. Den enkla jämförelsen ger en konkret fråga att utgå från vid ändringar: gjorde den här pixeln riktningen eller figuren tydligare?

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