Membuat sprite animasi piksel di Photoshop. Adobe Photoshop: Menggambar dan menganimasikan karakter menggunakan teknik Pixel Art

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 pinggang horizontal adalah kesalahan besar... Oleh karena itu, karakter menjadi “kaku” 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 ada aturan ketat yang menyatakan seberapa gelap 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 lainnya - julingkan mata Anda dan lihat sprite: jika tidak mungkin membedakan warna terang dari warna gelap, mungkin Anda memerlukan lebih banyak kontras untuk warna tersebut. 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

Perkenalan:

Halo para pengguna situs portal yang terhormat! Pada artikel ini saya akan memberi tahu Anda cara menggambar sprite Anda sendiri dan membuat animasinya XNA GameStudio, dan saya juga akan memperkenalkan Anda pada pergerakan sprite dalam ruang dua dimensi. Semua kode di bawah ini telah diuji dan berfungsi dengan baik dalam versinya 3.1 . Tapi itu juga bisa berfungsi di versi lain ( 3.0 Dan 4.0 ; ke akun 2.0 tidak yakin). Sebelum mengenal pelajaran ini, saya sarankan untuk membacanya, karena pelajaran ini merupakan kelanjutannya, artinya Anda akan membutuhkan ilmu yang Anda peroleh dari artikel pertama.

Selain itu, sebelum membaca pelajaran ini, Anda harus memiliki pengetahuan dasar tentang bahasa pemrograman. C#, dan punya program Microsoft Visual C# Ekspres versi yang Anda perlukan (untuk XNA 3.1 - Microsoft Visual C# Ekspres 2008, dan untuk XNA 4. 0 - Microsoft Visual C# Ekspres 2010) dengan perpustakaan diinstal XNA GameStudio.

Jadi, jika Anda memiliki semua hal di atas, mari kita mulai!

Bagian 1. Menggambar sprite.

Sedikit teori:

Pertama, mari kita cari tahu apa itu sprite. Sprite– ini adalah objek (gambar) tertentu dalam game 2D. Karakter Anda, lawan, pohon biasa atau platform - semuanya adalah sprite. Bahkan background yang kita gambar di artikel sebelumnya akan menjadi semacam sprite.

Artinya, seperti yang mungkin sudah Anda duga, prinsip menggambar sprite akan mirip dengan prinsip menggambar latar belakang. Namun, pada artikel ini kami akan menyempurnakan gambar sprite dan membuatnya kelas baru.

Tapi ada satu lagi poin penting, yang ingin saya bahas di bagian artikel ini. Untuk setiap sprite kita akan mengatur posisinya di layar monitor. Untuk melakukan ini, ada dua cara (walaupun mungkin lebih banyak, tetapi paling sering hanya dua yang digunakan). Anda cukup menentukan posisi sudut kiri atas sprite, atau Anda dapat menggambar persegi panjang yang menutupi seluruh sprite dan menentukan koordinatnya. Itu. ternyata kemanapun persegi panjang itu bergerak, sprite akan mengikutinya.
Setiap metode memiliki pro dan kontra. Menentukan posisi sudut sprite lebih mudah, namun menentukan persegi panjang lebih praktis. Pada artikel ini kita akan membahas dua metode penentuan koordinat ini. Pertama, mari kita lihat metode yang lebih sederhana (mengatur koordinat sudut sprite) dan kemudian beralih ke metode yang lebih rumit (membuat persegi panjang).

Jadi mari kita mulai!

Membuat kelas untuk menggambar sprite:

Pertama, mari kita berkreasi proyek baru(cara melakukan ini dijelaskan secara rinci di artikel saya sebelumnya) dan sebut saja MenggambarSprite.

Sekarang klik kanan pada nama proyek (di Solution Explorer) dan pilih perintah: Tambahkan -> Buat Elemen -> Kelas:

Sebut saja Sprite:

Setelah dibuat, kelas kita terlihat seperti ini:

200?"200px":""+(this.scrollHeight+5)+"px");">menggunakan Sistem;
menggunakan System.Linq;
menggunakan Sistem.Teks;

Ruang Nama DrawSprite
{
kelas Sprite
{
}
}

Seperti yang Anda pahami, ini adalah kelas paling standar untuk sebuah proyek dalam bahasa pemrograman C#, yaitu. ruang nama XNA tidak ada. Karena saya tidak mengingatnya (dan, mungkin, tidak ada programmer yang mengingat semuanya), kami akan menambahkannya “seiring berjalannya waktu”. Misalnya, kita membuat variabel untuk tekstur ( Tekstur2D, jika ada yang tidak ingat), dan kompiler melaporkan bahwa satu namespace hilang (ia juga menulis namanya). Saat itulah kami akan menambahkannya.

