Pengantar Pixel Art untuk Game. Panduan Membuat Pixel Art untuk Game

Saya bekerja membuat alat dan mesin untuk seniman yang membuat game dan efek visual selama lebih dari satu dekade, dan saya selalu dibuat bingung dengan perbedaan yang dibuat orang antara "seni perangkat lunak" dan "seni permainan nyata". Saya juga memperhatikan bahwa orang yang memberi Anda izin gratis atas grafik buruk sebagian besar adalah programmer lain. Tidak peduli seberapa menyenangkan permainan Anda atau betapa menakjubkannya demo Anda secara teknis, non-programmer yang Anda tunjukkan karakternya akan berpikir, “Apakah dia punya jetpack atau ada yang lain?” Seringkali, Anda dapat menemukan cara untuk berkreasi grafis yang bagus tanpa harus menggambarnya dari awal. Namun terkadang Anda perlu membuat grafik dengan cepat. Batasan anggaran atau aturan dalam kompetisi game, atau sekadarnya waktu singkat untuk prototipe, mereka mungkin meminta Anda membawa penggaris dan kuas di tangan Anda.

Aku tidak bisa menggambar, sungguh... Aku ingin bilang, lihat ini:

Jika grafik Anda seperti ini, maka artikel ini cocok untuk Anda. Saya pikir saya akan berbagi beberapa tips tentang cara membuat grafis Anda lebih baik. Kiat-kiat ini akan berguna bagi semua orang, terlepas dari kemampuan dan pengalaman menggambar.

Meskipun tip seperti "membuat sketsa setiap hari" atau "mengunjungi museum seni" dapat bermanfaat bagi calon seniman, artikel ini bukan untuk seniman, melainkan tentang cara membuat orang mengira Anda seorang pembuat kode, pemrogram, atau penghobi. matematika, memiliki beberapa kemampuan artistik.

Selain itu, tidak satu pun (hampir) tips ini memerlukan “latihan”, meskipun latihan bermanfaat dan bahkan penting bagi seniman sejati. Tampaknya tenggat waktu suatu proyek selalu tiba pada dini hari, dan yang Anda perlukan hanyalah beberapa sprite.

Beberapa dari cerita ini juga akan berguna bagi pengguna Photoshop, karena sejauh yang saya tahu, konsep yang sama berlaku untuk program menggambar apa pun, dan ada operasi serupa untuk semua yang saya sebutkan di sini di Gimp, dan mungkin di program lain mana pun Anda berada. menggunakan.

Beberapa di antaranya juga ditujukan untuk peserta kompetisi LudumDare dan kompetisi serupa lainnya yang tujuannya adalah untuk membuat game dengan cepat dalam 48 jam. Permainan saya cenderung mencapai hasil yang bagus dalam kategori grafis (sayangnya, gameplay killer masih luput dari perhatian saya), meskipun saya tidak menganggap diri saya seorang seniman game yang baik. Banyak dari contoh ini berasal dari entri LD saya, dan sebagian besar pengalaman ini adalah hal yang saya pelajari dari berkompetisi di kompetisi ini dan dipaksa untuk menciptakan karya seni di bawah tenggat waktu yang sangat ketat. Selain itu, mereka harus sangat berharga bagi siapa pun yang mencoba membuat grafis berkualitas (atau sesuatu yang mendekatinya) dengan jadwal waktu singkat atau anggaran terbatas.

