Neodvisnim razvijalcem iger pogosto nalaga več vlog: igralni oblikovalec, programer, skladatelj, umetnik. Ko pa gre za vizualno podobo, mnogi izberejo piksel umetnost – na prvi pogled se zdi preprosta. A da bi bilo lepo, potrebujete veliko izkušenj in posebnih veščin. Našel sem tutorial za tiste, ki šele začenjajo obvladovati osnove tega sloga: s opisom posebne programske opreme in tehnik risanja na primeru dveh sprite-ov.
Pozadina
Piksel umetnost je oblika digitalne umetnosti, kjer se spremembe uvajajo na ravni pikselov. V glavnem je povezana z grafiko video iger iz 80-ih in 90-ih let. Takrat so umetniki morali upoštevati omejitve pomnilnika in nizke ločljivosti. Danes je piksel umetnost še vedno priljubljena v igrah in kot umetniški slog na splošno, kljub možnosti ustvarjanja realistične 3D grafike. Zakaj? Tudi če ne upoštevamo nostalgije, je ustvarjanje odličnega dela v tako strogih okvirih prijeten in vreden izziv.
Prag vstopa v piksel umetnost je relativno nizek v primerjavi s tradicionalno umetnostjo in 3D grafiko, kar privlači neodvisne razvijalce. A to nikakor ne pomeni, da bo enostavno doključiti igro v tem slogu. Videl sem veliko neodvisnih razvijalcev s piksel umetnostjo metroidvania na platformah za množično financiranje. Mislili so, da bodo vse končali v letu dni, a v resnici so potrebovali še vsaj šest let.
Metal Slug 3 (Arcade). SNK, 2000
Piksel umetnost na tisti ravni, na kateri jo želi večina ustvarjati, zahteva veliko časa, obsežnih tutorialov pa je zelo malo. Pri delu z 3D-modeli lahko model obračate, deformirate, premikate posamezne dele, kopirate animacije z enega modela na drugega in tako naprej. Visokokakovostna piksel umetnost skoraj vedno zahteva ogromno truda za natančno postavitev pikselov na vsakem okviru.
Na splošno, sem vas opozoril.
Inga, da vam povem malo o svojem slogu: večinoma ustvarjam pikselno umetnost za video igre in prav v njih najdem inspiracijo. Še posebej sem oboževalec Famicom/NES, 16-bitnih konzol in arkad iz 90-ih let. Pikselna umetnost mojih najljubših iger tistega časa je lahko opisana kot svetla, samozavestna in čista (a ne preveč), je ne moremo opisati kot trdo in minimalistično. V tem slogu delam sam, vendar lahko ideje in tehnike iz tega učnega pripomočka enostavno uporabite za ustvarjanje povsem drugačnih stvari. Oglejte si dela različnih umetnikov in ustvarite pikselno umetnost, ki vam je všeč!
Programska oprema
Osnovna digitalna orodja za pikselno umetnost so Zoom (Zoom) in Pencil (Orodje za svinčnik), ki ju uporabljamo za postavljanje pikslov. Uporabni boste tudi za Line (Črta), Shape (Oblika), Select (Izberi), Move (Premik) in Paint Bucket (Vedro za barvanje). Obstaja veliko brezplačnih in plačljivih programov s tovrstnimi orodji. Predstavil vam bom najbolj priljubljene in tiste, ki jih uporabljam sam.
Paint (brezplačno)
Če imate Windows, je v njem vgrajen Paint — preprost program, vendar vsebuje vsa orodja za pikselno umetnost.
(brezplačno)
Presenetljivo funkcionalen urejevalnik pikselne umetnosti, ki se zažene skozi brskalnik. Delo lahko izvozite v PNG ali animirani GIF. Odličen izbor za začetnike.
(brezplačno)
GraphicsGale je edini urejevalnik med tistimi, o katerih sem slišal, zasnovan posebej za pikselno umetnost in vključuje orodja za animacijo. Razvilo ga je japonsko podjetje HUMANBALANCE. Od leta 2017 se razdaja brezplačno in še vedno je priljubljen, kljub naraščajoči priljubljenosti Aseprite. Na žalost dela le na Windows.
($)
Morda najbolj priljubljen urejevalnik trenutno. , ogromno možnosti, aktivna podpora, različice za Windows, Mac in Linux. Če ste se resno lotili pikselne umetnosti in še niste našli pravega urednika, je to morda to, kar potrebujete.
($$+)
GameMaker Studio 2 je odlično orodje 2D z dobrim urejevalnikom sprite-ov (Urejevalnik sprite-ov). Če želite ustvarjati pikselno umetnost za lastne igre, je zelo priročno vse početi v enem programu. Zdaj to programsko opremo uporabljam pri delu na , zbirki 50 retro iger: sprite in animacije ustvarjam v GameMakerju, medtem ko tile sete ustvarjam v Photoshopu.
($$$+)
Photoshop je drag program, koji se koristi putem pretplate i nije prilagođen za piksel-art. Ne preporučujem ga za kupovinu osim ako se ne bavite crtanjem ilustracija visoke rezolucije ili vam nisu potrebne složene manipulacije slikom, kao što je meni. U njemu možete praviti statične spriteove i piksel radove, ali je prilično komplikovan u poređenju sa specijalizovanim softverom (na primer, GraphicsGale ili Aseprite).
Ostalo
Moj set za piksel-art. Sve je crno, tek sad sam primetio.
Grafički tablet ($$+)
Preporučujem grafičke tablete za sve radove sa digitalnim ilustracijama kako biste izbegli sindrom karpalnog tunela. Mnogo je lakše sprečiti nego izlečiti. Jednom kada osetite bol, samo će rasti — brinite o sebi od samog početka. Zbog toga što sam nekada crtao mišem, sada mi je teško igrati igre u kojima treba da pritiskate tastere. Trenutno koristim Wacom Intuos Pro S.
Podrška za zapešće ($)
Ako ne možete nabaviti tablet, kupite bar podršku za zapešće. Najviše volim Mueller Green Fitted Wrist Brace. Ostali su ili previše čvrsti ili ne pružaju dovoljno podrške. Podrške se bez problema mogu naručiti online.
96×96 pikselа
Final Fight. Capcom, 1989. godina
Hajde da počnemo! Počećemo sa spriteom lika od 96×96 pikselа. Za primer sam nacrtao orka i postavio ga na ekran snimljen iz Final Fight (slika iznad), da razumete razmeru. Ovo je veliki sprite za većinu retro igara, veličina snimka: 384×224 pikselа.
Na tako velikom spriteu će biti lakše prikazati tehniku o kojoj želim da pričam. Takođe, pikselna ilustracija više liči na tradicionalne forme umetnosti (na primer, crtanje ili slikanje), sa kojima ste možda bolje upoznati. Nakon što savladamo osnovne tehnike, preći ćemo na manje spriteove.
1. Biramo paletu
Piksel je mnogo dublji pojam u piksel-artu nego u bilo kojim drugim digitalnim sferama. Piksel-art definišu njegova ograničenja, kao što su boje. Važno je pravilno odabrati paletu, ona će pomoći da se oblikuje vaš stil. Ali na početku predlažem da ne razmišljate o paletama i izaberete jednu od postojećih (ili jednostavno nekoliko nasumičnih boja) — lako je možete promeniti u bilo kojem trenutku.
Za ta vodič bom uporabil paleto z 32 barvami, ki smo jo ustvarili za . Pri piksel umetnosti jih pogosto sestavljajo iz 32 ali 16 barv. Naša je zasnovana za izmišljen računalnik, ki bi se lahko pojavil nekje med Famicom in PC Engine. Lahko jo vzamete ali katero koli drugo - vodič sploh ni odvisen od izbrane palete.
2. Grobi obrisi
Začnimo risanje z orodjem Svinčnik. Narišimo skico tako, kot to počnemo s običajno svinčnikom in papirjem. Seveda, piksel umetnost in tradicionalna umetnost se prekrivata, še posebej ko gre za večje sprite. Moje opazovanje kaže, da dobri umetniki piksel umetnosti vsaj dobro rišejo s roko in obratno. Zato je vedno koristno razvijati risarske veščine.
3. Dodelava obrisov
Izpopolnjujemo obrise: odstranimo odvečne piksle in zmanjšamo debelino vsake črte na en piksel. Ampak kaj točno šteje kot odvečno? Da bi odgovorili na to vprašanje, moramo razumeti pikselne črte in neravnosti.
Neravnosti
Naučiti se moramo risati dve osnovni črti v piksel umetnosti: ravne in ukrivljene. S svinčnikom in papirjem se vse zmanjša na mišično kontrolo, vendar delamo s majhnimi barvnimi bloki.
Ključ za risanje pravih piksel črt so neravnosti. To so enojni piksli ali majhni segmenti, ki uničujejo gladkost črte. Kot sem že omenil, ima en sam piksel ogromen pomen v piksel umetnosti, zato neravnosti lahko uničijo celo estetiko. Predstavljajte si, da vlečete ravno črto na papirju, in nenadoma vas nekdo udari po mizi: neravnosti v piksel umetnosti izgledajo enako kot naključna črta.
Primeri:
Ravne
Ukrivljene
Neravnosti se pojavljajo pri ukrivljenih črtah, ko se dolžina segmentov črte ne povečuje ali zmanjšuje postopoma.
Popolnoma se izogniti neravnostim je nemogoče - v vseh vaših najljubših retro igrah so prisotne (če seveda piksel umetnost ne sestoji izključno iz preprostih oblik). Cilj: zmanjšati neravnosti na minimum, pri tem pa prikazati vse potrebno.
4. Uporabimo prve barve
Obarvajte svoj lik s pomočjo zalivanja ali drugega primernega orodja. Paleta bo poenostavila ta del dela. Če programska oprema ne predvideva uporabe palet, jo lahko preprosto vključite v sliko, kot na zgornjem primeru, in barve izbirate z miško.
V spodnjem levem kotu sem narisal našega prijatelja, spoznajte, to je - Šar. Z njim bo lažje razumeti, kaj točno se dogaja v vsakem koraku.
5. Senčenje
Čas je, da prikažemo sence - preprosto dodamo temnejše barve na sprite. Tako bo slika videti tridimenzionalno. Domnevajmo, da imamo eno svetlobo, ki se nahaja nad orkom levo od njega. To pomeni, da bo osvetljeno vse, kar je zgoraj in spredaj našega lika. Dodamo sence spodaj desno.
Oblika in volumen
Če vam ta korak povzroča težave, si predstavljajte svoje risbe kot tridimenzionalne oblike, ne le črte in barve. Oblike obstajajo v tridimenzionalnem prostoru in lahko imajo volumen, ki ga oblikujemo s senčenjem. To bo pomagalo vizualizirati lika brez podrobnosti in si predstavljati, da je narejen iz gline, ne iz pikslov. Senčenje ni samo dodajanje novih barv, temveč proces oblikovanja. Pri dobro oblikovanem liku podrobnosti ne zakrivajo osnovnih oblik: če pripnete oči, boste videli nekaj velikih skupin svetlobe in senc.
Gladitev (anti-aliasing, anti-aliasing)
Vsakič, ko uporabim novo barvo, apliciram anti-aliasing (AA). Pomaga gladiti piksle z dodajanjem vmesnih barv po robovih, kjer se stikata dva segmenta črte:
Sivi piksli omilijo 'razpoke' v črti. Daljši je segment črte, daljši je segment AA.
Tako AA izgleda na ramenu orka. Potreben je, da omili črte, ki prikazujejo zavoje njegovih mišic.
Gladitev ne sme prekoračiti robov sprita, ki bo uporabljen v igri ali na ozadju, katerega barva ni znana. Na primer, če uporabite AA na svetlem ozadju, bo gladitev na temnem ozadju izgledala grdo.
6. Izbirni obris
Prej so bili obrisi popolnoma črni, zaradi česar je sprite izgledal zelo risan. Slika je bila kot razdeljena na segmente. Na primer, črne črte na roki preveč kontrastno prikazujejo mišičnoto, in lik izgleda manj celovito.
Če bo sprite postavljen bolj naravno in segmentacija ne bo tako očitna, bodo osnovne oblike lika lažje berljive. Za to lahko uporabite selektivno obrobo — delno zamenjajte črno obrobo z bolj svetlo. Na osvetljenem delu sprite lahko uporabite najsvetlejše barve ali, kjer sprite pride v stik z negativnim prostorom, lahko popolnoma odstranite obrobo. Namesto črne je treba uporabiti barvo, ki je bila izbrana za senco — tako se ohrani segmentacija (za ločevanje mišic, krzna in podobno).
Na tej točki sem dodal tudi temnejše sence. Izkazalo se je, da imamo tri odtenke zelene na koži orka. Najtemnejšo zeleno barvo lahko uporabimo za selektivno obrobo in AA.
7. Končni dotiki
Na koncu je treba dodati odseve (najsvetlejše pikice na sprite), podrobnosti (uhani, zakovice, brazgotine) in druge izboljšave, dokler lik ni pripravljen ali dokler se ne bomo morali preusmeriti na naslednjega.
Obstaja več koristnih tehnik, ki jih lahko uporabite v tej fazi. Obrnite risbo horizontalno, to pogosto pomaga razkriti napake v proporcijah in senčenju. Tudi barvo lahko odstranite — nastavite nasičenost na nič, da vidite, kje je treba spremeniti sence.
Ustvarjanje šumov (dithering)
Zaenkrat smo večinoma uporabljali velike, celovite dele senc. Obstaja pa tudi druga tehnika — dithering, ki omogoča prehod iz ene barve v drugo brez dodajanja tretje. Oglejte si primer spodaj.
Zgornji gradient od temne do svetle barve uporablja stotine različnih odtenkov modre.
Srednji gradient uporablja le devet barv, a kljub temu je še vedno preveč odtenkov ene barve. Pojavi se t.i. banding (iz angleščine band — pas), pri katerem zaradi debelih enotnih pasov oko osredotoči na točke stika barv, namesto na same barve.
Na spodnjem gradientu smo uporabili dithering, ki preprečuje banding in uporablja le dve barvi. Ustvarjamo šum različnih intenzitet, da imitiramo gradacijo barve. Ta tehnika je zelo podobna halftonu (halftone — poltónska slika), ki se uporablja pri tisku; prav tako pa tudi stippling (stippling — zrnasta slika) — v ilustracijah in stripih.
Na orku sem uporabil ditherjanje le malo za prenos teksture. Nekateri umetniki pikslov ga sploh ne uporabljajo, drugi pa se ga ne sramujejo in ga delajo zelo spretno. Zdi se mi, da ditherjanje najboljše izgleda na velikih površinah, napolnjenih z eno barvo (poglejte nebo na posnetku iz igre Metal Slug, ki je bil zgoraj) ali na tistih mestih, ki bi morala izgledati hrapavo in nepravilno (na primer, blato). Odločite se sami, kako ga uporabiti.
Če želite videti primer z obsežnim in kakovostnim ditherjanjem, preučite igre The Bitmap Brothers, britanske studijske družbe iz 80. let, ali igre na računalniku PC-98. Vendar upoštevajte, da so vse te igre NSFW.
Kakyusei (PC-98). Elf, 1996
Na tej sliki je le 16 barv!
8. Zadnji pogled
Ena od nevarnosti piksel umetnosti je, da se zdi lahka in preprosta (zaradi njene strukture in omejitev sloga). A na koncu boste porabili ogromno časa za izpopolnjevanje svojih spritov. Prikazuje se kot uganka, ki jo je treba rešiti — zato piksel umetnost privlači perfekcioniste. Zapomnite si, da en sprit ne sme vzeti preveč časa — to je le drobna košček izjemno kompleksne zbirke koščkov. Pomembno je, da ne izgubite vizije celotne slike.
Celo če vaš piksel umetnost ni za igre, si včasih povejte: „Vse je že dovolj dobro!“ In nadaljujte naprej. Najboljši način za razvoj veščin je, da čim večkrat preidete celoten proces od začetka do konca, pri čemer uporabite čim več tem.
In včasih je koristno za kratek čas pustiti sprit, da se na njega pozneje pogledate z novimi očmi.
32×32 pixelov
Najprej smo ustvarili velik sprit velikosti 96×96 pixelov, ker pri tej velikosti bolj spominja na risanje ali slikanje, ampak samo s pixli. Manjši sprit, kot je, manj je podoben tistemu, kar naj bi prikazoval, in toliko bolj pomemben je vsak pixel.
V Super Mario Bros. je Mariojev oko le dva pixla, postavljena eden nad drugim. In tudi njegovo uho. Ustvarjalec lika Shigeru Miyamoto je dejal, da so brki potrebni za ločevanje nosu od ostalega obraza. Tako je ena od glavnih značilnosti Mariojevega obraza ne samo zasnova lika, temveč tudi pragmatična zvijača. Kar potrjuje star modrost — „potreba je mati iznajdljivosti“.
Osnovni koraci za izradu spritea 32×32 piksela su nam već poznati: skica, boja, senke, dalja dorada. U takvim uslovima, kao početnu skicu biram obojene figure umesto crtanja kontura zbog male veličine. Boja igra važniju ulogu u određivanju karaktera nego konture. Pogledajte ponovo Maria, on uopšte nema konture. Zanimljive su ne samo brkove. Njegove bakarice definišu oblik ušiju, rukavi pokazuju ruke, a opšti oblik više-manje jasno prikazuje celo njegovo telo.
Izrada malih spriteova je neprekidni kompromis. Ako dodate obod, možete izgubiti prostor za senku. Ako su ruke i noge vašeg lika jasno prikazane, glava verovatno ne bi trebala biti prevelika. Ako efikasno koristite boju, selektivni obod i antialiasing, tada će nacrtani objekt izgledati veće nego što zapravo jeste.
Za male spriteove volim stil chibi: likovi izgledaju veoma slatko, imaju velike glave i oči. Odličan način da stvorite živopisnog junaka u ograničenom prostoru, a u celini, vrlo prijatan stil. Ali, možda ćete morati da prikažete pokretljivost ili snagu lika, tada možete posvetiti manje prostora glavi, tako da telo izgleda moćnije. Sve zavisi od vaših preferencija i ciljeva.
Cela ekipa je okupljena!
Formati datoteka
Takav rezultat može naterati da nervoza zatrese svakog pixel umetnika
Slika koju vidite je rezultat čuvanja crteža u JPG. Deo podataka je izgubljen zbog algoritama kompresije datoteke. Kvalitetan pixel-art će na kraju izgledati loše, a povratak originalnoj paleti biće težak.
Za čuvanje statične slike bez gubitka kvaliteta koristite format PNG. Za animacije — GIF.
Kako ispravno deliti pixel-art
Deljenje pixel-arta na društvenim mrežama je odličan način da dobijete povratne informacije i upoznate druge umetnike koji rade u istom stilu. Ne zaboravite da stavite haštag #pixelart. Nažalost, društvene mreže često konvertuju PNG u JPG bez pitanja, pogoršavajući vaš rad. I nije uvek jasno zašto je vaša slika konvertovana.
Postoji nekoliko saveta kako da sačuvate pixel-art u potrebnom kvalitetu za različite društvene mreže.
Da PNG datoteka ne bi bila spremenjena na Twitterju, uporabite manj kot 256 barv ali , da je vaša datoteka manjša od 900 pikslov na dolgi strani. Priporočam, da povečate velikost datoteke vsaj na 512×512 pikslov. Prav tako mora biti povečanje deljivo s 100 (200%, ne 250%) in ostra robova morajo biti ohranjena (Nearest Neighbor v Photoshopu).
Animirani GIF datoteki za objave na Twitterju ne smejo biti težji od 15 MB. Slika mora biti vsaj 800×800 pikslov, ciklična animacija se mora ponoviti trikrat, zadnji kader pa mora biti vsaj dvakrat krajši po času kot vsi ostali — to je najpogostejša teorija. Vendar pa ni povsem jasno, koliko je treba upoštevati te zahteve, saj Twitter nenehno spreminja svoje algoritme za prikazovanje slik.
Kolikor vem, ni mogoče objaviti slike na Instagramu brez izgube kakovosti. Vendar pa bo zagotovo izgledala bolje, če jo povečate vsaj na 512×512 pikslov.
Izvor: habr.com
