Algajatele mõeldud pikselkunst: kasutamisjuhend

Indie-arendajatele tuleb sageli mängida mitut rolli: mängudisainer, programmeerija, helilooja, kunstnik. Ja kui asi jõuab visuaalideni, valivad paljud pikselkunst — esmapilgul tundub see lihtne. Kuid ilusate tulemuste saavutamiseks on vaja palju kogemusi ja teatud oskusi. Leidsin tasuta õpetuse neile, kes alles alustavad selle stiili põhialuste õppimist: koos erilise tarkvara ja joonistamistehnikate kirjeldusega, kasutades kahe sprite näidet.

Taust

Pikselkunst on digitaalne kunstivorm, kus muudatused tehakse pikselite tasandil. Peamiselt seostatakse seda 80ndate ja 90ndate videomängude graafikaga. Sel ajal pidid kunstnikud arvestama mälu piirangute ja madala resolutsiooniga. Täna on pikselkunst endiselt populaarne mängudes ja kunstistiilina üldiselt, hoolimata võimalusest luua realistlikku 3D-graafikat. Miks? Isegi kui nostalgiale ei mõtle, on ägeda töö loodamine nii rangetes raamides meeldiv ja väärt väljakutse.

Pikselkunsti sisenemisbarjäär on võrreldes traditsioonilise kunsti ja 3D-graafikaga suhteliselt madal, mis tõmbab indie-arendajaid. Kuid see ei tähenda, et see oleks lihtne valmis teha mäng sellises stiilis. Olen näinud palju indie-arendajaid, kellel on pikselkunstiga metroiidvania mängud rahastusplatvormidel. Nad arvasid, et saavad kõik valmis aastaga, kuid tegelikult vajasid nad veel kuut aastat.

Metal Slug 3 (Arcade). SNK, 2000. aasta

Pikselkunst tasemel, kus enamik tahab seda luua, võtab palju aega ja lühikesi õpetusi on väga vähe. 3D-mudeli töötlemisel saate seda pöörata, deformeerida, eraldi osi liigutada, kopeerida animatsioone ühelt mudelilt teisele ja nii edasi. Kõrgtaseme pikselkunst nõuab peaaegu alati palju vaeva pixelside hoolikalt paigutamiseks igas raamis.

Üldiselt olen ma ette vaadanud.

Ja nüüd natuke minu stiilist: peamiselt joonistan ma videomängude jaoks pikselkunsti ja saan sellest inspiratsiooni. Eelkõige olen Famicomi/NES, 16-bitiste konsoolide ja 90ndate mänge fänn. Minu lemmikmängude pikselkunst seda aega iseloomustab erksus, enesekindlus ja puhtus (kuid mitte liiga), seda ei saa pidada jäigaks ja minimalistikuks. Selles stiilis töötan ma ise, kuid saate selle õpetuse ideid ja tehnikaid hõlpsasti rakendada täiesti erinevate asjade loomisel. Uurige erinevate kunstnike teoseid ja looge pikselkunsti, mis teile meeldib!

Push-teated

Põhijoonistusvahendid pikselkunstiks — Suum (Zoom) ja Pliiats (Pencil), et paigutada pikslit. Samuti on kasulikud Joon (Line), Kuju (Shape), Valida (Select), Liikuda (Move) ja Täitmine (Paint Bucket). On palju tasuta ja tasulisi tarkvarasid, mis sisaldavad selliseid vahendeid. Räägin kõige populaarsematest ja neist, mida ise kasutan.

Paint (tasuta)

Kui teil on Windows, siis sisseehitatud Paint on primitiivne programm, kuid selles on kõik tööriistad pikselkunstiks.

Piskel (tasuta)

Üllatavalt funktsionaalne pikselkunsti redaktor, mis töötab brauseris. Töö saab eksportida PNG või animatsioonina GIF. Suurepärane variant algajatele.

GraphicsGale (tasuta)

GraphicsGale on ainus redaktor, millest olen kuulnud, mis on välja töötatud spetsiaalselt pikselkunstiks ja hõlmab animatsioonivahendeid. Selle lõi Jaapani ettevõte HUMANBALANCE. Alates 2017. aastast on see tasuta levitatav ja on endiselt nõutud, hoolimata Aseprite'i populaarsuse kasvust. Kahjuks on see saadaval ainult Windowsile.

Aseprite ($)