Paling kesalahan Umum, yang saya lihat dan paling mudah dihindari. Palet default untuk sebagian besar program menggambar komputer mengingatkan kembali pada zaman DOS (dapatkah Anda melihat hubungan antara warna dalam palet ini dan nilai biner empat byte dari 00 hingga 15? Tentu saja ada. Jika Anda tidak bisa' jika kamu tidak melihatnya, kamu akan menjadi seniman sejati.).

Yang saya maksud dengan palet bukan palet warna 16 atau 256 kali VGA. Maksud saya sistem yang terkoordinasi untuk permainan Anda. Jika Anda memulai dengan palet yang dipilih dengan baik, “coretan” Anda akan tampak indah secara estetika dan bahkan telah dirancang sebelumnya.

Tapi di mana saya bisa menemukan palet? Saya bahkan tidak bisa memilih warna ketika saya berpakaian di pagi hari!

Ya, sedikit teori warna akan sangat bermanfaat dan jika Anda meluangkan waktu lima belas menit untuk mencari apa itu "teori warna" di Internet, Anda akhirnya akan mendefinisikan apa itu permainan. Namun jika Anda tidak punya waktu untuk itu, berikut beberapa tip yang berhasil:

Untuk game yang lebih besar, Anda mungkin ingin menggunakan palet berbeda per level atau area dunia game. Jika elemen antarmuka Anda dan karakter utama digambarkan dengan warna netral, atau jika palet ini memiliki warna utama yang sama, Anda dapat menerapkannya secara merata antar level atau area.

Contoh ini menggunakan palet "monokromatik", di mana semua warna memiliki corak berbeda dengan nada yang sangat mirip, yang lain skema warna lebih variatif, tapi yang penting warnanya terlihat serasi.

Sumber daya:

MultiColr dari laboratorium idee
Hal yang baik tentang situs luar biasa ini adalah Anda dapat membuat palet dan mendapatkan banyak foto darinya hanya dengan memilih beberapa warna yang Anda inginkan dan gambar yang kemudian dapat Anda gunakan warnanya.

Saya tidak bisa menggambar!..

Mungkin Anda orang yang terlalu keren untuk bisa menggambar. Mungkin ini semua disengaja. Ini benar. Daripada membuat karya seni yang bagus, pilihlah tema yang membutuhkan seni yang buruk. Ini berhasil untuk "SketchFighter" dan "Crayon Physics" yang digambar di atas kertas.

Gunakan apa yang tersedia untuk Anda. Ada masalah di mejamu? Anda mungkin pernah membuat salah satu game terpopuler sepanjang masa, Desktop Tower Defense.

Orang-orang mulai memahami trik ini, namun hal ini tidak akan bertahan lama. Jadilah kreatif...mungkin karakter Anda adalah kue dan Anda benar-benar bisa memanggangnya. Atau daging zombi menyerang dapur Anda. Atau bahkan dada berbulu yang perlu dicukur.

Tip Tiga: Bentuk dan Siluet Sederhana

Lingkaran, Kotak, Segitiga, Belah Ketupat, Trapesium, Jajar Genjang, dll. Anda tahu cara menghitung luasnya secara akurat, tetapi tahukah Anda bahwa menggambarnya ternyata buruk? Buat sketsa beberapa bentuk dengan tangan, lalu tambahkan mata (untuk karakter) atau roda (untuk kendaraan) atau apa pun. Mereka mungkin lucu dan tidak masuk akal, dan sama sekali tidak akurat.

Tergantung pada berapa banyak kopi yang sudah Anda minum, itu bisa sepenuhnya berbeda bentuk. Semuanya baik-baik saja! Faktanya, ini adalah hal yang baik, karena kekurangan dan variasi menciptakan "individualitas" dan membuatnya menjadi hidup. Jangan gunakan alat bentuk dalam program menggambar Anda, itu adalah penghancur jiwa sprite. Dengan membuat garis luarnya berbeda, Anda memudahkan pemain membedakannya secara visual.

Satu catatan: jangan mencoba memikirkan hal ini selama kompetisi menulis game. Ujilah semuanya terlebih dahulu sebelum melaksanakannya agar Anda tahu persis bagaimana melakukan apa. Anda akan menghabiskan banyak waktu, namun saat kompetisi hanya membutuhkan waktu 15-20 menit dan akan membuat perbedaan besar.

Dan juga, jangan terburu-buru memanggang sampai Anda selesai dengan tekstur modelnya. Anda tidak akan bisa menghapus "panggang" atau melakukannya dua kali.

Tip sebelas: beli tablet

Bahkan jika Anda tidak memiliki cita-cita untuk menjadi seorang seniman game, jika Anda menggambar suatu karya seni di komputer, maka Anda perlu membeli tablet. Tidak harus besar atau mahal; Anda bisa membeli tablet dari Wacom. Karena menggambar dengan mouse mirip dengan menggambar dengan batu bata di atas kertas.

Banyak orang yang saya kenal yang pertama kali membeli tablet merasa lambat dalam menggunakannya. Berikut beberapa tip untuk membantu Anda memaksimalkan tablet Anda.

Di panel kontrol tablet, tingkatkan sensitivitas pena ke pengaturan yang lebih kencang. Ini akan memberikan kontrol terbaik saat menggambar.
Menggambar menggunakan selembar kertas kosong benar-benar mengubah perasaan. Berbagai jenis kertas: kertas kantor, halaman majalah, kertas tebal, dll. — akan membantu Anda merasakan pengalaman menggambar sepenuhnya di tablet. Cobalah.
Praktik. Saya tahu bahwa sebelumnya saya mengatakan bahwa tidak ada nasihat saya yang memerlukan latihan - saya berbohong. Cobalah latihan ini:

Buat sepuluh kotak berturut-turut di Photoshop dan isi dengan warna hitam dalam radius transparansi dari nol hingga seratus. Buat sepuluh kotak kosong di bawahnya. Cobalah mengarsir kotak bagian bawah agar sejajar dengan kotak utama. Coba dengan kuas lain dan berlatihlah dengan sensitivitas tekanan pena.
Cobalah menulis sesuatu, alfabet atau hanya teks. Mulailah dengan ukuran huruf yang lebih besar dan kemudian turunkan ke bawah. Ini akan membuat tangan Anda terbiasa dengan tablet, serta mata Anda tertuju pada layar saat menggambar.

Di zaman sekarang yang berbasis antarmuka layar sentuh, memiliki tablet menjadi bermanfaat untuk memahami cara kerja game berbasis teknologi ini. Meskipun pendekatan ini tidak berbeda ketika membandingkan teknologi mouse.

Bagian 8: Akhirnya menggambar sprite

Jadi, sekarang setelah Anda membaca bab-bab sebelumnya, lakukan pengamatan Anda sendiri dan ambil kesimpulan sendiri tentang cara kerja sprite dan sebagainya (jika Anda belum melakukan salah satu dari daftar ini, ikuti terus, karena ini akan membuat Anda hidup lebih mudah ketika tiba waktunya menggambar sprite sendiri)... Secara umum, waktunya telah tiba. Kami akan melihat beberapa gaya dan pertama-tama mengambil yang klasik dan paling luas permainan peran Gaya Final Fantasy 2. Bahkan jika Anda tidak tertarik membuat sprite kecil berukuran 16x16 dan ingin mempelajari cara membuat sprite berukuran besar saja, Anda tetap akan merasakan manfaatnya membaca teks ini sampai akhir... Dengan melakukan proyek kecil, Anda bisa pelajari banyak hal berguna yang akan berguna saat membuat karya berukuran besar. Belajar dari setiap situasi. Dari kata pengantar, mari kita beralih ke sprite FF2:

Hal pertama yang harus Anda ketahui tentang sprite FF2 adalah mereka menggunakan tata letak khusus... Di atas teks Anda melihat kotak 16x16... Di sepanjang sisi kiri ada garis bantu berwarna. Pada sprite FF2, pinggang dialokasikan tiga piksel (garis oranye bawah), batang tubuh - bagian batang tubuh dari leher hingga pinggang - juga menempati tiga piksel (garis kuning), kepala mendapat sebanyak 10 piksel (garis oranye atas). Ketika berbicara tentang sprite, orang-orang yang tahu sering menyebut akronim "SD"... Istilah SD adalah singkatan dari "Super Deformed" dan digunakan dalam anime untuk menggambarkan adegan di mana karakter yang sebelumnya biasanya digambar menyusut dan menyerupai boneka ., dan kepalanya berukuran sama dengan bagian tubuhnya yang lain... Pendekatan ini digunakan di FF2 dan banyak RPG awal, karena hampir semuanya dibuat di Jepang, dan SD adalah teknik yang berasal dari anime sana, selain itu, gaya ini bagus untuk mengekspresikan emosi karakter. Di Barat, kita cenderung condong ke karakter "realistis" dengan kepala kecil dan tubuh proporsional. Namun, di masa lalu, kepercayaan harus dikorbankan, karena dalam ruang yang ditentukan 16x16, kepala realistis akan berukuran lebar dua piksel dan tinggi empat piksel... Mungkin proporsional, tetapi terlihat buruk - hasilnya adalah karakter tanpa wajah, dan wajah dalam hal ini sangat penting, karena pemain lebih mengidentifikasi dirinya berdasarkan wajahnya daripada karakteristik lainnya. Kepala besar begitu tersebar luas karena memberikan ruang untuk penggambaran perasaan... Karakter dengan kepala besar dapat mengangguk, menggelengkan kepala ke kiri dan ke kanan, berkedip karena terkejut, melebarkan mata karena ngeri, memejamkan mata, menguap, berteriak, dll. . Mereka menjadi "hidup", dan karenanya lebih menarik... Pada kepala kecil yang "realistis", Anda hanya dapat mengubah warna dan bayangan hanya enam piksel, dan ini tidak banyak gunanya. Sebaiknya gambarkan karakter proporsional pada sprite besar (seperti, misalnya, dalam game Phantasy Star IV). Secara umum kalian paham kenapa gaya SD bertahan lama, heh... Namun ini hanya spekulasi saya, bisa saja saya salah.

Mari kita mulai dengan kepala dasar. Ini - piksel demi piksel - garis besar kepala sprite FF2... Banyak seniman, ketika mereka membutuhkan banyak sprite dengan gaya yang sama, menggambar "model" dari karakter yang khas, yang kemudian dimodifikasi untuk setiap karakter. ini benar ide bagus, kalau harus buat banyak karakter (seperti NPC kota)... Pastikan saja setiap sprite memiliki kepribadian yang cukup, hindari hanya mengubah warna seperti di Mortal Combat misalnya, heh... Jadi, kepala dasarnya: dua piksel di antara matanya, tingginya juga dua piksel, ada celah satu piksel antara keduanya dan tepi kepala, celah yang sama hingga ke rahang. Bersama-sama itu terlihat proporsional. Apalagi belum semua ruang yang dialokasikan sudah terisi... Banyak ruang yang tersisa untuk rambut, karena itu juga penting, heh... Badan sprite 16x16 tingginya hanya menempati enam piksel dan hanya berbeda satu sama lain dalam warna dan beberapa piksel. Oleh karena itu, untuk pengenalan visual yang lebih baik, karakter diberikan gaya rambut yang sangat berbeda. Rambut bisa bermacam-macam - pendek, panjang, dibelah ke samping atau di tengah, diikat ekor kuda, dikepang, diikat di sanggul, bisa sama sekali tidak ada atau bahkan menonjol dengan paku, dll... Ini adalah cara yang baik untuk membedakan karakter, sehingga rambut mendapat banyak ruang dalam gambar. Jika Anda mengecat sprite dengan warna hitam, yaitu membiarkan siluet karakternya, Anda kurang lebih dapat membedakannya dengan pasti hanya berdasarkan bentuk gaya rambutnya. Selanjutnya - apakah Anda memperhatikan bahwa rahangnya turun ke ujung garis oranye?

Sekarang mari kita tambahkan badannya... Aku mengepalkan satu tangan di depan dan satu lagi di belakang. Di game lama, sprite akan terus-menerus berpindah dari bingkai dengan kaki kiri di depan ke bingkai dengan kaki kanan di depan, dan sebaliknya... Ini adalah cara untuk menghilangkan bingkai "berdiri" ketiga dari "kaki bersama-sama, lengan di sisi tubuhmu." Saya mengambil bingkai di mana karakter berada di tengah langkahnya - saya ingin mencatat beberapa kehalusan pose saat ini. Pertama-tama, saya tidak memisahkan lengan dan badan. Itu bisa saja terjadi (omong-omong, itu akan terlihat seperti rompi), tapi saya tidak melakukannya... Biarkan itu menjadi karakter biasa dengan celana dan T-shirt. Seperti yang Anda ingat, garis kuning menentukan jarak dari bagian bawah rahang ke pinggang, jadi Anda akan memiliki dua piksel untuk dada, piksel lainnya akan menjadi garis pinggang (kecuali jika gaun atau T-shirt tidak dimasukkan , dll.)... Saya menyebutkan garis itu, karena, lihat, bahunya melampaui batas oranye. Hal ini karena pandangan kita terhadap dunia bukanlah pandangan langsung dari depan atau pandangan dari atas ke bawah. Kami memiliki pandangan "top down"; istilah yang sering digunakan untuk menggambarkan game seperti Final Fantasy. Anda melihat ke bawah dengan sudut sekitar 45 derajat, sehingga Anda dapat melihat bagian depan dan atas bangunan (sudut 45 derajat biasanya digunakan dalam permainan isometrik seperti Diablo, yang templatnya diletakkan secara diagonal, bukan atas biasanya. -Layout bawah, yang banyak orang tidak sadari itu artinya “isometrik” (konsep ini pernah kamu temui di pelajaran menggambar, heh), jadi kalau membahas gaya FF dan lain-lain, mereka malah bilang “atas ke bawah”. “45 derajat”... Bingung? Heheh...). Karena kita dalam tampilan top-down, kita dapat melihat bagian atas bahu karakter sedikit "di belakang" kepalanya... Bayangkan orang biasa, yang Anda anggap remeh. Semakin tinggi Anda melihatnya, semakin besar area bahu yang Anda lihat dan semakin jauh ke belakang kepala. Banyak orang membuat kesalahan dengan menggambar karakter dalam tampilan depan untuk peta dari atas ke bawah... Sejujurnya, Anda tidak perlu terlalu khawatir tentang tampilannya... Itu sudah cukup... Namun di zaman modern, lebih banyak perhatian harus diberikan pada momen seperti itu. Di masa kejayaan NES, para pengembang terlalu banyak mengacaukan perspektif sehingga hal itu menggelikan saat ini. Pada saat itu, hal tersebut tidak menjadi masalah karena keterbelakangan grafis secara umum, orang-orang lebih tertarik dengan gameplaynya. Jika Anda punya waktu, lihat peta penjara bawah tanah di game Zelda untuk konsol NES... Ruangan dibuat dengan mempertimbangkan pemandangan langsung dari atas, Tautan pahlawan digambar dalam tampilan atas ke bawah, dan patung serta keadaan sekitar lainnya dibuat tampilan frontal, heh..

Sekarang ada kaki. Sekali lagi, mereka tampak dalam posisi berjalan, dan bukan dalam posisi normal... Saya ingin menunjukkan beberapa poin... Saya tidak menggambar garis hitam di sepanjang bagian bawah kaki, karena saya memerlukan bagian bawah deretan piksel untuk mewakili kaki, dan mata Anda sendiri menggambar garis ilusi di bawah kaki dari piksel hitam kiri ke kanan (Anda sudah mengetahuinya jika Anda membaca bab sebelumnya... jika belum, maka bacalah). Kaki kanan cowok (yang di depan) tidak turun lurus, tapi miring... Ini untuk animasi. Jika kaki lurus ke bawah saat berada di depan badan, dan lurus ke atas saat berada di belakang, maka akan terlihat karakter tersebut sedang menghentakkan kaki kiri dan kanan secara bergantian, bukan berjalan. Dengan sedikit menekuk kaki, kita memberikannya lebih banyak tampilan alami saat berjalan. Kaki yang tertinggal hanyalah deretan piksel. Sekarang terlihat seperti tunggul... Kita akan menunjukkan bahwa ini adalah kaki dari belakang saat kita mengerjakan bunganya. Perhatikan juga bahwa pinggangnya TIDAK lurus, melainkan membulat dan kakinya dimasukkan ke dalam pembatas kuning untuk menyatukannya. Hal ini juga disebabkan oleh pandangan dari atas ke bawah. Garis horisontal pinggang adalah kesalahan besar... Karena itu, karakter menjadi “keras” dan terlihat seperti karton. Sedikit lengkungan pada garis memberikan volume pada keseluruhan garis, seolah-olah kita sedang melihat sebuah silinder (bayangkan gambar tiga dimensi).

Dia akhirnya memiliki rambut. Di sinilah Anda mungkin akan menghabiskan sebagian besar waktu Anda... Satu piksel dapat membuat atau menghancurkan gaya rambut, dan Anda mungkin akan terus-menerus menyulap piksel untuk mencoba mendapatkan garis tepi yang bagus. Pria kecil kami menyisir rambutnya ke satu sisi. Saya menambahkan piksel yang hilang di bagian atas untuk mewakili perpisahan, hanya sebagai contoh, hehe... Perhatikan bagaimana rambutnya tidak melintasi wajahnya dengan garis hitam pekat... Jika garisnya padat, kepalanya dan rambut akan terpisah terlalu banyak (dan akan terlihat seperti badan dan kaki), jadi sebaiknya gunakan pemisahan warna. Saya menambahkan sedikit warna hitam di bawah bagian rambut yang rontok karena ingin menunjukkan bahwa rambut itu menjuntai dan tidak disisir dengan gel atau apa pun. Garis rambut utama memanjang dari mata hingga rahang, dengan satu baris piksel pemisah di antara keduanya. Ini tidak perlu karena karakter yang berbeda akan memiliki gaya rambut yang berbeda, ini hanya contoh saja. Anda mungkin harus mengerjakan rambut dengan warna utama dan hitam pada saat yang sama untuk mencari tahu di mana piksel hitam tidak diperlukan untuk pemisahan... Yah, saya sudah menggambar jutaan sprite saya, saya bisa meletakkannya mereka menyatu dalam pikiranku, heheh... Rambut orang ini sampai ke atas sprite, kalau yang lain mungkin berbeda. Misalnya pada orang pendek atau anak-anak, serta pada orang botak, karena jarak kepala sendiri satu atau dua piksel dari rambut. Tentu saja, saat menggambar anak-anak atau orang pendek, Anda perlu bereksperimen dengan proporsi dan, misalnya, mengalokasikan bukan enam, tetapi hanya empat piksel pada badannya.

Saya mengisi sprite dengan warna solid (tanpa bayangan). Lihatlah rambutnya, T-shirt dan sepatunya. Saya membuat rambut menjadi merah kecoklatan untuk menonjolkan dahi di sebelah kanan, dan karena tidak ada warna hitam di bawah rambut di sisi itu, nampaknya helaian ini lebih dekat ke kepala daripada rambut di sisi lainnya. Saya juga meninggalkan piksel kosong di mana garis hitam terputus oleh belahan... Jika saya memberi titik di sana dengan warna yang sama dengan rambut, akan terlihat ada seberkas mencuat di atas kepala... A piksel hitam di tempat ini akan membuat gaya rambut terlalu halus, dan hanya kekosongan yang menciptakan efek untaian terpisah. Satu piksel dapat membuat perbedaan signifikan dalam persepsi sprite. Kaosnya mirip dengan rompi tanpa lengan... Untuk mengubahnya menjadi rompi, Anda dapat menambahkan garis luar hitam, dan untuk mengubahnya menjadi kaos biasa, Anda perlu meletakkan piksel putih di bahu di sebelah sisa massa putih. Piksel tunggal ini membentuk "lengan" di tangan. Untuk lengan panjang, saya perlu mengecat seluruh lengan dengan warna putih kecuali piksel terakhir. Nanti saya akan menunjukkan banyak chip serupa.

Sekarang mari tambahkan corak warna dan dapatkan sprite yang sudah jadi. Saat Anda menerapkan bayangan, cobalah untuk memastikan bahwa cahaya jatuh dari satu titik... Saat ini sumber cahaya berada di kanan atas, sehingga bayangan muncul di kiri dan bawah sprite. Cara santai ini sangat populer di kalangan masyarakat: sisi kiri dan kanan diarsir, sedangkan bagian tengahnya diberi cahaya kiri... Ternyata sumber cahayanya letaknya tepat di tengah. Prinsipnya lumayan, tapi spritenya jadi sedikit membosankan, karena tidak ada "kanan dan kiri", yang ada hanya "tengah"... Sulit dijelaskan, mungkin karena sprite simetris kurang menarik. .. Dengan shading di satu sisi, sprite memiliki kanan dan kiri yang benar-benar pasti. Namun, tidak aturan ketat, yang memberitahu Anda seberapa gelap seharusnya bayangan tersebut. Pilih sampai terlihat bagus. Namun, ada beberapa hal yang perlu diingat... Jika Anda memiliki sumber cahaya yang terang (misalnya, aksi terjadi di tengah hari, karakter sedang berdiri di dekat api, dll.), bayangan akan muncul. menjadi sangat gelap, sangat kontras dengan warna biasanya. Jika cahayanya redup (di dalam rumah, di malam hari, dll.), kontrasnya akan berkurang. Saya tidak mengatakan bahwa Anda memerlukan pencahayaan yang berbeda pada sprite Anda tergantung pada lokasinya, cukup perhatikan efek bayangan apa yang mungkin ada. Ingat trik lain - julingkan mata Anda dan lihat sprite: jika tidak mungkin dibedakan bayangan terang dari gelap, mungkin Anda memerlukan lebih banyak kontras untuknya. Mengapa menerapkan bayangan ini jika perbedaannya tidak terlihat? Hal ini terutama berlaku saat menggunakan warna kuning... Akan sulit untuk melihat perbedaannya jika Anda menambahkan sedikit warna kusam di beberapa tempat. Wajah, bagian terpenting dari karakter, menunjukkan perasaan dan biasanya tidak memiliki banyak kontras dengan sprite lainnya... Jika kontrasnya tinggi, sprite akan hancur menjadi potongan-potongan berwarna, yang mengiritasi mata . Namun, saat menggambar hal seperti itu tidak ada polanya. Pertahankan apa yang tampak bagus. Di beberapa game, warna wajahnya sama, jadi detailnya (matanya, heh) terlihat jelas. Saya membuat kulit sprite kita memiliki banyak kontras, dan itu sedikit membingungkan. Mari kita lihat bagian bawahnya. Bagian belakang kaki benar-benar gelap dan Anda tidak dapat melihat kakinya. Garis hitam bagian bawah membantu mendorongnya ke belakang lebih jauh lagi... Garis ini bisa saja berwarna coklat tua, maka akan tampak seperti dia sedang mengangkat kakinya. Kaki bagian dekat HARUS mendapat penerangan lebih sehingga tampak seperti kaki mencuat di depan badan. Sepatunya dipisahkan hanya berdasarkan warna, lihat juga tangannya... Untuk membuat tangannya terlihat lebih dekat dengan kita, hanya satu piksel bayangan yang ditambahkan... Semakin banyak bayangan pada sesuatu, semakin jauh jaraknya dari kita. .. aku menaungi warna gelap seluruh permukaan tangan yang lain untuk menjauhkannya. Namun, bayangan pada kepalan tangan lebih sedikit, sehingga tampak sisa tangan berada di belakangnya, dan itu bagus. Seperti yang sudah saya katakan, satu piksel dapat mengubah banyak hal, dan sekarang kita akan melihat ini:

Anda mungkin berpikir, "Apa...?" Sekilas, semua sprite ini mirip satu sama lain... Tapi mereka memiliki perbedaan satu piksel... Lihat kepalan depannya. Dan saya akan menunjukkan kepada Anda apa yang dapat dilakukan oleh satu titik kecil... Kepalan tangan dasar pada gambar pertama hanyalah sebuah lingkaran, tanpa piksel sudut. Hasilnya, terlihat seperti kepalan tangan yang halus, seperti orang bertangan kecil. Anda tidak dapat mendeskripsikan tinju ini dengan baik, tidak peduli bagaimana Anda memutarnya, tinju tersebut tidak akan berubah. Dalam kasus kedua, ada piksel sudut di kiri bawah... Sekarang kepalan tangan sepertinya ditekan ke kaki. Mungkin orangnya sedang mengarungi, atau memanjat batu, atau yang lainnya, itu semua karena arah kepalan tangannya ke bawah.. Pada sprite ketiga, piksel sudutnya ada di kiri atas. Ngomong-ngomong, sekarang dia menunjuk ke wajah dengan jarinya, dan bukan dengan sikunya, karena sudut kanan bawah membulat. Ternyata dia menunjukkan: “Siapa, aku?” Sprite keempat memiliki piksel di sudut kanan atas, dan gerakan tangan menunjukkan: "Baiklah, coba hubungi saya!"... Siku tidak terlihat, dan jari-jari sedikit mengarah ke kepala. Seolah-olah melakukan pukulan ke arah dirinya sendiri... atau mengumpat pemainnya, heh. Sprite terakhir mempunyai piksel di kanan bawah, dan terlihat seperti siku, karena itulah posisi aslinya (pada sprite ketiga, Anda tidak boleh salah mengira piksel itu sebagai siku, karena akan sangat aneh jika melihat siku. disana, jadi otak kita salah mengartikannya sebagai jari)... Sekarang sepertinya dia melontarkan pukulan ke arah dirinya sendiri. Mungkin ini awal dari gerakan serangan naga atau apalah, heheh. Dan sepertinya, hanya SATU piksel.

Di sini saya bekerja dengan dua piksel... Dalam kasus pertama, sisi datar diputar ke dalam. Kedua piksel tersebut membuat kepalan tangannya terlihat lebih rata, seperti dia sedang menampar seseorang dengan itu... Yah, sepertinya dia mengepalkan tangannya dengan sangat keras. Pada sprite pertama, kepalan tangan ditekan ke dalam, dan terlihat cukup normal. Tapi bayangkan dia memegang sesuatu seperti vas - dia ingin menunjukkan kekuatannya kepada semua orang. Jadi ia menggerakkan pikselnya ke atas... Sekarang sisi datarnya berada di atas, seolah-olah sedang menyeimbangkan pot atau lampu di atasnya. Dalam kasus ketiga, sisi datar berada di sisi, yang terlihat, katakanlah... tidak terlalu bagus. Huh... satu-satunya cara untuk menjelaskan posisi tinju ini adalah dia mempunyai sesuatu seperti sarung tangan lapis baja persegi di tangannya, ini kemudian dapat ditunjukkan dalam warna... Yang terakhir memiliki bagian datar di bagian bawah, he bisa bermain basket dengan tangan ini atau memukul seseorang. Dan yang paling menarik ini hanya DUA piksel, hehe... Sekarang mari kita coba dengan tiga piksel:

Efek tiga piksel berbeda dengan efek dua piksel. Trio ini menambah “bobot” pada kepalan tangan... Satu piksel menciptakan kepalan tangan yang halus, sementara tiga piksel menciptakan sesuatu seperti kepalan tangan yang berat, seperti raksasa atau pandai besi yang besar dan kuat. Pada sprite ini, tinju memiliki penampilan yang hampir sama dengan yang sebelumnya, hanya saja sekarang mereka adalah bagian dari lengan yang besar dan berotot, siap untuk menghancurkan sesuatu. Sprite terakhir, yang keempat sudutnya dipenuhi piksel, sepertinya mengenai kita. Sekarang mari kita lihat sekilas sisi lainnya:

Mari kita pelajari lengan yang direbahkan. Pada sprite pertama, dia tidak memiliki piksel sudut, dan dia tampak seperti tentakel atau semacamnya... Seolah-olah tangannya santai, sesuatu seperti itu... Itu menjuntai di sana seperti semacam ekor. Pada gambar kedua, kepalan tangan diarahkan ke badan, seolah-olah karakter tersebut menegangkan ototnya dan membuat semacam setengah lingkaran dari tangannya. Sprite ketiga memiliki piksel yang ditempatkan di bagian luar, yang membuat tangan tampak agak ke samping, tidak seperti gambar sebelumnya, yang mana tangan terasa lebih dekat ke tubuh. Pria di sprite kedua terlihat seperti pria tangguh yang berjalan maju mundur, dan di sprite ketiga dia terlihat seperti pelari dengan posisi tangan yang sesuai. Karakter pada sprite terakhir memiliki garis datar di bagian bawah kepalan tangannya, seperti dia sedang bermain basket lagi, atau dia memegang pistol di tangannya, atau itu bagian dari baju besinya, atau dia hanya memiliki kepalan tangan yang besar, dll. .Lihat lagi dua sprite lagi:

Laki-laki di sebelah kiri lincah dan cepat, dan lengannya tidak seberat kepalan tangannya... Laki-laki di sebelah kanan lebih kuat, karena dia memiliki tinju yang berat dan persegi. Sekarang Anda harus memahami arti ungkapan saya "Satu piksel dapat mengubah banyak hal"... Ini adalah hal yang paling menarik bagi saya ketika bekerja dengan sprite kecil semacam ini. Juggle piksel untuk melihat bagaimana ekspresi, pose, atau gerakan karakter akan berubah hanya karena satu atau dua piksel. Beberapa piksel dapat menciptakan peri atau - dengan keberhasilan yang sama - raksasa. Beberapa poin perbedaan ini membuat sprite Anda lebih menarik dan menghidupkannya. Oleh karena itu, mulailah dengan “model” dasar, kemudian lakukan perubahan agar mendapatkan hasil yang berbeda persepsi visual karakter. Misalnya, saya hanya bereksperimen dengan kepalan tangan, tetapi Anda dapat mengerjakan satu piksel pada bagian lain, terutama pada ekspresi wajah. Cobalah, pilih yang paling cocok untuk sprite. Latihan, heh... Latihan yang banyak dan benar, sebentar lagi skill ini akan menjadi natural.

Jadi, kita memiliki sprite karakter dasar, dan jika pahlawan kita tidak lumpuh dan memiliki kecerdasan, maka dia ingin bergerak dan melakukan beberapa tindakan pada saat yang bersamaan.... Dia cukup berjalan keliling kota kemanapun matanya memandang, mengulangi : “Selamat datang di (kota ini dan itu)!”, heh. Artinya kita memerlukan frame kedua untuk berjalan... Ini mudah dilakukan. Di sebelah kiri adalah sprite lama kita, dan di sprite tengah saya mengambil sepotong di ujung garis kuning dan membaliknya dalam bidang horizontal. Lihat betapa sederhananya? Tentu saja ada masalah dengan pencahayaan terbalik, karena ternyata matahari melompat dari satu sisi langit ke sisi langit lainnya. Ini mungkin kurang bagus, jadi kita akan menyesuaikan warna bayangan agar pencahayaannya sama seperti pada frame pertama. Kami sekarang memiliki dua bingkai untuk si kecil ini, dan kami dapat melihatnya dianimasikan:

Ini adalah animasi berjalan dua bingkai sederhana. Jika Anda merencanakan sprite kecil untuk resolusi kecil, dua frame mungkin cukup untuk mencapai efek yang diinginkan. Di Final Fantasies awal (di Gameboy), karakter terus-menerus berpindah di antara dua frame, bahkan saat mereka berdiri. Katakanlah Anda tidak menginginkan ini... Anda ingin karakter menghentikan animasi ketika pemain tidak menekan tombol. Nah, kamu bisa menghentikan karakter setelah menghentikan gerakannya dengan posisi satu kaki di depan atau di belakang. Jika mereka tidak terlihat tegang, itu normal. Namun bagaimana jika Anda membutuhkan karakter yang jujur?

Untuk mendapatkan bidikan ini, saya cukup mengatur ulang salah satu alat bantu jalan dengan menyatukan kedua kaki dan menekan lengan di sisi tubuh. Lengannya akan terlihat lebih rileks jika Anda memberinya "tonjolan"... Jika ada tiga piksel vertikal yang tersisa, dia akan terlihat seperti seorang prajurit yang berdiri tegak dalam formasi. Saat membuat bingkai berdiri untuk sprite kecil berukuran 16x16 ini, ada masalah kolom ganda... Anda harus memilih di mana piksel akan memisahkan kakinya. Saya membuat bayangan yang sama pada kaki (dua piksel horizontal) sehingga kaki tampak tepat di bawah tubuh. Jika tidak ada satu pun piksel cahaya di kaki kiri, akan tampak sedikit di belakang kanan. Dan kalau jumlahnya banyak, kakinya akan keluar lagi, tapi ke depan. Sekarang kita memiliki bingkai "berdiri", kita dapat menggunakannya saat pemain tidak melakukan apa pun. Ada juga kegunaan lain untuk bingkai ini... Anda dapat menambahkannya ke animasi berjalan Anda:

Bagian 3. Gradien itu jahat

Bagian 8. Akhirnya menggambar sprite

Grafis piksel (selanjutnya disebut pixel art) semakin populer akhir-akhir ini, terutama melalui game indie. Hal ini dapat dimengerti, karena dengan cara ini seniman dapat mengisi permainan dengan berbagai macam karakter dan tidak menghabiskan ratusan jam untuk membuat model objek 3D dan menggambar objek kompleks secara manual. Jika Anda ingin belajar seni piksel, pertama-tama Anda harus belajar cara menggambar apa yang disebut “sprite”. Kemudian, ketika sprite tidak lagi membuat Anda takut, Anda dapat beralih ke animasi dan bahkan menjual karya Anda!

Langkah

Bagian 1

Kami mengumpulkan semua yang Anda butuhkan

Unduh editor grafis yang bagus. Anda tentu saja dapat membuat mahakarya di Paint, tetapi ini sulit dan tidak nyaman. Akan jauh lebih baik jika bekerja pada sesuatu seperti:

photoshop
Cat.net
piksel

Beli tablet grafis. Jika Anda tidak suka menggambar dengan mouse, Anda memerlukan tablet dan stylus. Omong-omong, tablet Wacom adalah yang paling populer.

Aktifkan "grid" di editor grafis Anda. Sebenarnya jika editor grafis Anda tidak mendukung tampilan grid, maka Anda sebaiknya mempertimbangkan untuk mencari program lain. Kisi akan memungkinkan Anda melihat dengan jelas di mana dan bagaimana setiap piksel akan ditempatkan. Biasanya, rosario dihidupkan melalui menu “Tampilan”.
- Anda mungkin perlu sedikit mengubah pengaturan tampilan untuk memastikan bahwa setiap segmen kisi benar-benar menampilkan piksel. Setiap program melakukan hal ini secara berbeda, jadi carilah tip yang sesuai.
Gambarlah dengan pensil dan kuas berukuran 1 piksel. Setiap editor grafis harus memiliki alat “Pensil”. Pilih dan atur ukuran kuas menjadi 1 piksel. Sekarang Anda dapat menggambar... dalam piksel.

Bagian 2
Mengerjakan dasar-dasarnya
Buat gambar baru. Karena Anda sedang belajar cara menggambar dengan gaya seni piksel, Anda tidak boleh membidik kanvas yang epik. Jika Anda ingat, di game Super Mario Bros. seluruh layar berukuran 256 x 224 piksel, dan Mario sendiri masuk ke dalam ruang berukuran 12 x 16 piksel!
1. Perbesar. Ya, jika tidak, Anda tidak akan dapat melihat piksel satu per satu. Ya, Anda harus meningkatkannya secara signifikan. Katakanlah 800% cukup normal.
  
  Belajar menggambar garis lurus. Tampaknya sederhana, tetapi jika Anda tiba-tiba menggambar garis setebal 2 piksel di suatu tempat di tengah dengan tangan gemetar, perbedaannya akan terlihat jelas. Gambar garis lurus sampai Anda harus mengaktifkan alat garis lurus. Anda harus belajar menggambar garis lurus dengan tangan!
  
  Belajar menggambar garis lengkung. Dalam garis lengkung, katakanlah, harus ada “jeda garis” yang seragam (yang terlihat jelas pada gambar di atas). Katakanlah, mulai menggambar garis lengkung, menggambar garis lurus 6 piksel, di bawahnya ada garis lurus tiga, di bawahnya ada garis lurus dua, dan di bawahnya ada garis lurus satu piksel. Di sisi lain, gambarlah hal yang sama (tentu saja dicerminkan). Kemajuan inilah yang dianggap optimal. Kurva yang digambar dalam pola “3-1-3-1-3-1-3” tidak memenuhi standar seni piksel.
  
  Jangan lupa untuk menghapus kesalahan. Alat "Penghapus" harus diatur mirip dengan pensil, membuat ukuran kuas sama dengan 1 piksel. Semakin besar penghapusnya, semakin sulit untuk tidak menghapus terlalu banyak, jadi semuanya logis.
  
  Bagian 3
  Membuat sprite pertama
  1. Pikirkan tentang tujuan apa yang akan dilayani oleh sprite. Apakah ini akan statis? Animasi? Sprite statis dapat diisi dengan detail secara maksimal, tetapi sprite animasi sebaiknya dibuat lebih sederhana, sehingga Anda tidak menghabiskan waktu berjam-jam untuk menggambar ulang semua detail pada semua frame animasi. Ngomong-ngomong, jika sprite Anda seharusnya digunakan dengan sprite lain, maka semuanya harus digambar dengan gaya yang sama.
    
    Cari tahu apakah ada persyaratan khusus untuk sprite. Jika Anda menggambar untuk, misalnya, sebuah proyek, masuk akal untuk mengharapkan persyaratan warna atau ukuran file. Namun, ini akan menjadi lebih penting nanti, saat Anda mulai mengerjakannya proyek-proyek besar dengan banyak sprite berbeda.
    - Secara obyektif, saat ini jarang ada persyaratan untuk ukuran atau palet sprite. Namun, jika Anda menggambar grafik untuk game yang akan dimainkan pada sistem game lama, Anda harus mempertimbangkan semua batasannya.
  2. Buatlah sketsa. Sketsa di atas kertas adalah dasar dari sprite apa pun, untungnya dengan cara ini Anda akan dapat memahami bagaimana segala sesuatunya akan terlihat dan, jika perlu, Anda dapat memperbaiki sesuatu terlebih dahulu. Selain itu, Anda kemudian dapat menjiplak dari sketsa kertas (jika Anda masih memiliki tablet).
    - Jangan berhemat pada detail sketsa Anda! Gambarlah semua yang ingin Anda lihat di gambar akhir.
  3. Transfer sketsa ke editor grafis. Anda dapat menjiplak sketsa kertas di tablet, atau Anda dapat menggambar ulang semuanya secara manual, piksel demi piksel - tidak masalah, pilihan ada di tangan Anda..
    - Saat menjiplak sketsa, gunakan 100% hitam sebagai warna garis tepi. Jika terjadi sesuatu, Anda dapat mengubahnya secara manual nanti, tetapi untuk saat ini akan lebih mudah bagi Anda untuk bekerja dengan warna hitam.
  4. Sempurnakan garis besar sketsa. Dalam konteks ini, tentu saja Anda dapat mengatakan secara berbeda - menghapus semua yang tidak perlu. Apa gunanya - garis besarnya harus setebal 1 piksel. Oleh karena itu, perbesar skalanya dan hapus, hapus kelebihannya... atau isi apa yang hilang dengan pensil.
    - Saat mengerjakan sketsa, jangan terganggu oleh detailnya - giliran mereka akan tiba.
  Bagian 4
  Mewarnai sprite
  1. Pelajari teori warna. Lihatlah palet untuk mengetahui warna apa yang akan digunakan. Semuanya sederhana di sana: semakin jauh jarak warna satu sama lain, semakin besar perbedaannya satu sama lain; Semakin dekat warna satu sama lain, semakin mirip warnanya dan semakin baik tampilannya jika bersebelahan.
    - Pilih warna yang akan membuat sprite Anda cantik dan enak dipandang. Dan ya, warna-warna pastel harus dihindari (kecuali seluruh proyek Anda dikerjakan dengan gaya tersebut).
  2. Pilih beberapa warna. Semakin banyak warna yang Anda gunakan, sprite Anda akan semakin “mengganggu”. Lihatlah beberapa seni piksel klasik dan coba hitung berapa banyak warna yang digunakan di sana.
    - Mario - hanya tiga warna (jika kita berbicara tentang versi klasik), dan bahkan letaknya hampir berdekatan satu sama lain di palet.
    - Sonic - Meskipun Sonic digambar dengan lebih detail daripada Mario, ia tetap hanya didasarkan pada 4 warna (dan bayangan).
    - Ryu hampir merupakan sprite klasik seperti yang dipahami dalam game pertarungan, Ryu adalah plot besar, dicat dengan warna sederhana, ditambah beberapa bayangan untuk diferensiasi. Ryu, bagaimanapun, sedikit lebih rumit daripada Sonic - sudah ada lima warna dan bayangan.
  3. Warnai spritenya. Gunakan alat Paint Fill untuk mewarnai sprite Anda dan jangan khawatir segala sesuatunya tampak datar dan tidak bernyawa - pada tahap ini, hal sebaliknya tidak diharapkan. Prinsip alat Isi sederhana - alat ini akan mengisi semua piksel warna yang Anda klik dengan warna yang Anda pilih hingga mencapai batas.
  Bagian 5
  Menambahkan bayangan
  1. Mulailah mengaplikasikan bayangan menggunakan warna yang sedikit lebih gelap dari warna dasarnya. Jika cahaya datang dari atas, di manakah bayangannya? Itu benar, di mana cahaya langsung tidak jatuh. Oleh karena itu, untuk menambahkan bayangan, cukup tambahkan beberapa lapisan lagi ke sprite dengan piksel dengan warna yang sesuai di atas atau di bawah garis tepi.
    - Jika Anda mengurangi pengaturan "Kontras" pada warna dasar dengan sedikit meningkatkan pengaturan "Kecerahan", Anda dapat memperoleh warna yang bagus untuk menggambar bayangan.
    - Jangan gunakan gradien. Gradien itu jahat. Gradien terlihat murahan, jelek, dan tidak profesional. Efek yang mirip dengan gradien dicapai dengan menggunakan teknik “penipisan” (lihat di bawah).
  2. Jangan lupa tentang naungan parsial. Pilih warna antara warna dasar dan warna bayangan. Gunakan untuk membuat layer lain - tapi kali ini di antara lapisan dua warna ini. Hasilnya adalah efek transisi dari area gelap ke area terang.
    
    Gambarkan highlightnya. Sorotan adalah tempat pada sprite yang paling banyak terkena cahaya. Anda dapat menggambar highlight jika Anda mengambil warna yang sedikit lebih terang dari warna dasar. Hal utama adalah jangan terbawa oleh silau, itu mengganggu.

Bagian 9: Membuat Sprite untuk Game Pertempuran

Jadi, kami berupaya membuat sprite kecil berukuran 16x16: Sederhana, lucu, dan tradisional untuk game RPG konsol. "Tapi saya ingin membuat game aksi: sesuatu dengan sprite besar! Anda tahu, sesuatu seperti game pertarungan Capcom." Mungkin karena Anda sangat ingin menggambar sprite yang keren dan besar, Anda melewatkan bagian tutorial sebelumnya dan tidak repot-repot membuat sprite yang kecil dan mungil. Jika saya benar, kembalilah dan baca apa yang Anda lewatkan. Meski ukuran spritenya tetap berubah prinsip dasar dijelaskan sebelumnya tetap berlaku. Oke, anggap saja Anda sudah membaca chapter sebelumnya dan sekarang benar-benar siap untuk membuat sprite yang akan "bertarung".

Pertama-tama, izinkan saya menunjukkan bahwa teknik yang akan saya uraikan sekarang tidak hanya cocok untuk game pertarungan (game pertarungan adalah genre game, biasanya pertarungan antara dua petarung disimulasikan di layar - kira-kira). Saya menggunakan istilah ini karena pose dan posisi sprite tutorial mewakili posisi bertarung yang berbeda. Namun teknik dan konsepnya sendiri bisa diterapkan berbagai jenis permainan: Cacing Tanah Jim mungkin dibuat menggunakan pendekatan yang sama. Belajarlah dari semua yang Anda bisa dan sesuaikan apa yang Anda pelajari dengan kebutuhan Anda. Tapi kita ngelantur, sekarang mari kita lihat beberapa contoh dari Street Fighter Alpha 3.

Ini benar-benar digambar dengan keterampilan. Setiap karakter memiliki tampilan uniknya masing-masing. Misalnya, Zangrif adalah seorang yang berotot besar, dan Sakura, dibandingkan dengan dia, adalah seorang gadis kecil dan kurus. Perhatikan juga perbedaan signifikan pada lebar sprite keduanya. Artinya seniman tidak dibatasi pada hal-hal tertentu dimensi maksimum sprite. Sakura adalah sprite 76x87, Zangrif 116x111. Tapi ingatlah itu biasanya ukuran standar tingginya dianggap 100 piksel. Lebarnya biasanya lebih kecil.

Metode yang digunakan Capcom tidak diketahui. Mereka tidak memiliki tutorial atau penjelasan lain mengenai proses pembuatan sprite, hal ini tidak mengherankan, karena masih banyak hal lain yang perlu dikhawatirkan. Namun, saya mengumpulkan beberapa informasi dengan menganalisis sprite mereka dan mengambil cuplikan informasi berguna di sana-sini. Mari kita lihat gambar Chun-Li dari Street Fighter 3:

(klik untuk memperbesar)

Semua bingkai digambar tangan, kemudian dipindai dan didigitalkan piksel demi piksel. Mungkin Capcom memiliki program khusus yang melakukan ray tracing (di sini ray tracing adalah proses mengubah gambar pindaian fuzzy menjadi seni piksel yang lebih akurat - kira-kira). Karena kami tidak memiliki program seperti itu, kami akan melakukan semuanya piksel demi piksel. Ini memakan waktu. Sulit membayangkan pengembang game seperti SF3 memproses setiap frame dengan cara ini. Tapi sekali lagi, saya tidak tahu bagaimana mereka melakukannya, jadi ini hanya tebakan berdasarkan apa yang kita lihat. Bagaimanapun, mereka melakukan ray tracing - setiap sprite sempurna. Garis yang menguraikan otot lebarnya satu piksel. Tidak ada "titik" piksel (muncul saat Anda menggambar garis dengan mouse dan menahan tombol mouse), dan tidak ada anti-aliasing pada garis (biasanya ini terjadi saat gambar diperkecil ke ukuran sprite yang diperlukan) . Ini semua berarti mereka harus mengubah semuanya secara manual untuk mendapatkan sprite yang hebat. Mungkin tulisan Jepang di lukisan besar ini mengatakan "Ini adalah instruksi bagaimana kita menggambar sprite kita", tapi saya tidak bisa bahasa Jepang. :)

