🎯 Tujuan

Tujuan dari tutorial ini adalah untuk membantu pemula memahami dasar-dasar pembuatan game visual novel menggunakan Unity. Dengan mengikuti langkah-langkah ini, pengguna akan dapat membuat proyek visual novel sederhana yang dapat dijalankan di desktop. Tutorial ini mencakup pengaturan Unity, pembuatan dan penataan UI, pengaturan animasi, dan pengenalan scripting dasar untuk navigasi antar halaman atau adegan.

⏰ Konteks

Visual novel adalah genre game yang menggabungkan cerita visual dengan teks, karakter, dan pilihan interaktif, umumnya dalam format dua dimensi. Tutorial ini difokuskan untuk pemula yang belum memiliki pengalaman menggunakan Unity atau pembuatan visual novel. Dalam proyek ini, pengguna akan membangun fondasi untuk game visual novel sederhana dan dapat memperluasnya lebih lanjut dengan fitur tambahan setelah memahami dasar-dasar pengaturannya.

🪵 Hal yang Diperlukan

1. Unity Hub dan Unity Editor (versi terbaru atau LTS)
2. Visual Studio (atau editor kode lain yang mendukung C#)
3. Gambar latar belakang dan karakter
4. Musik atau efek suara sederhana

📋 Langkah-Langkah

1. Step 1: Mengunduh dan Menginstal Unity Hub, Unity Editor, dan Visual Studio

   • Langkah 1.1: Unduh dan instal Unity Hub dari situs resmi Unity Hub. Unity Hub digunakan untuk mengelola instalasi Unity Editor dan proyek.

   • Langkah 1.2: Dari Unity Hub, unduh Unity Editor versi terbaru di Unity Archive. Pastikan versi Unity yang dipilih kompatibel dengan sistem operasi Anda (Windows atau macOS) dan memenuhi spesifikasi minimum untuk kinerja yang optimal.

     • Tampilan website Unity Archive untuk download Unity Editor, klik pada tampilan Hub Installation dan nanti akan langsung diarahkan ke dalam Unity Hub nya

       

   • Langkah 1.3: Instal juga Visual Studio (editor kode yang mendukung C#), karena dibutuhkan untuk menulis script di Unity.

     • Tampilan website untuk download Visual Studio

       

   • Langkah 1.4: Familiarisasi dengan Package Manager di Unity. Package Manager memungkinkan Anda menginstal paket tambahan, seperti Cinemachine (untuk kamera dinamis) atau TextMeshPro (untuk tampilan teks yang lebih kaya).

     • *Note: TextMeshPro dapat di download langsung didalam projectnya yaitu dengan klik kanan di Hierarchy>UI>Text - TextMeshPro, dan otomatis akan muncul pop up untuk download jika belum pernah mendownload

2. Step 2: Membuat Proyek Baru di Unity dengan Template 2D

   • Langkah 2.1: Buka Unity Hub, buat proyek baru dengan klik “New Project” dan memilih template 2D, yang lebih cocok untuk visual novel dengan tampilan dua dimensi.

       ![Screenshot 2024-11-14 100616.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/fd40b702-35fe-4770-813d-0752a7ad56fc/af63f914-d8ea-49a8-8cec-a5195153f651/Screenshot_2024-11-14_100616.png>)
     

   • Langkah 2.2: Beri nama proyek dan tentukan lokasi penyimpanan.

     • Default dari nama proyek nya adalah “My Project”, maka pastikan tidak tertinggal untuk mengisi namanya

       

3. Step 3: Memahami Antarmuka dan Komponen di Unity Editor

   • Langkah 3.1: Buka proyek baru di Unity Editor. Familiarisasi dengan antarmuka utama, seperti Scene View, Game View, Hierarchy, Inspector, Console, dan Project.

     • Layout default ketika open project adalah seperti ini

       

   • Langkah 3.2: Kenali cara navigasi dasar dan fungsi tiap panel untuk memudahkan pengaturan proyek nantinya.

4. Step 4: Mengimpor dan Menyiapkan Asset

   • Langkah 4.1: Siapkan semua asset yang dibutuhkan, seperti gambar latar belakang, karakter, dan musik. Pastikan file disimpan dengan rapi dalam folder di komputer Anda.
     • *Note: Ini adalah website untuk mencari asset gratis, pilih yang paling sesuai:
       • kenney.nl
       • craftpix.net
   • Langkah 4.2: Di dalam Unity, impor asset dengan cara drag-and-drop file ke dalam folder Assets di panel Project. Atur asset dalam folder terpisah seperti Backgrounds, Characters, dan Music.

5. Step 5: Menambahkan UI Image sebagai Latar Belakang dan Objek Karakter

   • Langkah 5.1: Buat elemen UI Image di Scene untuk dijadikan latar belakang atau objek karakter. Pastikan Anda menempatkan latar belakang di bawah objek karakter dalam urutan Hierarchy.

     • Cara membuat UI Image yaitu klik kanan di Hierarchy>UI>Image

       

     • Jika didalam Hierarchy tidak ada Canvas dan EventSystem, maka Unity Editor akan membuat secara otomatis

   • Langkah 5.2: Tambahkan gambar latar belakang atau karakter sebagai Source Image pada UI Image untuk menampilkannya.

     • Klik pada tombol bulat kecil di sebelah kanan, dan nanti akan muncul Asset-Asset yang sudah di impor, pilih sesuai keinginan

       

   • Langkah 5.3: Gunakan Canvas dan atur RectTransform untuk memastikan latar belakang dan karakter memiliki skala yang benar sesuai layar. Jika proyek Anda ditujukan untuk berbagai ukuran layar, atur Aspect Ratio di Game View untuk memeriksa tampilan.

     • Atur Canvas:

       • Klik object Canvas, atur Render Mode didalam komponen Canvas menjadi Screen Space - Camera

         

       • Pada object Main Camera, drag Object tersebut dan drop ke dalam Render Camera

         

     • Atur RectTransform:

       • Biasanya RectTransform untuk latar belakang dapat diatur secara Stretch, sekaligus untuk responsive juga. Dengan cara klik Anchor Presets nya dan arahkan kursor ke kanan bawah, lalu Alt+Shift+Click,

         

       • Maka gambar akan membesar menutupi seluruh kamera

         

6. Step 6: Memahami perbedaan UI dan Objek 2D

   • Langkah 6.1: Pahami perbedaan elemen UI dasar seperti Canvas dan objek 2D yang dibutuhkan dalam membuat visual novel.
     • UI :
       • Fungsi Utama: Digunakan untuk elemen antarmuka, seperti tombol, teks, slider, dan panel.
       • Komponen Dasar: Unity menyediakan komponen khusus untuk UI, seperti Canvas, Text, Button, dan Image.
       • Posisi dan Skala: UI elemen dirender dalam koordinat layar melalui Canvas, sehingga lebih mudah diatur agar tetap proporsional di berbagai ukuran layar.
       • Layer: UI biasanya berada di atas semua elemen game dan digunakan untuk menampilkan informasi kepada pemain (HUD, menu, dll.).
     • Objek 2D :
       • Fungsi Utama: Digunakan sebagai objek game dalam dunia 2D, seperti karakter, item, atau latar belakang.
       • Komponen Dasar: Memanfaatkan komponen Sprite Renderer untuk menampilkan gambar 2D pada layar.
       • Posisi dan Skala: Ditempatkan di dunia game dengan koordinat berdasarkan Transform dan Sorting Layer untuk mengatur urutan tampilan.
       • Layer: Biasanya berada di lapisan di bawah UI dan digunakan untuk menciptakan elemen visual dalam gameplay.
     • *Note: Visual Novel lebih mudah di operasikan jika menggunakan UI Image
   • Langkah 6.2: Coba tambahkan elemen UI lain yang akan digunakan, seperti teks dan panel, yang nantinya akan menampilkan dialog.

     • Jika ingin membuat Image lagi didalam Image yaitu dengan klik kanan di bagian Image Background, lalu klik kanan UI>Image, masukkan Source Image dengan sesuai.

       

       Atur Image supaya ia berada dibawah, agar menjadi background untuk dialognya

     • *Note: UI Image yang baru saja dibuat akan menjadi seperti menjorok ke kanan, itu tanda nya Child Object, dan Image Background menjadi Parent Object. Dan layout dari Parent Object akan tertumpuk oleh Child Object

     • Tambahkan Text menggunakan TextMeshPro (klik kanan pada Child Image yang baru saja dibuat, pilih UI, pilih Text - TextMeshPro), lalu anda bisa menuliskan kata-katanya di dalam Inspectornya

       

7. Step 7: Membuat UI Button dan Menyusunnya

8. Step 8: Memahami Dasar-Dasar C# di Unity

9. Step 9: Menulis Script C# untuk Fungsi Pergantian Halaman atau Adegan