Tambahkan kedalaman ke sprite 2D menggunakan peta normal yang digambar tangan


Pixel art adalah abadi, tetapi ini tidak berarti bahwa alat dan teknik untuk bekerja dengannya harus tetap pada level 1993.

Pengembang game Inggris Cardboard Sword sedang mengerjakan game platform siluman dua dimensi The Siege and the Sandfox , dibuat di Unreal Engine 4 dengan Paper2D. Tim menerbitkan serangkaian buku harian pengembangan yang memperkenalkan pengembang lain tentang cara menggunakan alat ini di game mereka sendiri.

Salah satu fitur teknis utama The Siege dan Sandfox adalah penggunaan tileset dan sprite yang digambar tangan dengan peta normal, memungkinkan Anda untuk menggunakan metode pencahayaan tiga dimensi dalam game ini dengan seni pixel dua dimensi yang cukup tradisional.

Salah satu direktur seni Cardboard Sword, Kate Duke-Cox, baru-baru ini memberi tahu Gamasutra bagaimana perusahaan datang untuk menggunakan teknik ini, mengapa itu cocok dengan permainan dan bagaimana Anda dapat menerapkan teknik serupa di game 2D Anda sendiri.

Tambahkan rasa kedalaman


Apa manfaat dari peta normal dibandingkan dengan pencahayaan datar tradisional dalam game 2D?

Kate Duke-Cox : tugas direktur seni sepenuhnya dikhususkan untuk menemukan gaya individu dan mencapai efek yang diinginkan. Kami ingin seni kami kaya, mendalam, dan “cembung”. Normal diizinkan untuk mencapai tujuan ini, memberikan rasa bentuk dan kekuatan kepada dunia dan objeknya.


Gambar ini, diposting oleh Keith Duke Cox di Twitter pada Agustus 2017, adalah contoh teknik yang menakjubkan.

Misalnya, penggunaan normals memberi sumber bahaya tampilan yang lebih nyata. Cahaya merespons lebih tepat ke permukaan, dan tanpa normals, perasaan "lembaran kertas" yang sangat datar telah tercipta.


Ketika digunakan dengan benar, peta normal dapat menambah objek dalam adegan rasa kedalaman dan berat yang tidak dapat dicapai gambar 2D datar.

Penggunaan peta normal lebih merupakan solusi visual daripada pilihan gameplay fungsional. Kami ingin pemain untuk terjun lebih dalam ke lingkungan, sehingga parkour akan memberikan perasaan yang mendalam dan keaslian fisik, daripada kesan pola potong kertas yang khas dari beberapa game pixel. Jika Anda mematuhi warna-warna cerah dan sederhana atau gaya retro, maka pencahayaan datar sangat cocok.

Apa yang awalnya membuat Anda tertarik untuk menggunakan peta normal untuk pencahayaan 2D? Bagaimana Anda mengetahuinya, atau di mana Anda melihat implementasi yang berkualitas?

Menerapkan normals ke grafik 2D adalah kelanjutan alami penggunaannya dalam 3D, yang tidak mungkin dilakukan pada sistem yang lebih lama yang kami ilhami saat membuat style. Tentu saja, kami bukan yang pertama menggunakannya dalam game pixel art modern, tetapi hasilnya berbeda.

Pada awalnya, kami menolak untuk menggunakan efek ini, karena dalam banyak efek yang kami lihat, itu menghancurkan pesona dan estetika seni pixel, memberinya terlalu banyak kilau logam. Dalam upaya pertama kami untuk membuat peta normal piksel yang digambar tangan untuk seni piksel, kami mendapatkan nilai normal yang sangat detail - setelah semua, ini adalah tujuan utama mereka dalam grafik 3D. Tetapi setiap ubin di game kami memiliki ukuran hanya 32x32 piksel, jadi tidak terlalu banyak piksel yang tersisa untuk mengirimkan informasi permukaan. Alhasil, hasilnya berubah menjadi kekacauan yang bising.