Bagian terpenting dari gambar adalah Chun-Li besar di pojok kanan atas. Perhatikan kurangnya detail di dalamnya. Saat Anda membuat sprite, Anda perlu menunjukkan jumlah tertentu ciri ciri. Saat menggambar wajah kecil berukuran 8x8, misalnya, tidak ada cara untuk memperlihatkan lubang hidung, jadi mengapa membuang waktu saat menggambar di atas kertas? Garis lengkung pada pakaiannya akan direpresentasikan dalam sprite sebagai garis kuning piksel tunggal. Trim gantung kecil berwarna kuning akan muncul pada pakaian: tetapi itu hanya akan ditambahkan pada tahap pengerjaan piksel. Oleh karena itu, ada baiknya pada awalnya memilih gaya yang disederhanakan untuk digunakan saat menggambar bingkai animasi di atas kertas.

Saya harus ngelantur dan menjelaskan apa yang sebenarnya ada berbagai cara membuat sprite. Pilihan metode hanya bergantung pada tingkat keahlian, keahlian, dan ukuran sprite yang dibuat. Jika Anda membuat sprite RPG 16x16, tidak ada alasan untuk menggambarnya di kertas terlebih dahulu, memindainya, dll. Bekerja langsung dalam piksel. Jika Anda belum memiliki keterampilan menggambar di atas kertas, lebih baik segera beralih ke menggambar dengan piksel. Dua metode lain yang dapat digunakan jika Anda tidak memiliki pemindai atau keterampilan menggambar tangan:

