Az indie fejlesztőknek gyakran egyszerre több szerepet kell kombinálniuk: játéktervező, programozó, zeneszerző, művész. Ami pedig a látványt illeti, sokan a pixel art-ot választják – első pillantásra egyszerűnek tűnik. De ahhoz, hogy szép legyen, sok tapasztalatra és bizonyos készségekre van szüksége. Találtam egy oktatóanyagot azoknak, akik most kezdték megérteni ennek a stílusnak az alapjait: speciális szoftverek és rajztechnikák leírásával, példaként két sprite használatával.
háttér
A pixel art a digitális művészet egyik formája, amelyben a változtatások pixel szinten történnek. Főleg a 80-as és 90-es évek videojáték-grafikájához köthető. Akkoriban a művészeknek figyelembe kellett venniük a memória korlátait és az alacsony felbontást. Napjainkban a pixel art még mindig népszerű a játékokban és általában művészeti stílusként, annak ellenére, hogy képes valósághű 3D-s grafikát készíteni. Miért? A nosztalgiát leszámítva, ilyen szűk keretek között menő munkát készíteni élvezetes és hálás kihívás.
A pixel művészetbe való belépés akadálya viszonylag alacsony a hagyományos művészethez és a 3D grafikához képest, ami vonzza az indie fejlesztőket. De ez nem jelenti azt, hogy könnyű lesz Befejez játék ebben a stílusban. Sok független fejlesztőt láttam pixel art metroidvaniákkal közösségi finanszírozási platformokon. Azt hitték, egy év alatt mindent befejeznek, de a valóságban még hat évre volt szükségük.
Metal Slug 3 (Arcade). SNK, 2000
A pixelművészet azon a szinten, amelyen a legtöbben meg akarják készíteni, sok időt vesz igénybe, és nagyon kevés rövid oktatóanyag van. Amikor 3D modellel dolgozik, elforgathatja, deformálhatja, mozgathatja az egyes részeit, animációkat másolhat egyik modellről a másikra stb. A magas szintű pixelművészet szinte mindig sok erőfeszítést igényel a képpontok aprólékos elhelyezése az egyes képkockákon.
Általában figyelmeztettelek.
És most egy kicsit a stílusomról: főleg videojátékokhoz rajzolok pixel art-ot, és ihletet merítek bennük. Különösen a Famicom/NES, a 16 bites konzolok és a 90-es évekbeli arcade játékok rajongója vagyok. A korszak kedvenc játékaim pixelművészetét inkább fényesnek, magabiztosnak és letisztultnak (de nem túl letisztultnak) lehet leírni, semmint élesnek és minimalistanak. Ez az a stílus, amiben magam dolgozom, de az oktatóanyag ötleteit és technikáit könnyedén alkalmazhatod egészen más dolgok létrehozásához. Fedezze fel a különböző művészek munkáit, és hozzon létre pixelművészetet, amely tetszik!
lágy
A pixelművészet alapvető digitális eszközei a zoom és a ceruza a pixelek elhelyezéséhez. Hasznosnak találja a Vonal, Alakzat, Kijelölés, Mozgatás és Festési vödröt is. Számos ingyenes és fizetős szoftver létezik ilyen eszközkészlettel. Mesélek a legnépszerűbbekről és azokról, amelyeket magam is használok.
Festék (ingyenes)
Ha Windows operációs rendszered van, a beépített Paint egy primitív program, de minden eszközzel rendelkezik a pixel arthoz.
(ingyenes)
Egy váratlanul működő pixel art szerkesztő, amely a böngészőn keresztül fut. Munkáját PNG vagy animált GIF formátumban exportálhatja. Kiváló lehetőség kezdőknek.
(ingyenes)
A GraphicsGale az egyetlen olyan szerkesztő, amelyről hallottam, és amely kifejezetten pixel arthoz készült, és animációs eszközöket is tartalmaz. A japán HUMANBALANCE cég készítette. 2017 óta ingyenesen elérhető, és az Aseprite népszerűségének növekedése ellenére továbbra is keresett. Sajnos csak Windowson működik.
($)
Jelenleg talán a legnépszerűbb szerkesztő. , sok funkció, aktív támogatás, Windows, Mac és Linux verziók. Ha komolyan gondolja a pixelművészetet, és még mindig nem találta meg a megfelelő szerkesztőt, akkor erre lehet szüksége.
($$+)
A GameMaker Studio 2 egy kiváló 2D eszköz egy jó Sprite szerkesztővel. Ha saját játékaihoz szeretne pixel art-ot készíteni, akkor nagyon kényelmes, ha mindent egy programban csinál. Most ezt a szoftvert használom munka közben , 50 retro játékból álló gyűjtemény: GameMakerben sprite-okat és animációkat, Photoshopban pedig csempekészleteket készítek.
($$$+)
A Photoshop drága szoftver, amelyet előfizetéssel terjesztenek, és nem pixel-művészetre tervezték. Nem javaslom a megvásárlását, hacsak nem foglalkozik nagy felbontású illusztrációk renderelésével, vagy nem kell bonyolult manipulációkat végeznie a képpel, mint én. Létrehozhatunk benne statikus sprite-okat és pixel art-ot, de a speciális szoftverekhez (például GraphicsGale vagy Aseprite) képest meglehetősen bonyolult.
Más
A pixel art készletem. Minden fekete, csak most vettem észre.
Grafikus tábla ($$+)
Grafikus táblákat ajánlok bármilyen digitális illusztrációs munkához, hogy elkerüljük a kéztőalagút szindrómát. Sokkal könnyebb megelőzni, mint gyógyítani. Egy napon fájdalmat fogsz érezni, és ez csak fokozódni fog - vigyázz magadra a kezdetektől fogva. Mivel korábban egérrel rajzoltam, most már nehezen tudok olyan játékkal játszani, amihez meg kell nyomnom a billentyűket. Jelenleg Wacom Intuos Pro S-t használok.
Csuklótámasz ($)
Ha nem tud tabletet szerezni, legalább egy csuklótámaszt. A kedvencem a Mueller Green Fitted Wrist Brace. A többi vagy túl szoros, vagy nem nyújt kellő támogatást. A féknyergek gond nélkül rendelhetők online.
96 × 96 képpont
Végső küzdelem. Capcom, 1989
Kezdjük el! Kezdjük egy 96x96 pixeles karakterjellel. Példaként rajzoltam egy orkot, és elhelyeztem a Final Fight képernyőképére (fenti kép), hogy megértsd a léptéket. Ez nagy sprite a legtöbb retro játékhoz, képernyőkép mérete: 384x224 pixel.
Egy ekkora sprite-on könnyebb lesz bemutatni azt a technikát, amelyről beszélni szeretnék. A pixelenkénti megjelenítés is jobban hasonlít a hagyományos művészeti formákhoz (például a rajzhoz vagy a festéshez), amelyeket talán jobban ismer. Az alapvető technikák elsajátítása után áttérünk a kisebb sprite-okra.
1. Válasszon egy palettát
A pixel sokkal mélyebb fogalom a pixelművészetben, mint bármely más digitális területen. A pixelművészetet a korlátai határozzák meg, például a színek. Fontos a megfelelő paletta kiválasztása, ez segít meghatározni a stílusát. Kezdetben azonban azt javaslom, hogy ne gondoljon a palettákra, és válasszon egyet a meglévők közül (vagy csak néhány véletlenszerű színt) - bármikor könnyedén megváltoztathatja.
Ehhez az oktatóanyaghoz az általunk készített 32 színpalettát fogom használni . A pixel művészethez gyakran 32 vagy 16 színből állítják össze. A miénket egy kitalált konzolhoz tervezték, amely valahol a Famicom és a PC Engine között jelenik meg. Elviheti vagy bármely más - a bemutató egyáltalán nem függ a kiválasztott palettától.
2. Durva körvonalak
Kezdjük a rajzolást a Ceruza eszközzel. Rajzoljunk vázlatot ugyanúgy, mint egy normál tollal és papírral. Természetesen a pixel art és a hagyományos művészet átfedi egymást, különösen, ha ilyen nagy sprite-okról van szó. Megfigyeléseim azt mutatják, hogy az erős pixel art művészek legalább jól tudnak kézzel rajzolni és fordítva. Így rajzkészséged fejlesztése mindig hasznos.
3. Kontúrok kidolgozása
Finomítjuk a kontúrokat: távolítsuk el a felesleges képpontokat, és csökkentsük az egyes vonalak vastagságát egy pixelre. De mit is tartanak valójában feleslegesnek? A kérdés megválaszolásához meg kell értened a pixelvonalakat és szabálytalanságokat.
Szabálytalanságok
Meg kell tanulnia két alapvető vonalat rajzolni a pixelművészetben: egyenes és ívelt. A tollal és a papírral minden az izomszabályozásról szól, de mi apró színtömbökkel dolgozunk.
A helyes pixelvonalak rajzolásának kulcsa a szaggatottság. Ezek egyedi pixelek vagy kis szegmensek, amelyek tönkreteszik a vonal simaságát. Ahogy korábban mondtam, egyetlen pixel óriási különbséget jelent a pixelművészetben, így az egyenetlenségek tönkretehetik az egész esztétikát. Képzeld el, hogy egyenes vonalat rajzolsz a papírra, és hirtelen valaki nekiütközik az asztalnak: a pixelművészet egyenetlenségei úgy néznek ki, mint egy véletlenszerű kancsalság.
Példák:
Közvetlen
Görbék
A görbékben szabálytalanságok jelennek meg, ha a vonalszakaszok hossza nem növekszik, vagy fokozatosan csökken.
Lehetetlen teljesen elkerülni az ütéseket – minden kedvenc retro játékodban megtalálhatóak (kivéve persze, ha a pixelművészet kizárólag egyszerű formákból áll). Cél: Minimálisra csökkentse az egyenetlenségeket, miközben minden szükséges dolgot megmutat.
4. Alkalmazza az első színeket
Színezd ki karakteredet kitöltéssel vagy más alkalmas eszközzel. A paletta leegyszerűsíti a munka ezen részét. Ha a szoftver nem rendelkezik paletták használatáról, akkor a fenti példához hasonlóan közvetlenül a képbe helyezheti, és egy szemcseppentővel kiválaszthatja a színeket.
A bal alsó sarokban lerajzoltam a barátunkat, ismerkedj meg, ez itt Ball. Ez megkönnyíti annak megértését, hogy pontosan mi történik az egyes szakaszokban.
5. Árnyékolás
Ideje megjeleníteni az árnyékokat – csak adjon sötétebb színeket a sprite-hoz. Így a kép háromdimenziós lesz. Tegyük fel, hogy van egy fényforrásunk az ork felett, attól balra. Ez azt jelenti, hogy minden, ami a karakterünk felett és előtt van, meg lesz világítva. Adjon hozzá árnyékokat a jobb alsó sarokhoz.
Form és térfogat
Ha ez a lépés kihívást jelent számodra, gondolj a rajzodra háromdimenziós formákra, ne csak vonalakra és színekre. Az alakzatok háromdimenziós térben léteznek és térfogatuk is lehet, amit árnyékok segítségével építünk fel. Ez segít elképzelni a karaktert részletek nélkül, és elképzelni, hogy agyagból van, és nem pixelből. Az árnyékolás nem csak új színek hozzáadását jelenti, hanem egy forma felépítésének folyamatát. Egy jól megtervezett karakteren a részletek nem rejtik el a mögöttes formákat: ha hunyorogunk, nagy fény- és árnyékhalmazokat láthatunk.
Élsimítás (anti-aliasing)
Minden alkalommal, amikor új színt használok, élsimítást (AA) alkalmazok. Segít kisimítani a képpontokat azáltal, hogy közbenső színeket ad a sarkokhoz, ahol két vonalszakasz találkozik:
A szürke képpontok lágyítják a vonal „töréseit”. Minél hosszabb a vonalszakasz, annál hosszabb az AA szakasz.
Így néz ki az AA egy ork vállán. Az izomgörbét mutató vonalak kisimításához szükséges
Az élsimítás nem terjedhet túl a játékban használt sprite-on vagy olyan háttéren, amelynek színe ismeretlen. Például, ha világos háttérre alkalmazza az AA-t, az élsimítás csúnyán fog kinézni sötét háttéren.
6. Szelektív vázlat
Korábban a körvonalak teljesen feketék voltak, amitől a sprite nagyon rajzfilmszerűnek tűnt. A kép mintha szegmensekre oszlott volna. Például a fekete vonalak a karon túl nagy kontrasztot adnak az izomzathoz, így a karakter kevésbé tűnik összetartónak.
Ha a sprite természetesebbé válik, és a tagoltság kevésbé nyilvánvaló, a karakter alapformái könnyebben olvashatók. Ehhez használhat szelektív körvonalat - részben cserélje ki a fekete körvonalat világosabbra. A sprite megvilágított részén használhatja a legvilágosabb színeket, vagy ahol a sprite negatív teret érint, teljesen eltávolíthatja a körvonalat. A fekete helyett az árnyékhoz kiválasztott színt kell használni - így a szegmentáció megmarad (az izmok, a szőrzet és így tovább megkülönböztetéséhez).
Ebben a szakaszban sötétebb árnyékokat is tettem hozzá. Az eredmény három zöld színárnyalat volt az ork bőrén. A legsötétebb zöld szín használható szelektív körvonalakhoz és AA-hoz.
7. Utolsó simítások
Végül érdemes kiemeléseket (a sprite legvilágosabb pontjait), részleteket (fülbevalók, szegecsek, hegek) és egyéb fejlesztéseket hozzáadni, amíg a karakter készen nem áll, vagy tovább kell lépnie a következőre.
Számos hasznos technika alkalmazható ebben a szakaszban. Forgassa el a rajzot vízszintesen, ez gyakran segít az arányok és az árnyékolási hibák azonosításában. El is távolíthatja a színt - állítsa a telítettséget nullára, hogy megértse, hol kell változtatni az árnyékokat.
Zaj keltése (dithering, dithering)
Eddig többnyire nagy, tömör árnyékterületeket használtunk. De van egy másik technika - a dithering, amely lehetővé teszi, hogy egyik színről a másikra váltson anélkül, hogy hozzáadna egy harmadikat. Nézze meg az alábbi példát.
A felső sötét-világos színátmenet a kék több száz különböző árnyalatát használja.
Az átlagos színátmenet csak kilenc színt használ, de még mindig túl sok árnyalat van ugyanannak a színnek. Egy úgynevezett sávozás keletkezik (az angol band - stripe szóból), amelyben a vastag egységes csíkok miatt a szem a színek érintkezési pontjaira fókuszál, nem pedig magukra a színekre.
Az alsó színátmeneten ditheringet alkalmaztunk, ami elkerüli a sávosodást és csak két színt használ. Változó intenzitású zajt hozunk létre, hogy szimuláljuk a színátmenetet. Ez a technika nagyon hasonlít a nyomtatásban használt féltónushoz (féltónusú képhez); valamint stippling (szemcsés kép) - illusztrációkban és képregényekben.
Az orkon egy kicsit elkalandoztam, hogy átadjam a textúrát. Egyes pixelművészek egyáltalán nem használják, mások éppen ellenkezőleg, nem félnek, és nagyon ügyesen csinálják. Úgy gondolom, hogy a dither a legjobban nagy, egyetlen színnel kitöltött területeken mutat (nézze meg az eget a fenti Metal Slug képernyőképen), vagy olyan területeken, amelyeknek durvának és egyenetlennek kell kinézniük (például kosz). Döntse el maga, hogyan használja.
Ha szeretne példát látni a nagyszabású és jó minőségű ditheringre, nézze meg a 80-as évek brit stúdiója, a The Bitmap Brothers játékait, vagy a PC-98 számítógép játékait. Ne feledje, hogy mindegyik NSFW.
Kakyusei (PC-98). Elf, 1996
Ezen a képen csak 16 szín található!
8. Utolsó pillantás
A pixel art egyik veszélye, hogy könnyűnek és egyszerűnek tűnik (a szerkezeti és stílusbeli korlátai miatt). De végül rengeteg időt fog tölteni a sprite finomításával. Olyan ez, mint egy rejtvény, amit meg kell oldani – ezért vonzza a pixel art a perfekcionistákat. Ne feledje, hogy egy sprite nem vesz el túl sok időt – ez csak egy apró darabja egy rendkívül összetett darabgyűjteménynek. Fontos, hogy ne veszítsük szem elől az összképet.
Még ha a pixelművészete nem is játékra való, néha érdemes azt mondani magának: "Ez már elég jó!" És lépj tovább. A képességek fejlesztésének legjobb módja, ha a lehető legtöbb témát felhasználva, az elejétől a végéig végigmegy a teljes folyamaton.
És néha hasznos egy időre otthagyni egy sprite-ot, hogy egy kicsit később friss szemmel nézhesd.
32×32 pixel
Először egy nagy, 96x96 pixeles sprite-ot hoztunk létre, mert ekkora méretben inkább rajzolni vagy festeni, de pixelekkel. Minél kisebb a sprite, annál kevésbé hasonlít ahhoz, amit meg kell jelenítenie, és annál fontosabbak az egyes pixelek.
A Super Mario Bros. Mario szeme mindössze két képpontból áll, egyik a másikon. És a füle is. A karakter alkotója, Shigeru Miyamoto azt mondta, hogy a bajuszra azért volt szükség, hogy elválassza az orrát az arc többi részétől. A Mario egyik fő jellemzője tehát nem csak a karaktertervezés, hanem egy pragmatikus trükk. Ami megerősíti a régi bölcsességet – „a szükség a találmány anyja”.
A 32x32 pixeles sprite létrehozásának fő szakaszai már ismerősek számunkra: vázlat, szín, árnyékok, további finomítás. De ilyen körülmények között kezdeti vázlatként a kis méret miatt körvonalrajzolás helyett színes formákat választok. A szín fontosabb szerepet játszik a karakter meghatározásában, mint a körvonal. Nézd meg újra Mariót, egyáltalán nincsenek körvonalai. Nem csak a bajusz az érdekes. Pajeszkája meghatározza füle alakját, ujja a karját, általános alakja pedig többé-kevésbé tisztán mutatja az egész testét.
A kis sprite-ok létrehozása állandó kompromisszum. Ha hozzáad egy körvonalat, elveszítheti a helyet az árnyék számára. Ha a karakterednek jól látható karjai és lábai vannak, a fej valószínűleg nem lehet túl nagy. Ha hatékonyan használja a színeket, a szelektív körvonalakat és az élsimítást, a renderelt objektum nagyobbnak tűnik, mint amilyen valójában.
A kis sprite-ok számára a chibi stílust szeretem: nagyon aranyosak a karakterek, nagy fejük és szemük van. Nagyszerű módja annak, hogy korlátozott helyen színes karaktereket alkoss, és összességében nagyon szép stílust. De talán meg kell mutatnia egy karakter mozgékonyságát vagy erejét, akkor kevesebb teret engedhet a fejnek, hogy a test erősebbnek tűnjön. Minden az Ön preferenciáitól és céljaitól függ.
Összeállt az egész csapat!
Fájlformátumok
Ez az eredmény minden pixelművészt idegessé tehet
A látható kép a kép JPG formátumban való mentésének eredménye. Néhány adat elveszett a fájltömörítési algoritmusok miatt. A kiváló minőségű pixelművészet végül rosszul fog kinézni, és nem lesz könnyű visszaállítani az eredeti palettáját.
Ha statikus képet szeretne menteni a minőség romlása nélkül, használja a PNG formátumot. Animációkhoz - GIF.
Hogyan lehet helyesen megosztani a pixel grafikát
A pixel art közösségi hálózatokon való megosztása nagyszerű módja annak, hogy visszajelzést kapjon, és találkozzon más, ugyanabban a stílusban dolgozó művészekkel. Ne felejtsd el használni a #pixelart hashtaget. Sajnos a közösségi hálózatok gyakran kérés nélkül konvertálják a PNG-t JPG-vé, ami rontja az élményt. Ráadásul nem mindig világos, hogy miért konvertálták a képet.
Számos tipp található arra vonatkozóan, hogyan mentheti el a pixel művészetet a kívánt minőségben különböző közösségi hálózatokhoz.
Ahhoz, hogy a PNG-fájl változatlan maradjon a Twitteren, használjon 256-nál kevesebb színt vagy hogy a fájl 900 pixelnél kisebb a leghosszabb oldalon. A fájl méretét legalább 512x512 pixelre növelném. És hogy a méretezés a 100 többszöröse legyen (200%, nem 250%), és az éles szélek megmaradnak (Photoshopban a legközelebbi szomszéd).
Animált GIF-ek Twitter-bejegyzésekhez súlya nem haladja meg a 15 MB-ot. A képnek legalább 800x800 pixelesnek kell lennie, a hurkolt animációnak háromszor kell megismétlődnie, az utolsó képkockának pedig fele olyan hosszúnak kell lennie, mint az összes többi – ez a legnépszerűbb elmélet. Nem világos azonban, hogy ezeknek a követelményeknek milyen mértékben kell megfelelni, tekintettel arra, hogy a Twitter folyamatosan változtatja a képmegjelenítési algoritmusait.
Amennyire én tudom, lehetetlen képet feltenni az Instagramra anélkül, hogy a minőség romlik. De mindenképpen jobban fog kinézni, ha legalább 512x512 pixelre nagyítod.
Forrás: will.com