Tapi kemudian kita melihat seni Gwenael Masset untuk Dead Cells , di mana pixel art dengan normal dilakukan dengan sangat baik, dan memutuskan untuk memberinya kesempatan kedua. [Inilah artikel tentang menggunakan model 3D dalam game dua dimensi ini.] Kali ini kami menggunakan peta normal bukan untuk detail kecil permukaan yang dapat dilihat dalam grafik 3D. Sekarang peta normal digunakan untuk "mode" bentuk seni pixel besar.

Formulir Sculpting Menggunakan Peta Normal


Bisakah Anda secara singkat berbicara tentang proses pengembangan aset, khususnya tentang perbedaan dari membuat aset 2D sprite sederhana yang serupa?

Biasanya pixel art digambar dengan mempertimbangkan arah cahaya "umum". Dalam kasus kami, untuk sebagian besar sprite dan ubin latar depan, lampu utama jatuh dari atas dan sedikit ke kanan, dan ubin latar belakang memiliki "lampu kamera" yang lebih umum untuk mensimulasikan ruang gelap dan tidak mengalihkan perhatian pemain dari latar depan.

Ini berarti bahwa ketika datang untuk memberikan normal untuk sprite dan ubin, detail dan bahan permukaan sudah dipilih. Kami menemukan bahwa pendekatan ini bekerja sangat baik. Maksudnya semua bentuk dan detail yang harus kita tiru dalam norma sudah sangat jelas dan nyata.

Bergantung pada sifat sprite yang mana normals ditambahkan, kami menggunakan kombinasi menggambar warna sudut-sudut normals dari "sphere of normal maps" (pada kenyataannya, ini adalah sphere yang berfungsi sebagai palet dari semua sudut yang memungkinkan yang dapat ditarik pada peta normatif tangen) dan menggambar dalam saluran RGB terpisah. skala abu-abu dengan alat lain seperti ND, Crazybump atau AwesomeBump. Mereka membantu dengan beberapa bentuk dan mencampur bagian-bagian normal normalnya dengan benar.


Kami menggunakan Nvidia TextureTools untuk Photoshop untuk menyesuaikan / menormalkan vektor setelah selesai menggambar peta normal.

Apa manfaat dari menggambar peta normal manual seperti ini dengan alat yang dibuat sebelumnya seperti Sprite DLight?

Ketika kami mulai mencari cara untuk membuat normals untuk objek 2D tanpa model poli tinggi, kami menemukan aplikasi yang sampai batas tertentu melakukan tugas ini.

Kami mempelajari tutorial untuk mengetahui bagaimana peta normal dibuat, tetapi menemukan bahwa mereka membuat asumsi berdasarkan nilai warna piksel, yang tidak memberikan hasil yang sepenuhnya akurat atau sepenuhnya salah, atau memerlukan beberapa gambar dalam skala abu-abu untuk mensimulasikan cahaya dari berbagai arah, pada dasarnya membuat saluran peta normal secara mandiri.

Program tidak dapat mengetahui ketinggian dan sudut piksel dalam sprite, terutama ketika itu adalah permainan pixel art dengan palet yang sangat terbatas, di mana satu warna digunakan untuk menunjukkan banyak kedalaman dan sudut suatu objek. Namun, perlu ditambahkan bahwa kami tidak benar-benar menggunakan program ini, tetapi hanya mengevaluasi prospek untuk aplikasi mereka.

Ada dua metode standar untuk pembuatan peta normal terakselerasi otomatis - Grayscale Conversion dan Shape Recognition. Kami melakukan tes dengan ketiga metode dan menemukan bahwa metode menggambar manual pasti memberikan hasil terbaik.



Konversi Grayscale dan Pengenalan Bentuk dapat membuat efek lebih baik daripada yang ditunjukkan di sini, tetapi bahkan dengan biaya tenaga dan waktu yang signifikan, mereka masih tidak seakurat dan sebagus gambar manual.

Menggunakan peta normal di game 2D asli


Apa saran yang dapat Anda berikan kepada pengembang yang ingin melakukan apa yang Anda inginkan?

Membuat normals 2D akurat secara manual bukanlah tugas yang mudah. Mengerjakan semua ubin latar depan dan latar belakang membutuhkan waktu sekitar 3 bulan orang. Karena itu, untuk mendapatkan hasil berkualitas tinggi, bersiaplah untuk berinvestasi banyak waktu.

