UI System Unity

Hello, pada kesempatan kali ini saya akan membahas materi mengenai pembuatan User Interface System pada Unity.

Kali ini dalam pembuatan User Interface pada Unity tidak lagi mengharuskan programmer berusaha lebih keras hanya untuk membuat sebuah tombol dan interaksinya. Tetapi Unity mengeluarkan fitur UI yang sangat baik, yaitu  pembuatan user interface di Unity semudah drag and drop.

Pertama, kita buat project baru atau cukup dengan menambah scene baru pada project yang telah dibuat sebelumnya.

Tambahkan sebuah panel dengan cara klik menu GameObject > UI > Panel.

Semua object UI memiliki satu mekanisme unik yang disebut dengan Anchor. Misalnya untuk panel yang baru saja kita pasang. Kita bisa melihatnya pada panel Transform bahwa secara default Anchor yang dimilikinya adalah Strecth x Strecth.

Anchor tersebut akan membuat panel yang dibuat akan ikut membesar secara horizontal dan vertikal sesuai dengan ukuran layar game. Kita bisa mengubah jenis Anchor dengan klik kotak penanda Anchor. Misalnya mengubah pilihan pada Top x Left kemudian geser panelnya pada ujung kiri atas. Pilihan ini akan membuat panel ‘menempel’ pada posisi kiri atas Canvas. Tak peduli ukuran layar game berubah - ubah.

Kita coba untuk merubah ukuran layar game.

Posisi Awal


Posisi Setelah Dirubah

Contoh lainnya misalnya adalah kebalikannya yaitu Top-Right. Ubahlah Anchor panel menjadi Top-Right dan geser panel sampai ujungnya mendekati posisi kanan atas.
Sekarang ubah kembali ke bentuk Strecth x Strecth untuk melanjutkan materi berikutnya.

Selanjutnya kita akan membuat tombol. Dengan cara klik menu GameObject > UI > Button. Pasang Button sebagai child dari Panel dengan cara drag and drop pada tab Hierarchy.

Jalankan game dan coba geserkan tab Game, lalu perhatikan hasilnya. Meski ukuran panel mengikuti layar game namun posisi dan ukuran button tidak. Hal terpenting yang harus diingat adalah Anchor bekerja untuk setiap objek UI sehingga kita harus mengaturnya satu persatu.

Menguasai Anchor merupakan dasar terpenting dalam penggunaan UI pada Unity. Prosesnya cukup rumit dan mudah, kita hanya perlu sedikit lebih teliti.

Selanjutnya buat sebuah InputField dengan cara klik menu GameObject > UI > InputField. GameObject ini berfungsi untuk menerima inputan dari user.

Tempatkan Inputfield pada panel dan sesuaikan posisinya sesuai keinginan.

Klik GameObject PlaceHolder yang merupakan child dari GameObject InputField pada tab Hierarchy, lalu klik tab Inspector dan pada panel Text ganti parameter Textnya menjadi “Masukkan Nama Anda...”


Selanjutnya tambahkan sebuah Text dengan cara klik menu GameObject > UI > Text. 
Tempatkan text sebagai child dari panel dan atur posisi sesuai kebutuhan.





Dapat juga merubah text yang ada pada Button dengan klik pada Text pada child Button, klik Inspector lalu ubah parameter Text sesuai kebutuhan.

Berikutnya buat script# dengan beri nama 'KlikUI.cs' dan ketikkan script seperti pada gambar di bawah ini.

Selanjutnya pasang script pada GameObject. Kita bisa pasang di sembarang GameObject, misalnya saja kita pasang pada Canvas, lalu sesuaikan dua buah parameter public yang dibuat tadi dengan GameObject yang telah kita buat sebelumnya di Scene.

Untuk memudahkan, silahkan ganti nama GameObject Text yang menjadi target.

Selanjutnya klik Button pada Scene, cari panel event OnClick() pada tab Inspector, klik tombol + di pojok kanan bawah.

Masukkan GameObject yang diberi script (dalam hal ini Canvas) pada parameter Object, dan klik combobox yang bertuliskan No Function dan pilih KlikUI. Dalam hal ini KlikUI adalah script yang dipasang pada GameObject Canvas.

Pada dasarnya, semua fungsi yang dipasang sebuah GameObject yang dipasangkan pada event OnClick akan muncul pada combobox ini.

Pilih fungsi ClickMe() dengan begini, fungsi ClickMe() akan dipanggil jika Button ditekan.

Jalankan Game, isi InputField dengan nama seseorang dan klik buttonnya. Perhatikan hasilnya, maka akan muncul tampilan text yang sesuai dengan yang diinputkan.

Sekian materi pada kesempatan kali ini, semoga bermanfaat dan sampai jumpa pada materi pertemuan berikutnya.

Universitas Budi Luhur