Di sebelah kiri kita melihat siluet. Satu dari aturan dasar animasi menyatakan bahwa pemirsa seharusnya tidak memiliki masalah dalam membedakan tindakan karakter Anda, meskipun ia ditampilkan dalam siluet. Namun, dalam video game, tidak seperti animasi klasik, sudut khusus digunakan saat membuat sprite animasi, dan ini juga harus diperhitungkan. Namun, prinsip dasarnya bekerja dengan kekuatan yang sama, sehingga siluet dapat menjadi dasar untuk sprite masa depan. Dengan menggambar setiap frame dengan cara ini, Anda dapat memastikan bahwa animasinya enak dipandang. Siluet adalah bentuk figur yang cepat dan kasar. Ini digunakan untuk mendapatkan Ide umum tentang pose karakter, fisik, dll.

Di sebelah kanan adalah sketsa seorang pria. Prinsipnya sederhana - buat sketsa bentuk umum sprite, dengan garis anggota badan, dll. Cara ini memiliki tujuan yang sama dengan siluet, namun dapat membantu Anda mendapatkan lebih banyak detail, seperti menunjukkan lengan mana yang berada di depan, atau mengidentifikasi struktur otot. Cara ini tentu saja tidak lebih baik dari siluet: hanya sebuah alternatif. Cobalah dan bereksperimen sampai Anda memilih metode yang nyaman bagi Anda.

