Pemrograman Permainan - Membuat UI pada Unity

Yang harus dilakukan pertama adalah buatlah project baru di Unity atau cukup scene baru saja jika masih ingin menggunakan project yang sudah digunakan dalam materi sebelumnya. 

Membuat Panel UI

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

Apabila berhasil maka akan muncul sebuah canvas besar di scene yang anda buat.

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. Untuk mencobanya silahkan ubah ukuran layar game.

Sebelum layar di lebarkan :

Sesudah di lebarkan : 

Dapat terlihat walau ukuran layar pada game berbeda, tetapi ukuran dari panel UI tetap sama.

Membuat Button di Panel UI

Selanjutnya kita akan membuat tombol. Caranya klik menu GameObject -> UI -> Button.
Pasang Button sebagai child dari Panel dengan cara drag langsung 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.

Solusi dari permasalahan diatas adalah dengan mengatur anchor pada button. Dalam kasus ini saya memakai anchor top left.

Nah pada gambar diatas posisi dari button akan relative mengikuti Panel UI.

Membuat Input Field pada Panel UI

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

Klik GameObject PlaceHolder yang merupakan child dari GameObject InputField pada tab Hierarchy, lalu klik tab Inspector dan pada panel Text ganti parameter Textnya menjadi placeholder  dan atur text format yang anda inginkan.

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

Anda dapat mengganti isi dari text di inspector dari game object text field tersebut.

Selanjutnya kita akan buat Script C# baru dan beri nama KlikUI.cs lalu ubah script seperti 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 kata bebas dan klik buttonnya. Mudah bukan ?

Referensi : Universitas Budi Luhur