Pembangun indie selalunya perlu menggabungkan beberapa peranan sekaligus: pereka permainan, pengaturcara, komposer, artis. Dan apabila ia datang kepada visual, ramai orang memilih seni piksel - pada pandangan pertama ia kelihatan mudah. Tetapi untuk melakukannya dengan indah, anda memerlukan banyak pengalaman dan kemahiran tertentu. Saya menemui tutorial untuk mereka yang baru mula memahami asas gaya ini: dengan penerangan perisian khas dan teknik lukisan menggunakan dua sprite sebagai contoh.
Latar Belakang
Seni piksel ialah satu bentuk seni digital di mana perubahan dibuat pada tahap piksel. Ia dikaitkan terutamanya dengan grafik permainan video dari tahun 80-an dan 90-an. Pada masa itu, artis perlu mengambil kira had memori dan resolusi rendah. Pada masa kini, seni piksel masih popular dalam permainan dan sebagai gaya seni secara umum, walaupun keupayaan untuk mencipta grafik 3D yang realistik. kenapa? Diketepikan nostalgia, mencipta karya yang keren dalam rangka kerja yang begitu ketat adalah cabaran yang menyeronokkan dan bermanfaat.
Halangan untuk memasuki seni piksel agak rendah berbanding seni tradisional dan grafik 3D, yang menarik minat pembangun indie. Tetapi itu tidak bermakna ia akan menjadi mudah selesai permainan dalam gaya ini. Saya telah melihat banyak pembangun indie dengan metroidvania seni piksel pada platform crowdfunding. Mereka fikir mereka akan menyelesaikan segala-galanya dalam setahun, tetapi sebenarnya mereka memerlukan enam tahun lagi.
Metal Slug 3 (Arcade). SNK, 2000
Seni piksel pada tahap di mana kebanyakan orang ingin menciptanya memerlukan banyak masa dan terdapat sangat sedikit tutorial pendek. Apabila bekerja dengan model 3D, anda boleh memutarkannya, mengubah bentuknya, mengalih bahagian individunya, menyalin animasi dari satu model ke model yang lain dan sebagainya. Seni piksel peringkat tinggi hampir selalu memerlukan banyak usaha untuk meletakkan piksel dengan teliti pada setiap bingkai.
Secara umum, saya memberi amaran kepada anda.
Dan sekarang sedikit tentang gaya saya: Saya terutamanya melukis seni piksel untuk permainan video dan mencari inspirasi di dalamnya. Khususnya, saya peminat Famicom/NES, konsol 16-bit dan permainan arked 90-an. Seni piksel permainan kegemaran saya pada zaman itu boleh digambarkan sebagai terang, yakin dan bersih (tetapi tidak terlalu bersih), dan bukannya jelas dan minimalis. Ini adalah gaya yang saya kerjakan dalam diri saya sendiri, tetapi anda boleh menggunakan idea dan teknik dari tutorial ini dengan mudah untuk mencipta perkara yang sama sekali berbeza. Terokai karya artis yang berbeza dan cipta seni piksel yang anda suka!
Software
Alat digital asas untuk seni piksel ialah Zum dan Pensil untuk meletakkan piksel. Anda juga akan mendapati Line, Shape, Select, Move dan Paint Baldi berguna. Terdapat banyak perisian percuma dan berbayar dengan set alat sedemikian. Saya akan memberitahu anda tentang yang paling popular dan yang saya gunakan sendiri.
Cat (percuma)
Jika anda mempunyai Windows, Paint terbina dalam ialah program primitif, tetapi ia mempunyai semua alat untuk seni piksel.
(percuma)
Editor seni piksel yang berfungsi secara tidak dijangka yang berjalan melalui penyemak imbas. Anda boleh mengeksport karya anda sebagai PNG atau GIF animasi. Pilihan yang sangat baik untuk pemula.
(percuma)
GraphicsGale ialah satu-satunya editor yang saya dengar yang direka khusus untuk seni piksel dan termasuk alat animasi. Ia dicipta oleh syarikat Jepun HUMANBALANCE. Ia telah tersedia secara percuma sejak 2017 dan masih dalam permintaan, walaupun peningkatan populariti Aseprite. Malangnya, ia hanya berfungsi pada Windows.
($)
Mungkin editor paling popular pada masa ini. , banyak ciri, sokongan aktif, versi untuk Windows, Mac dan Linux. Jika anda serius tentang seni piksel dan masih belum menemui editor yang betul, ini mungkin yang anda perlukan.
($$+)
GameMaker Studio 2 ialah alat 2D yang sangat baik dengan Editor Sprite yang baik. Jika anda ingin mencipta seni piksel untuk permainan anda sendiri, adalah sangat mudah untuk melakukan segala-galanya dalam satu program. Sekarang saya menggunakan perisian ini semasa bekerja , koleksi 50 permainan retro: Saya mencipta sprite dan animasi dalam GameMaker, dan tileset dalam Photoshop.
($$$+)
Photoshop ialah perisian mahal, diedarkan melalui langganan, dan tidak direka untuk seni piksel. Saya tidak mengesyorkan membelinya melainkan anda terlibat dalam menghasilkan ilustrasi dalam resolusi tinggi, atau anda tidak perlu melakukan manipulasi kompleks dengan imej, seperti saya. Anda boleh mencipta sprite statik dan seni piksel di dalamnya, tetapi ia agak rumit berbanding perisian khusus (contohnya, GraphicsGale atau Aseprite).
Lain-lain
Kit seni piksel saya. Semuanya hitam, baru saya perasan sekarang.
Tablet grafik ($$+)
Saya mengesyorkan tablet grafik untuk sebarang kerja ilustrasi digital untuk mengelakkan sindrom carpal tunnel. Ia lebih mudah untuk mencegah daripada mengubati. Satu hari anda akan rasa sakit dan ia hanya akan meningkat - jaga diri anda dari awal. Disebabkan saya pernah melukis dengan tetikus, saya kini sukar bermain permainan yang memerlukan saya menekan kekunci. Saya sedang menggunakan Wacom Intuos Pro S.
Sokongan pergelangan tangan ($)
Jika anda tidak boleh mendapatkan tablet, sekurang-kurangnya dapatkan sokongan pergelangan tangan. Kegemaran saya ialah Mueller Green Fitted Wrist Brace. Selebihnya sama ada terlalu ketat atau tidak memberikan sokongan yang mencukupi. Caliper boleh ditempah dalam talian tanpa sebarang masalah.
96 Γ 96 piksel
Perjuangan Akhir. Capcom, 1989
Mari kita mulakan! Mari kita mulakan dengan sprite aksara 96x96 piksel. Sebagai contoh, saya melukis orc dan meletakkannya pada tangkapan skrin daripada Final Fight (gambar di atas) supaya anda boleh memahami skala. ini Π±ΠΎΠ»ΡΡΠΎΠΉ sprite untuk kebanyakan permainan retro, saiz tangkapan skrin: 384x224 piksel.
Pada sprite yang besar itu akan lebih mudah untuk menunjukkan teknik yang saya ingin bincangkan. Penyampaian per piksel juga lebih serupa dengan bentuk seni tradisional (seperti lukisan atau lukisan) yang mungkin anda lebih biasa. Setelah menguasai teknik asas, kita akan beralih kepada sprite yang lebih kecil.
1. Pilih palet
Pixel ialah konsep yang lebih mendalam dalam seni piksel berbanding mana-mana alam digital lain. Seni piksel ditakrifkan oleh batasannya, seperti warna. Adalah penting untuk memilih palet yang betul; ia akan membantu menentukan gaya anda. Tetapi pada permulaannya, saya cadangkan untuk tidak memikirkan palet dan memilih salah satu daripada yang sedia ada (atau hanya beberapa warna rawak) - anda boleh menukarnya dengan mudah pada mana-mana peringkat.
Untuk tutorial ini saya akan menggunakan 32 palet warna yang kami buat . Untuk seni piksel, ia sering dipasang daripada 32 atau 16 warna. Kami direka untuk konsol fiksyen yang akan muncul di suatu tempat antara Famicom dan Enjin PC. Anda boleh mengambilnya atau yang lain - tutorial tidak bergantung sama sekali pada palet yang dipilih.
2. Garis besar kasar
Mari mula melukis menggunakan alat Pensil. Mari kita lukis lakaran dengan cara yang sama seperti yang kita lakukan dengan pen dan kertas biasa. Sudah tentu, seni piksel dan seni tradisional bertindih, terutamanya apabila ia berkaitan dengan sprite besar itu. Pemerhatian saya menunjukkan bahawa artis seni piksel yang kuat sekurang-kurangnya mahir melukis dengan tangan dan begitu juga sebaliknya. Jadi membangunkan kemahiran lukisan anda sentiasa berguna.
3. Penghuraian kontur
Kami memperhalusi kontur: alih keluar piksel tambahan dan kurangkan ketebalan setiap baris kepada satu piksel. Tetapi apa sebenarnya yang dianggap berlebihan? Untuk menjawab soalan ini, anda perlu memahami garis piksel dan penyelewengan.
penyelewengan
Anda perlu belajar cara melukis dua garisan asas dalam seni piksel: lurus dan melengkung. Dengan pen dan kertas semuanya mengenai kawalan otot, tetapi kami bekerja dengan blok kecil warna.
Kunci untuk melukis garisan piksel yang betul ialah jaggies. Ini adalah piksel tunggal atau segmen kecil yang memusnahkan kelancaran garisan. Seperti yang saya katakan sebelum ini, satu piksel membuat perbezaan besar dalam seni piksel, jadi ketidaksamaan boleh merosakkan keseluruhan estetik. Bayangkan melukis garis lurus di atas kertas dan tiba-tiba seseorang memukul meja: bonggol dalam seni piksel kelihatan seperti coretan rawak.
ΠΡΠΈΠΌΠ΅ΡΡ:
Garis lurus
Lengkung
Penyelewengan muncul dalam lengkung apabila panjang segmen garisan tidak bertambah atau berkurang secara beransur-ansur.
Tidak mustahil untuk mengelakkan benjolan sepenuhnya - semua permainan retro kegemaran anda mempunyainya (melainkan, sudah tentu, seni piksel terdiri semata-mata daripada bentuk mudah). Matlamat: Pastikan ketidaksamaan pada tahap minimum sementara masih menunjukkan semua yang diperlukan.
4. Sapukan warna pertama
Warnakan watak anda menggunakan isian atau alat lain yang sesuai. Palet akan memudahkan bahagian kerja ini. Jika perisian tidak menyediakan penggunaan palet, anda boleh meletakkannya terus dalam gambar, seperti dalam contoh di atas, dan pilih warna menggunakan eyedropper.
Di sudut kiri bawah saya lukis kawan kita, jumpa, ini Ball. Ia akan memudahkan untuk memahami apa sebenarnya yang berlaku pada setiap peringkat.
5. Melorek
Sudah tiba masanya untuk memaparkan bayang-bayang - hanya tambahkan warna yang lebih gelap pada sprite. Ini akan menjadikan imej kelihatan tiga dimensi. Mari kita anggap bahawa kita mempunyai satu sumber cahaya yang terletak di atas orc di sebelah kirinya. Ini bermakna semua yang di atas dan di hadapan watak kita akan diterangi. Tambahkan bayang-bayang di bahagian bawah sebelah kanan.
Borang dan kelantangan
Jika langkah ini mencabar untuk anda, fikirkan lukisan anda sebagai bentuk tiga dimensi dan bukannya hanya garisan dan warna. Bentuk wujud dalam ruang tiga dimensi dan boleh mempunyai kelantangan, yang kami bina dengan bantuan bayang-bayang. Ini akan membantu anda menggambarkan watak tanpa butiran dan bayangkan bahawa dia diperbuat daripada tanah liat dan bukan piksel. Shading bukan sekadar menambah warna baru, ia adalah proses membina bentuk. Pada watak yang direka dengan baik, butiran tidak menyembunyikan bentuk asas: jika anda menjeling, anda akan melihat beberapa gugusan besar cahaya dan bayang.
Anti-aliasing (anti-aliasing)
Setiap kali saya menggunakan warna baru, saya menggunakan anti-aliasing (AA). Ia membantu melicinkan piksel dengan menambahkan warna perantaraan di sudut tempat dua segmen garis bertemu:
Piksel kelabu melembutkan "pecah" dalam baris. Semakin panjang segmen garisan, semakin panjang segmen AA.
Inilah rupa AA di bahu orc. Ia diperlukan untuk melicinkan garisan yang menunjukkan lengkungan ototnya
Anti-aliasing tidak boleh melebihi sprite yang akan digunakan dalam permainan atau pada latar belakang yang warnanya tidak diketahui. Contohnya, jika anda menggunakan AA pada latar belakang yang terang, anti-aliasing akan kelihatan hodoh pada latar belakang gelap.
6. Garis besar terpilih
Sebelum ini, garis besarnya berwarna hitam sepenuhnya, yang menjadikan sprite itu kelihatan sangat kartun. Gambar itu seolah-olah dibahagikan kepada beberapa segmen. Sebagai contoh, garis hitam pada lengan memberikan terlalu banyak kontras kepada otot, menjadikan watak itu kelihatan kurang padu.
Jika sprite menjadi lebih semula jadi dan pembahagian kurang jelas, bentuk asas watak akan lebih mudah dibaca. Untuk melakukan ini, anda boleh menggunakan garis besar terpilih - sebahagiannya menggantikan garis hitam dengan yang lebih ringan. Pada bahagian sprite yang diterangi, anda boleh menggunakan warna paling terang, atau, di mana sprite menyentuh ruang negatif, anda boleh mengeluarkan garis besar sepenuhnya. Daripada hitam, anda perlu menggunakan warna yang dipilih untuk bayang - dengan cara ini segmentasi akan dipelihara (untuk membezakan antara otot, bulu, dan sebagainya).
Saya juga menambah bayang-bayang yang lebih gelap pada peringkat ini. Hasilnya ialah tiga gradasi hijau pada kulit orc. Warna hijau paling gelap boleh digunakan untuk garis besar terpilih dan AA.
7. Sentuhan akhir
Akhir sekali, ia patut menambah sorotan (bintik paling terang pada sprite), butiran (anting, kancing, parut) dan penambahbaikan lain sehingga watak itu bersedia atau sehingga anda perlu beralih ke yang seterusnya.
Terdapat beberapa teknik berguna yang boleh diaplikasikan pada peringkat ini. Putar lukisan secara mendatar, ini selalunya membantu untuk mengenal pasti ralat dalam perkadaran dan teduhan. Anda juga boleh mengalih keluar warna - tetapkan ketepuan kepada sifar untuk memahami di mana anda perlu menukar bayang-bayang.
Mencipta bunyi bising (dithering, dithering)
Setakat ini kami kebanyakannya menggunakan kawasan bayang-bayang pepejal yang besar. Tetapi ada teknik lain - dithering, yang membolehkan anda pergi dari satu warna ke warna lain tanpa menambah yang ketiga. Lihat contoh di bawah.
Kecerunan gelap ke terang atas menggunakan ratusan warna biru yang berbeza.
Kecerunan purata hanya menggunakan sembilan warna, tetapi masih terdapat terlalu banyak rona warna yang sama. Banding yang dipanggil timbul (dari jalur Inggeris - jalur), di mana, disebabkan oleh jalur seragam tebal, mata memfokuskan pada titik sentuhan warna, bukannya warna itu sendiri.
Pada kecerunan bawah kami menggunakan dithering, yang mengelakkan jalur dan hanya menggunakan dua warna. Kami mencipta bunyi dengan keamatan yang berbeza-beza untuk mensimulasikan penggredan warna. Teknik ini hampir sama dengan halftone (imej halftone) yang digunakan dalam percetakan; serta stippling (imej berbutir) - dalam ilustrasi dan komik.
Pada orc, saya agak mengalihkan pandangan untuk menyampaikan tekstur. Sesetengah artis piksel tidak menggunakannya sama sekali, yang lain, sebaliknya, tidak malu dan melakukannya dengan sangat mahir. Saya mendapati bahawa dither kelihatan terbaik pada kawasan besar yang dipenuhi dengan satu warna (lihat langit dalam tangkapan skrin Metal Slug di atas) atau pada kawasan yang sepatutnya kelihatan kasar dan tidak rata (seperti kotoran). Tentukan sendiri cara menggunakannya.
Jika anda ingin melihat contoh dithering berskala besar dan berkualiti tinggi, lihat permainan The Bitmap Brothers, studio British dari tahun 80-an, atau permainan pada komputer PC-98. Perlu diingat bahawa mereka semua adalah NSFW.
Kakyusei (PC-98). Elf, 1996
Terdapat hanya 16 warna dalam imej ini!
8. Pandangan terakhir
Salah satu bahaya seni piksel ialah ia kelihatan mudah dan ringkas (disebabkan oleh struktur dan batasan gayanya). Tetapi anda akhirnya akan menghabiskan banyak masa untuk menapis sprite anda. Ia seperti teka-teki yang perlu diselesaikan - itulah sebabnya seni piksel menarik perfeksionis. Ingat bahawa satu sprite tidak sepatutnya mengambil terlalu banyak masa - ia hanyalah sekeping kecil daripada koleksi kepingan yang sangat kompleks. Adalah penting untuk tidak melupakan gambaran besar.
Walaupun seni piksel anda bukan untuk permainan, kadangkala ia berbaloi untuk memberitahu diri anda sendiri, "Ia sudah cukup bagus!" Dan teruskan. Cara terbaik untuk mengembangkan kemahiran anda ialah melalui keseluruhan proses dari awal hingga akhir seberapa banyak yang mungkin, menggunakan sebanyak mungkin topik.
Dan kadangkala ia berguna untuk meninggalkan sprite untuk seketika supaya anda boleh melihatnya dengan mata segar sedikit kemudian.
32x32 piksel
Kami mencipta sprite 96x96 piksel yang besar dahulu kerana pada saiz itu ia lebih seperti melukis atau melukis, tetapi dengan piksel. Semakin kecil sprite, semakin kurang serupa dengan apa yang sepatutnya dipaparkan, dan semakin penting setiap piksel.
Dalam Super Mario Bros. Mata Mario hanya dua piksel, satu di atas yang lain. Dan telinganya juga. Pencipta watak Shigeru Miyamoto berkata bahawa misai diperlukan untuk memisahkan hidung dari seluruh muka. Jadi salah satu ciri utama Mario bukan hanya reka bentuk watak, tetapi muslihat pragmatik. Yang mengesahkan kebijaksanaan lama - "keperluan adalah ibu ciptaan."
Peringkat utama mencipta sprite 32x32 piksel sudah biasa kepada kami: lakaran, warna, bayang-bayang, penghalusan selanjutnya. Tetapi dalam keadaan sedemikian, sebagai lakaran awal, saya memilih bentuk berwarna dan bukannya melukis garis besar kerana saiznya yang kecil. Warna memainkan peranan yang lebih penting dalam menentukan watak daripada garis besar. Lihat Mario sekali lagi, dia tidak mempunyai garis besar sama sekali. Bukan misai sahaja yang menarik. Jambangnya menentukan bentuk telinganya, lengan bajunya menunjukkan lengannya, dan bentuk keseluruhannya lebih kurang jelas menunjukkan keseluruhan badannya.
Mencipta sprite kecil adalah kompromi yang berterusan. Jika anda menambah pukulan, anda mungkin kehilangan ruang untuk bayang-bayang. Jika watak anda mempunyai tangan dan kaki yang jelas kelihatan, kepala mungkin tidak terlalu besar. Jika anda menggunakan warna, strok terpilih dan anti-aliasing dengan berkesan, objek yang diberikan akan kelihatan lebih besar daripada yang sebenarnya.
Untuk sprite kecil saya suka gaya chibi: watak-wataknya kelihatan sangat comel, mereka mempunyai kepala dan mata yang besar. Cara yang bagus untuk mencipta watak berwarna-warni dalam ruang yang terhad, dan secara keseluruhan gaya yang sangat bagus. Tetapi mungkin anda perlu menunjukkan mobiliti atau kekuatan watak, kemudian anda boleh memberi lebih sedikit ruang kepada kepala untuk menjadikan badan kelihatan lebih bertenaga. Semuanya bergantung pada pilihan dan matlamat anda.
Seluruh pasukan berkumpul!
Format fail
Keputusan ini boleh membuat mana-mana artis piksel gementar
Gambar yang anda lihat adalah hasil daripada menyimpan gambar dalam JPG. Sesetengah data telah hilang disebabkan oleh algoritma pemampatan fail. Seni piksel berkualiti tinggi akhirnya akan kelihatan buruk, dan mengembalikannya kepada palet asalnya tidak akan mudah.
Untuk menyimpan imej statik tanpa kehilangan kualiti, gunakan format PNG. Untuk animasi - GIF.
Cara berkongsi seni piksel dengan betul
Berkongsi seni piksel pada rangkaian sosial ialah cara terbaik untuk mendapatkan maklum balas dan bertemu artis lain yang bekerja dalam gaya yang sama. Jangan lupa gunakan hashtag #pixelart. Malangnya, rangkaian sosial sering menukar PNG kepada JPG tanpa bertanya, menjadikan pengalaman anda lebih teruk. Selain itu, ia tidak selalu jelas mengapa imej anda telah ditukar.
Terdapat beberapa petua tentang cara menyimpan seni piksel dalam kualiti yang diperlukan untuk pelbagai rangkaian sosial.
Untuk memastikan fail PNG anda tidak berubah di Twitter, gunakan kurang daripada 256 warna atau bahawa fail anda kurang daripada 900 piksel pada bahagian terpanjang. Saya akan meningkatkan saiz fail kepada sekurang-kurangnya 512x512 piksel. Dan supaya penskalaan adalah gandaan 100 (200%, bukan 250%) dan tepi tajam dikekalkan (Nearest Neighbor in Photoshop).
GIF animasi untuk Catatan Twitter berat tidak melebihi 15 MB. Imej mestilah sekurang-kurangnya 800x800 piksel, animasi gelung mesti berulang tiga kali, dan bingkai terakhir mestilah separuh panjang daripada semua yang lain - teori yang paling popular. Walau bagaimanapun, tidak jelas sejauh mana keperluan ini perlu dipenuhi, memandangkan Twitter sentiasa mengubah algoritma paparan imejnya.
Setahu saya, adalah mustahil untuk menyiarkan gambar di Instagram tanpa kehilangan kualiti. Tetapi ia pasti akan kelihatan lebih baik jika anda membesarkannya kepada sekurang-kurangnya 512x512 piksel.
Sumber: www.habr.com