Jadi, sekarang mari kita ingat bagaimana kita menambahkan latar belakang kita ke dalam game.

Kami membuat variabel untuk tekstur, memuat tekstur itu sendiri ke dalam metode Memuat Konten() dan menggambarnya dalam metode ini Menggambar(). Artinya, membuat kelas terpisah dan menggambar sprite di dalamnya (lebih tepatnya, memproses sprite di dalamnya, dan kita akan menggambarnya di Permainan1), kita perlu membuat variabel di dalamnya (di kelas baru kita), membuat metode untuk memuat tekstur (mirip dengan metode Memuat Konten()) dan buat metode untuk menggambar tekstur (mirip dengan metode Menggambar()).

Sekarang kita bisa mulai mengedit kelas baru kita. Seperti yang Anda ketahui, semua kode kelas ditulis di blok kelas (di antara kurung kurawal). Oleh karena itu, segera setelah:

200?"200px":""+(this.scrollHeight+5)+"px");">kelas Sprite
{

Mari kita tulis:

200?"200px":""+(ini.scrollHeight+5)+"px");">Tekstur2D

Seperti yang Anda lihat, jika Anda meletakkan kursor di " Tekstur2D", kemudian simfoni terakhir ditekankan:

Dalam kasus kami, ini berarti namespace tidak mencukupi. Tekan kombinasi tombol " Alt+Shift+F10" dan pilih yang pertama. Ini akan ditambahkan:

Jika semuanya dilakukan dengan benar, pesan berikut akan muncul di bagian atas layar:

200?"200px":""+(ini.scrollHeight+5)+"px");">

A " Tekstur2D" akan berubah warnanya.

Jadi mari kita lanjutkan. Mengganti " Tekstur2D" pada:

200?"200px":""+(ini.scrollHeight+5)+"px");">

Sekarang mari kita membuat konstruktor. Kami tidak membutuhkannya sekarang, biarkan kosong:

200?"200px":""+(this.scrollHeight+5)+"px");">Sprite publik()
{

Variabel telah dibuat, konstruktor sudah siap. Sekarang mari kita beralih ke memuat gambar. Mari buat metode Memuat Konten() tepat setelah konstruktor. Dalam parameternya Anda perlu menulis dua objek. Satu objek akan berkelas Manajer Konten(omong-omong, namespace di sini juga tidak cukup, mari kita tambahkan), dan kelas kedua Rangkaian. Yang pertama akan memungkinkan kita memanggil metode tersebut Memuat, untuk mengunduh gambar, dan yang kedua memungkinkan Anda menentukan jalur ke gambar ini. Nah, seperti inilah caranya Memuat Konten():

200?"200px":""+(ini.scrollHeight+5)+"px");">
{
spriteTexture = Konten.Muat (tekstur);
}

Seperti yang Anda lihat, sprite dimuat dengan cara yang sama seperti latar belakang. Hanya saja, sekarang di kelas Permainan1 Anda hanya perlu memasukkan kata tersebut Isi dan jalur menuju tekstur. Sisanya sudah ditulis.

Jadi, sekarang mari beralih ke metode berikutnya (dan terakhir) - Menggambar(). Satu-satunya parameter yang perlu dilewati adalah spriteBatch. Sekarang yang tersisa hanyalah menggambar sprite seperti yang kita tahu (dengan cara yang sama seperti kita menggambar latar belakang). Satu-satunya hal adalah tidak perlu memanggil metode di sini spriteBatch.Begin() Dan spriteBatch.Akhir(), karena agar tidak memanggil metode ini untuk setiap sprite secara terpisah, kami akan memanggilnya satu kali (di kelas Permainan1). Jadi, seperti inilah metode kami Menggambar():

200?"200px":""+(ini.scrollHeight+5)+"px");">
{
spriteBatch.Draw(spriteTexture, Warna.Putih);
}

Seperti yang Anda perhatikan, argumen kedua (setelah spriteTekstur) kami tidak menuliskannya. Hal itu dilakukan karena kami belum menetapkan koordinatnya.
Jadi sekarang kita beralih ke masalah yang saya jelaskan di awal. Sekarang kita akan menggunakan cara sederhana dan mengatur koordinat sudut kiri atas sprite. Untuk melakukan ini, segera setelah garis

