Інды-распрацоўшчыкам нярэдка даводзіцца сумяшчаць адразу некалькі роляў: геймдызайнера, праграміста, кампазітара, мастака. І, калі справа даходзіць да візуала, многія выбіраюць піксель-арт - на першы погляд ён здаецца простым. Але каб зрабіць прыгожа, трэба шмат досведу і пэўныя навыкі. Знайшоў тутарыял для тых, хто толькі пачаў спасцігаць асновы гэтага стылю: з апісаннем спецыяльнага софту і тэхнік малявання на прыкладзе двух спрайт.
фон
Піксель-арт - форма лічбавага мастацкага мастацтва, у якім змены ўносяцца на ўзроўні пікселяў. У асноўным ён асацыюецца з графікай відэагульняў 80-х і 90-х гадоў. Тады мастакам даводзілася ўлічваць абмежаванні памяці і нізкага дазволу. Цяпер піксель-арт усё яшчэ папулярны ў гульнях і як мастацкі стыль у цэлым, нягледзячы на магчымасць стварэння рэалістычнай 3D-графікі. Чаму? Нават калі не браць у разлік настальгію, стварэнне крутой працы ў такіх жорсткіх рамках - прыемны і які стаіць челлендж.
Парог уваходжання ў піксель-арце параўнальна нізкі ў параўнанні з традыцыйным артам і 3D-графікай, што прыцягвае інды-распрацоўшчыкаў. Але гэта зусім не азначае, што будзе проста дарабіць гульню ў гэтым стылі. Я бачыў шмат інды-дэвелапераў з піксель-арт метроідвання на краўдфандынгавых платформах. Яны думалі, што скончаць усё за год, але насамрэч ім трэба было яшчэ гадоў шэсць.
Metal Slug 3 (Arcade). SNK, 2000 год
Піксель-арт на тым узроўні, на якім большасць хоча яго ствараць, забірае шмат часу, а кароткіх абучалак вельмі мала. Працуючы з 3D-мадэллю вы можаце круціць яе, дэфармаваць, перамяшчаць асобныя яе часткі, капіяваць анімацыі з адной мадэлі на іншую і гэтак далей. Піксель-арт высокага ўзроўню амаль заўсёды адымае кучу сіл на скрупулёзнае размяшчэнне пікселяў на кожным фрэйме.
Увогуле, я папярэдзіў.
А цяпер крыху пра мой стыль: у асноўным я малюю піксель-арт для відэагульняў і ў іх жа знаходжу натхненне. У прыватнасці, я фанат Famicom/NES, 16-бітных кансоляў і аркад 90-х гадоў. Піксель-арт маіх любімых гульняў таго часу можна апісаць як яркі, упэўнены і чысты (але не занадта), яго нельга назваць цвёрдым і мінімалістычным. У гэтым стылі я працую сам, але вы лёгка можаце прымяняць ідэі і тэхнікі з гэтага тутарыялу для стварэння зусім іншых рэчаў. Вывучайце працы розных мастакоў і стварайце піксель-арт, які падабаецца вам!
Софт
Базавыя лічбавыя прылады для піксель-арта - Зум (Zoom) і Аловак (Pencil), каб размяшчаць пікселі. Таксама вам спатрэбяцца Лінія (Line), Постаць (Shape), Выбраць (Select), Перамясціць (Move) і Заліванне (Paint Bucket). Ёсць шмат бясплатнага і платнага ПЗ з такім наборам інструментаў. Я раскажу пра самыя папулярныя і тыя, якімі карыстаюся сам.
Paint (бясплатна)
Калі ў вас Windows, убудаваны ў яе Paint – прымітыўная праграма, але ў ёй ёсць усе прылады для піксель-арта.
(бясплатна)
Нечакана функцыянальны рэдактар піксель-арта, які запускаецца праз браўзэр. Можна экспартаваць працу ў PNG ці аніміраваны GIF. Выдатны варыянт для пачаткоўцаў.
(бясплатна)
GraphicsGale - адзіны рэдактар з тых, пра якія я чуў, распрацаваны менавіта для піксель-арта і які ўключае інструменты анімацыі. Яго стварыла японская кампанія HUMANBALANCE. З 2017 года ён распаўсюджваецца бясплатна і да гэтага часу карыстаецца попытам, нягледзячы на рост папулярнасці Aseprite. Нажаль, працуе ён толькі на Windows.
($)
Мабыць, самы папулярны рэдактар на дадзены момант. , куча магчымасцяў, актыўная падтрымка, версіі для Windows, Mac і Linux. Калі вы сур'ёзна ўзяліся за піксель-арт і ўсё яшчэ не знайшлі патрэбны рэдактар, магчыма гэта тое, што трэба.
($$+)
GameMaker Studio 2 - цудоўны 2D-інструмент з добрым рэдактарам спрайт (Sprite Editor). Калі вы жадаеце ствараць піксель-арт для ўласных гульняў, вельмі зручна ўсё рабіць у адной праграме. Цяпер я выкарыстоўваю гэты софт у працы над , калекцыяй 50 рэтра-гульняў: спрайты і анімацыі ствараю ў GameMaker, а тайлсеты - у Photoshop.
($$$+)
Photoshop - дарагі софт, распаўсюджваецца па падпісцы, не заменчаны пад піксель-арт. Не рэкамендую набываць яго, калі вы не займаецеся адмалёўкай ілюстрацый у высокім дазволе, ці вам не трэба праводзіць складаныя маніпуляцыі з карцінкай, як мне. У ім можна ствараць статычныя спрайты і піксельныя працы, але ён даволі складаны ў параўнанні са спецыялізаваным софтам (напрыклад, GraphicsGale ці Aseprite).
Іншае
Мой набор для піксель-арта. Усё чорнае, толькі зараз заўважыў.
Графічны планшэт ($$+)
Рэкамендую графічныя планшэты для любых работ з лічбавымі ілюстрацыямі, каб пазбегнуць тунэльнага сіндрому запясцяў. Яго значна прасцей прадухіліць, чым вылечыць. Аднойчы вы адчуеце боль, і ён будзе толькі нарастаць - паклапаціцеся пра сябе з самага пачатку. З-за таго, што калісьці я маляваў пахай, мне зараз цяжка гуляць у гульні, у якіх трэба націскаць на клавішы. Цяпер я выкарыстоўваю Wacom Intuos Pro S.
Супорт запясці ($)
Калі вы не можаце набыць планшэт, купіце хаця б суппорт запясці. Мне найбольш падабаецца Mueller Green Fitted Wrist Brace. Астатнія або занадта тугія, або забяспечваюць недастатковую падтрымку. Супорты без праблем можна замовіць анлайн.
96 × 96 пікселяў
Final Fight. Capcom, 1989 год
Прыступім! Пачнём са спрайт персанажа 96×96 пікселяў. Для прыкладу я намаляваў орка і змясціў яго на скрыншот з Final Fight (карцінка вышэй), каб вы разумелі маштаб. Гэта вялікі спрайт для большасці рэтра-гульняў, памер скрыншота: 384×224 пікселя.
На такім вялікім спрайце будзе лягчэй паказаць тэхніку, пра якую я хачу расказаць. Таксама попиксельная адмалёўка больш падобная на традыцыйныя формы арта (напрыклад, маляванне ці жывапіс), з якімі вы, магчыма, лепей знаёмыя. Асвоіўшы базавыя тэхнікі, мы пяройдзем да спрайт паменш.
1. Выбіраемы палітру
Піксель - значна больш глыбокае паняцце ў піксель-арце, чым у любых іншых лічбавых сферах. Піксель-арт вызначаюць яго абмежаванні, напрыклад, колеры. Важна правільна падабраць палітру, яна дапаможа вызначыць ваш стыль. Але на старце я прапаную не думаць пра палітры і выбраць адну з існуючых (ці проста некалькі рандомных колераў) - вы лёгка можаце яе памяняць на любым этапе.
Для гэтага тутарыялу я буду выкарыстоўваць палітру з 32 колераў, якую мы стварылі для . Для піксель-арта іх часта збіраюць з 32 ці 16 колераў. Наша распрацавана для выдуманай кансолі, якая магла б з'явіцца недзе паміж Famicom і PC Engine. Можаце ўзяць яе ці любую іншую - тутарыял зусім не залежыць ад абранай палітры.
2. Грубыя контуры
Пачнём прамалёўку з дапамогай інструмента Аловак. Намалюем скетч гэтак жа, як які робіцца гэта з звычайнай ручкай і паперай. Вядома, піксель-арт і традыцыйны арт перасякаюцца, асабліва калі гаворка ідзе пра такія буйныя спрайты. Мае назіранні паказваюць, што моцныя мастакі па піксель-арце як мінімум нядрэнна малююць ад рукі і наадварот. Так што развіваць навыкі малявання заўсёды карысна.
3. Прапрацоўка контураў
Дапрацоўваем контуры: прыбіраем лішнія пікселі і скарачаем таўшчыню кожнай лініі да аднаго пікселя. Але што менавіта лічыць залішнім? Каб адказаць на гэтае пытанне, трэба разабрацца ў піксельных лініях і няроўнасцях.
Няроўнасці
Трэба навучыцца маляваць дзве базавыя лініі ў піксель-арце: прамыя і крывыя. З ручкай і паперай усё зводзіцца да цягліцавага кантролю, але мы вось працуем з малюсенькімі каляровымі блокамі.
Ключ да адмалёўкі правільных піксельных ліній - няроўнасці. Гэта адзінкавыя пікселі ці невялікія сегменты, якія разбураюць згладжанасць лініі. Як я ўжо казаў, асобны піксель мае вялікае значэнне ў піксель-арце, таму няроўнасці могуць разбурыць усю эстэтыку. Прадстаўце, што вы праводзіце прамую лінію на паперы, і нечакана хтосьці ўдарае па стале: няроўнасці ў піксель-арце выглядаюць гэтак жа, як выпадковы закавы.
Прыклады:
Прамыя
Крывыя
Няроўнасці з'яўляюцца на крывых, калі даўжыня сегментаў лініі павялічваецца ці памяншаецца не паступова.
Зусім пазбегнуць няроўнасцяў немагчыма - ва ўсіх вашых любімых рэтра-гульнях яны ёсць (калі, вядома, піксель-арт складаецца не выключна з простых формаў). Мэта: звесці няроўнасці да мінімуму, пры гэтым паказаўшы ўсё неабходнае.
4. Ужывальны першыя колеры
Размалюйце свайго персанажа з дапамогай залівання або іншага прыдатнага інструмента. Палітра спросціць гэтую частку працы. Калі софт не прадугледжвае выкарыстанне палітраў, можна змясціць яе прама ў малюнак, як на прыкладзе вышэй, і выбіраць колеры з дапамогай піпеткі.
У ніжнім левым куце я намаляваў нашага сябра, знаёмцеся, гэта - Шар. З ім будзе прасцей зразумець, што менавіта адбываецца на кожным этапе.
5. Шэйдынг
Час адлюстраваць цені - проста дадаем больш цёмныя колеры на спрайт. Так малюнак будзе выглядаць аб'ёмным. Давайце выкажам здагадку, што ў нас адна крыніца святла, размешчаны над оркам лявей ад яго. Значыць, асветлена будзе ўсё, што знаходзіцца зверху і спераду нашага персанажа. Дадаем цені знізу справа.
Форма і аб'ём
Калі гэты этап выклікае ў вас складанасці, уявіце свой малюнак як аб'ёмныя формы, а не проста лініі і колер. Формы існуюць у трохмернай прасторы і могуць мець аб'ём, які мы выбудоўваем з дапамогай ценяў. Гэта дапаможа візуалізаваць персанажа без дэталяў і ўявіць, што ён зроблены з гліны, а не з пікселяў. Шэйдынг - гэта не проста даданне новых колераў, гэта працэс выбудоўвання формы. На добра прапрацаваным персанажу дэталі не хаваюць базавыя формы: калі вы прыжмурыцеся, убачыце некалькі буйных кластараў святла і цені.
Згладжванне (anti-aliasing, анты-аліасінг)
Кожны раз выкарыстоўваючы новы колер, я ўжываю анты-аліасінг (АА). Ён дапамагае згладзіць пікселі дадаючы прамежкавыя колеры па кутах, у месцы судотыку двух сегментаў лініі:
Шэрыя пікселі змякчаюць разрывы ў лініі. Чым даўжэй сегмент лініі, тым даўжэй АА-сегмент.
Так АА выглядае на плячы орка. Ён патрэбен, каб згладзіць лініі, якія адлюстроўваюць выгін яго цягліц
Згладжванне не павінна выходзіць за межы спрайт, які будзе выкарыстоўвацца ў гульні або на фоне, колер якога невядомы. Напрыклад, калі вы прыменіце АА для светлага фону, на цёмным фоне згладжванне будзе глядзецца непрыгожа.
6. Выбарачны контур
Раней контуры былі цалкам чорнымі, з-за чаго спрайт глядзеўся вельмі мульцяшна. Малюнак была нібы падзелена на сегменты. Напрыклад, чорныя лініі на руцэ занадта кантрасна адлюстроўваюць мускулатуру, і персанаж выглядае менш суцэльным.
Калі спрайт стане больш натуральным, а сегментацыя не гэтак відавочнай, то базавыя формы персанажа будуць лягчэй чытацца. Для гэтага можна выкарыстоўваць выбарачны контур - часткова замяніць чорны контур больш светлым. На асветленай частцы спрайт можна выкарыстоўваць самыя светлыя колеры ці, там дзе спрайт датыкаецца з негатыўнай прасторай, можна цалкам прыбраць контур. Замест чорнага трэба выкарыстоўваць колер, які быў абраны для ценю - так захавацца сегментацыя (для размежавання цягліц, меха і гэтак далей).
Таксама на гэтым этапе я дадаў больш цёмныя цені. Атрымалася тры градацыі зялёнага на скуры орка. Найбольш цёмна-зялёны колер можна выкарыстоўваць для выбарачнага контуру і АА.
7. Фінальныя рыскі
У канцы варта дадаць блікі (самыя светлыя плямы на спрайте), дэталі (завушніцы, заклёпкі, шнары) і іншыя паляпшэнні, пакуль персанаж не будзе гатовы або пакуль не давядзецца перайсці да наступнага.
Ёсць некалькі карысных прыёмаў, якія можна прымяніць на гэтым этапе. Павярніце малюнак гарызантальна, гэта часта дапамагае выявіць памылкі ў прапорцыях і шэйдынгу. Таксама можна прыбраць колер - выставіць насычанасць на нуль, каб зразумець, дзе трэба змяніць цені.
Стварэнне шумоў (dithering, дызерынг)
Пакуль што мы ў асноўным ужывалі буйныя, суцэльныя ўчасткі ценяў. Але ёсць і іншая тэхніка - дызерынг, якая дазваляе перайсці ад аднаго колеру да іншага без дадання трэцяга. Паглядзіце на прыклад ніжэй.
Верхні градыент ад цёмнага да светлага выкарыстоўвае сотні розных адценняў сіняга.
Сярэдні градыент выкарыстоўвае ўсяго дзевяць колераў, але ў ім усё яшчэ занадта шмат адценняў аднаго колеры. Узнікае так званы бандынг (ад англ. band - паласа), пры якім з-за тоўстых аднастайных палос вачэй факусуюць на кропках судотыку кветак, замест саміх кветак.
На ніжнім градыенце мы ўжылі дызерынг, які дазваляе пазбегнуць бандынгу і выкарыстоўвае ўсяго два колеры. Мы ствараем шум рознай інтэнсіўнасці, каб імітаваць градацыю колеру. Гэтая тэхніка вельмі падобная на халфтон (halftone - паўтонавы малюнак), якое ўжываецца на друку; а таксама на стыплінг (stippling - крупчасты малюнак) - у ілюстрацыі і коміксах.
На орцы я ўжыў дызерынг зусім няшмат для перадачы тэкстуры. Некаторыя піксель-артысты зусім яго не выкарыстоўваюць, іншыя - наадварот не саромеюцца і робяць гэта вельмі ўмела. Мне здаецца, што лепш за ўсё дызерынг глядзіцца на вялікіх участках залітых адным колерам (прыгледзьцеся да неба на скрыншоце Metal Slug, які быў вышэй) або на тых участках, якія павінны выглядаць шурпата і няроўна (напрыклад, бруд). Вырашыце самі, як яго выкарыстоўваць.
Калі жадаеце ўбачыць прыклад з маштабным і якасным дызерынгам, вывучыце гульні The Bitmap Brothers, брытанскай студыі 80-х гадоў, ці гульні на кампутары PC-98. Толькі ўлічыце, што ўсе яны – NSFW.
Kakyusei (PC-98). Elf, 1996 год
На гэтай выяве ўсяго 16 кветак!
8. Апошні погляд
Адна з небяспек піксель-арта ў тым, што ён здаецца лёгкім і простым (з-за яго структуры і абмежаванняў стылю). Але ў выніку вы выдаткуеце велізарную колькасць часу на дапрацоўку сваіх спрайт. Гэта падобна на галаваломку, якую трэба вырашыць - вось чаму піксель-арт прыцягвае перфекцыяністаў. Памятайце, што адзін спрайт не павінен адымаць занадта шмат часу - гэта толькі маленечкі кавалачак вельмі складанага навалы кавалачкаў. Важна не губляць бачанне агульнай карціны.
Нават калі ваш піксель-арт не для гульняў, часам варта сказаць сабе: "Усё ўжо дастаткова добра!" І рухацца далей. Лепшы спосаб развіцця навыкаў - як мага больш разоў прайсці ўвесь працэс цалкам ад пачатку да канца, выкарыстоўваючы як мага больш тэм.
І часам карысна ненадоўга пакінуць спрайт, каб крыху пазней зірнуць на яго свежым поглядам.
32×32 пікселя
Мы стварылі вялікі спрайт 96×96 пікселяў першым, таму што пры такім памеры гэта больш нагадвае маляванне ці жывапіс, але толькі пікселямі. Чым менш спрайт, тым менш ён падобны на тое, што павінен адлюстроўваць, і тым больш важны кожны піксель.
У Super Mario Bros. вока Марыё - гэта ўсяго два пікселя, размешчаныя адзін над адным. І ягонае вуха таксама. Стваральнік персанажа Сігеру Міямота сказаў, што вусы спатрэбіліся для таго, каб аддзяліць нос ад астатняй асобы. Так што адна з галоўных рыс асобы Марыё - не проста дызайн персанажа, але і прагматычны выкрут. Што пацвярджае старую мудрасць - "патрэба - маці вынаходлівасці".
Асноўныя этапы стварэння спрайт 32×32 пікселя нам ужо знаёмыя: скетч, колер, цені, далейшая дапрацоўка. Але ў такіх умовах, у якасці пачатковага скетчу я падбіраю каляровыя постаці замест адмалёўкі контураў з-за маленькага памеру. Колер гуляе важнейшую ролю ў вызначэнні персанажа, чым контуры. Паглядзіце на Марыё яшчэ раз, у яго ўвогуле няма контураў. Цікавыя не толькі вусы. Яго бакенбарды вызначаюць форму вушэй, рукавы паказваюць рукі, а агульная форма больш-менш выразна адлюстроўвае ўсё яго цела.
Стварэнне маленькіх спрайт - гэта пастаянныя кампрамісы. Калі вы дадасце абводку, можаце страціць месца для цені. Калі ў вашага персанажа выразна адлюстраваны рукі і ногі, галава хутчэй за ўсё павінна быць не вельмі вялікай. Калі эфектыўна выкарыстоўваць колер, выбарачную абводку і згладжванне, то адмаляваны аб'ект будзе здавацца больш, чым ён ёсць насамрэч.
Для маленькіх спрайт мне падабаецца стыль тыбі: персанажы выглядаюць вельмі міла, у іх вялікія галовы і вочы. Выдатны спосаб стварыць яркага героя ў абмежаванай прасторы, ды і ў цэлым, вельмі прыемны стыль. Але, магчыма, вам трэба паказаць мабільнасць ці сілу персанажа, тады вы можаце надаць менш прасторы галаве, каб цела выглядала больш магутна. Усё залежыць ад вашых пераваг і мэт.
Цэлая каманда ў зборы!
Фарматы файлаў
Такі вынік можа прымусіць панервавацца любога піксель-артыста.
Малюнак, якую вы бачыце - вынік захавання малюнка ў JPG. Частка дадзеных згубілася з-за алгарытмаў сціску файла. Якасны піксель-арт у выніку будзе выглядаць дрэнна, а вярнуць яго першапачатковую палітру будзе няпроста.
Для захавання статычнай карцінкі без страты якасці выкарыстоўвайце фармат PNG. Для анімацый - GIF.
Як правільна дзяліцца піксель-артам
Шэрынг піксель-арта ў сацыяльных сетках - выдатны спосаб атрымаць фідбэк і пазнаёміцца з іншымі мастакамі, якія працуюць у тым жа стылі. Не забудзьцеся паставіць хэштэг #pixelart. Нажаль, сацсеткі часта канвертуюць PNG у JPG без попыту, пагаршаючы вашу працу. Прычым не заўсёды зразумела, чаму ваша карцінка была канвертаваная.
Ёсць некалькі парад, як захаваць піксель-арт у патрэбнай якасці для розных сацсетак.
Каб PNG-файл не змяніўся ў Twitter, выкарыстоўвайце менш за 256 колераў або , Што ваш файл менш за 900 пікселяў па доўгай баку. Я б павялічыў памер файла хаця б да 512×512 пікселяў. Прычым так, каб маштабаванне было кратна 100 (200%, а не 250%) і захоўваліся рэзкія краі (Nearest Neighbor у Photoshop).
Аніміраваныя GIF-файлы для пастоў у Twitter важыць не больш за 15 Мб. Малюнак павінна быць прынамсі 800×800 пікселяў, цыклічная анімацыя павінна паўтарацца тройчы, а апошні кадр павінен быць напалову карацей па часе, чым усе астатнія – самая папулярная тэорыя. Аднак, незразумела, наколькі трэба выконваць гэтыя патрабаванні, улічваючы, што Twitter увесь час змяняе свае алгарытмы адлюстравання малюнкаў.
Наколькі я ведаю, немагчыма апублікаваць карцінку ў Instagram без страты якасці. Але яна сапраўды будзе выглядаць лепш, калі вы павялічыце яе хаця б да 512х512 пікселяў.
Крыніца: habr.com