Indie tərtibatçıları çox vaxt eyni anda bir neçə rolu birləşdirməli olurlar: oyun dizayneri, proqramçı, bəstəkar, rəssam. Vizuallara gəldikdə isə, bir çox insanlar piksel sənətini seçirlər - ilk baxışdan sadə görünür. Ancaq bunu gözəl etmək üçün çoxlu təcrübə və müəyyən bacarıqlar lazımdır. Bu üslubun əsaslarını yenicə başa düşməyə başlayanlar üçün bir dərslik tapdım: nümunə olaraq iki spritdən istifadə edərək xüsusi proqram təminatı və rəsm texnikasının təsviri ilə.
Ümumi məlumat
Piksel sənəti, piksel səviyyəsində dəyişikliklərin edildiyi rəqəmsal sənət formasıdır. Əsasən 80-90-cı illərin video oyun qrafikası ilə əlaqələndirilir. O vaxtlar rəssamlar yaddaş məhdudiyyətlərini və aşağı qətnaməni nəzərə almalı idilər. Hal-hazırda, real 3D qrafika yaratmaq qabiliyyətinə baxmayaraq, piksel sənəti oyunlarda və ümumiyyətlə sənət üslubu kimi hələ də populyardır. Niyə? Nostalji bir yana qalsın, belə sıx bir çərçivədə sərin iş yaratmaq xoş və təltifedici bir problemdir.
Piksel sənətinə giriş maneəsi indie tərtibatçılarını cəlb edən ənənəvi incəsənət və 3D qrafika ilə müqayisədə nisbətən aşağıdır. Amma bu o demək deyil ki, asan olacaq bitir bu üslubda oyun. Crowdfunding platformalarında piksel sənəti metroidvaniyaları olan bir çox indie tərtibatçıları gördüm. Onlar hər şeyi bir ildə bitirəcəklərini düşünürdülər, amma əslində onlara daha altı il lazım idi.
Metal Slug 3 (Arcade). SNK, 2000
İnsanların çoxunun yaratmaq istədiyi səviyyədə piksel sənəti çox vaxt aparır və qısa dərsliklər çox azdır. 3D modellə işləyərkən siz onu döndərə, deformasiya edə, ayrı-ayrı hissələrini köçürə, animasiyaları bir modeldən digərinə köçürə və s. Yüksək səviyyəli piksel sənəti demək olar ki, həmişə pikselləri hər bir çərçivəyə diqqətlə yerləşdirmək üçün çox səy tələb edir.
Ümumiyyətlə, sizə xəbərdarlıq etmişəm.
İndi bir az üslubum haqqında: Mən əsasən video oyunlar üçün piksel sənəti çəkirəm və onlarda ilham tapıram. Xüsusilə, mən Famicom/NES, 16-bit konsollar və 90-cı illərin arcade oyunlarının pərəstişkarıyam. Dövrün sevimli oyunlarının piksel sənətini parlaq, inamlı və təmiz (lakin çox təmiz deyil) kimi təsvir etmək olar. Bu, mənim özümdə işlədiyim üslubdur, lakin siz tamamilə fərqli şeylər yaratmaq üçün bu dərslikdəki ideyaları və texnikaları asanlıqla tətbiq edə bilərsiniz. Müxtəlif rəssamların işlərini araşdırın və bəyəndiyiniz piksel sənətini yaradın!
Yumşaq
Piksel sənəti üçün əsas rəqəmsal alətlər pikselləri yerləşdirmək üçün Zoom və Qələmdir. Siz həmçinin Line, Shape, Select, Move və Paint Bucket-i faydalı tapacaqsınız. Belə alətlər dəsti ilə bir çox pulsuz və pullu proqram var. Ən məşhurları və özüm istifadə etdiyimlər haqqında sizə məlumat verəcəyəm.
Boya (pulsuz)
Əgər sizdə Windows varsa, daxili Paint primitiv proqramdır, lakin o, piksel sənəti üçün bütün alətlərə malikdir.
(pulsuz)
Brauzer vasitəsilə işləyən gözlənilməz funksional piksel sənəti redaktoru. İşinizi PNG və ya animasiyalı GIF kimi ixrac edə bilərsiniz. Başlayanlar üçün əla seçimdir.
(pulsuz)
GraphicsGale eşitdiyim yeganə redaktordur ki, o, xüsusi olaraq piksel sənəti üçün nəzərdə tutulmuşdur və animasiya alətləri daxildir. Yapon şirkəti HUMANBALANCE tərəfindən yaradılmışdır. 2017-ci ildən pulsuz olaraq mövcuddur və Aseprite-in populyarlığının artmasına baxmayaraq hələ də tələb olunur. Təəssüf ki, yalnız Windows-da işləyir.
($)
Bəlkə də hazırda ən populyar redaktordur. , bir çox xüsusiyyət, aktiv dəstək, Windows, Mac və Linux üçün versiyalar. Əgər siz piksel sənətinə ciddi yanaşırsınızsa və hələ də düzgün redaktoru tapmamısınızsa, bu sizə lazım ola bilər.
($$+)
GameMaker Studio 2 yaxşı Sprite Redaktoru ilə əla 2D alətdir. Öz oyunlarınız üçün piksel sənəti yaratmaq istəyirsinizsə, hər şeyi bir proqramda etmək çox rahatdır. İndi işləyərkən bu proqramdan istifadə edirəm , 50 retro oyun kolleksiyası: GameMaker-də spritlər və animasiyalar, Photoshop-da isə plitələr yaradıram.
($$$+)
Photoshop bahalı proqramdır, abunə ilə paylanır və piksel sənəti üçün nəzərdə tutulmayıb. Əgər siz yüksək rezolyusiyada illüstrasiyaların göstərilməsi ilə məşğul olmasanız və ya mənim kimi təsvirlə mürəkkəb manipulyasiyalar aparmağa ehtiyacınız yoxdursa, onu almağı məsləhət görmürəm. Siz orada statik spritlər və piksel sənəti yarada bilərsiniz, lakin bu, ixtisaslaşmış proqram təminatı ilə müqayisədə olduqca mürəkkəbdir (məsələn, GraphicsGale və ya Aseprite).
Digər
Mənim piksel sənət dəstim. Hər şey qaradır, indi fərq etdim.
Qrafik planşet ($$+)
Karpal tunel sindromunun qarşısını almaq üçün hər hansı rəqəmsal illüstrasiya işi üçün qrafik planşetləri tövsiyə edirəm. Müalicə etməkdənsə qarşısını almaq daha asandır. Bir gün ağrı hiss edəcəksən və bu, yalnız artacaq - ən əvvəldən özünüzə qayğı göstərin. Əvvəllər siçanla rəsm çəkdiyim üçün indi düymələrə basmağı tələb edən oyunları oynamaqda çətinlik çəkirəm. Hazırda Wacom Intuos Pro S istifadə edirəm.
Bilək dəstəyi ($)
Planşet ala bilmirsinizsə, heç olmasa bilək dəstəyi alın. Ən çox sevdiyim Mueller Green Fitted Bilək Bracedir. Qalanları ya çox sıxdır, ya da kifayət qədər dəstək vermir. Kaliperləri heç bir problem olmadan onlayn sifariş etmək olar.
96 × 96 piksel
Final Döyüşü. Capcom, 1989
Gəlin başlayaq! 96x96 piksel xarakterli sprite ilə başlayaq. Nümunə olaraq, mən bir ork çəkdim və onu Final Fight-dan (yuxarıdakı şəkil) ekran görüntüsünə yerləşdirdim ki, miqyasını başa düşə biləsiniz. Bu большой əksər retro oyunlar üçün sprite, ekran görüntüsü ölçüsü: 384x224 piksel.
Belə böyük bir sprite haqqında danışmaq istədiyim texnikanı göstərmək daha asan olacaq. Piksel başına göstərmə, daha çox tanış ola biləcəyiniz ənənəvi sənət formalarına (məsələn, rəsm və ya rəsm) daha çox bənzəyir. Əsas texnikaları mənimsədikdən sonra daha kiçik spritlərə keçəcəyik.
1. Palitra seçin
Piksel piksel sənətində hər hansı digər rəqəmsal aləmdən daha dərin bir anlayışdır. Piksel sənəti rənglər kimi məhdudiyyətləri ilə müəyyən edilir. Düzgün palitranı seçmək vacibdir, bu, üslubunuzu müəyyənləşdirməyə kömək edəcəkdir. Ancaq başlanğıcda palitralar haqqında düşünməməyi və mövcud olanlardan birini (və ya bir neçə təsadüfi rəng) seçməyi təklif edirəm - onu istənilən mərhələdə asanlıqla dəyişə bilərsiniz.
Bu dərslik üçün mən yaratdığımız 32 rəng palitrasından istifadə edəcəyəm . Piksel sənəti üçün onlar tez-tez 32 və ya 16 rəngdən yığılır. Bizimki Famicom və PC Mühərriki arasında bir yerdə görünəcək uydurma konsol üçün nəzərdə tutulmuşdur. Onu və ya hər hansı digərini götürə bilərsiniz - dərslik seçilmiş palitradan heç də asılı deyil.
2. Kobud konturlar
Qələm alətindən istifadə edərək rəsm çəkməyə başlayaq. Adi qələm və kağızla etdiyimiz kimi bir eskiz çəkək. Əlbəttə ki, piksel sənəti və ənənəvi sənət üst-üstə düşür, xüsusən də belə böyük spritlərə gəldikdə. Müşahidələrim göstərir ki, güclü piksel sənəti sənətçiləri ən azı əl ilə və əksinə rəsm çəkməyi yaxşı bacarırlar. Beləliklə, rəsm bacarıqlarınızı inkişaf etdirmək həmişə faydalıdır.
3. Konturların işlənməsi
Biz konturları dəqiqləşdiririk: əlavə pikselləri çıxarın və hər xəttin qalınlığını bir pikselə endirin. Bəs tam olaraq nə artıq hesab olunur? Bu suala cavab vermək üçün piksel xətlərini və pozuntularını başa düşməlisiniz.
Qanunsuzluqlar
Piksel sənətində iki əsas xətt çəkməyi öyrənməlisiniz: düz və əyri. Qələm və kağızla hər şey əzələ nəzarətinə aiddir, lakin biz kiçik rəngli bloklarla işləyirik.
Düzgün piksel xətləri çəkməyin açarı kəsiklərdir. Bunlar xəttin hamarlığını məhv edən tək piksellər və ya kiçik seqmentlərdir. Daha əvvəl dediyim kimi, bir piksel piksel sənətində böyük fərq yaradır, buna görə qeyri-bərabərlik bütün estetikanı poza bilər. Təsəvvür edin ki, kağız üzərində düz bir xətt çəkirik və qəfildən kimsə masaya dəyir: piksel sənətindəki qabarlar təsadüfi əyrimə bənzəyir.
Nümunələr:
Birbaşa
Əyrilər
Xətt seqmentlərinin uzunluğu tədricən artmadıqda və ya azaldıqda əyrilərdə pozuntular görünür.
Çarpmalardan tamamilə qaçmaq mümkün deyil - bütün sevimli retro oyunlarınızda bunlar var (əlbəttə ki, piksel sənəti yalnız sadə formalardan ibarət deyilsə). Məqsəd: Lazım olan hər şeyi göstərərkən qeyri-bərabərliyi minimuma endirin.
4. İlk rəngləri tətbiq edin
Doldurma və ya digər uyğun alətdən istifadə edərək xarakterinizi rəngləyin. Palitra işin bu hissəsini asanlaşdıracaq. Əgər proqram palitralardan istifadəni təmin etmirsə, onu yuxarıdakı nümunədə olduğu kimi birbaşa şəkildə yerləşdirə və damcıdan istifadə edərək rəngləri seçə bilərsiniz.
Sol alt küncdə dostumuzu çəkdim, tanış ol, bu Topdur. Bu, hər mərhələdə tam olaraq nə baş verdiyini başa düşməyi asanlaşdıracaq.
5. Kölgələmə
Kölgələri göstərməyin vaxtı gəldi - sadəcə sprite tünd rənglər əlavə edin. Bu, təsvirin üçölçülü görünməsini təmin edəcəkdir. Fərz edək ki, orkdan yuxarı solunda yerləşən bir işıq mənbəyimiz var. Bu o deməkdir ki, xarakterimizin üstündə və qarşısında olan hər şey işıqlanacaq. Aşağı sağa kölgələr əlavə edin.
Forma və həcm
Bu addım sizin üçün çətin olarsa, rəsminizi yalnız xətlər və rənglər deyil, üçölçülü formalar kimi düşünün. Formalar üçölçülü məkanda mövcuddur və kölgələrin köməyi ilə qurduğumuz həcmə malik ola bilər. Bu, personajı təfərrüatsız təsəvvür etməyə və onun pikseldən deyil, gildən olduğunu təsəvvür etməyə kömək edəcək. Kölgələmə yalnız yeni rənglər əlavə etmək deyil, bir forma yaratmaq prosesidir. Yaxşı dizayn edilmiş bir xarakterdə detallar əsas fiqurları gizlətmir: gözünüzü qıysanız, bəzi böyük işıq və kölgə qruplarını görəcəksiniz.
Anti-aliasing (anti-aliasing)
Hər dəfə yeni rəngdən istifadə edəndə anti-aliasing (AA) tətbiq edirəm. İki xətt seqmentinin kəsişdiyi künclərə ara rənglər əlavə etməklə pikselləri hamarlaşdırmağa kömək edir:
Boz piksellər xəttdəki "qırılmaları" yumşaldır. Xətt seqmenti nə qədər uzun olsa, AA seqmenti bir o qədər uzundur.
AA orkun çiynində belə görünür. Onun əzələlərinin əyrisini göstərən xətləri hamarlamaq lazımdır
Anti-aliasing oyunda və ya rəngi məlum olmayan fonda istifadə ediləcək spraytdan kənara çıxmamalıdır. Məsələn, açıq fonda AA tətbiq etsəniz, antialiasing qaranlıq fonda çirkin görünəcək.
6. Seçilmiş kontur
Əvvəllər konturlar tamamilə qara idi, bu da spriti çox cizgi filmi kimi göstərirdi. Şəkil seqmentlərə bölünmüş kimi görünürdü. Məsələn, qolun üzərindəki qara xətlər əzələ quruluşuna həddən artıq kontrast verir ki, bu da xarakterin daha az bağlı görünməsinə səbəb olur.
Sprite daha təbii olarsa və seqmentasiya daha az aydın olarsa, xarakterin əsas formalarını oxumaq daha asan olacaq. Bunu etmək üçün, seçmə konturdan istifadə edə bilərsiniz - qara konturu qismən daha yüngül ilə əvəz edin. Sprite-nin işıqlandırılmış hissəsində siz ən açıq rənglərdən istifadə edə bilərsiniz və ya spritin mənfi boşluğa toxunduğu yerlərdə konturu tamamilə silə bilərsiniz. Qara əvəzinə, kölgə üçün seçilmiş rəngdən istifadə etməlisiniz - bu şəkildə seqmentasiya qorunacaq (əzələləri, xəzləri və s. ayırmaq üçün).
Mən də bu mərhələdə daha tünd kölgələr əlavə etdim. Nəticə orkun dərisində üç gradasiya yaşıl oldu. Ən tünd yaşıl rəng seçmə kontur və AA üçün istifadə edilə bilər.
7. Son toxunuşlar
Nəhayət, personaj hazır olana qədər və ya növbəti birinə keçməyincə diqqəti cəlb edən məqamları (sprite üzərində ən yüngül ləkələr), detallar (sırğalar, saplamalar, çapıqlar) və digər təkmilləşdirmələri əlavə etməyə dəyər.
Bu mərhələdə tətbiq oluna biləcək bir neçə faydalı texnika var. Rəsmi üfüqi şəkildə çevirin, bu, tez-tez nisbətlərdə və kölgədə səhvləri müəyyən etməyə kömək edir. Rəngi də silə bilərsiniz - kölgələri harada dəyişdirməyiniz lazım olduğunu başa düşmək üçün doyma səviyyəsini sıfıra qoyun.
Səs-küy yaratmaq (dithering, dithering)
İndiyə qədər biz əsasən böyük, möhkəm kölgə sahələrindən istifadə etmişik. Ancaq başqa bir texnika var - dithering, üçüncü əlavə etmədən bir rəngdən digərinə keçməyə imkan verir. Aşağıdakı nümunəyə baxın.
Üst tünddən açıq gradient mavinin yüzlərlə müxtəlif çalarlarından istifadə edir.
Orta gradient yalnız doqquz rəngdən istifadə edir, lakin eyni rəngin hələ də çoxlu çalarları var. Qalın vahid zolaqlar sayəsində göz rənglərin özlərinə deyil, rənglərin təmas nöqtələrinə diqqət yetirdiyi sözdə bantlama yaranır (İngilis bandından - zolaq).
Aşağı gradientdə biz dithering tətbiq etdik ki, bu da bantlanmanın qarşısını alır və yalnız iki rəngdən istifadə edir. Rəng gradasiyasını simulyasiya etmək üçün müxtəlif intensivlikdə səs-küy yaradırıq. Bu texnika çapda istifadə olunan yarım ton (yarım ton təsviri) ilə çox oxşardır; eləcə də naxışlama (dənəli təsvir) - illüstrasiyalar və komikslərdə.
Orkda mən faktura çatdırmaq üçün bir qədər tərəddüd etdim. Bəzi piksel sənətkarları ondan ümumiyyətlə istifadə etmirlər, digərləri, əksinə, utancaq deyillər və bunu çox məharətlə edirlər. Hesab edirəm ki, dither tək rənglə doldurulmuş geniş ərazilərdə (yuxarıdakı Metal Slug ekran görüntüsündə səmaya baxın) və ya kobud və qeyri-bərabər görünməli olan yerlərdə (kir kimi) daha yaxşı görünür. Onu necə istifadə edəcəyinizi özünüz qərar verin.
Əgər siz irimiqyaslı və yüksək keyfiyyətli dithering nümunəsini görmək istəyirsinizsə, 80-ci illərdən Britaniya studiyası olan The Bitmap Brothers-ın oyunlarına və ya PC-98 kompüterindəki oyunlara baxın. Yalnız onların hamısının NSFW olduğunu unutmayın.
Kakyusei (PC-98). Elf, 1996
Bu şəkildə cəmi 16 rəng var!
8. Son baxış
Piksel sənətinin təhlükələrindən biri onun asan və sadə görünməsidir (quruluşu və üslub məhdudiyyətlərinə görə). Ancaq spritlərinizi təmizləməyə çox vaxt sərf edəcəksiniz. Bu, həll edilməli olan tapmacaya bənzəyir - buna görə piksel sənəti mükəmməllikçiləri cəlb edir. Unutmayın ki, bir sprite çox vaxt çəkməməlidir - bu, olduqca mürəkkəb parçalar kolleksiyasının sadəcə kiçik bir parçasıdır. Böyük mənzərəni gözdən qaçırmamaq vacibdir.
Piksel sənətiniz oyun üçün olmasa belə, bəzən özünüzə “Bu, artıq kifayət qədər yaxşıdır!” deməyə dəyər. Və davam edin. Bacarıqlarınızı inkişaf etdirməyin ən yaxşı yolu, mümkün qədər çox mövzudan istifadə edərək, bütün prosesi başdan sona qədər mümkün qədər çox keçməkdir.
Və bəzən bir az sonra təzə gözlərlə baxa bilmək üçün bir sprite bir müddət buraxmaq faydalıdır.
32x32 piksel
Əvvəlcə böyük 96x96 piksel sprite yaratdıq, çünki bu ölçüdə o, daha çox rəsm və ya rəngləmə kimidir, lakin piksellərlə. Sprite nə qədər kiçik olsa, göstərməli olduğu şeyə bir o qədər az bənzəyir və hər piksel bir o qədər vacibdir.
Super Mario Bros-da. Marionun gözü sadəcə iki pikseldir, biri digərinin üstündədir. Həm də qulağı. Xarakterin yaradıcısı Şigeru Miyamoto bığın burnu üzün qalan hissəsindən ayırmaq üçün lazım olduğunu söylədi. Beləliklə, Marionun əsas xüsusiyyətlərindən biri sadəcə xarakter dizaynı deyil, praqmatik hiylədir. Bu da köhnə müdrikliyi təsdiqləyir - "zərurət ixtira anasıdır".
32x32 piksel sprite yaratmağın əsas mərhələləri artıq bizə tanışdır: eskiz, rəng, kölgələr, daha da dəqiqləşdirmə. Amma belə şəraitdə ilkin eskiz kimi kiçik ölçülərə görə kontur çəkmək əvəzinə rəngli formalar seçirəm. Rəng xarakterin müəyyən edilməsində konturdan daha mühüm rol oynayır. Bir daha Marioya baxın, onun heç bir konturu yoxdur. Maraqlı olan təkcə bığ deyil. Yanvarları qulaqlarının formasını müəyyən edir, qolları qollarını göstərir və ümumi forması bütün bədənini az-çox aydın şəkildə göstərir.
Kiçik spritlər yaratmaq daimi bir kompromisdir. Bir vuruş əlavə etsəniz, kölgə üçün yer itirə bilərsiniz. Xarakterinizin açıq-aydın görünən qolları və ayaqları varsa, baş yəqin ki, çox böyük olmamalıdır. Rəngdən, seçmə vuruşdan və anti-aliasingdən səmərəli istifadə etsəniz, göstərilən obyekt əslində olduğundan daha böyük görünəcək.
Kiçik spritlər üçün chibi stilini bəyənirəm: personajlar çox yaraşıqlı görünür, onların böyük başları və gözləri var. Məhdud məkanda rəngarəng xarakter və ümumilikdə çox gözəl üslub yaratmaq üçün əla yoldur. Ancaq bəlkə də bir xarakterin hərəkətliliyini və ya gücünü göstərməlisiniz, sonra bədənin daha güclü görünməsi üçün başınıza daha az yer verə bilərsiniz. Hamısı üstünlüklərinizdən və məqsədlərinizdən asılıdır.
Bütün komanda toplandı!
Fayl formatları
Bu nəticə istənilən piksel rəssamını əsəbiləşdirə bilər
Gördüyünüz şəkil şəklin JPG formatında saxlanmasının nəticəsidir. Fayl sıxılma alqoritmləri səbəbindən bəzi məlumatlar itirildi. Yüksək keyfiyyətli piksel sənəti pis görünəcək və onu orijinal palitrasına qaytarmaq asan olmayacaq.
Statik şəkli keyfiyyətini itirmədən saxlamaq üçün PNG formatından istifadə edin. Animasiyalar üçün - GIF.
Piksel sənətini necə düzgün paylaşmaq olar
Sosial şəbəkələrdə piksel sənətini paylaşmaq rəy almaq və eyni üslubda işləyən digər rəssamlarla tanış olmaq üçün əla yoldur. #pixelart hashtagından istifadə etməyi unutmayın. Təəssüf ki, sosial şəbəkələr tez-tez PNG-ni soruşmadan JPG-yə çevirir və təcrübənizi daha da pisləşdirir. Üstəlik, şəklinizin niyə çevrildiyi həmişə aydın deyil.
Müxtəlif sosial şəbəkələr üçün lazımi keyfiyyətdə piksel təsvirini saxlamaq üçün bir neçə məsləhət var.
PNG faylınızı Twitter-də dəyişməz saxlamaq üçün 256-dan az rəng və ya istifadə edin faylınızın ən uzun tərəfində 900 pikseldən az olduğunu. Fayl ölçüsünü ən azı 512x512 pikselə qədər artırardım. Ölçəkləmə 100-ə bərabərdir (200%, 250% deyil) və kəskin kənarları qorunur (Photoshop-da ən yaxın qonşu).
Twitter yazıları üçün animasiyalı GIF-lər çəkisi 15 MB-dan çox deyil. Şəkil ən azı 800x800 piksel olmalıdır, loop animasiyası üç dəfə təkrarlanmalıdır və sonuncu çərçivə bütün digərlərinin yarısı qədər uzun olmalıdır - ən məşhur nəzəriyyə. Bununla belə, Twitter-in şəkillərin göstərilməsi alqoritmlərini daim dəyişdiyini nəzərə alsaq, bu tələblərin nə dərəcədə yerinə yetirilməli olduğu aydın deyil.
Bildiyimə görə, keyfiyyətini itirmədən İnstaqramda şəkil qoymaq mümkün deyil. Ancaq ən azı 512x512 pikselə qədər böyütsəniz, mütləq daha yaxşı görünəcəkdir.
Mənbə: www.habr.com