Võib-olla on see hetkel kõige populaarsem redaktor. Avatud lähtekood, palju võimalusi, aktiivne tugi, versioonid Windowsile, Macile ja Linuxile. Kui olete tõsiselt pikselkunsti kallal ning ei ole veel leidnud sobivat redaktorit, on see ehk just vajalik.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 on suurepärane 2D-tööriist hea sprite-redaktoriga. Kui soovite luua pikselkunsti oma mängude jaoks, on kõik mugav teha ühes programmis. Praegu kasutan seda tarkvara töötamiseks UFO 50, kogumisega 50 retro mängu: spritid ja animatsioonid loon GameMakeris, tilesetid aga Photoshopis.

Photoshop ($$$+)

Photoshop on kallis tarkvara, mida levitatakse tellimuse alusel ja mis ei sobi pikselkunsti jaoks. Ma ei soovita seda osta, kui te ei tegele kõrge eraldusvõimega joonistamisega või kui teil ei ole vaja teostada keerulisi manupulatsioone pildiga, nagu minul. Sellega on võimalik luua staatilisi sprite'e ja pikselitöid, kuid see on märkimisväärselt keerulisem võrreldes spetsialiseeritud tarkvaraga (näiteks GraphicsGale või Aseprite).

Muud

Minu pikselkunsti komplekt. Kõik musta, just nüüd märkasin.

Graafikapliiats ($$+)

Soovitan graafikapliiatseid igasugusteks digitaalsete joonistuste töödeks, et vältida randme tunnelisündroomi. Selle ennetamine on kordades lihtsam kui ravimine. Ükskord tunnete valu, ja see hakkab ainult süvenema - hoolitsege enda eest alguses. Kuna ma kunagi joonistasin hiirega, on mul nüüd raske mängida mänge, mis nõuavad klahvide vajutamist. Praegu kasutan Wacom Intuos Pro S.

Randme toestus ($)

Kui te ei saa osta tahvlit, ostke vähemalt randme toestus. Mulle meeldib kõige rohkem Mueller Green Fitted Wrist Brace. Teised on kas liiga pingul või pakuvad ebapiisavat tuge. Toestusi saab probleemideta veebist tellida.

96×96 pikslit

Final Fight. Capcom, 1989. aasta

Alustame! Hakkan looma 96×96 pikslise tegelase sprite'i. Näiteks joonistasin orki ja panin selle Final Fight'i ekraanipildile (üleval olev pilt), et mõistaksite mõõtkava. See on suur sprite enamikule retro-mängudest, ekraanipildi suurus: 384×224 pikslit.

Nii suurel sprite'il on lihtsam demonstreerida tehnikat, millest ma tahan rääkida. Samuti sarnaneb pikselipõhine joonistus rohkem traditsiooniliste kunsti vormidega (näiteks joonistamine või maalimine), millega olete võib-olla paremini tuttav. Põhitehnikate omandamisel liigume edasi väiksemate sprite'ide juurde.

1. Valime värvipaletti

Piksel on pikselkunstis palju sügavam mõiste kui igas teises digitaalses valdkonnas. Pikselkunsti määratlevad selle piirangud, näiteks värvid. On oluline õige palette valida, see aitab määratleda teie stiili. Kuid alguses soovitan mitte muretseda palette üle ja valida üks olemasolevatest (või lihtsalt mõned juhuslikud värvid) - saate seda igal etapil hõlpsasti muuta.

Selles õpetuses kasutan 32 värvi palet, mille me lõime UFO 50. Pikselkunstiks kogutakse neid sageli 32 või 16 värvist. Meie on loodud kujuteldavale konsoolile, mis võiks ilmuda kuskil Famicomi ja PC Engine'i vahel. Võite kasutada seda või mõnda muud — õpetus ei sõltu valitud paletist.

2. Joonte joonistamine

Alustame joonistamist pliiatsi tööriista abil. Joonistame sketši nii nagu teeme seda tavalise pliiatsi ja paberi abil. Loomulikult kattuvad pikselkunst ja traditsiooniline kunst, eriti kui rääkida suurematest sprite'idest. Minu tähelepanekud näitavad, et tugevad pikselkunstnikud joonistavad vähemalt üsna hästi käsitsi ja vastupidi. Seega on joonistamisoskuste arendamine alati kasulik.

3. Joonte täpsustamine