Pada tutorial kali ini saya akan menggunakan Photoshop 4.0, namun saya akan mencoba menggunakan fitur-fiturnya yang paling sederhana. Ketika berbicara tentang anti-aliasing dan hal serupa, maksud saya mereka juga diterapkan di program menggambar lainnya. Dan saya rasa Anda tahu cara menggunakan salah satunya. Namun perlu diperhatikan bahwa Photoshop secara umum tidak cocok untuk membuat sprite. Alasannya adalah Photoshop memodifikasi dan mengatur palet dengan cara khusus, yang tidak cocok untuk membuat game dengan palet tertentu. Ini karena aplikasi jenis ini dibuat untuk mengolah foto dan ilustrasi. Manipulasi palet dalam kasus ini tidak memainkan peran apa pun. peran penting, berbeda dengan sprite. Jika Anda membuat game yang tidak menggunakan palet (yang merupakan sebagian besar game PC, dibandingkan dengan game konsol), dan Anda tidak perlu mengkhawatirkan jumlah warna yang digunakan, maka Photoshop mungkin bisa menjadi pilihan yang tepat. untukmu. Saya suka menggunakannya untuk berlatih menggambar sprite, karena... Anda tidak perlu khawatir tentang memetik dan memilih warna, seperti yang terjadi pada editor yang menggunakan palet. Baiklah, mari kita membuat sprite. Untuk memulainya, saya menggunakan gambar yang digambar tangan, mis. Saya akan mengikuti cara Capcom:

