Indie-kehittäjien on usein yhdistettävä useita rooleja kerralla: pelisuunnittelija, ohjelmoija, säveltäjä, taiteilija. Ja mitä tulee visuaalisuuteen, monet ihmiset valitsevat pikselitaidetta - ensi silmäyksellä se näyttää yksinkertaiselta. Mutta tehdäksesi siitä kauniin, tarvitset paljon kokemusta ja tiettyjä taitoja. Löysin tutoriaalin niille, jotka ovat vasta alkaneet ymmärtää tämän tyylin perusteita: erikoisohjelmistojen ja piirustustekniikoiden kuvauksen kanssa esimerkkinä kahta spriteä.
tausta
Pikselitaide on digitaalisen taiteen muoto, jossa muutoksia tehdään pikselitasolla. Se liittyy enimmäkseen 80- ja 90-luvun videopeligrafiikkaan. Sitten taiteilijoiden oli otettava huomioon muistin rajoitukset ja alhainen resoluutio. Nyt pikselitaide on edelleen suosittu peleissä ja taidetyylinä yleensä, huolimatta mahdollisuudesta luoda realistista 3D-grafiikkaa. Miksi? Nostalgiaa lukuun ottamatta siistien tekojen luominen näin jäykissä puitteissa on mukava ja palkitseva haaste.
Pikselitaiteen markkinoille pääsyn este on suhteellisen matala verrattuna perinteiseen taiteeseen ja 3D-grafiikkaan, mikä houkuttelee indie-kehittäjiä. Mutta tämä ei tarkoita, että se olisi helppoa suorittaa loppuun peli tähän tyyliin. Olen nähnyt monia indie-kehittäjiä pikselitaiteen metroidvanioilla joukkorahoitusalustoilla. He luulivat saavansa kaiken valmiiksi vuodessa, mutta itse asiassa he tarvitsivat vielä kuusi vuotta.
Metal Slug 3 (Arcade). SNK, vuosi 2000
Pikselitaide sillä tasolla, jolla useimmat ihmiset haluavat luoda, vie aikaa, ja lyhyitä opetusohjelmia on vähän. Kun työskentelet 3D-mallin kanssa, voit kiertää sitä, muuttaa sitä, siirtää sen yksittäisiä osia, kopioida animaatioita mallista toiseen ja niin edelleen. Korkeatasoinen pikselitaide vaatii melkein aina paljon vaivaa pikselien sijoittamiseksi huolellisesti jokaiseen kehykseen.
Yleisesti ottaen varoitin.
Ja nyt vähän tyylistäni: piirrän pääasiassa videopeleihin pikselitaidetta ja löydän niistä inspiraatiota. Olen erityisesti Famicom/NES-, 16-bittisten konsolien ja 90-luvun arcade-pelien fani. Aikakauden suosikkipelieni pikselitaidetta voidaan kuvata kirkkaaksi, varmaksi ja puhtaaksi (mutta ei liian), se ei ole kovaa ja minimalistista. Työskentelen itse tällä tyylillä, mutta voit helposti soveltaa tämän opetusohjelman ideoita ja tekniikoita luomaan täysin erilaisia asioita. Tutustu eri taiteilijoiden töihin ja luo rakastamasi pikselitaide!
Ohjelmisto
Digitaaliset perustyökalut pikselitaidetta varten - Zoom (Zoom) ja Pencil (lyijykynä) pikselien sijoittamiseen. Tarvitset myös Viivan (Line), Figuurin (Muoto), Valitse (Valitse), Siirrä (Siirrä) ja Täytä (Paint Bucket). Tällaisilla työkaluilla on monia ilmaisia ja maksullisia ohjelmistoja. Puhun suosituimmista ja niistä, joita käytän itse.
Maalaus (ilmainen)
Jos sinulla on Windows, Paint on sisäänrakennettu siihen - primitiivinen ohjelma, mutta siinä on kaikki työkalut pikselitaidetta varten.
(on ilmainen)
Odottamattoman toimiva pikselitaideeditori, joka toimii selaimen kautta. Voit viedä työsi PNG- tai animoituun GIF-muotoon. Loistava vaihtoehto aloittelijoille.
(on ilmainen)
GraphicsGale on ainoa editori, jonka olen kuullut erityisesti pikselitaidetta varten ja joka sisältää animaatiotyökaluja. Sen on luonut japanilainen yritys HUMANBALANCE. Vuodesta 2017 lähtien sitä on jaettu ilmaiseksi ja se on edelleen kysytty Asepriten kasvavasta suosiosta huolimatta. Valitettavasti se toimii vain Windowsissa.
($)
Ehkä suosituin editori tällä hetkellä. , paljon ominaisuuksia, aktiivinen tuki, Windows-, Mac- ja Linux-versiot. Jos olet tosissasi pikselitaiteessa etkä vieläkään ole löytänyt oikeaa editoria, tämä saattaa olla sinulle sopiva.
($$+)
GameMaker Studio 2 on erinomainen 2D-työkalu, jossa on hyvä Sprite Editor. Jos haluat luoda pikselitaidetta omiin peleihin, on erittäin kätevää tehdä kaikki yhdessä ohjelmassa. Nyt käytän tätä ohjelmistoa työssäni , 50 retropelin kokoelma: Luon spritejä ja animaatioita GameMakerissa ja ruutusarjoja Photoshopissa.
($$$+)
Photoshop on kallis ohjelmisto, jota jaetaan tilauksella, eikä sitä ole suunniteltu pikselitaidetta varten. En suosittele tämän ostamista, ellet pidä korkearesoluutioisista kuvista tai sinun ei tarvitse tehdä monimutkaista kuvankäsittelyä kuten minä. Voit luoda siihen staattisia spritejä ja pikselitaidetta, mutta se on melko monimutkaista verrattuna erikoisohjelmistoihin (kuten GraphicsGale tai Aseprite).
Muut
Pikselitaidesarjani. Kaikki on mustaa, huomasin juuri.
Grafiikkatabletti ($$+)
Suosittelen grafiikkatauluja kaikkiin digitaalisiin kuvitustöihin rannekanavaoireyhtymän välttämiseksi. Se on paljon helpompi ehkäistä kuin parantaa. Eräänä päivänä tunnet kipua ja se vain pahenee - pidä huolta itsestäsi alusta alkaen. Koska piirsin aiemmin hiirellä, minulla on nyt vaikeuksia pelata pelejä, jotka edellyttävät näppäinten painamista. Käytän tällä hetkellä Wacom Intuos Pro S:tä.
Rannetuki ($)
Jos et saa tablettia, osta ainakin rannesatula. Suosikkini on Mueller Green Fitted Wrist Brace. Loput ovat joko liian tiukkoja tai ne eivät tarjoa riittävästi tukea. Satulan voi tilata verkosta ilman ongelmia.
96 × 96 pikseliä
viimeinen taistelu. Capcom, 1989
Aloitetaan! Aloitetaan 96x96 px -hahmospritillä. Esimerkkinä piirsin örkin ja asetin sen Final Fightin kuvakaappaukseen (kuva yllä), jotta saat mittakaavan. Tämä большой sprite useimpiin retropeleihin, kuvakaappauksen koko: 384×224 pikseliä.
Näin suurella spritillä on helpompi näyttää tekniikka, josta haluan puhua. Lisäksi pikseli pikseliltä renderöinti on enemmän kuin perinteisiä taiteen muotoja (kuten piirtäminen tai maalaus), jotka saattavat olla sinulle tutumpia. Perustekniikat hallittuamme siirrymme pienempiin spriteihin.
1. Valitse paletti
Pikseli on pikselitaiteessa paljon syvempi käsite kuin missään muussa digitaalisessa maailmassa. Pikselitaide määritellään sen rajoitusten, kuten värien, mukaan. On tärkeää valita oikea paletti, se auttaa määrittelemään tyylisi. Mutta aluksi suosittelen, että älä ajattele paletteja ja valitse yksi olemassa olevista (tai vain muutama satunnainen väri) - voit helposti muuttaa sitä missä tahansa vaiheessa.
Tässä opetusohjelmassa käytän 32 väripalettia, jota varten loimme . Pikselitaidetta varten ne kootaan usein 32 tai 16 väristä. Meidän konsolimme on suunniteltu kuvitteelliselle konsolille, joka voi esiintyä jossain Famicomin ja PC Enginen välissä. Voit ottaa sen tai minkä tahansa muun - opetusohjelma ei riipu ollenkaan valitusta paletista.
2. Karkeat ääriviivat
Aloitetaan piirtäminen kynätyökalulla. Piirretään luonnos samalla tavalla kuin tavallisella kynällä ja paperilla. Tietenkin pikselitaide ja perinteinen taide menevät päällekkäin, varsinkin kun kyse on niin suurista spriteistä. Havaintoni osoittavat, että vahvat pikselitaiteilijat ovat ainakin hyviä vapaakäsin piirtämiseen ja päinvastoin. Piirustustaitojen kehittäminen on siis aina hyödyllistä.
3. Muotoilu
Viimeistelemme ääriviivat: poista ylimääräiset pikselit ja pienennä jokaisen viivan paksuus yhteen pikseliin. Mutta mikä on ylimääräistä? Jotta voit vastata tähän kysymykseen, sinun on ymmärrettävä pikseliviivat ja kuoppia.
kuoppia
Sinun on opittava piirtämään kaksi pikselitaiteen perusviivaa: suoria viivoja ja käyriä. Kynällä ja paperilla on kyse lihasten hallinnasta, mutta työskentelemme pienten väripalojen kanssa.
Avain oikeiden pikseliviivojen piirtämiseen on karheus. Nämä ovat yksittäisiä pikseleitä tai pieniä segmenttejä, jotka tuhoavat viivan tasaisuuden. Kuten aiemmin sanoin, yksi pikseli on pikselitaiteessa erittäin tärkeä, joten epätasaisuus voi pilata koko estetiikan. Kuvittele, että piirrät suoraa viivaa paperille ja yhtäkkiä joku iskee pöytään: pikselitaiteen kohoumat näyttävät aivan satunnaiselta kiemurtelulta.
Esimerkkejä:
Suora
Käyrät
Kaareissa esiintyy rosoisuutta, kun janaosien pituus ei kasva tai pienene asteittain.
On mahdotonta välttää töyssyjä kokonaan – kaikissa suosikkiretropeleissäsi on niitä (ellei tietenkään pikselitaide koostu kokonaan yksinkertaisista muodoista). Tarkoitus: minimoida epäsäännöllisyydet ja näyttää kaikki mitä tarvitset.
4. Ensimmäisten värien levittäminen
Väritä hahmosi täytteellä tai muulla sopivalla työkalulla. Paletti yksinkertaistaa tätä työn osaa. Jos ohjelmisto ei mahdollista palettien käyttöä, voit laittaa sen suoraan kuvaan, kuten yllä olevassa esimerkissä, ja valita värit pipetillä.
Vasempaan alakulmaan piirsin ystävämme, tutustu, tämä on Shar. Sen avulla on helpompi ymmärtää, mitä kussakin vaiheessa tarkalleen tapahtuu.
5. Varjostus
On aika renderöidä varjot - lisää vain tummempia värejä spriteen. Joten kuva näyttää kolmiulotteiselta. Oletetaan, että meillä on yksi valonlähde, joka sijaitsee orkin yläpuolella sen vasemmalla puolella. Tämä tarkoittaa, että kaikki, mikä on hahmomme yläpuolella ja edessä, valaistuu. Lisää varjoja oikeaan alakulmaan.
Lomake ja tilavuus
Jos tämä vaihe on sinulle vaikea, kuvittele piirustuksesi kolmiulotteisina muotoina, ei vain viivoina ja väreinä. Muodot ovat olemassa XNUMXD-avaruudessa ja niillä voi olla tilavuutta, jonka rakennamme varjoilla. Tämä auttaa visualisoimaan hahmon ilman yksityiskohtia ja saamaan sen näyttämään savesta pikseleiden sijaan. Varjostaminen ei ole vain uusien värien lisäämistä, vaan muodon rakentamista. Hyvin yksityiskohtaisen hahmon kohdalla yksityiskohdat eivät peitä perusmuotoja: jos siristelet, näet useita suuria valo- ja varjoryhmiä.
Tasoitus (antialiasing, anti-aliasing)
Aina kun käytän uutta väriä, käytän anti-aliasingia (AA). Se auttaa tasoittamaan pikseleitä lisäämällä välivärejä kulmiin, joissa kaksi viivasegmenttiä kohtaavat:
Harmaat pikselit pehmentävät linjan "katkoja". Mitä pidempi jana, sitä pidempi AA-segmentti.
Tältä AA näyttää örkin olkapäällä. Sitä tarvitaan tasoittamaan viivoja, jotka edustavat hänen lihasten käyrää.
Anti-aliasing ei saa ylittää pelissä käytettävää spritea tai taustaa, jonka väriä ei tunneta. Jos esimerkiksi käytät AA:ta vaalealle taustalle, anti-aliasointi näyttää rumalta tummalla taustalla.
6. Valikoiva ääriviiva
Aiemmin ääriviivat olivat täysin mustia, mikä sai spritesta näyttämään erittäin sarjakuvamaiselta. Kuva näytti olevan jaettu osiin. Esimerkiksi käsivarren mustat viivat osoittavat lihaksistoa liian kontrastisesti, ja hahmo näyttää vähemmän kiinteältä.
Jos sprite muuttuu luonnollisemmaksi ja segmentointi ei ole niin ilmeinen, hahmon perusmuodot ovat helpompia lukea. Voit tehdä tämän käyttämällä valikoivaa ääriviivaa - korvaa musta ääriviiva osittain vaaleammalla. Spraten valaistussa osassa voit käyttää vaaleimpia värejä, tai jos sprite koskettaa negatiivista tilaa, voit poistaa ääriviivat kokonaan. Mustan sijaan sinun on käytettävä varjolle valittua väriä - näin segmentointi säilyy (lihasten, turkisten ja niin edelleen erottamiseksi).
Myös tässä vaiheessa lisäsin tummempia varjoja. Orkin ihosta tuli kolme vihreää sävyä. Tummin vihreää väriä voidaan käyttää valikoivassa ääriviivassa ja AA:ssa.
7. Viimeistely
Lopuksi kannattaa lisätä kohokohtia (spriten vaaleimmat kohdat), yksityiskohtia (korvakorut, nastat, arvet) ja muita parannuksia, kunnes hahmo on valmis tai kunnes joutuu siirtymään seuraavaan.
Tässä vaiheessa voidaan käyttää useita hyödyllisiä temppuja. Pyöritä piirrosta vaakasuunnassa, tämä auttaa usein paljastamaan mittasuhteissa ja varjostuksessa olevat virheet. Voit myös poistaa värin - asettamalla kylläisyyden nollaan ymmärtääksesi, missä varjot on vaihdettava.
Melun luominen (häiritseminen, häivytys)
Toistaiseksi olemme käyttäneet enimmäkseen suuria, kiinteitä varjopaikkoja. Mutta on myös toinen tekniikka - väritys, jonka avulla voit siirtyä yhdestä väristä toiseen lisäämättä kolmatta. Katso alla olevaa esimerkkiä.
Ylhäällä tummasta vaaleaan gradientti käyttää satoja eri sinisen sävyjä.
Keskimmäinen gradientti käyttää vain yhdeksää väriä, mutta siinä on silti liian monta saman värin sävyä. On olemassa ns. banding (englanninkielisestä bändistä - nauha), jossa paksujen yhtenäisten raitojen vuoksi silmä keskittyy värien kosketuspisteisiin itse värien sijaan.
Pohjagradienttiin levitimme värjäystä, joka välttää raidoitusta ja käyttää vain kahta väriä. Luomme vaihtelevan voimakkuuden kohinaa värisävyjen simuloimiseksi. Tämä tekniikka on hyvin samanlainen kuin painatuksessa käytettävä rasteri; sekä stippling (stippling - rakeinen kuva) - kuvissa ja sarjakuvissa.
Orkissa värähtelin melko vähän tekstuurin välittämiseksi. Jotkut pikselitaiteilijat eivät käytä sitä ollenkaan, kun taas toiset eivät ole ujoja ja tekevät sen erittäin taitavasti. Minusta värjäytyminen näyttää parhaiten suurilla alueilla, jotka on täytetty yhdellä värillä (katso taivasta yllä olevassa Metal Slug -kuvakaappauksessa) tai alueilla, joiden pitäisi näyttää karkealta ja epätasaiselta (kuten lika). Päätä itse, kuinka käytät sitä.
Jos haluat nähdä esimerkin laajamittaisesta ja laadukkaasta värityksestä, katso 80-luvun brittiläisen studion The Bitmap Brothersin pelejä tai PC-98-tietokoneen pelejä. Muista vain, että ne ovat kaikki NSFW.
Kakyusei (PC-98). Tonttu, 1996
Tässä kuvassa on vain 16 väriä!
8. Viimeinen katse
Yksi pikselitaiteen vaaroista on, että se näyttää kevyeltä ja yksinkertaiselta (rakenteen ja tyylirajoitustensa vuoksi). Mutta loppujen lopuksi käytät valtavan määrän aikaa spriteidesi hienosäätöön. Se on kuin palapeli, joka on ratkaistava, ja siksi pikselitaide vetoaa perfektionisteihin. Muista, että yksi sprite ei saa kestää liian kauan - se on vain pieni pala erittäin monimutkaista kappalekokoelmaa. On tärkeää olla unohtamatta isoa kuvaa.
Vaikka pikselitaitosi ei olisikaan pelaamista varten, joskus kannattaa sanoa itsellesi: "Se on jo tarpeeksi hyvä!" Ja eteenpäin. Paras tapa kehittää taitoja on käydä läpi koko prosessi alusta loppuun mahdollisimman monta kertaa käyttäen mahdollisimman monta aihetta.
Ja joskus on hyödyllistä jättää sprite hetkeksi, jotta voit katsoa sitä tuorein silmin vähän myöhemmin.
32×32 pikseliä
Loimme ensin suuren 96x96 pikselin spriten, koska siinä koossa se on enemmän kuin piirtämistä tai maalaamista, mutta pikselöityä. Mitä pienempi sprite, sitä vähemmän se näyttää siltä, mitä sen pitäisi näyttää, ja sitä tärkeämpi jokainen pikseli on.
Pelissä Super Mario Bros. Marion silmässä on vain kaksi pikseliä päällekkäin. Ja myös hänen korvansa. Hahmon luoja Shigeru Miyamoto sanoi, että viikset tarvittiin erottamaan nenä muusta kasvoista. Joten yksi Marion kasvojen pääpiirteistä ei ole vain hahmosuunnittelu, vaan myös pragmaattinen temppu. Mikä vahvistaa vanhan viisauden - "tarve on kekseliäisyyden äiti".
Tunnemme jo 32 × 32 pikselin spriten luomisen päävaiheet: luonnos, väri, varjot, jatkojalostus. Mutta tällaisissa olosuhteissa poimin alustavana luonnoksena värillisiä muotoja ääriviivojen piirtämisen sijaan pienen koon vuoksi. Värillä on tärkeämpi rooli hahmon määrittelyssä kuin ääriviivoilla. Katso Marioa uudelleen, hänellä ei ole lainkaan muotoja. Ei vain viikset ole mielenkiintoisia. Hänen sideburns määrittää hänen korvien muodon, hihat osoittavat hänen käsivartensa ja yleinen muoto heijastaa enemmän tai vähemmän selvästi hänen koko vartaloaan.
Pienten spritien luominen on jatkuvaa kompromissia. Jos lisäät vedon, saatat menettää tilaa varjolle. Jos hahmollasi on selkeästi määritellyt kädet ja jalat, pää ei todennäköisesti ole kovin suuri. Värien, valikoivan vedon ja anti-aliasoinnin tehokas käyttö saa renderöidyn objektin näyttämään suuremmalta kuin se todellisuudessa on.
Pienille spriteille pidän chibi-tyylistä: hahmot näyttävät erittäin söpöiltä, heillä on suuret päät ja silmät. Loistava tapa luoda kirkas hahmo rajoitettuun tilaan ja yleensä erittäin miellyttävä tyyli. Mutta ehkä sinun täytyy näyttää hahmon liikkuvuus tai vahvuus, niin voit antaa päälle vähemmän tilaa saadaksesi kehon näyttämään voimakkaammalta. Kaikki riippuu mieltymyksistäsi ja tavoitteistasi.
Koko tiimi on täällä!
Tiedostomuodot
Tällainen tulos voi saada minkä tahansa pikselitaiteilijan hermostuneeksi
Näkymäsi kuva on tulosta kuvan tallentamisesta JPG-muodossa. Osa tiedoista katosi tiedostojen pakkausalgoritmien vuoksi. Laadukas pikselitaide näyttää lopulta huonolta, eikä sen palauttaminen alkuperäiseen palettiin ole helppoa.
Jos haluat tallentaa staattisen kuvan laadun heikkenemättä, käytä PNG-muotoa. Animaatioille - GIF.
Kuinka jakaa pikselitaidetta oikealla tavalla
Pikselitaiteen jakaminen sosiaalisessa mediassa on loistava tapa saada palautetta ja tavata muita samalla tyylillä työskenteleviä taiteilijoita. Muista käyttää hashtagia #pixelart. Valitettavasti sosiaaliset verkostot muuntavat usein PNG:n JPG:ksi kysymättä, mikä huonontaa työtäsi. Eikä aina ole selvää, miksi kuvasi muunnettiin.
On joitain vinkkejä pikselitaiteen tallentamiseen oikealla laadulla erilaisiin sosiaalisiin verkostoihin.
Jos haluat pitää PNG-tiedoston muuttumattomana Twitterissä, käytä alle 256 väriä tai että tiedostosi on alle 900 pikseliä pitkä. Lisään tiedoston koon vähintään 512x512 pikseliin. Ja niin, että skaalaus on 100:n kerrannainen (200%, ei 250%) ja terävät reunat säilyvät (Photoshopin lähin naapuri).
Animoidut GIF-kuvat Twitter-viesteille painaa enintään 15 MB. Kuvan tulee olla vähintään 800x800 pikseliä, silmukkaanimaatio on toistettava kolme kertaa ja viimeisen ruudun tulee olla puolet kaikista muista - suosituin teoria. Ei kuitenkaan ole selvää, missä määrin nämä vaatimukset tulisi täyttää, koska Twitter muuttaa jatkuvasti kuvan näyttöalgoritmejaan.
Sikäli kuin tiedän, Instagramiin ei ole mahdollista lähettää kuvaa ilman laadun heikkenemistä. Mutta se näyttää varmasti paremmalta, jos suurennat sen vähintään 512x512 pikseliksi.
Lähde: will.com