Indie иштеп чыгуучулар көп учурда бир нече ролдорду айкалыштырууга туура келет: оюн дизайнери, программист, композитор, сүрөтчү. Ал эми визуалдык көрүнүштөргө келгенде, көп адамдар пикселдик искусствону тандашат - бир караганда жөнөкөй көрүнөт. Бирок аны кооз кылуу үчүн көп тажрыйба жана белгилүү бир көндүмдөр керек. Мен бул стилдин негиздерин жаңыдан түшүнө баштагандар үчүн окуу куралын таптым: атайын программалык камсыздоонун сүрөттөлүшү жана мисал катары эки спрайттын жардамы менен сүрөт тартуу ыкмалары.
маалымат
Пикселдик искусство - бул өзгөртүүлөр пиксел деңгээлинде жасалган санариптик искусствонун бир түрү. Ал негизинен 80-90-жылдардагы видео оюн графикасы менен байланышкан. Ал кезде сүрөтчүлөр эстутумдагы чектөөлөрдү жана аз токтомду эске алышы керек болчу. Бүгүнкү күндө пикселдик искусство реалдуу 3D графикасын түзүү мүмкүнчүлүгүнө карабастан, оюндарда жана жалпысынан искусство стили катары дагы эле популярдуу. Неге? Ностальгияны эске албаганда, мынчалык тыгыз алкакта салкын жумуш түзүү - бул жагымдуу жана пайдалуу маселе.
Пикселдик искусствого кирүүдөгү тоскоолдук салттуу искусствого жана инди иштеп чыгуучуларды өзүнө тарткан 3D графикасына салыштырмалуу төмөн. Бирок бул оңой болот дегенди билдирбейт бүтүрүү оюн бул стилде. Мен краудфандинг платформаларында пикселдик арт метроидваниялары бар көптөгөн инди иштеп чыгуучуларды көрдүм. Алар баарын бир жылда бүтүрөбүз деп ойлошкон, бирок чындыгында аларга дагы алты жыл керек болчу.
Metal Slug 3 (Аркада). СНК, 2000
Пикселдик искусство көпчүлүк адамдар түзгүсү келген деңгээлде көп убакытты талап кылат жана кыскача окуу куралдары өтө аз. 3D модели менен иштөөдө аны айлантууга, деформациялоого, анын айрым бөлүктөрүн жылдырууга, анимацияларды бир моделден экинчи моделге көчүрүүгө ж.б.у.с. Жогорку деңгээлдеги пикселдик искусство дээрлик ар дайым пикселдерди ар бир кадрга кылдаттык менен жайгаштыруу үчүн көп күч-аракетти талап кылат.
Жалпысынан мен сизге эскерткем.
Эми менин стилим жөнүндө бир аз: мен негизинен видео оюндар үчүн пикселдик артты тартам жана алардан илхам табам. Атап айтканда, мен Famicom/NES, 16 биттик консолдор жана 90-жылдардагы аркада оюндарынын күйөрманымын. Ошол доордогу менин сүйүктүү оюндарымдын пикселдик искусствосун ачык жана минималисттик эмес, ачык, ишенимдүү жана таза (бирок өтө таза эмес) деп айтууга болот. Бул мен өзүм иштеп жаткан стилим, бирок сиз бул окуу куралындагы идеяларды жана ыкмаларды оңой колдонсоңуз, такыр башка нерселерди жаратсаңыз болот. Ар кандай сүрөтчүлөрдүн иштерин изилдеп, сизге жаккан пикселдик искусствону жаратыңыз!
жумшак
Пикселдик искусство үчүн негизги санарип куралдары пикселдерди жайгаштыруу үчүн масштаб жана карандаш болуп саналат. Сиз ошондой эле Line, Shape, Select, Move жана Paint Bucket пайдалуу болот. Мындай куралдардын топтому менен көптөгөн акысыз жана акы төлөнүүчү программалар бар. Мен эң популярдуу жана өзүм колдонгондор жөнүндө айтып берем.
Боёк (акысыз)
Эгер сизде Windows болсо, орнотулган Paint примитивдик программа, бирок анда пикселдик искусство үчүн бардык куралдар бар.
(Free)
Браузер аркылуу иштеген күтүүсүз иштеген пикселдик арт-редактор. Жумушуңузду PNG же анимацияланган GIF катары экспорттой аласыз. Жаңы баштагандар үчүн эң сонун вариант.
(Free)
GraphicsGale мен уккан жалгыз редактор, ал пикселдик искусство үчүн атайын иштелип чыккан жана анимация куралдарын камтыйт. Аны япониялык HUMANBALANCE компаниясы жараткан. Ал 2017-жылдан бери акысыз жеткиликтүү жана Aseprite популярдуулугунун өсүшүнө карабастан, дагы деле суроо-талапка ээ. Тилекке каршы, ал Windows менен гана иштейт.
($)
Балким, учурда эң популярдуу редактор. , көптөгөн функциялар, активдүү колдоо, Windows, Mac жана Linux үчүн версиялар. Эгер сиз пикселдик искусствого олуттуу мамиле кылсаңыз жана дагы эле туура редакторду таба элек болсоңуз, бул сизге керек болушу мүмкүн.
($$+)
GameMaker Studio 2 жакшы Sprite редактору менен мыкты 2D куралы болуп саналат. Эгер сиз өзүңүздүн оюндарыңыз үчүн пикселдик искусствону жараткыңыз келсе, бардыгын бир программада жасоо абдан ыңгайлуу. Азыр мен иштеп жатканда бул программаны колдонуп жатам , 50 ретро оюндардын жыйнагы: Мен GameMakerде спрайттарды жана анимацияларды, ал эми Photoshop'та мозаикаларды түзөм.
($$$+)
Photoshop бул кымбат баалуу программа, жазылуу аркылуу таратылат жана пикселдик искусство үчүн иштелип чыккан эмес. Эгер сиз жогорку резолюцияда иллюстрацияларды тартууга катышпасаңыз же мага окшоп сүрөт менен татаал манипуляцияларды жасоонун кереги жок болбосо, мен аны сатып алууну сунуш кылбайм. Сиз анда статикалык спрайттарды жана пикселдик искусствону түзө аласыз, бирок ал атайын программалык камсыздоого (мисалы, GraphicsGale же Aseprite) салыштырмалуу кыйла татаал.
Прочее
Менин пикселдик артым. Баары кара, мен аны азыр эле байкадым.
Графикалык планшет ($$+)
Карпалдык туннель синдромун болтурбоо үчүн ар кандай санариптик иллюстрациялар үчүн графикалык планшеттерди сунуштайм. Дарылоого караганда алдын алуу алда канча оңой. Бир күнү ооруп каласың жана ал күчөйт – өзүңө эң башынан кам көр. Мурда чычкан менен сүрөт тартчумун, азыр баскычтарды басууну талап кылган оюндарды ойноодо кыйналып жатам. Мен учурда Wacom Intuos Pro S колдонуп жатам.
Билек колдоо ($)
Планшет ала албасаңыз, жок дегенде билек таянычын алыңыз. Менин сүйүктүү Мюллер Грин орнотулган билек Brace. Калгандары же өтө катуу же жетиштүү колдоо көрсөтпөйт. Калибрлерди эч кандай көйгөйсүз онлайн заказ кылса болот.
96 × 96 пиксел
Final Fight. Capcom, 1989
Баштайлы! 96x96 пикселдик спрайт менен баштайлы. Мисал катары, мен оркту тартып, масштабды түшүнүү үчүн аны Final Fight (жогорудагы сүрөт) скриншотуна жайгаштырдым. Бул большой көпчүлүк ретро оюндар үчүн спрайт, скриншот өлчөмү: 384x224 пиксел.
Мындай чоң спрайтта мен айткым келген техниканы көрсөтүү оңой болот. Пикселге рендеринг дагы сизге жакшыраак тааныш болушу мүмкүн болгон искусствонун салттуу түрлөрүнө (мисалы, чийүү же живопись) көбүрөөк окшош. Негизги ыкмаларды өздөштүргөндөн кийин, биз кичинекей спрайттарга өтөбүз.
1. Палитра тандаңыз
Пиксел башка санариптик чөйрөгө караганда пикселдик искусстводо бир топ терең түшүнүк. Пикселдик искусство анын чектөөлөрү менен аныкталат, мисалы, түстөр. Туура палитраны тандоо маанилүү, бул сиздин стилиңизди аныктоого жардам берет. Бирок, башында мен палитралар жөнүндө ойлонбоону жана бар болгондордун бирин (же бир нече кокус түстөрдү) тандоону сунуштайм - сиз аны каалаган этапта оңой өзгөртө аласыз.
Бул окуу куралы үчүн мен биз жараткан 32 түс палитрасын колдоном . Пикселдик искусство үчүн алар көбүнчө 32 же 16 түстөн чогултулат. Биздики Famicom менен PC Engine ортосунда пайда боло турган ойдон чыгарылган консол үчүн иштелип чыккан. Сиз аны же башкасын ала аласыз - окуу куралы тандалган палитрадан көз каранды эмес.
2. Орой контурлар
Карандаш куралын колдонуп сүрөт тарталы. Кадимки калем-кагаз менен кандай болсок, эскизди чийебиз. Албетте, пикселдик искусство менен салттуу искусство бири-бирине дал келет, айрыкча мындай чоң спрайттарга келгенде. Менин байкоолорум көрсөткөндөй, күчтүү пикселдик искусство сүрөтчүлөрү жок дегенде кол менен тартууда жакшы жана тескерисинче. Ошентип, сүрөт тартуу жөндөмүңүздү өнүктүрүү дайыма пайдалуу.
3. Контурларды иштеп чыгуу
Биз контурларды тактайбыз: кошумча пикселдерди алып салып, ар бир сызыктын калыңдыгын бир пикселге чейин азайтабыз. Бирок так эмне ашыкча болуп эсептелет? Бул суроого жооп берүү үчүн сиз пикселдик сызыктарды жана мыйзам бузууларды түшүнүшүңүз керек.
Мыйзам бузуулар
Сиз пикселдик искусстводо эки негизги сызыкты кантип тартууну үйрөнүшүңүз керек: түз жана ийри. Калем жана кагаз менен булчуңдарды башкаруу жөнүндө, бирок биз кичинекей түстүү блоктор менен иштеп жатабыз.
Туура пикселдик сызыктарды тартуунун ачкычы - бул жаггилер. Бул сызыктын жылмакайлыгын жок кылган жалгыз пикселдер же кичинекей сегменттер. Мурда айткандай, бир пиксель пикселдик искусстводо чоң айырмачылыкты жаратат, андыктан тегиздик бүтүндөй эстетиканы бузушу мүмкүн. Кагазга түз сызык тартканыңызды элестетиңиз жана күтүлбөгөн жерден кимдир бирөө үстөлгө урунуп калды: пикселдик искусстводогу бүдүрчөлөр кокус сызык сыяктуу көрүнөт.
мисалдар:
түз
Ийри сызыктар
Ийри сызыктарда сызык сегменттеринин узундугу акырындап көбөйбөсө же азайбаганда туура эместиктер пайда болот.
Бөйрөктөрдү толугу менен болтурбоо мүмкүн эмес - бардык сүйүктүү ретро оюндарыңызда бар (эгер, албетте, пикселдик искусство жөнөкөй фигуралардан гана турбаса). Максат: Керектүү нерселердин бардыгын көрсөтүү менен бирдей эместикти минималдаштыруу.
4. Биринчи түстөрдү колдонуңуз
Толтуруу же башка ылайыктуу куралды колдонуп, каарманыңызды боёңуз. Палитра иштин бул бөлүгүн жөнөкөйлөтөт. Эгерде программалык камсыздоодо палитраларды колдонуу каралбаса, сиз аны жогорудагы мисалдагыдай эле түздөн-түз сүрөттө жайгаштырып, тамчылаткычтын жардамы менен түстөрдү тандасаңыз болот.
Төмөнкү сол бурчта мен досубузду тарттым, тааныш, бул Бал. Бул ар бир этапта так эмне болуп жатканын түшүнүүнү жеңилдетет.
5. Көлөкөлөтүү
Көлөкөлөрдү көрсөтүүгө убакыт келди - спрайтка кара түстөрдү кошуңуз. Бул сүрөт үч өлчөмдүү көрүнөт. Келгиле, бизде орктун сол жагында жайгашкан бир жарык булагы бар деп ойлойлу. Бул биздин каармандын үстүндө жана алдында тургандын баары жарык болот дегенди билдирет. Төмөнкү оң жагына көлөкө кошуу.
Форма жана көлөм
Эгер бул кадам сиз үчүн кыйын болсо, чиймеңизди жөн эле сызыктар жана түстөр эмес, үч өлчөмдүү фигуралар деп ойлоңуз. Формалар үч өлчөмдүү мейкиндикте бар жана көлөмгө ээ болушу мүмкүн, биз көлөкөлөрдүн жардамы менен түзөбүз. Бул сизге каарманды деталдарсыз элестетүүгө жана ал пикселден эмес, чоподон жасалганын элестетүүгө жардам берет. Көлөкө түшүрүү бул жөн гана жаңы түстөрдү кошуу эмес, бул форманы куруу процесси. Жакшы иштелип чыккан каарманда деталдар түпкү фигураларды жашырбайт: эгер сиз көзүңүздү кысып карасаңыз, жарык менен көлөкөнүн бир нече чоң кластерлерин көрөсүз.
Anti-aliasing (антиалиасинг)
Мен жаңы түстү колдонгон сайын антиалиасинг (AA) колдоном. Бул эки сызык сегменти кездешкен бурчтарга ортоңку түстөрдү кошуу менен пикселдерди жылмалоого жардам берет:
Боз пикселдер линиядагы "үзүктөрдү" жумшартат. Сызыктын сегменти канчалык узун болсо, АА сегменти ошончолук узун болот.
Орктун ийнинде АА ушундай көрүнөт. Бул анын булчуңдарынын ийри сызыктарын тегиздетүү үчүн керек
Anti-aliasing оюнда же түсү белгисиз фондо колдонула турган спрайттын чегинен ашпашы керек. Мисалы, эгер сиз ачык фонго АА колдонсоңуз, кара түстөгү фондо антиалиасинг жаман көрүнөт.
6. Тандалма схема
Буга чейин контурлар толугу менен кара болчу, бул спрайтты абдан мультфильмдик кылып көрсөткөн. Сүрөт сегменттерге бөлүнгөндөй болду. Мисалы, колдогу кара сызыктар булчуңга өтө көп контрастты берип, каармандын биригүүсүн азайтат.
Эгерде спрайт табигыйраак болуп, сегментация азыраак айкын болуп калса, каармандын негизги формаларын окуу оңой болот. Бул үчүн, сиз тандалма контурду колдонсоңуз болот - кара контурду жарыкка жарым-жартылай алмаштырыңыз. Спрайттын жарыктандырылган бөлүгүндө сиз эң ачык түстөрдү колдонсоңуз болот, же спрайт терс мейкиндикке тийген жерде контурду толугу менен алып салсаңыз болот. Каранын ордуна, көлөкө үчүн тандалган түстү колдонушуңуз керек - ушундай жол менен сегментация сакталат (булчуңдарды, жүндөрдү жана башкаларды айырмалоо үчүн).
Бул этапта мен дагы кара көлөкөлөрдү коштум. Натыйжада орктун терисинде үч жашыл градация пайда болгон. Эң кочкул жашыл түс тандалма контур жана АА үчүн колдонулушу мүмкүн.
7. Акыркы тийүү
Акыр-аягы, каарман даяр болмоюнча же кийинкиге өтмөйүнчө, урунттуу жерлерди (спрайттагы эң жеңил тактар), деталдарды (сүйкөлөр, шпилькалар, тырыктар) жана башка жакшыртууларды кошуу керек.
Бул этапта колдонулушу мүмкүн болгон бир нече пайдалуу ыкмалар бар. Чиймени туурасынан айлантыңыз, бул көбүнчө пропорциядагы жана көлөкөдөгү каталарды аныктоого жардам берет. Сиз ошондой эле түстү алып салсаңыз болот - көлөкөлөрдү кайда өзгөртүү керек экенин түшүнүү үчүн каныккандыкты нөлгө коюңуз.
Ызы-чуу жаратуу (дитеринг, дитирлөө)
Буга чейин биз көбүнчө чоң, катуу көлөкө аймактарды колдонуп жатабыз. Бирок дагы бир техника бар - dithering, ал бир түстөн экинчи түскө үчүнчүнү кошпостон өтүүгө мүмкүндүк берет. Төмөндөгү мисалды карагыла.
Үстүнкү караңгыдан ачыкка чейинки градиент көктүн жүздөгөн ар кандай түстөрүн колдонот.
Орточо градиент тогуз гана түстү колдонот, бирок ошол эле түстөгү өтө көп түстөр бар. Тастык деп аталган нерсе пайда болот (англ. band - сызык), мында калың бирдей тилкелерден улам, көз түстөрдүн өзүнө эмес, түстөрдүн тийүү жерлерине басым жасайт.
Төмөнкү градиентте биз дитерингди колдондук, ал тилкелөөдөн качат жана эки гана түстү колдонот. Биз түс градациясын моделдөө үчүн ар кандай интенсивдүү ызы-чуу жаратабыз. Бул ыкма басып чыгарууда колдонулган жарым тонго (жарым тон сүрөтүнө) абдан окшош; ошондой эле стиплинг (дандуу сүрөт) - иллюстрацияларда жана комикстерде.
Оркто мен текстураны жеткирүү үчүн бир аз кыңылдадым. Кээ бир пикселдик сүрөтчүлөр аны такыр колдонушпайт, башкалары, тескерисинче, тартынышпайт жана абдан чеберчилик менен жасашат. Менин оюмча, дитер бир түс менен толтурулган чоң аймактарда (жогоруда 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 пикселден кем эмес болушу керек, циклдик анимация үч жолу кайталанышы керек, ал эми акыркы кадр башкалардын жарымынан узун болушу керек - эң популярдуу теория. Бирок, Твиттер сүрөттү көрсөтүү алгоритмдерин тынымсыз өзгөртүп жатканын эске алганда, бул талаптар канчалык деңгээлде аткарылышы керектиги белгисиз.
Менин билишимче инстаграмга сүрөттүн сапатын жоготпой коюу мүмкүн эмес. Бирок аны жок эле дегенде 512x512 пикселге чоңойтсоңуз, ал жакшыраак көрүнөт.
Source: www.habr.com