200?"200px":""+(this.scrollHeight+5)+"px");">spriteTexture2D Tekstur publik;

(di awal kelas)

Mari menulis " Vektor2" dan tambahkan namespace yang diperlukan. Mari kita tulis juga nama posisinya:

200?"200px":""+(ini.scrollHeight+5)+"px");">

Dan sekarang dalam metodenya Menggambar() Mari kita tuliskan argumen kedua.

Seperti inilah metodenya sekarang Menggambar():

200?"200px":""+(this.scrollHeight+5)+"px");">public void Draw(SpriteBatch spriteBatch)
{
}

Dan seperti inilah keseluruhan kelas kami:

200?"200px":""+(this.scrollHeight+5)+"px");">menggunakan Sistem;
menggunakan System.Collections.Generik;
menggunakan System.Linq;
menggunakan Sistem.Teks;
menggunakan Microsoft.Xna.Framework.Graphics;
menggunakan Microsoft.Xna.Framework.Content;
menggunakan Microsoft.Xna.Framework;

Ruang Nama DrawSprite
{
kelas Sprite
{
tekstur sprite2D tekstur publik;
Posisi sprite Vector2 publik;

Sprite Publik()
{

LoadContent kekosongan publik (Konten ContentManager, Tekstur string)
{
spriteTexture = Konten.Muat (tekstur);
}

Penarikan kekosongan publik (SpriteBatch spriteBatch)
{
spriteBatch.Draw(spriteTexture, spritePosition, Warna.Putih);
}
}
}

Mengedit kelas Game1:

Jadi sekarang mari kita edit kelasnya Permainan1 menurut kelas Sprite.

Pertama, mari kita buat objek kelas Sprite. Ayo telepon dia pahlawan.

200?"200px":""+(this.scrollHeight+5)+"px");">Pahlawan Sprite;

Sekarang di konstruktor Permainan1 inisialisasi objek:

200?"200px":""+(this.scrollHeight+5)+"px");">pahlawan = Sprite baru();

Setelah ini dalam metode Memuat Konten() mengunggah gambar. Sebelumnya di folder Isi membuat folder Tekstur dan tambahkan gambar pahlawan Anda ke dalamnya (semua ini dijelaskan di artikel pertama saya) (saya menyebutnya menganggur). Jadi, dalam metodenya Memuat Konten() Mari menulis:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.LoadContent(Konten, "Tekstur//idle");

Oleh karena itu, kami menyebut metode ini “ Memuat Konten" dari kelas Sprite dan menambahkan argumen ke dalamnya.

Ya, kita berada di “garis finis”. Tetap beralih ke metodenya Menggambar() dan menelepon ke sana spriteBatch.Begin(), pahlawan.Gambar Dan spriteBatch.Akhir(). Seperti yang Anda pahami, pahlawan.Gambar kami akan menelepon dari kelas Sprite, yaitu. Anda hanya perlu memasukkan satu argumen ke dalamnya - spriteBatch(selebihnya ditulis di kelas Sprite). Seperti inilah metodenya Menggambar() kelas Permainan1:

Sekarang mari kita mulai permainannya ( F5), dan mari kita lihat apa yang kita dapatkan. Saya mendapat gambar ini:

Semuanya berfungsi dengan baik, tetapi kode ini perlu diperbaiki. Karena kami tidak menentukan koordinat secara eksplisit, compiler menetapkan koordinat standar untuk sudut kiri atas sprite. Dan koordinat standar ini adalah nol. Anda mungkin bertanya mengapa sprite digambar di atas? Semuanya sangat sederhana. Lagi pula, dalam grafik komputer, koordinatnya terbalik. Dan jika dalam matematika bidang koordinatnya terlihat seperti ini:

Kemudian di layar monitor, seperti yang sudah saya katakan, koordinatnya dibalik, yaitu. Sistem koordinat berasal dari pojok kiri atas:

Artinya koordinat ( 0, 0 ) (Oleh X Dan Y) akan berada di sudut kiri atas.

Sekarang mari kita ubah kode kita dan tuliskan koordinat kita. Setiap pembagian skala koordinat sama dengan satu piksel. Artinya, jika ukuran layar Anda 600x600 piksel, lalu titik 300x300 akan menjadi bagian tengah layar Anda.

