Инди әзірлеушілері жиі бірден бірнеше рөлдерді біріктіруі керек: ойын дизайнері, бағдарламашы, композитор, суретші. Ал көрнекі бейнелерге келетін болсақ, көптеген адамдар пиксель өнерін таңдайды - бір қарағанда қарапайым болып көрінеді. Бірақ мұны әдемі ету үшін сізге үлкен тәжірибе мен белгілі бір дағдылар қажет. Мен осы стильдің негіздерін енді ғана түсіне бастағандар үшін оқу құралын таптым: мысал ретінде екі спрайтты пайдаланып, арнайы бағдарламалық жасақтама мен сурет салу әдістерінің сипаттамасы бар.
фон
Пиксель өнері - пиксель деңгейінде өзгерістер жасалатын цифрлық өнер түрі. Ол негізінен 80-90-шы жылдардағы бейне ойын графикасымен байланысты. Ол кезде суретшілер жад шектеулері мен төмен ажыратымдылықты ескеруі керек еді. Қазіргі уақытта пиксель өнері шынайы 3D графикасын жасау мүмкіндігіне қарамастан, ойындарда және жалпы өнер стилі ретінде әлі де танымал. Неліктен? Ностальгияны былай қойғанда, осындай тығыз шеңберде керемет жұмыс жасау - бұл жағымды және пайдалы сынақ.
Пиксель өнеріне кіруге кедергі инди-әзірлеушілерді тартатын дәстүрлі өнер және 3D графикамен салыстырғанда салыстырмалы түрде төмен. Бірақ бұл оңай болады дегенді білдірмейді аяқтау осы стильдегі ойын. Мен краудфандинг платформаларында пиксель өнерінің метроидваниялары бар көптеген инди әзірлеушілерін көрдім. Олар бәрін бір жылда бітіреміз деп ойлады, бірақ шын мәнінде оларға тағы алты жыл қажет болды.
Metal Slug 3 (Аркада). СНК, 2000 ж
Көптеген адамдар жасағысы келетін деңгейде пиксел өнері көп уақытты алады және қысқа оқулықтар өте аз. 3D моделімен жұмыс істегенде оны айналдыруға, деформациялауға, оның жеке бөліктерін жылжытуға, анимацияларды бір модельден екіншісіне көшіруге және т.б. Жоғары деңгейлі пиксель өнері әрқашан әр кадрға пикселдерді мұқият орналастыру үшін көп күш жұмсайды.
Жалпы, мен сізге ескерттім.
Ал енді менің стилім туралы аздап: мен негізінен бейне ойындар үшін пиксель өнерін саламын және олардан шабыт табамын. Атап айтқанда, мен Famicom/NES, 16-биттік консольдер және 90-шы аркада ойындарының жанкүйерімін. Дәуірдегі менің сүйікті ойындарымның пиксель өнерін айқын және минималистік емес, жарқын, сенімді және таза (бірақ тым таза емес) деп сипаттауға болады. Бұл мен өзім жұмыс істейтін стиль, бірақ сіз осы оқулықтағы идеялар мен әдістерді мүлдем басқа нәрселерді жасау үшін оңай қолдана аласыз. Әртүрлі суретшілердің жұмысын зерттеп, өзіңізге ұнайтын пиксель өнерін жасаңыз!
Бағдарламалық жасақтама
Пиксель өнерінің негізгі сандық құралдары пикселдерді орналастыруға арналған Масштабтау және Қарындаш болып табылады. Сондай-ақ, сызық, пішін, таңдау, жылжыту және бояу шелегі пайдалы болады. Мұндай құралдар жиынтығы бар көптеген ақысыз және ақылы бағдарламалық қамтамасыз ету бар. Мен сізге ең танымал және өзім қолданатындар туралы айтып беремін.
Бояу (тегін)
Егер сізде Windows болса, кірістірілген Paint қарапайым бағдарлама болып табылады, бірақ оның пикселдік өнерге арналған барлық құралдары бар.
(тегін)
Браузер арқылы жұмыс істейтін күтпеген жұмыс істейтін пиксельдік арт-редактор. Жұмысыңызды PNG немесе анимациялық GIF ретінде экспорттай аласыз. Жаңадан бастаушылар үшін тамаша нұсқа.
(тегін)
GraphicsGale - бұл пиксел өнері үшін арнайы жасалған және анимация құралдарын қамтитын жалғыз редактор. Оны HUMANBALANCE жапондық компаниясы жасаған. Ол 2017 жылдан бері тегін қол жетімді және Aseprite танымалдығының артуына қарамастан әлі де сұранысқа ие. Өкінішке орай, ол тек Windows жүйесінде жұмыс істейді.
($)
Мүмкін қазіргі уақытта ең танымал редактор. , көптеген мүмкіндіктер, белсенді қолдау, Windows, Mac және Linux үшін нұсқалар. Егер сіз пиксель өнеріне байыпты болсаңыз және әлі де дұрыс редакторды таппасаңыз, бұл сізге қажет болуы мүмкін.
($$+)
GameMaker Studio 2 - жақсы Sprite редакторы бар тамаша 2D құралы. Егер сіз өзіңіздің ойындарыңыз үшін пиксель өнерін жасағыңыз келсе, барлығын бір бағдарламада орындау өте ыңғайлы. Қазір мен осы бағдарламалық жасақтаманы жұмыс кезінде қолданамын , 50 ретро ойындар жинағы: мен GameMaker бағдарламасында спрайттар мен анимацияларды, ал Photoshop бағдарламасында тақтайшалар жиынтығын жасаймын.
($$$+)
Photoshop — жазылым арқылы таратылатын және пиксельдік өнерге арналмаған қымбат бағдарламалық құрал. Егер сіз жоғары ажыратымдылықтағы иллюстрацияларды көрсетумен айналыспасаңыз немесе мен сияқты кескінмен күрделі манипуляциялар жасаудың қажеті болмаса, мен оны сатып алуды ұсынбаймын. Онда статикалық спрайттарды және пиксель өнерін жасауға болады, бірақ ол мамандандырылған бағдарламалық құралмен (мысалы, GraphicsGale немесе Aseprite) салыстырғанда өте күрделі.
Прочее
Менің пикселдік өнер жинағым. Бәрі қара, мен оны енді байқадым.
Графикалық планшет ($$+)
Карпальды туннель синдромын болдырмау үшін кез келген сандық иллюстрациялық жұмыс үшін графикалық планшеттерді ұсынамын. Емдеуден гөрі алдын алу әлдеқайда оңай. Бір күні сіз ауырсынуды сезінесіз және ол тек күшейе түседі - ең басынан бастап өзіңізге қамқорлық жасаңыз. Бұрын тінтуірмен сурет салғандықтан, қазір пернелерді басуды талап ететін ойындарды ойнау қиынға соғады. Мен қазір Wacom Intuos Pro S пайдаланамын.
Білекке қолдау ($)
Егер сіз планшетті ала алмасаңыз, кем дегенде білек тірегін алыңыз. Менің жақсы көретінім - Мюллер Гринмен жабдықталған білезік. Қалғандары тым тығыз немесе жеткілікті қолдау көрсетпейді. Калибрлерге еш қиындықсыз онлайн тапсырыс беруге болады.
96 × 96 пиксел
Финалдық жекпе-жек. Capcom, 1989 ж
Бастайық! 96x96 пиксель таңба спрайтынан бастайық. Мысал ретінде мен орктың суретін салып, масштабты түсінуіңіз үшін оны Final Fight (жоғарыдағы сурет) скриншотына орналастырдым. Бұл большой ретро ойындарының көпшілігіне арналған спрайт, скриншот өлшемі: 384x224 пиксель.
Осындай үлкен спрайтта мен айтқым келетін техниканы көрсету оңайырақ болады. Әр пиксельді көрсету сізге көбірек таныс болуы мүмкін өнердің дәстүрлі түрлеріне (мысалы, сурет салу немесе кескіндеме) көбірек ұқсас. Негізгі әдістерді меңгергеннен кейін біз кішігірім спрайттарға көшеміз.
1. Бояғышты таңдаңыз
Пиксел кез келген басқа цифрлық салаға қарағанда пиксел өнеріндегі әлдеқайда тереңірек ұғым. Пиксель өнері оның шектеулерімен анықталады, мысалы, түстер. Дұрыс палитраны таңдау маңызды, ол сіздің стиліңізді анықтауға көмектеседі. Бірақ басында мен палитралар туралы ойламауды және бар біреуін таңдауды ұсынамын (немесе бірнеше кездейсоқ түстер) - оны кез келген кезеңде оңай өзгертуге болады.
Бұл оқулық үшін мен біз жасаған 32 түс палитрасын қолданатын боламын . Пиксель өнері үшін олар жиі 32 немесе 16 түстерден жиналады. Біздікі Famicom мен ДК қозғалтқышының арасында пайда болатын ойдан шығарылған консольге арналған. Сіз оны немесе кез келген басқасын ала аласыз - оқулық таңдалған палитраға мүлдем байланысты емес.
2. Дөрекі контурлар
Қарындаш құралын пайдаланып сурет салуды бастайық. Кәдімгі қалам мен қағазды қалай қолданатын болсақ, сол сияқты эскизді салайық. Әрине, пиксель өнері мен дәстүрлі өнер бір-біріне сәйкес келеді, әсіресе мұндай үлкен спрайттарға қатысты. Менің бақылауларым күшті пиксель өнерінің суретшілері кем дегенде қолмен және керісінше сурет салуда жақсы екенін көрсетеді. Сондықтан сурет салу дағдыларын дамыту әрқашан пайдалы.
3. Контурларды өңдеу
Біз контурларды нақтылаймыз: қосымша пикселдерді алып тастап, әр жолдың қалыңдығын бір пикселге дейін азайтамыз. Бірақ нақты не артық деп саналады? Бұл сұраққа жауап беру үшін сіз пиксель сызықтары мен бұзушылықтарды түсінуіңіз керек.
Бұзушылықтар
Пиксель өнерінде екі негізгі сызық салуды үйрену керек: түзу және қисық. Қалам мен қағаз бұлшық еттерді басқаруға қатысты, бірақ біз кішкентай түсті блоктармен жұмыс істейміз.
Дұрыс пиксельдік сызықтарды салудың кілті - бұл жиектер. Бұл сызықтың тегістігін бұзатын жалғыз пикселдер немесе шағын сегменттер. Жоғарыда айтқанымдай, бір пиксель пиксель өнерінде үлкен айырмашылықты жасайды, сондықтан біркелкі еместік бүкіл эстетиканы бұзуы мүмкін. Қағазға түзу сызық сызып жатқаныңызды елестетіп көріңіз және кенеттен біреу үстелге соқтығысады: пиксель өнеріндегі бөртпелер кездейсоқ сызба сияқты көрінеді.
мысалдар:
Тікелей
Қисықтар
Сызық сегменттерінің ұзындығы бірте-бірте ұлғаймаған немесе азаймаған кезде қисық сызықтарда бұзушылықтар пайда болады.
Соққыларды толығымен болдырмау мүмкін емес - сіздің барлық сүйікті ретро ойындарыңызда олар бар (әрине, пиксел өнері тек қарапайым пішіндерден тұрмаса). Мақсаты: Қажетті нәрселердің барлығын көрсете отырып, біркелкі болмауын барынша азайтыңыз.
4. Бірінші түстерді қолданыңыз
Толтыру немесе басқа қолайлы құрал арқылы кейіпкеріңізді бояңыз. Палитра жұмыстың бұл бөлігін жеңілдетеді. Егер бағдарламалық құрал бояғыштарды пайдалануды қамтамасыз етпесе, оны жоғарыдағы мысалдағыдай суретке тікелей орналастырып, тамшуырды пайдаланып түстерді таңдауға болады.
Төменгі сол жақ бұрышта мен досымызды тарттым, танысыңыз, бұл Доп. Бұл әр кезеңде нақты не болып жатқанын түсінуді жеңілдетеді.
5. Көлеңкелеу
Көлеңкелерді көрсететін уақыт келді - спрайтқа қою түстерді қосыңыз. Бұл кескінді үш өлшемді етеді. Орктың сол жағында орналасқан бір жарық көзі бар деп есептейік. Бұл біздің кейіпкеріміздің үстінде және алдында тұрғанның бәрі нұрға бөленетінін білдіреді. Төменгі оң жаққа көлеңкелерді қосыңыз.
Пішін және көлем
Егер бұл қадам сізге қиын болса, сызбаңызды тек сызықтар мен түс емес, үш өлшемді фигуралар ретінде қарастырыңыз. Фигуралар үш өлшемді кеңістікте бар және көлемді болуы мүмкін, біз оны көлеңкелер арқылы саламыз. Бұл кейіпкерді егжей-тегжейсіз елестетуге және оның пикселдерден емес, балшықтан жасалғанын елестетуге көмектеседі. Көлеңкелеу жаңа түстерді қосу ғана емес, бұл пішінді құру процесі. Жақсы жобаланған кейіпкерде бөлшектер негізгі пішіндерді жасырмайды: егер сіз көзіңізді қисайтсаңыз, жарық пен көлеңкенің кейбір үлкен шоғырларын көресіз.
Бөренелеуге қарсы қою (антиалиасинг)
Мен жаңа түсті пайдаланған сайын, мен антиалиазинг (AA) қолданамын. Ол екі сызық сегменті кездесетін бұрыштарға аралық түстерді қосу арқылы пикселдерді тегістеуге көмектеседі:
Сұр пикселдер сызықтағы «үзілістерді» жұмсартады. Сызық сегменті неғұрлым ұзын болса, AA сегменті соғұрлым ұзағырақ.
Орктың иығында АА осылай көрінеді. Бұл оның бұлшық еттерінің қисығын көрсететін сызықтарды тегістеу үшін қажет
Антиалиазинг ойында немесе түсі белгісіз фонға қолданылатын спрайт шеңберінен аспауы керек. Мысалы, егер сіз ашық фонға АА қолдансаңыз, қараңғы фонда антиалиазинг жағымсыз көрінеді.
6. Таңдамалы контур
Бұрын контурлар толығымен қара болды, бұл спрайтты өте мультфильмдік етіп көрсетті. Сурет сегменттерге бөлінгендей болды. Мысалы, қолдағы қара сызықтар бұлшықетке тым көп контраст береді, бұл кейіпкерді азырақ біріктіреді.
Егер спрайт табиғирақ болса және сегментация азырақ айқын болса, кейіпкердің негізгі пішіндерін оқу оңайырақ болады. Мұны істеу үшін сіз таңдамалы контурды пайдалана аласыз - қара контурды жеңілірекпен ішінара ауыстырыңыз. Спрайттың жарықтандырылған бөлігінде сіз ең ашық түстерді пайдалана аласыз немесе спрайт теріс кеңістікке тиген жерде контурды толығымен алып тастай аласыз. Қараның орнына көлеңке үшін таңдалған түсті пайдалану керек - осылайша сегментация сақталады (бұлшықеттерді, жүнді және т.б. ажырату үшін).
Мен осы кезеңде қараңғы көлеңкелерді де қостым. Нәтижесінде орк терісінде жасыл түстің үш градациясы пайда болды. Ең қою жасыл түсті таңдамалы контур және АА үшін пайдалануға болады.
7. Соңғы жанасулар
Соңында, кейіпкер дайын болғанша немесе келесіге өту керек болғанша, ерекше нүктелерді (спрайттағы ең жеңіл дақтар), бөлшектерді (сырғалар, тыртықтар, тыртықтар) және басқа жақсартуларды қосқан жөн.
Осы кезеңде қолдануға болатын бірнеше пайдалы әдістер бар. Сызбаны көлденеңінен бұраңыз, бұл көбінесе пропорциялар мен көлеңкедегі қателерді анықтауға көмектеседі. Сондай-ақ, түсті жоюға болады - көлеңкелерді қай жерде өзгерту керектігін түсіну үшін қанықтылықты нөлге қойыңыз.
Шуды тудыру (дитирлеу, дитирлеу)
Осы уақытқа дейін біз көбінесе үлкен, қатты көлеңке аймақтарын қолдандық. Бірақ тағы бір техника бар - үштен бірін қоспай, бір түстен екіншісіне өтуге мүмкіндік беретін дитеринг. Төмендегі мысалды қараңыз.
Жоғарғы қараңғыдан ашық градиент көктің жүздеген түрлі реңктерін пайдаланады.
Орташа градиент тек тоғыз түсті пайдаланады, бірақ сол түстің әлі де көп реңктері бар. Жолақ деп аталатын жолақ пайда болады (ағылшын тілінен - жолақ), онда қалың біркелкі жолақтардың арқасында көз түстердің орнына түстердің жанасу нүктелеріне назар аударады.
Төменгі градиентте біз дитеринг қолдандық, ол жолақты болдырмайды және тек екі түсті пайдаланады. Түс градациясын модельдеу үшін әртүрлі қарқындылықтағы шуды жасаймыз. Бұл әдіс басып шығаруда қолданылатын жартылай реңкке (жартылай тон суретіне) өте ұқсас; сондай-ақ стипплинг (дәнді сурет) - иллюстрациялар мен комикстерде.
Оркта мен текстураны жеткізу үшін біраз тербелдім. Кейбір пиксель суретшілері оны мүлдем пайдаланбайды, басқалары, керісінше, ұялмай, оны өте шебер жасайды. Менің ойымша, дитер бір түспен толтырылған үлкен аумақтарда (жоғарыдағы Metal Slug скриншотындағы аспанға қараңыз) немесе өрескел және біркелкі емес (кір сияқты) көрінетін жерлерде жақсы көрінеді. Оны қалай пайдалану керектігін өзіңіз шешіңіз.
Егер сіз ауқымды және жоғары сапалы дитеринг үлгісін көргіңіз келсе, 80-жылдардағы британдық студиясы The Bitmap Brothers ойындарын немесе PC-98 компьютеріндегі ойындарды қараңыз. Олардың барлығы NSFW екенін есте сақтаңыз.
Какюсей (ПК-98). Эльф, 1996 ж
Бұл суретте тек 16 түс бар!
8. Соңғы көзқарас
Пиксель өнерінің қауіптерінің бірі оның оңай және қарапайым болып көрінуі (құрылымы мен стилінің шектеулеріне байланысты). Бірақ сіз спрайттарды өңдеуге көп уақыт жұмсайсыз. Бұл шешуді қажет ететін басқатырғыш сияқты - сондықтан пиксель өнері перфекционистерді тартады. Бір спрайт тым көп уақытты алмау керек екенін есте сақтаңыз - бұл өте күрделі бөлшектер жиынтығының кішкентай ғана бөлігі. Үлкен суретті жоғалтпау маңызды.
Егер сіздің пиксель өнеріңіз ойын ойнауға арналмаған болса да, кейде өзіңізге: «Бұл қазірдің өзінде жеткілікті!» деп айту керек. Әрі қарай жүріңіз. Сіздің дағдыларыңызды дамытудың ең жақсы жолы - мүмкіндігінше көп тақырыптарды пайдалана отырып, бүкіл процесті басынан аяғына дейін мүмкіндігінше көп рет өту.
Кейде спрайтты біраз уақытқа қалдырған пайдалы, сондықтан оны сәл кейінірек жаңа көзбен қарауға болады.
32×32 пиксель
Алдымен біз үлкен 96x96 пиксель спрайт жасадық, себебі бұл өлшемде ол сурет салу немесе бояу сияқты, бірақ пикселдермен. Спрайт неғұрлым кішірек болса, ол көрсету керек нәрсеге соғұрлым аз ұқсас болады және әрбір пиксел маңыздырақ болады.
Super Mario Bros. Марионың көзі бірінің үстіне бірі орналасқан екі пиксельден тұрады. Және оның құлағы да. Кейіпкерлерді жасаушы Шигеру Миямото мұртты беттің қалған бөлігінен мұрынды ажырату үшін қажет екенін айтты. Сонымен, Марионың басты ерекшеліктерінің бірі - бұл жай кейіпкер дизайны емес, прагматикалық айла. Бұл ескі даналықты растайды - «қажеттілік - өнертабыстың анасы».
32x32 пиксельдік спрайт жасаудың негізгі кезеңдері бізге бұрыннан таныс: эскиз, түс, көлеңкелер, одан әрі нақтылау. Бірақ мұндай жағдайларда бастапқы эскиз ретінде шағын өлшемге байланысты контурларды салудың орнына түсті фигураларды таңдаймын. Түс контурдан гөрі кейіпкерді анықтауда маңыздырақ рөл атқарады. Мариоға қайта қараңыз, оның сұлбасы мүлде жоқ. Бұл тек мұртты ғана емес, қызықтырады. Оның бүйірлері құлақтарының пішінін анықтайды, жеңдері қолдарын көрсетеді, ал жалпы пішіні бүкіл денесін азды-көпті айқын көрсетеді.
Кішкентай спрайттарды жасау - бұл тұрақты ымыра. Егер сіз штрих қоссаңыз, көлеңкеге арналған орынды жоғалтуыңыз мүмкін. Егер сіздің кейіпкеріңіздің қолдары мен аяқтары анық көрінсе, басы өте үлкен болмауы керек. Түсті, таңдамалы штрихты және бетке қарсы қоюды тиімді пайдалансаңыз, көрсетілген нысан шын мәніндегіден үлкенірек болып көрінеді.
Кішкентай спрайттар үшін маған чиби стилі ұнайды: кейіпкерлер өте сүйкімді көрінеді, олардың бастары мен көздері үлкен. Шектеулі кеңістікте түрлі-түсті кейіпкерді және жалпы өте жақсы стильді жасаудың тамаша тәсілі. Бірақ, мүмкін, сізге кейіпкердің ұтқырлығын немесе күшін көрсету керек шығар, содан кейін денені күштірек ету үшін басына аз орын беруге болады. Мұның бәрі сіздің қалауларыңыз бен мақсаттарыңызға байланысты.
Бүкіл команда жиналды!
Файл форматтары
Бұл нәтиже кез келген пиксель суретшісін қобалжытады
Сіз көріп отырған сурет суретті JPG форматында сақтаудың нәтижесі болып табылады. Кейбір деректер файлдарды қысу алгоритмдеріне байланысты жоғалды. Жоғары сапалы пиксель өнері нашар көрінеді және оны бастапқы палитрасына қайтару оңай болмайды.
Статикалық кескінді сапасын жоғалтпай сақтау үшін PNG пішімін пайдаланыңыз. Анимациялар үшін - GIF.
Пиксель өнерін қалай дұрыс бөлісуге болады
Әлеуметтік желілерде пиксель өнерін бөлісу - кері байланыс алудың және сол стильде жұмыс істейтін басқа суретшілермен кездесудің тамаша тәсілі. #pixelart хэштегін пайдалануды ұмытпаңыз. Өкінішке орай, әлеуметтік желілер жиі PNG форматын сұраусыз JPG форматына түрлендіреді, бұл сіздің тәжірибеңізді нашарлатады. Оның үстіне, суретіңіздің неліктен түрлендірілгені әрқашан анық емес.
Әртүрлі әлеуметтік желілер үшін пиксельдік суретті қажетті сапада сақтау туралы бірнеше кеңестер бар.
PNG файлыңызды Twitter-де өзгеріссіз сақтау үшін 256-дан аз түстерді пайдаланыңыз немесе файлыңыздың ең ұзын жағында 900 пикселден аз. Мен файл өлшемін кем дегенде 512x512 пиксельге дейін арттырар едім. Масштабтау 100-ге еселік (200% емес, 250%) және өткір жиектер сақталады (Photoshop бағдарламасындағы ең жақын көрші).
Twitter жазбаларына арналған анимациялық GIF файлдары салмағы 15 МБ аспайды. Кескін кем дегенде 800x800 пиксель болуы керек, циклдік анимация үш рет қайталануы керек, ал соңғы кадрдың ұзындығы барлық қалғандарының жартысы болуы керек - ең танымал теория. Дегенмен, Twitter өзінің кескінді көрсету алгоритмдерін үнемі өзгертетінін ескерсек, бұл талаптардың қаншалықты орындалуы керек екені белгісіз.
Менің білуімше, сапасын жоғалтпай инстаграмға сурет салу мүмкін емес. Бірақ егер сіз оны кем дегенде 512x512 пиксельге дейін үлкейтсеңіз, ол жақсы көрінеді.
Ақпарат көзі: www.habr.com