Normal yang dibuat dengan cepat untuk grafis 2D, terutama pixel art, biasanya terlihat buruk. Sistem seperti "buat solusi dengan satu tombol" sering mengarah pada penciptaan aset yang lemah yang, ketika ditampilkan dalam game, terlihat lebih buruk daripada pixel art yang tidak menyala. Uji sebagian kecil gim (contoh kecil latar depan, latar belakang, objek, dan karakter) dan cari tahu apa yang cocok untuk Anda dan gaya gim Anda.

Di sisi lain, dalam hal rendering, biaya penambahan normals ke dunia kita sangat kecil. Untuk hampir seluruh dunia game, kami memiliki dua peta normal 2k. Mereka tidak mengambil banyak memori, dan beberapa tekstur tambahan untuk pass rendering normal tidak terlalu mempengaruhi panggilan draw. Sumber pencahayaan secara dinamis hanya melakukan pencahayaan, mereka tidak memberikan bayangan pada segala sesuatu dalam permainan, oleh karena itu mereka juga sangat murah.

Jika Anda belum memahami bagaimana normals dari ruang singgung bekerja dan apa artinya, maka bahkan studi singkat akan memungkinkan Anda untuk membuatnya lebih mudah.

Untuk menggunakan metode ini, Anda harus menyesuaikan aset yang ada, dan tidak menerapkannya sejak awal pengembangan. Bisakah Anda memberi saran kepada mereka yang mencoba untuk melengkapi grafik sprite yang sudah jadi dengan peta normal?

Jika kita harus melakukannya lagi, maka kita akan melakukan hal yang sama: pertama buat grafik difus, dan kemudian gambar normalnya menggunakan pixel art sebagai referensi.

Mungkin kita akan menggambar beberapa benda sedikit berbeda. Ada masalah dalam seni piksel ketika satu piksel dapat menunjukkan, misalnya, kuku yang menempel atau paku keling, tetapi piksel ini di peta normal hanya dapat sesuai dengan satu sudut, sehingga kami dapat membuat beberapa elemen lebih besar untuk lebih baik menyampaikan sudut pada gambar.

Jika Anda menggunakan resolusi yang lebih rendah daripada yang kami lakukan di tilesets kami (32x32), maka mungkin ukurannya akan membatasi Anda terlalu banyak. Dengan resolusi 16x16 atau 8x8, Anda mungkin tidak akan dapat mentransfer bentuk atau volume hanya jika satu ubin bukan satu bagian besar, seperti batu atau blok beton.

Dalam pixel art, gradien yang jelas tidak terlihat sebagus permukaan tebal dengan sudut tajam. Jika gaya grafis Anda memungkinkan, maka saya sarankan menggunakan lebih banyak sudut daripada gradien pada permukaan normal. Misalnya, jika Anda memiliki barel, maka pastikan bahwa setiap papan yang terdiri dari masing-masing memiliki sudutnya sendiri, dan laras itu sendiri lebih oktagonal daripada bulat.

Apakah Anda memiliki saran untuk pengembang yang ingin menggunakan teknik ini di luar Unreal? Misalnya, di Unity atau di Gamemaker.

Sebelum Anda mulai, periksa orientasi peta normal. Pendekatan untuk menggambar normals adalah sama untuk semua mesin, hanya apa artinya masing-masing saluran warna peta berbeda.

Biasanya, hanya sumbu Y (saluran hijau) yang berubah di mesin yang berbeda. Unreal menggunakan normals dari sistem koordinat Y-sided dari DirectX, tetapi Unity menggunakan normals Y + dari sistem koordinat sisi kanan OpenGL (seperti yang terlihat bagi kami), sehingga saluran hijau harus terbalik.

Namun, jika Anda melukis dengan salah, maka paling sering membalik saluran hijau saja sudah cukup. Anda akan melihat bahwa saluran bingung jika gambar menyala berlawanan dengan hasil yang diharapkan.

Source: https://habr.com/ru/post/id430754/


All Articles