Jadi mari kita gambar sprite kita di tengah layar. Pertama, mari kita ubah ukuran jendela permainan (ini dijelaskan secara rinci di artikel pertama saya). Untuk melakukan ini, di konstruktor kelas Permainan1 ayo masuk:

200?"200px":""+(this.scrollHeight+5)+"px");">graphics.PreferredBackBufferHeight = 600; //Lebar layar
grafis.PreferredBackBufferWidth = 600; //Tinggi layar

Itu saja, sekarang kita bisa mengatur koordinatnya. Dalam metode Inisialisasi() memasuki:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.spritePosition = Vector2 baru(300, 300);

Jadi, kami menginisialisasi objek posisi sprite dan menetapkan koordinatnya nilai-nilai 300 sepanjang sumbu X Dan Y.

Sekarang mari kita luncurkan gamenya. Saya mendapatkannya seperti ini:

Seperti yang Anda lihat, sprite tidak digambar tepat di tengah layar, tetapi Anda dapat yakin bahwa sudut kiri atas (di sini transparan) digambar tepat di tengah. Dengan cara ini Anda bisa bereksperimen dan membuat pahlawan tepat di tengah jendela permainan. Jadi, dengan ini saya akan menyimpulkan bagian artikel ini. Di bagian selanjutnya, kita akan mengetahui cara membuat animasi untuk sprite Anda.

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

1. 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.

2. 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

      Tentukan sumber cahaya Anda. Inilah intinya: Anda perlu memutuskan pada sudut mana cahaya akan mengenai sprite. Setelah Anda memutuskan hal ini, Anda dapat membuat bayangan yang tampak dapat dipercaya. Ya, tidak akan ada “cahaya” dalam arti literal, intinya bayangkan bagaimana cahaya itu akan jatuh pada gambar.

      • Solusi paling sederhana adalah dengan mengasumsikan bahwa sumber cahaya berada sangat tinggi di atas sprite, sedikit ke kiri atau kanannya.

      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 dan sedikit meningkatkan pengaturan “Kecerahan”, Anda bisa mendapatkan 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.

Dalam pelajaran ini Anda akan belajar cara menggambar dan menganimasikan karakter menggunakan teknik ini Seni piksel. Untuk melakukan ini, Anda hanya memerlukan Adobe Photoshop. Hasilnya adalah GIF dengan astronot yang sedang berlari.

Program: Adobe Photoshop Tingkat Kesulitan: pemula, tingkat menengah Waktu yang dibutuhkan: 30 menit – jam

I. Menyiapkan dokumen dan alat

Langkah 1

Pilih Pensil dari toolbar - ini akan menjadi alat utama untuk pelajaran kita. Dalam pengaturan, pilih jenis kuas Hard Round, dan atur nilai sisanya seperti pada gambar. Tujuan kami adalah membuat ujung pensil setajam mungkin.

Langkah 2

Pada pengaturan Eraser Tool (penghapus), pilih Mode Pensil, dan atur nilai sisanya seperti yang ditunjukkan pada gambar.

Langkah 3

Aktifkan Pixel Grid (Lihat > ​​Tampilkan > Pixel Grid). Jika tidak ada item seperti itu di menu, buka pengaturan dan aktifkan akselerasi grafis Preferensi > Performa > Akselerasi grafis.

Harap dicatat: Grid hanya akan terlihat pada kanvas yang baru dibuat ketika diperbesar sebesar 600% atau lebih.

Langkah 4

Di Preferensi > Umum (Control-K), ubah mode interpolasi gambar ke mode Tetangga Terdekat. Ini akan memungkinkan batas-batas objek tetap sejelas mungkin.

Dalam pengaturan Satuan & Penggaris, atur satuan penggaris ke piksel Preferensi > Satuan & Penggaris > Piksel.

II. Penciptaan Karakter

Langkah 1

Dan sekarang semuanya sudah siap, kita bisa langsung melanjutkan menggambar karakternya.

Buat sketsa karakter Anda dengan garis luar yang jelas, berhati-hatilah agar tidak membebaninya dengan detail kecil. Pada tahap ini, warna tidak menjadi masalah sama sekali, yang utama adalah garis luarnya digambar dengan jelas dan Anda memahami seperti apa karakternya nantinya. Sketsa ini disiapkan khusus untuk pelajaran ini.

Langkah 2

Kurangi skala sketsa menjadi 60 piksel menggunakan pintasan keyboard Control+T, atau Edit > Free Transform.

Ukuran objek ditampilkan di panel informasi. Harap dicatat bahwa pengaturan interpolasi sama seperti yang kita lakukan pada langkah 4.