Täiendame jooni: eemaldame liigsed pikslid ja vähendame iga joone paksuse ühe pikslini. Aga mida täpselt pidada liigseks? Sellele küsimusele vastamiseks tuleb aru saada pikseljoontest ja ebaühtlustest.

Ebaühtlused

Tuleb õppida joonistama kahte põhilist joont pikselkunstis: sirgeid ja kõveraid. Pliiatsi ja paberi puhul kõik sõltub lihasjõust, kuid meie töötame pisikeste värviliste plokkidega.

Õige pikseljoone joonistamise võti on ebaühtlused. Need on üksikud pikslid või väikesed segmendid, mis rikuvad joone sujuvust. Nagu ma juba ütlesin, on eraldi piksel pikselkunstis tohutu tähtsusega, seega võivad ebaühtlused rikkuda kogu esteetika. Kujutage ette, et joonistate sirget joont paberile, ja ootamatult keegi lööb lauda: ebaühtlused pikselkunstis näevad välja nagu juhuslik kribale.

Näited:

Sirged

Kõverad

Ebaühtlused ilmuvad kõveratel, kui joone segmentide pikkus suureneb või väheneb järk-järgult.

Täielikult ebaühtlusi vältida ei saa — kõigis teie lemmik retro mängudes on need olemas (kui pikselkunst ei koosne ainult lihtsatest kujunditest). Eesmärk: vähendada ebaühtlusi miinimumini, näidates samas kõike vajalikku.

4. Rakendame esimesed värvid

Värvige oma tegelast täitmise või muu sobiva tööriista abil. Värvipalett lihtsustab seda osa tööst. Kui tarkvara ei toeta palettide kasutamist, võib selle otse pildile asetada, nagu eespool näidatud, ja valida värve pipeti abil.

Vasakus alanurgas olen joonistanud meie sõbra, tutvuge, see on - Šar. Temaga on lihtsam mõista, mis iga etapi käigus toimub.

5. Varjutamine

On aeg kujutada varju - lihtsalt lisame sprite'ile tumedamaid värve. Nii näeb pilt välja kolmemõõtmelisena. Oletame, et meil on üks valgusallikas, mis asub üle orkide veidi vasakul. Seega on valgustatud kõik, mis asub meie tegelase kohal ja ees. Lisame varjud alt paremale.

Kuju ja maht

Kui see etapp tekitab teile raskusi, kujutage oma joonist nagu ruumilisi vorme, mitte lihtsalt jooni ja värve. Vormid eksisteerivad kolmemõõtmelises ruumis ja võivad omada mahtu, mida me ehitame varjude abil. See aitab visualiseerida tegelast ilma detailideta ja kujutada, et see on valmistatud savist, mitte pikslitest. Varjutamine ei tähenda ainult uute värvide lisamist, see on vormi ehitamise protsess. Hästi tehtud tegelasel ei varja detailid põhivorme: kui sirutate silmad, näete mitmeid suuri valguse ja varju klastreid.

Sileda serv

Iga kord, kui kasutan uut värvi, rakendan siledat serva (AA). See aitab pehmendada piksleid, lisades vahepealseid värve kahe segmendi joone kokkupuutepunktidesse:

Hallid pikslid pehmendavad joone „katkestusi“. Mida pikem on line segment, seda pikem on AA-segment.

Nii näeb AA välja orki õlal. See on vajalik, et siluda lihaste painutusi kujutavad jooned.

Siledus ei tohi ulatuda sprite'ist välja, mida kasutatakse mängus või taustal, mille värv on teadmata. Näiteks, kui rakendate AA heledale taustale, siis tumedal taustal näeb pehmendus kohmakas välja.

6. Valikuline kontuur

Varem olid kontuurid täiesti mustad, mistõttu sprite nägi välja väga multšitud. Pilt oli justkui jagatud segmentideks. Näiteks mustad jooned käel tõstavad liiga kontrastselt lihaseid esile, muutes tegelase vähem terviklikuks.

Kui spritist saab loomulikum ja segmenteerimine pole enam nii selge, siis on tegelase põhivormid kergemini loetavad. Selleks võib kasutada valikulist kontuuri — osaliselt asendada must kontuur heledama tooniga. Valgustatud osa spritist võib kasutada kõige heledamaid värve või, seal kus sprit puudutab negatiivset ruumi, võib kontuuri täielikult eemaldada. Musta asemel tuleks kasutada värvi, mis on valitud varju jaoks — see säilitab segmenteerimise (lihaste, karvade jne eristamiseks).

