() translation by (you can also view the original English article)
Dalam tutorial ini, saya akan menunjukkan cara membuat grafik 3D berarsir datar untuk game Unity Anda, dan jelaskan mengapa Anda ingin melakukannya di tempat pertama.
Saat ini, ada banyak alat dan mesin 3D yang memungkinkan siapa pun untuk membuat game 3D. Namun, tantangan seni 3D itu menakutkan dan sering membutuhkan banyak waktu, usaha, dan keahlian yang tidak dimiliki oleh gamedev atau hobbyist. Model low-polygon, dalam kombinasi dengan shading datar, membawa kembali gaya awal 90-an, menggunakan teknik yang dapat dipelajari siapa pun. Dan itu bukan hanya kemunduran nostalgia; shading-datar dengan mudah dapat dikombinasikan dengan teknik modern seperti peta oklusi ambien untuk memberikan permainan Anda tampak, avant-garde mencolok.
Dapatkan contoh proyek Unity di sini
Tutorial ini mengasumsikan Anda sudah tahu cara melakukan pemodelan 3D, atau dapat menemukan model 3D gratis di internet. Saya akan menarik contoh model dari udara tipis; ada banyak tutorial di internet untuk bagaimana memulai pemodelan 3D. Jika Anda baru memulai, saya sangat merekomendasikan Wings 3D dan SketchUp. Keduanya memiliki antarmuka yang sangat mudah diakses dibandingkan dengan aplikasi pemodelan profesional, dan akan mengekspor ke format yang dapat digunakan oleh Blender dan Unity.
Mengapa Menggunakan Shading Datar?
Jadi Anda memutuskan untuk mengotori tangan Anda dengan Unity dan mulai membuat game 3D sepenuhnya. Mungkin Anda tidak memiliki keterampilan seni permainan sebelumnya, atau mungkin Anda telah membuat beberapa karya seni untuk permainan 2D; dalam kedua kasus, Anda akan segera belajar bahwa game 3D membutuhkan keterampilan yang sangat besar untuk dibuat. Anda tidak hanya perlu belajar cara membuat model 3D, Anda perlu membongkar model-model tersebut untuk menggambar tekstur pada permukaan model Anda dengan benar. Anda juga harus susah payah menciptakan teksturnya, tentu saja.
Bagaimana jika Anda bisa membuat model, tetapi sudah selesai dan siap untuk permainan Anda setelah beberapa langkah tambahan untuk mewarnai dan memudarnya? Anda mungkin berakhir dengan sesuatu seperti ini:
Atau ini:
Tentu, penampilannya sederhana dan lo-fi — tapi itu intinya! Apakah Anda bertujuan untuk nostalgia awal 90-an, tampilan abstrak modern, atau hanya ingin menghemat banyak waktu membuat aset untuk permainan selai, shading datar adalah pilihan gaya yang sangat baik untuk pemula dan para ahli 3D.
Jika Anda baru saja memulai dengan seni permainan, kesederhanaan alur kerja memungkinkan Anda berkonsentrasi pada hal-hal mendasar: mempelajari cara membuat model 3D dengan siluet dan bentuk yang bagus, dan mewarnainya dengan satu set kecil warna terpilih. Berkonsentrasi pada dasar-dasar ini mengajarkan Anda keterampilan dasar seni tanpa gangguan.
Bagaimana Mengerjakan Shading Datar
Setiap model 3D terdiri dari satu set simpul yang menentukan bentuk model itu. Untuk setiap verteks, ada juga vektor yang disebut normal — anggap ini sebagai pin kecil yang mencuat dari verteks.
Mesin rendering menggunakan normal untuk setiap titik dan membandingkan arahnya dengan arah sumber cahaya yang masuk, dan arah di mana kamera menghadap, untuk menentukan jumlah cahaya yang akan diterapkan ke titik tersebut.
Perender perlahan memudarkan jumlah cahaya dari satu titik ke yang berikutnya, memberikan model 3D dasar tampilan "seperti bantal". Kecuali Anda menerapkan tekstur (dan sering kali, bahkan jika Anda melakukannya), ini terlihat sangat mengerikan pada apa pun yang sebenarnya tidak melengkung, permukaan "bantal":
Dengan shading datar, seluruh permukaan poligon menerima jumlah cahaya seragam, dihitung dari normal mencuat ke luar dari pusat poligon:
Aplikasi pemodelan modern menggunakan "tepi keras" atau "merapikan kelompok" untuk menyesuaikan norm vertex model Anda agar cocok dengan poligon yang berdekatan dengannya, sehingga menyebabkannya seragam dan berbayang. Seorang seniman 3D yang terampil akan menggunakan ini untuk membuat tepi tajam terlihat tajam dan permukaan rata terlihat datar, tetapi kita tertarik untuk membuat seluruh model terlihat tajam dan rata. Untungnya, Unity membuat ini sangat sederhana.
Teknik dasar
Jika Anda cukup akrab dengan alat pemodelan Anda, Anda dapat membuat model Anda terlihat datar dengan menetapkan semua sisi sebagai "keras". Namun, dalam Unity Anda dapat dengan mudah memilih untuk membiarkan Persatuan membuat tepi-tepi keras secara otomatis:
Langkah 1
Klik pada model Anda di jendela Project untuk membuka Pengaturan Impor di panel Inspector.
Langkah 2
Pergi ke bagian Normals & Tangents dan, di dropdown Normalnya, pilih Calculate.
Langkah 3
Setel Smoothing Angle ke 0 dan klik Apply.
Kesatuan akan membuat tepi apa pun yang sudutnya lebih tajam dari ini menjadi tepi yang keras. Kita ingin semua sisi kita menjadi sulit, jadi pengaturannya secara alami ke 0 memberi efek ini.
Jangan ragu untuk bereksperimen dengan sudut pemulusan yang berbeda, tergantung pada geometri model Anda, itu bisa menjadi cara yang sangat mudah untuk memberikan tampilan yang sama sekali berbeda.
Langkah 4
Sekarang kita memiliki model yang datar, kita perlu memberinya warna! Ada banyak cara untuk melakukan ini, tetapi beberapa lebih baik dari yang lain:
- Pilih bagian dari model Anda dan atur ke bahan yang berbeda untuk setiap warna yang ingin Anda gunakan.
- Tentukan warna titik dalam program pemodelan Anda.
- Buat "tekstur palet" yang berisi sekelompok kotak berwarna dan peta tekstur model Anda menggunakan ini.
Saya lebih memilih metode terakhir, yang akan saya jelaskan kepada Anda di bawah ini. Biasanya, setelah membuat model 3D, Anda harus membukanya dengan susah payah agar sesuai dengan tekstur buatan tangan. Namun, karena kita hanya tertarik untuk memiliki satu warna untuk setiap poligon, itu tidak terlalu penting seperti apa penampilan pekerjaan UV Anda — itu bisa saja berupa tumpukan acak simpul, asalkan di atas yang benar warna!
Langkah pertama dalam mewarnai adalah menciptakan tekstur. Untuk contoh kita, katakanlah kita ingin empat warna:
Selanjutnya, muat model 3D Anda yang sudah selesai di modeller pilihan Anda dan muatkan tekstur Anda. Pilih semua wajah model yang Anda inginkan untuk menjadi warna tertentu dan secara otomatis UV membukanya. Hasilnya mungkin akan menjadi kumpulan poligon yang membingungkan.
Seperti yang saya katakan, itu tidak masalah. Pindahkan semua poligon di atas satu sama lain dan skala mereka ke dalam gumpalan kecil yang akan masuk ke salah satu kotak pada tekstur palet Anda. Lalu, tarik mereka di atas warna pilihan Anda.
Lihatlah model Anda; bagian bertekstur sekarang memiliki warna yang benar! Ulangi proses ini untuk sisa wajah model Anda, lagi-lagi memilih dan membukanya berdasarkan warna yang Anda inginkan. Jika Anda membuat kesalahan, itu bukan masalah besar, cukup pilih wajah lagi, buka lagi jika perlu, dan letakkan di tempat yang tepat pada tekstur. Hal yang sama tidak bisa dikatakan untuk membuka "nyata" UV!
Voilà! Anda memiliki model berwarna datar yang dapat diimpor ke permainan Anda.
Bagaimana dengan Metode Lain?
Jika Anda bertanya-tanya, inilah beberapa alasan untuk menghindari dua metode lainnya:
Banyak Bahan
Metode ini menciptakan banyak materi yang harus Anda lacak di Unity, dan yang lebih penting, Unity tidak akan secara dinamis menyatukan model Anda dan menggunakan keseluruhan panggilan gambar untuk setiap materi, yang seringkali merupakan hambatan terkecil pada perangkat keras grafis modern.
Sederhananya, Anda akan mendapatkan kinerja yang mengerikan jika Anda menggunakan metode ini secara ekstensif.
Vertex Color
Ini benar-benar berfungsi dengan baik, dan Anda mungkin sebenarnya ingin menggunakan ini tergantung pada kebutuhan khusus Anda atau alur kerja seni. Namun, Anda akan segera melihat sesuatu: ketika Anda mengimpor model dan menggunakan shader Diffuse dasar, warna vertex Anda tampaknya tidak akan muncul!
Ini karena para shader dasar mengabaikan mereka; Anda harus menggunakan shader khusus yang benar-benar menggunakan data warna titik. Ini dapat dengan mudah ditemukan, tetapi hal-hal menjadi rumit jika Anda juga ingin efek render lain dari shader lain: shader ini sering kali tidak menggunakan warna vertex juga, dan Anda harus memodifikasi shader sendiri.
Jika Anda belum tahu cara menulis shader, ini dapat menyebabkan banyak waktu dan upaya yang lebih Anda habiskan untuk sisa permainan Anda. Juga, itu mungkin hanya saya, tetapi saya merasa jauh lebih mudah untuk mengubah banyak warna sekaligus dengan tekstur daripada mengaturnya secara manual di modeller atau dalam game dengan skrip.
Mengoptimalkan
Sekarang setelah Anda memiliki palet tekstur dan teknik dasar yang ditemukan, Anda dapat melanjutkan untuk membuat sisa model untuk game Anda. Seperti yang Anda duga, Anda bisa terus menambahkan warna ke palet Anda dan menggunakan tekstur yang sama untuk seluruh permainan.
Sebenarnya ada beberapa keuntungan kinerja besar untuk melakukan ini: jika Anda tetap menggunakan bahan yang sama untuk seluruh permainan Anda juga, Unity biasanya akan menarik semua objek Anda lebih efisien dengan "batching" mereka. Seperti yang saya sebutkan sebelumnya, "menggambar panggilan" adalah hambatan utama dalam grafis komputer dan itu ide yang baik untuk menjaga mereka seminimal mungkin.
Unity secara otomatis akan mencoba menggambar adegan Anda dalam beberapa penarikan panggilan mungkin jika Anda menggunakan satu bahan untuk semuanya, meskipun setiap model harus diskalakan dengan cara yang sama dan memiliki kurang dari sekitar 300 simpul. Ini akan memberi tahu Anda seberapa baik hal itu dilakukan di jendela Statistik:
Tip: Jika Anda ingin tahu lebih banyak tentang pengelompokan, pastikan untuk memeriksa dokumen Unity pada subjek. Ini harus menjadi bacaan wajib bagi siapa pun yang tertarik dengan kinerja permainan mereka!
Mengubah Warna di Fly
Anda memiliki satu set model yang datar dan berwarna, dan segala sesuatu tampak di tempat, tetapi bagaimana jika Anda ingin mengubah warna saat permainan sedang dimainkan?
Misalnya, katakanlah Anda memiliki skrip yang akan menelurkan pesawat Anda, tetapi setelah itu Anda ingin mewarnainya berwarna biru jika itu ramah atau merah jika itu musuh. Anda tentu saja dapat membuat palet terpisah dan materi terpisah, tetapi itu berarti Anda kehilangan dorongan kinerja dari pengelompokan kedua jenis pesawat ini.
Itu bukan masalah besar jika hanya ada beberapa dari mereka yang melihat sekaligus. Namun, ambil contoh medan yang dihasilkan secara prosedural yang terdiri dari berton-ton ubin atau kubus, dari banyak jenis medan yang berbeda, seperti permainan kotak pasir tertentu yang populer. Ini berarti satu ton panggilan imbang — tetapi jangan takut, ada cara untuk tetap menggunakan hanya satu materi!
Ingat bagaimana Anda mewarnai model Anda dengan mendorong koordinat UV ke dalam kotak berwarna? Kesatuan memungkinkan Anda memodifikasi simpul dari model Anda dengan cepat, termasuk koordinat UV, jadi untuk setiap jenis medan yang berbeda Anda hanya dapat memindahkan koordinat UV ke dalam kotak warna yang benar melalui skrip.
Buat skrip C# baru di Unity yang disebut PaletteColorizer dan tempel kode ini ke dalamnya:
1 |
using UnityEngine; |
2 |
using System.Collections; |
3 |
|
4 |
public class PaletteColorizer : MonoBehaviour |
5 |
{
|
6 |
public int colorsPerRow = 4; |
7 |
public int colorIndex = 0; |
8 |
public bool overrideUVs = false; |
9 |
|
10 |
void Awake () |
11 |
{
|
12 |
if(!enabled) |
13 |
{
|
14 |
return; |
15 |
} |
16 |
|
17 |
SetUVsToColor(colorIndex); |
18 |
} |
19 |
|
20 |
void Update() |
21 |
{
|
22 |
} |
23 |
|
24 |
public void SetUVsToColor(int colorIndex) |
25 |
{
|
26 |
if(overrideUVs) |
27 |
{
|
28 |
SetUVs(gameObject, GetColorOffset(colorIndex)); |
29 |
} |
30 |
else |
31 |
{
|
32 |
TranslateUVs(gameObject, GetColorOffset(colorIndex)); |
33 |
} |
34 |
} |
35 |
|
36 |
Vector2 GetColorOffset(int colorIndex) |
37 |
{
|
38 |
Vector2 offset = new Vector2(); |
39 |
float row = Mathf.Floor(colorIndex / colorsPerRow); |
40 |
float step = 1.0f / colorsPerRow; |
41 |
|
42 |
offset.x = (colorIndex - (row * colorsPerRow)) * step; |
43 |
offset.y = (1.0f - (row / colorsPerRow)); |
44 |
|
45 |
return offset; |
46 |
} |
47 |
|
48 |
static public void TranslateUVs(GameObject obj, Vector2 offset) |
49 |
{
|
50 |
var meshFilter = obj.GetComponent(); |
51 |
Mesh mesh = meshFilter.mesh; |
52 |
|
53 |
var newUVs = new Vector2[mesh.uv.Length]; |
54 |
|
55 |
for(int i=0; i < mesh.uv.Length; i++) |
56 |
{
|
57 |
newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y); |
58 |
} |
59 |
|
60 |
mesh.uv = newUVs; |
61 |
} |
62 |
|
63 |
static public void SetUVs(GameObject obj, Vector2 offset) |
64 |
{
|
65 |
var meshFilter = obj.GetComponent(); |
66 |
Mesh mesh = meshFilter.mesh; |
67 |
|
68 |
var newUVs = new Vector2[mesh.uv.Length]; |
69 |
|
70 |
for(int i=0; i < mesh.uv.Length; i++) |
71 |
{
|
72 |
newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f); |
73 |
} |
74 |
|
75 |
mesh.uv = newUVs; |
76 |
} |
77 |
} |
Untuk menggunakan script ini, cukup menambahkan itu sebagai sebuah komponen untuk objek permainan dengan bahan menggunakan tekstur palet, menetapkan jumlah warna per baris, dan menetapkan Indeks warna (dimulai dengan 0 di sudut kiri atas dan menghitung ke kanan dan ke bawah).
Jika koordinat UV model Anda tidak diatur agar muat di dalam kotak palet (seperti dalam kasus "air" quad di sekitar heksa), periksa kotak centang Override UV; seperti yang Anda lihat di atas, ini akan membuat skrip menulis koordinat yang benar-benar baru daripada menggeser yang sudah ada.
Satu hal yang perlu diingat tentang metode ini adalah bahwa, ketika memodifikasi jala apa pun, Unity akan secara diam-diam membuat jala baru di memori. Jika Anda melakukan ini secara khusus sering pada sejumlah besar jerat, Anda mungkin mengalami masalah memori, dan Anda akan ingin melihat ke dalam cara caching dan berbagi jerat yang telah diwarnai dengan cara yang sama. Untuk sejumlah model low-poly yang masuk akal, Anda mungkin tidak perlu mengkhawatirkannya.
Baked Ambient Occlusion
Bayangan datar tidak perlu selalu dipasangkan dengan blok warna seragam. Salah satu cara Anda dapat menambahkan beberapa detail halus dan tampilan "berdebu" yang realistis ke permukaan apa pun adalah dengan menambahkan oklusi ambient ke sana. Unity Pro menyediakan cara untuk menambahkan oklusi ambient sebagai filter pasca-pemrosesan, tetapi saya ingin menunjukkan kepada Anda cara Anda dapat menambahkan sedikit polish tanpa perlu versi Pro, dan bahkan tanpa memerlukan shader khusus.
Yang perlu Anda lakukan hanyalah membongkar model Anda dan "memanggang" efek oklusi ambien ke tekstur. Ini memang mengharuskan Anda untuk benar-benar meluangkan waktu dan usaha untuk membongkar model Anda dengan benar, tetapi setelah langkah itu hanya masalah beberapa klik dan sedikit mengotak-atik program cat Anda untuk memberikan model Anda tampilan avant-garde yang sedikit lebih nyata.
Langkah 1
Pertama, Anda akan ingin boot Blender dengan adegan kosong: Tekan A untuk memilih semua objek dalam adegan startup, tekan Delete, lalu tekan D untuk konfirmasi. Anda tidak ingin ada Lampu atau Kamera karena ini akan diimpor sebagai objek sampah kosong ke dalam Kesatuan.
Langkah 2
Kemudian, impor model Anda ke dalamnya. (File > impor > Wavefront (.obj)). Untuk contoh ini, mari kita mulai dengan batu besar.
Langkah 3
Buka Editor UV dan buat tekstur yang dapat berisi kira-kira jumlah detail yang Anda inginkan. Saya sangat hemat, jadi saya tetap pada 256x256px untuk apa pun tentang ukuran pemain (batu atau pohon), dan hanya membesar untuk objek yang sangat besar (seperti gunung yang mereka tuju).
Langkah 4
Sekarang, membuka model Anda. Ada banyak cara untuk melakukan hal ini, yang tercakup dalam lebih banyak detail daripada yang pernah saya harapkan, jadi silakan baca dokumentasi Blender atau tutorial online lainnya tentang cara membukanya dengan benar dan efisien model Anda.
Langkah 5
Sekarang Anda memiliki model yang tidak terbungkus, Anda siap untuk memanggang oklusi ambien ke tekstur Anda. Blender akan membuat oklusi ambien langsung ke tekstur Anda, menghormati koordinat UV yang baru saja Anda buka. Ikuti saja langkah-langkah ini:
- Klik tombol Render (ikon kamera) pada panel Properties di sisi kanan layar.
- Gulir ke bawah ke bagian Bake (di bagian bawah) dan perluas.
- Ubah Mode Bake dari Full Render ke Ambient Occlusion.
- Klik tombol Bake langsung di atas itu.
Langkah 6
Sekarang Anda memiliki tekstur AO yang dipanggang dan model yang memiliki koordinat UV yang benar untuk menggunakannya. Simpan tekstur ke file gambar dan ekspor model dalam Blender ke format Unity dapat menggunakan (seperti .fbx).
Langkah 7
Tergantung pada kebutuhan Anda, Anda mungkin dapat menggunakan tekstur apa adanya. Cukup buat material Diffuse baru yang menggunakan tekstur AO baru Anda dan atur warnanya ke sesuatu yang terlihat bagus.
Namun, Anda mungkin ingin memiliki model dengan banyak warna, seperti pohon. Anda hanya perlu mengikuti beberapa langkah tambahan. Ikuti petunjuk di atas untuk membuat tekstur AO yang dipanggang untuk model pohon Anda. Kali ini, Anda akan ingin melacak di mana Anda meletakkan koordinat UV Anda, karena Anda harus mewarnai lokasi tersebut pada tekstur secara manual.
Akan lebih bijaksana untuk mengelompokkan pulau-pulau UV Anda dengan warna. Dalam contoh ini, saya meletakkan bagian-bagian batang di bagian atas tekstur dan bagian daun di bagian bawah.
Langkah 8
Buka tekstur AO Anda yang dipanggang dengan program pilihan cat Anda (segala sesuatu yang mendukung lapisan akan dilakukan, seperti GIMP). Buat layer baru dan letakkan di atas layer AO Anda, gunakan layer AO sebagai panduan untuk mewarnai layer baru sesuai dengan warna yang ingin Anda lihat dalam model.
Gunakan alat Lasso, atau alat pilihan lain pilihan Anda, untuk memilih bagian tekstur yang ingin Anda warnai, lalu isi dengan warna yang benar.
Langkah 9
Anda sekarang memiliki warna yang disiapkan, jadi inilah waktunya untuk tugas terakhir: memadukan AO di atas warna. Pindahkan lapisan AO di atas lapisan berwarna dan ubah mode campuran ke Multiply.
Atur opacity layer ke apa pun yang terlihat bagus. Gunakan penilaian Anda sendiri, tetapi pastikan untuk menuliskan persentase ini, karena untuk mendapatkan efek yang seragam pada semua tekstur Anda, Anda akan ingin menggunakan metode dan jumlah campuran yang sama.
Simpan tekstur ini ke file dan impor dalam Unity di samping model pohon. Buat material seperti yang Anda lakukan untuk batu, menggunakan tekstur yang baru saja Anda buat.
Itu cukup banyak! Gunakan teknik ini pada semua model Anda untuk memberikan keseluruhan pemandangan yang lebih halus, tampilan yang nyata daripada yang bisa Anda dapatkan dengan peneduh datar dasar.
Anda mungkin memperhatikan bahwa materi Anda hanya menggunakan shader dasar difus. Salah satu hal yang indah tentang penggunaan AO dipanggang yang dicampur langsung di atas tekstur warna adalah Anda dapat menggunakan tekstur ini dengan shader lain yang menggunakan tekstur baur... tanpa kode khusus AO yang diperlukan!
Kesimpulan
Sekarang Anda memiliki kotak peralatan yang berguna untuk teknik grafis yang dapat Anda gunakan untuk membuat game datar-berbayang. Dengan latihan yang cukup, Anda dapat membuat visual yang memukau yang cepat diproduksi dan merender secara efisien.