Langkah 3

Perbesar sketsa sebesar 300-400% untuk mempermudah pengerjaan dan mengurangi opacity layer. Kemudian buat layer baru dan gambar garis luar sketsa menggunakan Pencil Tool. Jika karakternya simetris, seperti dalam kasus kita, Anda dapat membuat outline hanya setengahnya, lalu menduplikasinya dan membaliknya sebagai cermin (Edit > Transform > Flip Horizontal).

Irama: Untuk menggambar elemen kompleks, bagi menjadi beberapa bagian. Ketika piksel (titik) dalam sebuah garis membentuk "irama" seperti 1-2-3, atau 1-1-2-2-3-3, sketsa tampak lebih halus di mata manusia. Tapi, jika bentuknya mengharuskan, ritme ini bisa terganggu.

Langkah 4

Saat garis luar sudah siap, Anda dapat memilih warna utama dan mengecat bentuk besar. Lakukan terus lapisan terpisah di bawah garis besar.

Langkah 5

Ratakan garis luarnya dengan menggambar bayangan di sepanjang tepi bagian dalam.

Lanjutkan menambahkan bayangan. Seperti yang mungkin Anda perhatikan saat menggambar, beberapa bentuk dapat diperbaiki.

Langkah 6

Buat layer baru untuk highlight.

Pilih mode campuran Overlay dari daftar drop-down di panel Layers. Warnai dengan warna terang pada area yang ingin Anda sorot. Kemudian menghaluskan highlight menggunakan Filter > Blur > Blur.

Lengkapi gambarnya, lalu salin dan cerminkan separuh gambar yang sudah jadi, lalu gabungkan lapisan dengan separuhnya untuk membuat gambar utuh.

Langkah 7

Sekarang astronot perlu menambahkan kontras. Gunakan pengaturan Levels (Image > Adjustments > Levels) untuk membuatnya lebih cerah, lalu sesuaikan rona menggunakan pilihan Color Balance (Image > Adjustments > Color Balance).

Karakter sekarang siap untuk dianimasikan.

AKU AKU AKU. Animasi Karakter

Langkah 1

Buat salinan layer (Layer > New > Layer Via Copy) dan pindahkan 1 piksel ke atas dan 2 piksel ke kanan. Ini adalah poin kunci dalam animasi karakter.

Kurangi opacity layer asli sebesar 50% sehingga Anda dapat melihat frame sebelumnya. Ini disebut “Menguliti Bawang” (mode jamak).

Langkah 2

Sekarang tekuk lengan dan kaki karakter Anda seolah-olah sedang berlari.

● Sorot tangan kiri Alat laso
● Menggunakan FreeTransformTool (Edit > FreeTransform) dan menahan tombol Control, pindahkan batas wadah sehingga tangan bergerak mundur.
● Pilih satu kaki terlebih dahulu dan regangkan sedikit. Kemudian remas kaki lainnya secara sebaliknya sehingga terasa seperti karakter sedang berjalan.
● Gunakan pensil dan penghapus untuk mengoreksi bagian tersebut tangan kanan di bawah siku.

Langkah 3

Sekarang Anda perlu menggambar ulang sepenuhnya posisi lengan dan kaki yang baru seperti yang ditunjukkan di bagian kedua pelajaran ini. Hal ini diperlukan agar gambar terlihat jernih, karena transformasi sangat mendistorsi garis piksel.

Langkah 4

Buat salinan lapisan kedua dan balikkan secara horizontal. Sekarang Anda memiliki 1 pose dasar dan 2 gerakan. Kembalikan opacity semua layer menjadi 100%.

Langkah 5

Buka Window > Timeline untuk menampilkan panel Timeline, dan klik Create Frame Animation.

Di garis waktu, lakukan hal berikut:

1. Atur waktu tunda menjadi 0,15 detik
2. Klik pada DuplikatSelectedFrames untuk membuat 3 salinan lagi
3. Atur loop berulang Selamanya

Langkah 6

Untuk memilih layer yang diinginkan untuk setiap frame, klik ikon Mata di sebelah nama layer di panel Layers. Urutannya harus seperti ini:

Posisi dasar→Lari dengan kaki kanan→Posisi dasar→Lari dengan kaki kiri.

Terkait

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 dapat diterapkan pada berbagai jenis permainan: Earthworm 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 penting, tidak seperti 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 di tempat ini, yang saya gunakan untuk menandai tempatnya 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.

Kembali