Samuti lisasin sellel etapil tumedamad varjud. Saime kolme erineva rohelise tooni orkide nahale. Tumeroheline värv sobib valikuliseks kontuuriks ja AA-ks.

7. Lõplikud puudutused

Lõpuks tasub lisada sädelevaid kohti (kõige heledamad laigud spritil), detaile (kõrvarõngad, asjad, armid) ja muid täiustusi, kuni tegelane on valmis või kuni on aeg minna järgmisele.

On mõned kasulikud nipid, mida sellel etapil rakendada. Pöörake joonist horisontaalselt, see aitab sageli tuvastada proportsioonide ja varjutamise vigu. Samuti võite eemaldada värvi — seades küllastuse nulli, et mõista, kus varjudes tuleb muudatusi teha.

Müra loomine (dithering, diserimine)

Praegu oleme peamiselt kasutanud suuri, ühtseid varjukohte. Kuid on ka teine tehnika — diserimine, mis võimaldab ühel värvil üleminekuks teise värviga ilma kolmanda lisamiseta. Vaadake allolevat näidet.

Ülemine gradient tumedast heledani kasutab sadu erinevaid siniseid toone.

Keskmine gradient kasutab vaid üheksat värvi, kuid selles on endiselt liiga palju sama värvi toone. Tekib nn bänding (ingl. k. band — riba), kus paksud ühtlastest ribadest põhjustavad, et silmad fookustavad värvide kokkupuutepunkte, mitte värvidele endile.

Alumises gradientis kasutasime diserimist, mis aitab vältida bändingut ja kasutab vaid kahte värvi. Loome erineva intensiivsusega müra, et imiteerida värvide üleminekut. See tehnika on väga sarnane halftone'ile (halftone — pooltooniline pilt), mida kasutatakse trükises; samuti stipple'ing'ile (stippling — teraline pilt) — illustreerimises ja koomiksites.

Orki peal kasutasin diserimist tekstuuri edastamiseks üsna vähe. Mõned pikselikunstnikud ei kasuta seda üldse, teised aga ei pelga ja teevad seda väga osavalt. Minu arvates näeb diserimine kõige paremini välja suurtes ühes värvitoonis aladel (vaadake näiteks Metal Slugi ekraanipilti, mis oli üleval) või kohtades, mis peavad välja nägema kare ja ebatasane (nt muda). Otsustage ise, kuidas seda kasutada.

Kui soovite näha näidet ulatuslikust ja kvaliteetsest diserimisest, uurige The Bitmap Brothersi mänge, 80ndate aastate Briti stuudiot, või PC-98 arvutimänge. Olge ainult ettevaatlik, kõik need on NSFW.

Kakyusei (PC-98). Elf, 1996. aasta
Selles pildis on kokku vaid 16 värvi!

8. Viimane pilk

Üks pikselikunsti oht on see, et see tundub kerge ja lihtne (oma struktuuri ja stiili piirangute tõttu). Kuid lõpuks kulutate tohutult aega oma spritide viimistlemiseks. See on nagu mõistatus, mida tuleb lahendada – just seetõttu meelitab pikselikunst perfektsioniste. Pidage meeles, et üks sprit ei tohiks võtta liiga palju aega – see on vaid tilluke osa äärmiselt keerulisest tükkide kogumist. Oluline on mitte kaotada ülevaadet üldisest pildist.

I isegi kui teie pikselikunst ei ole mängudeks, mõnikord tasub endale öelda: „Kõik on juba piisavalt hea!“ Ja liikuda edasi. Parim viis oskuste arendamiseks on läbida kogu protsess algusest lõpuni nii palju kordi kui võimalik, kasutades võimalikult erinevaid teemasid.

Ja mõnikord on kasulik spriti natukeseks kõrvale panna, et hiljem värske pilguga sellele vaadata.

32×32 pikslit

Tegime suure spriti 96×96 pikslit esimesena, sest sellise suurusega sarnaneb see pigem joonistamisele või maalimisele, aga siiski ainult pikslitega. Mida väiksem on sprit, seda vähem sarnaneb see sellega, mida ta peaks kujutama, ja seda enam on iga piksel oluline.