Saya menggambar karakter dengan tangan (pada seperempat kertas A4 biasa), mewarnainya, lalu memindainya (pengaturan - 300dpi, mode hitam putih): sebelum memperkecil ukurannya, Anda harus mengubah mode gambar ke RGB atau Grayscale untuk anti -alias untuk bekerja). Saya mendapatkan gambar yang cukup besar, dan saya menampilkan versi yang lebih kecil di sini. Ada kekurangan kecil, seperti kaki depan yang melengkung aneh, dll.: kekurangan tersebut perlu diperbaiki saat bekerja dengan piksel, itu tidak akan sulit. Perhatikan bahwa saya menggandakan garis tepi jaket dan tank top. Ini terjadi secara tidak sengaja, tunggu: tunggu, saya akan menunjukkan masalah apa yang akan ditimbulkannya. Oke, kita tidak bisa bekerja dengan gambar sebesar itu, jadi mari kita kurangi ukurannya menjadi 100 piksel. Dia digambar dengan latar belakang putih, dan ukuran keseluruhannya akan berada di bawah seratus piksel, karena saya menyisakan sedikit ruang kosong di sekitar gambar kalau-kalau saya ingin membuat rambutnya lebih panjang. Oh ya, saya menggunakan filter bilinear saat mereduksi. Selain itu, Photoshop memiliki dua filter lagi, yang masing-masing berfungsi berbeda:

