Pemrograman Permainan – Tutorial 5 Unity

GUI Skin

Assalamualaikum Warahmatullahi Wabarakaatuh pada kesempatan kali ini saya akan melanjutkan tutorial unity tentang penggunaan GUI Skin di Unity. Sebelum melanjutkan materi, silahkan sediakan beberapa objek seperti file gambar, suara, dan font, atau Anda dapat mengunduh file-file pada link Asset Image pada link berikut : Download File

  • Buatlah project baru di Unity atau cukup scene baru saja (jika masih ingin menggunakan project dari materi sebelumnya).
  • Kemudian tambahkan sebuah GUISkin dengan cara klik menu Assets -> Create -> GUISkin. Beri nama “BelajarGUISkin
  • Setelah itu buat folder untuk merapihkannya sesuai gambar contoh dan 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.

1.png

  • Selanjutnya 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.

3.png

  • Lalu ubah Font Size menjadi 24.

2.png

Berikutnya ganti background pada Button. Ganti Background pada Toggle:

  1. Button -> Normal
  2. Button -> Hover
  3. Button -> Active

4.png

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

5.png

Buat script C# baru dan beri nama MenuSkin.cs dan edit file menjadi seperti berikut dan pasang script MenuSkin.cs pada GameObject (misalnya MainCamera), lalu pasang parameter mySkin dengan BelajarGUISkin.

6.png

Pembahasan Code untuk script ScriptKubus:
Baris 7: Deklarasi tipe GUISkin public agar bisa diisi objek GUISkin saat sebelum game dijalankan.
Baris 8: Deklarasi boolean untuk menangani toggle, dalam hal ini dimanfaatkan untuk contoh tampilan pengaturan suara.
Baris 12: Eksekusi fungsi skin ke seluruh perintah dalam event OnGUI. Perintah inilah yang menjadi kunci utama tampilan game kali ini berubah. Perintah ini adalah perintah khusus yang hanya bisa dijalankan dalam event OnGUI.

Pada pembahasan materi sebelumnya, pembuatan button/label selalu menggunakan GUILayout. Namun Unity juga punya cara untuk membuat button yang lebih independen melalui fungsi GUI.Button. Adapun arti dari 4 parameter Rect-nya adalah:
(Posisi Kiri, Posisi Tinggi Layar, Lebar Objek, Tinggi Objek)

7.png

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

8.png

Sekian Tutorial dan pembahasaan mengenai penggunaan GUI Skin di Unity semoga bermanfaat.
Sumber : Universitas Budi Luhur


Tinggalkan komentar

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.