Hoe maak je fantastisch Pixel Art voor je games en apps

hoe begin je met pixel art Aan? Gelukkig is pixel art een van die zeldzame gevallen waarin het echt zo eenvoudig is als het lijkt. Dit is pixelart...

Pixel Art heeft een zekere retro-aantrekkingskracht die teruggaat tot het 8-, 16- en 32-bits consoletijdperk. Tegenwoordig is het echter waarschijnlijker te vinden in een verscheidenheid aan indie- en mobiele games en geniet het momenteel van een opleving. Het is een fantastische manier om de technologische beperkingen te omzeilen die gepaard gaan met het zijn van een onafhankelijke ontwikkelaar en mobiele hardware. Op deze manier hoeft u minder werk te doen en uw bestandsgrootte te verkleinen, maar in plaats van er goedkoop uit te zien, voelt het als een bewuste stilistische keuze. Voeg wat chiptune-muziek en een uniek kleurenpalet toe en je hebt een geweldige esthetiek die de aandacht zal trekken in de Play Store.

Een andere attractie van pixel art zo daagt ze je uit om binnen haar beperkingen te werken. Omdat de afbeeldingen zo klein zijn, dwingt dit tot een wat impressionistische benadering. Hoe kun je een paar pixels direct herkenbaar maken als een charismatische glimlach of een dolk die uit een tegenstander steekt? Hier ligt de ware kunst van het formaat en dat is de reden waarom sommige prestaties in games zoals Superbrothers: Sword & Sworcery of de nieuwere Hyper Light Drifter  zo indrukwekkend.

hoe te beginnen

Met dat in gedachten, kunt u beslissen dat pixel art zou een goede richting zijn voor uw eigen project. Hoe begin je in dit geval? Gelukkig is pixel art een van die zeldzame gevallen waarin het echt zo eenvoudig is als het lijkt. Dit is pixelart...

In het begin hoef je alleen een tekenprogramma naar keuze te selecteren. Ik gebruik GIMP omdat het gratis is, maar je kunt net zo goed Photoshop of zelfs MS Paint gebruiken. Ik raad echter aan om iets complexers dan MS Paint te gebruiken, omdat het handig kan zijn om toegang te hebben tot functies zoals lagen en transparanten (zoals we later zullen zien). Er zijn enkele speciale pixelart-programma's waarmee u ook kunt werken, maar deze zijn over het algemeen niet vereist. Aseprite is echter een goede optie.

Ongeacht uw softwarekeuze, u selecteert vervolgens het pengereedschap en zorgt ervoor dat deze is ingesteld om individuele pixels met een dekking van 100% te tekenen. Zoom nu in op je afbeelding tot het punt waar je de vierkante pixels duidelijk kunt zien terwijl je tekent. Het is echt zo makkelijk!

Nu kunt u uit de vrije hand tekenen of elke pixel afzonderlijk plaatsen. Merk op dat wanneer je dingen als cirkels tekent, het de moeite waard kan zijn om goed naar de patronen van je pixels te kijken (twee bovenop, één overdwars, drie bovenop één overdwars, vier bovenop één overdwars, enz.) een meer consistente en gecontroleerde look Afbeelding. Het goede nieuws is dat het heel gemakkelijk is om fouten die je maakt ongedaan te maken, dus er is geen reden om niet te experimenteren.

Wat je uiteindelijk krijgt, is een basisoverzicht voor alles wat je probeert te tekenen in blokvormige pixels. Maak je pas later zorgen over het toevoegen van veel details - experimenteer gewoon om eerst de vorm en verhoudingen goed te krijgen. Dit is het moeilijkste deel, vooral met veel karakters.

Ik gebruik graag een schets voor mijn schilderijen, maar veel mensen nemen niet de moeite en tekenen in blokkleuren. Doe wat voor u werkt, maar houd er rekening mee dat elke methode voor- en nadelen heeft; Contouren maken het gemakkelijker om details te onderscheiden, maar kunnen vervelend worden als uw afbeeldingen kleiner worden en geen pixels meer hebben!

Details en arcering toevoegen

Als je eenmaal tevreden bent met je omtrek of silhouet, kun je de individuele details toevoegen totdat je een compleet beeld hebt. Hoe meer details je toevoegt, hoe indrukwekkender je personages eruit zullen zien. Tegelijkertijd moet u echter voorkomen dat uw afbeelding te krap lijkt. Het is belangrijk dat je begint met een omtrek die de juiste maat heeft - en onthoud dat de andere objecten in je spelwereld ook relatief moeten zijn.

