Tutorial membuat GUI Skin pada Unity 3D
Halo teman-teman,kembali lagi di blog saya. Kali ini saya akan membuat tutorial membuat GUISkin pada unity 3D. Mau tau caranya gimana?yuk, langsung aja
Langkah 1
kita buat project baru, namai project dengan nama "GUISkin Project" atau bebas sesuka kalian.
Langkah 2
Siapkan file Assets yang akan digunakan, Seperti Backgrounds dan Sounds, disini Saya memakai Assets dari Dosen Saya. Download saja Image Background apapun boleh asalkan file berformat PNG.
Langkah3
Tambahkan GUI Skin dengan cara klik Assets -> Create -> GUISkin beri nama "BelajarGUISkin" , setelah itu tambahkan Assets Background Button dan Font yang telah kalian download dengan cara klik Assets -> Import New Assets. atau kalian boleh membuat folder untuk masing-masing Assets secara terpisah seperti Images, Fonts, dan Sounds seperti ini.
Langkah4
Kembali ke kita klik GUI Skin lalu kita ubah font khusus button dengan cara klik Button -> Overflow lalu klik tombol titik kecil disebelah kanan Font lalu Browse font dan gunakan font yang ingin digunakan, dan ubah Font Size menjadi 24.
Langkah5
Ubah Button Background dengan cara klik Button dan ubah seperti gambar dibawah ini. Bedakan Assets Button untuk Normal dan Hover karena disini kegunaan Button Hover adalah untuk pembeda jika mouse sedang diarahkan ke Button. bisa menggunakan Button Background yang lebih terang brightness agar menampilkan kesan bercahaya ketika diarahkan mouse.
Langkah6
Berikutnya ada pengaturan Toggle, Toggle dimanfaatkan untuk pengaturan suara. Kita ubah pengaturan Toggle seperti dibawah ini.
Langkah7
Selanjutnya kita tambahkan File Script C# kedalam Assets dengan nama "MenuSkin.cs" lalu ubah seperti ini dan Save.
Langkah8
Drag Script "MenuSkin" kedalam Main Camera, lalu masukan "BelajarGUISkin" kedalam parameter MySkin.
Langkah9
Setelah selesai, Run Project. Jika tidak ada kesalahan dalam penginputan di GUI Skin dan di Scripts C# maka akan menampilkan hasil seperti ini.
Selesai!
Langkah 1
kita buat project baru, namai project dengan nama "GUISkin Project" atau bebas sesuka kalian.
Langkah 2
Siapkan file Assets yang akan digunakan, Seperti Backgrounds dan Sounds, disini Saya memakai Assets dari Dosen Saya. Download saja Image Background apapun boleh asalkan file berformat PNG.
Langkah3
Tambahkan GUI Skin dengan cara klik Assets -> Create -> GUISkin beri nama "BelajarGUISkin" , setelah itu tambahkan Assets Background Button dan Font yang telah kalian download dengan cara klik Assets -> Import New Assets. atau kalian boleh membuat folder untuk masing-masing Assets secara terpisah seperti Images, Fonts, dan Sounds seperti ini.
 |
| Assets setelah ditambahkan |
Langkah4
Kembali ke kita klik GUI Skin lalu kita ubah font khusus button dengan cara klik Button -> Overflow lalu klik tombol titik kecil disebelah kanan Font lalu Browse font dan gunakan font yang ingin digunakan, dan ubah Font Size menjadi 24.
 |
| Ubah Font dan ubah Font Size |
Langkah5
Ubah Button Background dengan cara klik Button dan ubah seperti gambar dibawah ini. Bedakan Assets Button untuk Normal dan Hover karena disini kegunaan Button Hover adalah untuk pembeda jika mouse sedang diarahkan ke Button. bisa menggunakan Button Background yang lebih terang brightness agar menampilkan kesan bercahaya ketika diarahkan mouse.
 |
| Memasukan Button Backround pada GUI Skin |
Langkah6
Berikutnya ada pengaturan Toggle, Toggle dimanfaatkan untuk pengaturan suara. Kita ubah pengaturan Toggle seperti dibawah ini.
 |
Langkah7
Selanjutnya kita tambahkan File Script C# kedalam Assets dengan nama "MenuSkin.cs" lalu ubah seperti ini dan Save.
Langkah8
Drag Script "MenuSkin" kedalam Main Camera, lalu masukan "BelajarGUISkin" kedalam parameter MySkin.
Langkah9
Setelah selesai, Run Project. Jika tidak ada kesalahan dalam penginputan di GUI Skin dan di Scripts C# maka akan menampilkan hasil seperti ini.
Selesai!
Komentar
Posting Komentar