Indie vývojáři často musí zastávat více rolí: herního designéra, programátora, skladatele, výtvarníka. A když dojde na vizuální stránku, mnozí vybírají pixel art — na první pohled se zdá být jednoduchý. Ale k tomu, abyste vytvořili něco krásného, je potřeba hodně zkušeností a specifických dovedností. Našel jsem tutoriál pro ty, kteří právě začínají chápat základy tohoto stylu: s popisem speciálního softwaru a technik kreslení na příkladu dvou spriteů.
Pozadí
Pixel art je forma digitálního umění, v níž jsou změny prováděny na úrovni pixelů. Většinou je spojován s grafikou videoher 80. a 90. let. Tehdy museli umělci zohledňovat omezení paměti a nízké rozlišení. Dnes je pixel art stále populární v hrách a jako umělecký styl celkově, i když je možné vytvářet realistickou 3D grafiku. Proč? I když nebereme v potaz nostalgii, vytvoření skvostného díla v tak rigidních rámcích je příjemnou a ceněnou výzvou.
Hranice vstupu do pixel artu je relativně nízká ve srovnání s tradičním uměním a 3D grafikou, což přitahuje indie vývojáře. Ale to neznamená, že to bude snadné dokončit hru v tomto stylu. Viděl jsem mnoho indie vývojářů s pixel art metroidvaniemi na crowdfundingových platformách. Mysleli si, že vše dokončí za rok, ale ve skutečnosti potřebovali dalších šest let.
Metal Slug 3 (Automat). SNK, 2000
Pixel art na úrovni, na které jej většina lidí chce vytvářet, zabere hodně času, a krátkých tutoriálů je velmi málo. Prací s 3D modelem můžete rotovat, deformovat, přesouvat jeho jednotlivé části, kopírovat animace z jednoho modelu na druhý a tak dále. Pixel art vysoké úrovně téměř vždy zabere spoustu úsilí na pečlivé umístění pixelů na každém snímku.
Celkově jsem varoval.
A teď něco o mém stylu: většinou vytvářím pixel art pro videohry a v nich nacházím inspiraci. Jsem fanoušek Famicom/NES, 16bitových konzolí a arkád z 90. let. Pixel art mých oblíbených her té doby lze popsat jako živý, sebevědomý a čistý (ale ne příliš), nelze ho nazvat tvrdým a minimalistickým. V tomto stylu pracuji sám, ale snadno můžete aplikovat myšlenky a techniky z tohoto tutoriálu k vytvoření zcela jiných věcí. Zkoumejte práce různých umělců a vytvářejte pixel art, který se vám líbí!
Software
Základní digitální nástroje pro pixel art jsou Zoom a Pencil, abyste mohli umisťovat pixely. Také se vám hodí Line, Shape, Select, Move a Paint Bucket. Existuje spousta bezplatného i placeného softwaru s takovou sadou nástrojů. Řeknu vám o nejpopulárnějších a těch, které sám používám.
Paint (zdarma)
Pokud máte Windows, vestavěný Paint je primitivní program, ale obsahuje všechny nástroje pro pixel art.
(zdarma)
Nepředvídatelně funkční editor pixel artu, který běží v prohlížeči. Můžete exportovat práci do PNG nebo animovaného GIFu. Skvělá volba pro začátečníky.
(zdarma)
GraphicsGale je jediný editor z těch, o kterých jsem slyšel, navržený speciálně pro pixel art a zahrnující animační nástroje. Vytvořila ho japonská společnost HUMANBALANCE. Od roku 2017 je distribuován zdarma a stále je velmi žádaný, i přes vzrůstající popularitu Aseprite. Bohužel funguje pouze na Windows.
($)
Snad nejpopulárnější editor v současnosti. , spousta možností, aktivní podpora, verze pro Windows, Mac a Linux. Pokud se vážně věnujete pixel artu a stále jste nenašli potřebný editor, možná je to právě ono.
($$+)
GameMaker Studio 2 je vynikající 2D nástroj s dobrým editorem spriteů. Pokud chcete vytvářet pixel art pro vlastní hry, je velmi pohodlné to všechno dělat v jednom programu. Teď tento software používám při práci na , sbírce 50 retro her: sprite a animace vytvářím v GameMakeru, zatímco tilesety ve Photoshopu.
($$$+)
Photoshop — drahý software, který se distribuuje na základě předplatného a není optimalizován pro pixel art. Nedoporučuji ho kupovat, pokud se nezabýváte kreslením ilustrací ve vysokém rozlišení nebo nepotřebujete provádět složité manipulace s obrázky, jako já. Lze v něm vytvářet statické sprite a pixelová díla, ale je poměrně složitý ve srovnání se specializovaným softwarem (například GraphicsGale nebo Aseprite).
Ostatní
Můj set na pixel art. Všechno černé, právě jsem si toho všiml.
Grafický tablet ($$+)
Doporučuji grafické tablety pro jakoukoli práci s digitálními ilustracemi, aby se předešlo syndromu karpálního tunelu. Je mnohem snazší mu preventivně předejít, než ho léčit. Jakmile pocítíte bolest, bude se pouze zhoršovat — starejte se o sebe od začátku. Protože jsem kdysi kreslil myší, nyní mám potíže hrát hry, kde je nutné mačkat tlačítka. Momentálně používám Wacom Intuos Pro S.
Podpora zápěstí ($)
Pokud si nemůžete dovolit tablet, kupte si alespoň podporu zápěstí. Nejvíce mi sedí Mueller Green Fitted Wrist Brace. Ostatní jsou buď příliš těsné, nebo neposkytují dostatečnou oporu. Podpory lze bez problémů objednat online.
96×96 pixelů
Final Fight. Capcom, 1989
Pojďme na to! Začneme se sprite postavy 96×96 pixelů. Jako příklad jsem nakreslil orka a umístil ho na screenshot z Final Fight (obrázek výše), abyste viděli měřítko. To je velký sprite pro většinu retro her, velikost screenshotu: 384×224 pixelů.
Na tak velkém spritu bude snazší ukázat techniku, o které chci mluvit. Také pixelové kreslení více připomíná tradiční formy umění (například kresbu nebo malbu), se kterými možná lépe znáte. Jakmile zvládneme základní techniky, přejdeme k menším sprite.
1. Vyberte paletu
Pixel je v pixel artu mnohem hlubší pojem než v jakýchkoli jiných digitálních oblastech. Pixel art je definován svými omezeními, jako jsou barvy. Je důležité správně vybrat paletu, která pomůže určit váš styl. Ale na začátku navrhuji neřešit palety a zvolit jednu z existujících (nebo prostě několik náhodných barev) — můžete ji snadno změnit v jakékoli fázi.
Pro tento tutoriál budu používat paletu ze 32 barev, kterou jsme vytvořili pro . Pro pixel-art se často sbírají z 32 nebo 16 barev. Naše je navržena pro fiktivní konzoli, která by mohla vzniknout někde mezi Famicom a PC Engine. Můžete ji vzít nebo použít jakoukoli jinou — tutoriál vůbec nezávisí na zvolené paletě.
2. Hrubé kontury
Začneme s kreslením pomocí nástroje Tužka. Nakreslíme skicu, stejně jako to děláme s běžným perem a papírem. Samozřejmě, že pixel-art a tradiční umění se prolínají, zejména když jde o velké sprity. Mé pozorování ukazuje, že silní pixel-artoví umělci alespoň dobře kreslí rukou a naopak. Takže rozvíjení dovedností v kreslení je vždy užitečné.
3. Zpracování kontur
Zpracováváme kontury: odstraňujeme zbytečné pixely a ztenčujeme tloušťku každé čáry na jeden pixel. Ale co přesně považovat za zbytečné? Abyste na tuto otázku odpověděli, musíte se ponořit do pixelových čar a nerovností.
Nerovnosti
Musíte se naučit kreslit dvě základní čáry v pixel-artu: přímé a zakřivené. S perem a papírem to celé závisí na svalové kontrole, ale my pracujeme s drobnými barevnými bloky.
Klíč k vykreslení správných pixelových čar — nerovnosti. Jsou to jednotlivé pixely nebo malé segmenty, které narušují hladkost čáry. Jak jsem již řekl, jednotlivý pixel má v pixel-artu obrovský význam, takže nerovnosti mohou zničit celou estetiku. Představte si, že kreslíte přímou čáru na papíře, a najednou někdo uhodí do stolu: nerovnosti v pixel-artu vypadají stejně jako náhodné kliky.
Příklady:
Přímé
Zakřivené
Nerovnosti se objevují na zakřivených čarách, když se délka segmentů čáry zvyšuje nebo snižuje postupně.
Úplně se vyhnout nerovnostem není možné — ve všech vašich oblíbených retro hrách jsou (pokud samozřejmě pixel-art neobsahuje výhradně jednoduché tvary). Cíl: minimalizovat nerovnosti, přičemž ukazuje vše potřebné.
4. Aplikujeme první barvy
Připravte si svou postavu pomocí výplně nebo jiného vhodného nástroje. Paleta tento úkol usnadní. Pokud software nepodporuje použití palet, můžete ji umístit přímo do obrázku, jak je uvedeno v příkladu výše, a vybírat barvy pomocí pipety.
V levém dolním rohu jsem nakreslil našeho přítele, seznamte se, to je – Šar. S ním bude snazší pochopit, co se děje v každé fázi.
5. Stínování
Je čas znázornit stíny – jednoduše přidáme tmavší barvy na sprite. Tak bude obrázek vypadat objemně. Představme si, že máme jeden zdroj světla, umístěný nad orkem nalevo od něj. To znamená, že osvětleno bude vše, co je nahoře a před naší postavou. Přidáváme stíny zespodu zprava.
Tvar a objem
Pokud vám tato fáze způsobuje potíže, představte si svůj obrázek jako objemné tvary, nikoli pouze jako čáry a barvy. Tvar existuje v trojrozměrném prostoru a může mít objem, který vytváříme pomocí stínů. Pomůže to vizualizovat postavu bez detailů a představit si, že je vyrobena z hlíny a ne z pixelů. Stínování není jen přidání nových barev, je to proces utváření tvaru. Na dobře zpracované postavě detaily nezakrývají základní tvary: když zúžíte oči, uvidíte několik velkých shluků světla a stínu.
Antialiasing
Při každém použití nové barvy aplikuji antialiasing (A A). Pomáhá vyhladit pixely přidáním mezilehlých barev na rozhraní dvou segmentů čáry:
Šedé pixely zmírňují „trhliny“ v čáře. Čím delší je segment čáry, tím delší je segment A A.
Takto vypadá A A na rameni orka. Je potřeba k vyhlazení čar, které zobrazují křivku jeho svalů.
Antialiasing by neměl přesahovat hranice sprite, který bude použit ve hře nebo na pozadí, jehož barva není známa. Například, pokud použijete A A pro světlé pozadí, na tmavém pozadí bude vyhlazení vypadat nehezký.
6. Výběrový obrys
Dříve byly obrysy zcela černé, což způsobovalo, že sprite vypadal velmi kresleně. Obrázek se jakoby rozdělil na segmenty. Například černé čáry na ruce příliš kontrastně zobrazují svalstvo, a postava tak vypadá méně celistvě.
Pokud se sprite stane přirozenějším a segmentace nebude tak jasně patrná, budou základní formy postavy lépe čitelné. K tomu lze použít výběrový obrys - částečně nahradit černý obrys světlejším. Na osvětlené části sprite lze použít nej světlejší barvy nebo, tam kde se sprite dotýká negativního prostoru, lze obrys zcela odstranit. Místo černého je třeba použít barvu, která byla vybrána pro stín - tak se zachová segmentace (pro oddělení svalů, srsti atd.).
Také v této fázi jsem přidal tmavší stíny. Vznikly tři odstíny zelené na pokožce orka. Nej tmavě zelenou barvu lze použít pro výběrový obrys a AA.
7. Konečné úpravy
Na závěr stojí za to přidat lesky (nej světlejší skvrny na spritu), detaily (náušnice, nýty, jizvy) a další vylepšení, dokud nebude postava připravena nebo dokud nebude nutné přejít na další.
Existuje několik užitečných triků, které lze v této fázi aplikovat. Otočte obrázek horizontálně, to často pomáhá odhalit chyby v proporcích a stínování. Také můžete odstranit barvu - nastavit saturaci na nula, abyste zjistili, kde je třeba změnit stíny.
Vytváření šumu (dithering, ditherování)
Dosud jsme většinou používali velké, souvislé oblasti stínů. Ale existuje i jiná technika - ditherování, která umožňuje přechod z jedné barvy na druhou bez přidávání třetí. Podívejte se na příklad níže.
Horní gradient od tmavé k světlé používá stovky různých odstínů modré.
Střední gradient používá pouze devět barev, ale stále v něm je příliš mnoho odstínů jedné barvy. Vzniká takzvané banding (z anglického band - pruh), kdy se kvůli silným homogenním pruhům oko soustředí na body styku barev, místo na samotné barvy.
Na dolním gradientu jsme použili ditherování, které zabraňuje bandingu a používá pouze dvě barvy. Vytváříme šum různé intenzity, abychom napodobili gradaci barvy. Tato technika je velmi podobná halftonu (halftónový obraz), používanému při tisku; a také stipplingu (stipplované obrazy) - v ilustraci a komiksech.
Na orku jsem použil dithering jen málo pro přenos textury. Někteří pixeloví umělci ho vůbec nepoužívají, jiní se naopak nebojí a dělají to velmi dovedně. Myslím, že dithering vypadá nejlépe na velkých plochách vyplněných jednou barvou (podívejte se na oblohu na screenshotu Metal Slug, který byl výše) nebo na těch plochách, které by měly vypadat trochu hrubě a nerovně (například špína). Rozhodněte se sami, jak ho použít.
Pokud chcete vidět příklad s velkým a kvalitním ditheringem, prostudujte si hry The Bitmap Brothers, britského studia z 80. let, nebo hry na počítači PC-98. Jen si dejte pozor, že všechny jsou NSFW.
Kakyusei (PC-98). Elf, 1996
Na tomto obrázku je celkem 16 barev!
8. Poslední pohled
Jedním z nebezpečí pixelového umění je, že se zdá být lehkým a jednoduchým (kvůli své struktuře a stylovým omezením). Ale nakonec strávíte obrovské množství času dolováním svých spriteů. Je to jako hádanka, kterou je třeba vyřešit - proto pixelové umění přitahuje perfekcionisty. Pamatujte, že jeden sprite by neměl zabírat příliš mnoho času – je to jen malý kousek velmi složitého shluku kousků. Důležité je neztrácet vidění celkového obrazu.
I když váš pixel art není pro hry, občas je dobré říct si: „Všechno už je dost dobré!“ A posunout se dál. Nejlepší způsob, jak rozvíjet své dovednosti, je co nejvícekrát projít celý proces od začátku do konce, přičemž použijete co nejvíce témat.
A někdy je užitečné na chvíli nechat sprite a podívat se na něj později na svěží pohled.
32×32 pixelů
Vytvořili jsme velký sprite o velikosti 96×96 pixelů jako první, protože při této velikosti to více připomíná malování nebo malbu, ale jen s pixely. Čím menší sprite, tím méně se podobá tomu, co má zobrazovat, a tím důležitější každý pixel.
V Super Mario Bros. je Marioho oko tvořeno pouhými dvěma pixely, které jsou umístěny jeden nad druhý. A jeho ucho také. Tvůrce postavy Shigeru Miyamoto řekl, že knírek byl potřebný k tomu, aby oddělil nos od zbytku obličeje. Takže jeden z hlavních rysů Máriova obličeje je nejen design postavy, ale také pragmatický trik. Co potvrzuje staré moudrosti – „potřeba je matkou vynálezcům“.
Hlavní kroky pro vytvoření sprite 32×32 pixelů už známe: skica, barva, stíny, další úpravy. V takových podmínkách vybírám jako počáteční skicu barevné tvary místo kreslení obrysů kvůli malé velikosti. Barva hraje důležitější roli při určování postavy než obrysy. Podívejte se na Maria znovu, nemá vůbec žádné obrysy. Zajímavé nejsou jen kníry. Jeho bacily určují tvar uší, rukávy ukazují paže a celkový tvar celkem jasně zobrazuje celé jeho tělo.
Vytváření malých spriteů je neustálým kompromisem. Pokud přidáte obrys, můžete ztratit místo pro stín. Pokud má vaše postava jasně zobrazené ruce a nohy, hlava by měla pravděpodobně být menší. Pokud efektivně využijete barvu, selektivní obrys a vyhlazení, vypadá nakreslený objekt větší, než ve skutečnosti je.
Pro malé spritey se mi líbí styl chibi: postavy vypadají velmi roztomile, mají velké hlavy a oči. Je to skvělý způsob, jak vytvořit živého hrdinu v omezeném prostoru, a také velmi příjemný styl. Ale možná budete potřebovat ukázat pohyblivost nebo sílu postavy, pak můžete dát méně prostoru hlavě, aby tělo vypadalo silněji. Všechno záleží na vašich preferencích a cílech.
Celý tým je kompletní!
Formáty souborů
Takový výsledek může nervově zlomit každého pixelového umělce.
Obrázek, který vidíte, je výsledkem uložení kresby do formátu JPG. Některé údaje se ztratily kvůli algoritmům komprese souboru. Kvalitní pixelové umění nakonec bude vypadat špatně, a získat zpět jeho původní paletu bude obtížné.
Pro ukládání statického obrázku bez ztráty kvality použijte formát PNG. Pro animace — GIF.
Jak správně sdílet pixel-art
Sdílení pixel-artu na sociálních sítích je skvělý způsob, jak získat zpětnou vazbu a seznámit se s dalšími umělci, kteří pracují ve stejném stylu. Nezapomeňte přidat hashtag #pixelart. Bohužel, sociální sítě často převádějí PNG na JPG bez povolení, čímž zhoršují vaši práci. A není vždy jasné, proč byl váš obrázek převeden.
Existuje několik rad, jak uchovat pixel-art v požadované kvalitě pro různé sociální sítě.
Aby PNG soubor zůstal nezměněn na Twitteru, použijte méně než 256 barev nebo , že váš soubor je menší než 900 pixelů na delší straně. Doporučuji zvětšit velikost souboru alespoň na 512×512 pixelů. A to tak, aby měřítko bylo násobkem 100 (200 %, nikoliv 250 %) a byly zachovány ostré okraje (Nearest Neighbor v Photoshopu).
Animované GIF soubory pro příspěvky na Twitteru vážit maximálně 15 MB. Obrázek by měl mít alespoň 800×800 pixelů, cyklická animace by se měla opakovat třikrát a poslední snímek by měl trvat poloviční dobu než všechny ostatní — to je nejpopulárnější teorie. Není však jasné, jak důležité je tyto požadavky splnit, vzhledem k tomu, že Twitter neustále mění své algoritmy pro zobrazení obrázků.
Pokud vím, není možné publikovat obrázek na Instagramu bez ztráty kvality. Ale určitě bude vypadat lépe, pokud jej zvětšíte alespoň na 512x512 pixelů.
Zdroj: habr.com