Super Mario Brosis on Mario silm vaid kaks pikslit, mis on üksteise peale asetatud. Ja sama kehtib ka tema kõrvade kohta. Iseloomu looja Shigeru Miyamoto ütles, et vuntsid olid vajalikud, et eristada nina ülejäänud näost. Seega on üks Mario näo peamine joon mitte ainult tegelaskuju disain, vaid ka praktiline nipp. Mis kinnitab vana tarkust – "vajadus on leiutamise ema."

Peamised sammud 32×32 piksli sprite loomisel on meile juba tuttavad: joonistus, värv, varjud, edasine töötlus. Kuid sellistes tingimustes, algsena joonistamisel kasutan värvilisi kujundeid joonte asemel väikese suuruse tõttu. Värv mängib iseloomu määratlemisel olulisemat rolli kui kontuurid. Vaadake Mario't veel kord, tal pole üldse kontuure. Huvitavad pole ainult vurrud. Tema vuntsid määravad kõrvade kuju, varrukad näitavad käsi, ning üldine kuju peegeldab enam-vähem selgelt kogu tema keha.

Väikeste sprite'ide loomine tähendab pidevaid kompromisse. Kui lisate äärise, võite kaotada varju jaoks ruumi. Kui teie tegelasel on selgelt nähtavad käed ja jalad, peab pea tõenäoliselt olema mitte väga suur. Kui kasutada värvi, valikulisi ääriseid ja sujuvust tõhusalt, siis joonistatud objekt näib olevat suurem, kui ta tegelikult on.

Väikeste sprite'ide jaoks meeldib mulle chibi stiil: tegelased näevad väga armsad välja, neil on suured pead ja silmad. Suurepärane viis luua elav kangelane piiratud ruumis, ja üldiselt on see väga meeldiv stiil. Kuid võib-olla peate näitama karakteri liikuvust või jõudu, siis võite anda vähem ruumi pead, et keha näeks välja jõulisem. Kõik sõltub teie eelistustest ja eesmärkidest.

Kogu meeskond on koos!

Failivormingud

Selline tulemus võib iga pixeli-artistit närvi ajada

Pilt, mida näete, on tulemuseks joonistuse salvestamisest JPG formaadis. Osa andmeid kadus faili kokkusurutuse algoritmide tõttu. Kvaliteetne pixel-art näeb lõpuks välja halb, ja selle algse paleti tagasisaamine ei ole lihtne.

Kvaliteedi kaotamata staatilise pildi salvestamiseks kasutage PNG formaati. Animatsioonide jaoks — GIF.

Kuidas õigesti jagada pixel-art'i

Pixel-art'i jagamine sotsiaalmeedias on suurepärane viis tagasiside saamiseks ja tuttavaks saamiseks teiste samas stiilis kunstnikega. Ärge unustage lisada #pixelart sildit. Kahjuks konverteerivad sotsiaalmeedia sageli PNG formaadi JPG-daks ilma nõusolekuta, halvendades teie tööd. Samuti ei ole alati selge, miks teie pilt konverteeriti.

On mõned nõuanded, kuidas säilitada pixel-art'i vajaliku kvaliteediga erinevates sotsiaalmeedias.

Twitteris

Kuidas vältida PNG-faili muutumist Twitteris, kasutage vähem kui 256 värvi või veenduge, et teie fail oleks vähem kui 900 pikslit pikemas servas. Soovitaksin suurendada faili vähemalt 512×512 pikselini, nii et suurendamine oleks 100% mõõtmetega (200%, mitte 250%) ja servad jääksid teravad (Nearest Neighbor Photoshopis).

Animatsiooniga GIF-failid Twitteri postituste jaoks peate peavad olema alla 15 MB. Pilt peab olema vähemalt 800×800 pikslit, tsükliline animatsioon peab korduma kolm korda ning viimane kaader peab olema ajaliselt poolteist korda lühem kui kõik teised – see on kõige levinum teooria. Kuidas need nõuded täpselt paika panna, on aga arusaamatu, arvestades, et Twitter muudab pidevalt oma pildivaate algoritme.

Instagram

Nii palju kui ma tean, ei ole Instagramis pildi avaldamine kvaliteedi kaotamata võimalik. Kuid see näeb kindlasti parem välja, kui suurendate selle vähemalt 512x512 pikslini.

Allikas: habr.com