Nu je je gegevens hebt, voeg je gewoon de gewenste kleuren toe met het vulgereedschap. Dit kan er in het begin echter wat vlak uitzien, dus je zult later waarschijnlijk wat verlichting willen toevoegen.

Om dit te doen, stelt u zich eenvoudig een lichtbron voor uw personage voor en selecteert u vervolgens twee of meer extra tinten om aan uw kleurenpalet toe te voegen. Je hebt er minimaal één nodig voor schaduwen en één voor hooglichten. Zorg ervoor dat alle arcering op dezelfde pagina verschijnt en denk aan de contouren die van nature zouden worden gecreëerd door de vormen die u tekent als ze XNUMXD waren. Ik gebruik veel schaduw aan de ene kant en dan slechts een dunne strook licht aan de andere kant om highlights naar voren te brengen, maar nogmaals, de sleutel is om te experimenteren en te zien wat werkt voor je eigen persoonlijke stijl.

Onthoud dat je personages en objecten tekent voor games. Dat betekent dat je goed moet nadenken over je lichtbron. Het creëren van een heel duidelijk schaduweffect aan de rechterkant van je sprite kan er in sommige contexten vreemd uitzien - vooral als je je sprite omdraait terwijl hij in de tegenovergestelde richting gaat! Houd hier rekening mee bij het maken van uw afbeelding en overweeg om uw verlichting subtieler te maken of in plaats daarvan boven uw hoofd te plaatsen.

Exporteer je afbeelding

Als u klaar bent, kunt u uw afbeelding opslaan en exporteren. Natuurlijk moeten we op dit punt voorzichtig zijn, want de foto is eigenlijk klein zal zijn . Er zijn ook een paar andere dingen waarmee u rekening moet houden wanneer u uw kunst in uw games gebruikt.

Zorg er eerst voor dat u uw afbeelding automatisch bijsnijdt, zodat er geen witte gebieden rond de randen zijn. Dit is handig voor je botsingsdetectie en helpt je ook om je afbeelding niet onnodig groot te maken. Het is echter mogelijk dat u in plaats daarvan een "sprite-blad" wilt maken, wat betekent dat u elk animatieframe aan een enkel bestand toevoegt. Dit maakt de totale bestandsgrootte kleiner en houdt het gemakkelijker te organiseren. In dit geval is bijsnijden minder belangrijk omdat u dit later in de door u gekozen IDE doet.

Je moet er ook voor zorgen dat de achtergrond transparant is, zodat personages in je gamewereld kunnen bewegen, in plaats van grote witte vierkanten met tekens erop. In Gimp doe je dit door in het menu "Laag" te selecteren, vervolgens "Transparantie" en "Alfakanaal toevoegen". Van daaruit kun je je witte achtergrond wissen en je afbeelding boven niets laten zweven.

Als u uw afbeelding exporteert, kunt u dit doen op de werkelijke bestandsgrootte als u van plan bent deze in een game te gebruiken. In Unity kun je de 'Pixels Per Unit' voor elke afzonderlijke sprite kiezen, waardoor het gemakkelijk wordt om je afbeelding zo groot te maken als je wilt, terwijl je toch profiteert van de kleine bestandsgrootte.

Omgekeerd, als u echter van plan bent uw afbeeldingen online te delen, wilt u dat ze groter worden weergegeven. Dus ga naar 'afbeelding', dan naar 'afbeeldingsgrootte' en vergroot het formaat. Zorg ervoor dat Interpolatie is uitgeschakeld of Harde randen behouden is geselecteerd (afhankelijk van uw software). Anders wordt de foto wazig.

7 Pixel Art-tips

Tot slot een paar tips om u op weg te helpen de pixel art zou moeten helpen...

1. Houd het grote geheel in gedachten