(klik untuk memperbesar)

Filter "Tetangga Terdekat" sepenuhnya menonaktifkan anti-aliasing. Ini sangat berguna jika Anda perlu memperbesar sprite yang sudah selesai sebanyak empat kali dan menunjukkannya kepada orang yang berpengetahuan.

Filter "Bilinear" dan "Bicubic" melakukan hal yang hampir sama: bicubic tampaknya memberikan lebih banyak anti-aliasing. Gambar kita relatif kecil, jadi dalam hal ini tidak akan ada banyak perbedaan, namun jika kita memperkecil gambar yang tingginya 800 piksel, efeknya akan signifikan. Masalah dengan filter bikubik adalah terlalu banyak anti-aliasing. Bandingkan tulang kering kanannya pada gambar bikubik dan gambar bilinear. Yang pertama lebih buram. Hal yang sama terjadi pada tangan dan wajah. Ini bisa mengganggu ray tracing, jadi saya biasanya menggunakan filter bilinear agar anti-allisiangnya berkurang. Jadi kami mendapatkan sprite kami (tinggi 95 piksel):

Sisi bagus dari Photoshop (dan alasan utama penggunaannya dalam teknik ini) adalah kemampuannya untuk bekerja dengan lapisan. Mereka diperlukan untuk penelusuran sinar; Anda dapat menggambar garis tanpa menyentuh gambar pindaian asli. Jika program Anda tidak mendukung lapisan, Anda mungkin sedikit mengalami kebuntuan. Anda dapat melakukan ray tracing di Photoshop, lalu mentransfer hasilnya ke aplikasi asli Anda.

