Membuat GUI menu dan Memanipulasi main camera (Pertemuan ke-5)



Kali ini saya akan memberikan tutorial cara pembuatan GUI pada unity engine, menambahkan gambar serta font yang ingin digunakan
Silahkan disimak penjelasan nya sebagai berikut

Sebelum memulai, silahkan sediakan beberapa objek seperti file gambar, suara, dan font, atau Anda dapat mengunduh file-file pada link Asset berikut :  https://shorturl.at/gDEQV.

 Buatlah project baru di Unity atau cukup scene baru saja (jika masing ingin menggunakan project dari materi sebelumnya).

❑ Tambahkan sebuah GUISkin dengan cara klik menu Assets -> Create -> GUISkin. Beri nama "BelajarGUISkin"

❑ Setelah itu tambahkan beberapa Assets yang sudah diunduh tadi seperti assets untuk tombol (beberapa template gambar button berekstensi png) dan assets font.

 ❑ Untuk melakukan import Assets, dapat dilakukan dengan beberapa cara, salah satunya dengan cara klik menu Assets -> Import New Assets atau dengan drag filenya langsung dari Windows Explorer. Pastikan semua assets yang akan digunakan sudah di-import.




❑ Berikutnya kita kembali ke Skin “BelajarGUISkin” yang tadi kita buat.
❑ GUI Skin memiliki 2 jenis font, Ada font global yang letaknya di panel paling atas, dan ada font lokal yang berada di setiap parameter GUI.
❑ Ubah font khusus button dengan drag file font pada Assets ke Button -> Overflow. Atau klik tombol kecil di sebelaha kanan kolom Font lalu browse, cari Font pada Asset.
❑ Lalu ubah Font Size menjadi 24.




Berikutnya ganti background pada Button.
Ganti Background pada Toggle:
1. Button -> Normal
2. Button -> Hover
3. Button -> Active

Berikutnya ganti background pada Button.
Ganti Background pada Button:
1. Button -> Normal
2. Button -> Hover
3. Button -> Active




Berikutnya pada Button, istilah Toggle mungkin agak kurang familiar. Sebagian orang lebih mengenalnya dengan istilah Checkbox. Pada Contoh kali ini, toggle dimanfaatkan untuk pengaturan suara.
Ganti Background pada Toggle:
1. Toggle -> Normal
2. Toggle -> Hover
3. Toggle -> Active
4. Toggle -> On Normal
5. Toggle -> On Hover
6. Toggle -> On Active







❑ Buat script C# baru dan beri nama MenuSkin.cs dan edit file menjadi seperti berikut.




❑ Pasang script MenuSkin.cs pada GameObject (misalnya MainCamera), lalu pasang parameter mySkin dengan BelajarGUISkin.



❑ Jika tidak ada kesalahan, selanjutnya jalankan Game, contoh tampilan saat game dijalankan seperti gambar di bawah ini.






- Memanipulasi Main Camera

Buatlah unity baru beri nama dengan bebas, setelah membuat unity baru buatlah beberapa object dan letakan di depan main camera. cara membutat object-nya dengan cara :

Klik kanan -> 3D Object -> bebas pilih = Cube , Sephere, Capsule, dan Cylinder.




Jika Sudah taruh object didepan main kamera dan yang akan ditampilkan sebagai berikut.




Jika object sudah berada di depan kamera maka kita bisa beralih ke proses selanjutnya, buatlah script dengan nama CameraRotator dan isi script sebagai berikut.



Setelah itu buatlah empty object  dan taruh di tengah-tengah obejct lainnya, cara membuatnya klik kanan pada tab hirarki -> Create Empty ->(Beri nama Camera Rotator) lalu jika sudah masukkan main camera pada empty object  Camera Rotator dengan cara drag Main Camera dan taruh pada Camera Rotator.






Lalu selanjutnya drag script CameraRotator.cs  ke object Camera Rotator hingga muncul komponen baru.




Speed bisa kita ubah sesuka hati jika angka menaik maka akan memutar ke arah kir jika angka menjadi negatif maka akan berputar ke arah kanan. jika tidak ada kesalahan maka hasilnya adalah sebagai berikut.




Sekian tutorial singkat ini mengenai pembuatan GUI Menu dan manipulasi Main Camera,
tunggu update selanjutnya semoga tutorial ini bermanfaat bagi kita semua.





In Collaboration With : Universitas Budiluhur 








Komentar