Terwijl u inzoomt en elke pixel zorgvuldig bewerkt, kan het moeilijk zijn om u voor te stellen hoe uw afbeelding eruit zal zien als deze af is. Daarom is het belangrijk om af en toe uit te zoomen. Of beter nog, probeer de navigatietool (beschikbaar bij de meeste tekenprogramma's) waarmee je een kleiner perspectief op je canvas kunt zien en ook naar specifieke punten kunt springen.

2. Gebruik het gereedschap Toverstaf

U kunt een hele regio of kleur selecteren met de gereedschappen Toverstaf of Kleurselectie. Op deze manier kun je dan alleen op dat gebied tekenen was zorgt er op zijn beurt voor dat u vrij kunt tekenen zonder dat u zich zorgen hoeft te maken over het overschrijden van de lijnen. Alpha Lock is een ander hulpmiddel dat u hiervoor kunt gebruiken.

3. Anti-aliasing toevoegen

Anti-aliasing is een term voor computergraphics die bedoeld is om het uiterlijk van pixels te verzachten, meestal door het contrast te verminderen en meer overgangskleuren toe te voegen. PC-gamers zullen dit herkennen als een grafische optie die kan worden in- en uitgeschakeld om de prestaties te verbeteren.

In ons geval is anti-aliasing een effect dat we kunnen nabootsen om onze afbeeldingen er iets authentieker uit te laten zien. Om het effect te creëren, zoekt u gewoon de punten waar u een plotseling contrast heeft en introduceert u die overgangskleuren langs de randen. Het idee hier is niet om een ​​vloeiend verloop te maken, maar om de overgang iets minder sterk te laten lijken. Ik heb hier wat antialiasing aan Link toegevoegd, zodat je het verschil kunt zien:

Hier leer je ook iets over Pixel Art: Er is veel geduld voor nodig!

4. Gebruik niveaus

Bij de meeste tekenprogramma's kun je lagen gebruiken, wat betekent dat je afbeeldingen op de achtergrond kunt laten verschijnen en erop kunt tekenen zonder die laag te beïnvloeden. U kunt ook de transparantie van afzonderlijke lagen, enz. wijzigen.

Hierdoor kunnen we een afbeelding maken waarmee we willen werken, deze helemaal naar beneden schalen (met de juiste beeldverhouding) en deze vervolgens overtrekken met het pengereedschap. Zo heb ik dit portret van Gary gemaakt...

5. Probeer filters

terwijl de beste pixel art 99% met de hand bewerkt, er zijn een paar filters die je leven een beetje makkelijker kunnen maken, afhankelijk van je ambities. Gimp heeft bijvoorbeeld een vervagingsfilter genaamd "Pixelize" dat precies doet wat het zegt op het blik. Je kunt dit gebruiken om extra anti-aliasing toe te voegen aan je bestaande afbeelding, of je kunt het gebruiken om "vals te spelen" en een gewone afbeelding om te zetten in iets dat meer lijkt op pixel art ziet eruit. Het slijpgereedschap kan ook een handig hulpmiddel zijn.

6. Zoek inspiratie

De beste manier om te pixel art Beter worden, zoals de meeste dingen, gaat over blijven proberen. Maar wat onderzoek doen en online naar inspiratie zoeken, kan ook erg nuttig zijn. Vooral het bekijken van bestaande voorbeelden van "referentie-sprites" kan nuttig zijn, vooral als u snel items zoals kisten, bomen en dergelijke wilt maken. 'The Spriter's Resource' is een geweldige site om spritesheets te vinden van al je favoriete oude games. Kijken naar sprite-bladen kan ook erg handig zijn als je je personages probeert te animeren, omdat het je een referentie geeft voor de biomechanica van lopen, rennen en springen (biomechanica verwijst naar de manier waarop onze armen en benen bewegen). ).

En natuurlijk is er genoeg inspiratie op Deviant Art en Pinterest, evenals een heleboel geweldige games in de Play Store. Enkele uitstekende voorbeelden zijn: Superbrothers: Sword & Sworcery, Pewdiepie: Legend of the Brofist, VVVVVV (bij wijze van spreken), Sonic de Hedgehog 1, 2 & CD en terraria.

7. Wees origineel

Während pixel art ziet er regelmatig geweldig uit en de mogelijkheden om te experimenteren zijn eindeloos, het is belangrijk om ervoor te zorgen dat je je best doet om ervoor te zorgen dat die van jou er niet gekunsteld uitziet. Er is er een op dit moment Aantal pixel art, dus het is maar al te gemakkelijk om gewoon een generieke te gebruiken pixel art-Maak een look en noem het een tag. Als je wilt dat je game er uniek uitziet, moet je buiten de gebaande paden denken en proberen je eigen stijl te bedenken. Wat dacht je van, pixel art te combineren met een andere stijl, zoals cyberpunk? Experimenteer, probeer nieuwe dingen en creëer pixel artdat is op de een of andere manier uniek voor jou. gebruiken pixel art als een medium om jezelf uit te drukken en je fantasie tot leven te brengen - dat is tenslotte waar kunst om draait!

Deel uw mening met ons!