Lihatlah bagian bawah tank topnya dalam versi gambar yang lebih kecil. Pada versi gambar tangan ada garis ganda pada titik ini untuk menandai titik warna putih yang akan saya tambahkan. Pada versi yang lebih kecil, hanya ada titik buram. Sama halnya dengan tangan. Itu sebabnya detail pakaian Chun-Li diberi tanda garis tipis, pengembang menambahkan sisanya pada tahap pengerjaan piksel.

Di Sini cara cepat konfigurasikan Photoshop untuk melakukan ray tracing sederhana. Gambar asli akan menjadi latar belakang (pastikan Anda berada dalam mode RGB), jadi buatlah layer baru. Isilah warna tertentu(misalnya, biru). Atur mode layer ini ke "layar" dan Anda akan melihat sprite, hanya garis hitam yang akan berubah menjadi biru. Kemudian gabungkan lapisan-lapisannya. Ini diperlukan agar garis yang baru digambar berada di atas lapisan gambar asli. Sekarang buat layer lain dan isi dengan warna putih. Setel ke mode "kalikan". Sebenarnya sprite akan menggambar persis di lapisan ini. Anda cukup membuat lapisan menjadi transparan, tetapi kemudian Anda harus terus-menerus beralih ke alat penghapus untuk menghapus sesuatu, yang tentu saja merepotkan. Dalam kasus kami, latar belakangnya akan berwarna putih, meskipun Anda tidak akan melihatnya. Anda dapat dengan mudah beralih dari putih ke hitam (asalkan pengaturan awal belum diubah) dengan menekan tombol X. Jika Anda ingin menghapus gambar yang terbuat dari garis biru, ubah mode lapisan terakhir menjadi "normal" dan latar belakang putih akan menutupi gambar aslinya.

Menggunakan latar belakang saat menggambar secara signifikan mengurangi waktu kerja. Namun, ingatlah bahwa latar belakang hanya ada untuk memandu tangan Anda. Biasanya wajah menjadi buram, terdiri dari piksel-piksel yang tersebar dimana-mana, sehingga harus dibuat ulang dengan piksel. Anda dapat memperbaiki bagian asli yang lebih besar (misalnya, saya akan memperbaiki bagian kaki) jika ada yang terlihat buruk dalam piksel. Cobalah untuk menghindari “titik” piksel besar: seperti yang ada di tangannya, misalnya. Bintik-bintik ini terlihat di sudut-sudut dan di sana-sini. Cobalah untuk menyingkirkannya. Sekelompok empat piksel hitam dapat sangat merusak persepsi visual sebuah sprite. Untuk menghilangkannya, Anda dapat sedikit menyesuaikan pose karakter: misalnya, jika dalam gambar lengan dan kaki saling tumpang tindih, dan akibat tumpang tindih tersebut, bintik-bintik piksel hitam muncul, Anda harus menggerakkan salah satu kakinya. atau lengannya. Bintik-bintik ini, yang disebut "gumpalan", dapat dihilangkan dalam banyak kasus. Ayo lanjutkan:

Saya menyelesaikan ray tracing garis dengan warna hitam. Masih menambahkan beberapa detail dan mengerjakan wajah, terutama mata, tapi ini paling baik dilakukan saat bekerja dengan warna. Mari mulai mewarnai sprite, mengisi area utama dengan warna, dan tidak menambahkan bayangan pada tahap ini:

Jadi, saya menambahkan warna: Saya lebih suka tidak mengerjakan latar belakang putih, lebih baik mengambil semacam itu warna lembut. latar belakang putih, membuat warnanya menjadi lebih gelap (terutama tank topnya). Ini adalah tipuan yang dipermainkan mata kita. Oke, mari tambahkan beberapa bayangan.