UI System pada Unity

Kunjugi Budi Luhur University 

Pada penjelasan kali ini, kita akan membahas mengenai UI System. UI System merupakan sebuah pembaharuan sejak versi 4.6 Unity. dengan ditambahkanya fitur ini, developer dapat dengan mudah membuat tampilan grafis dan cepat.
Agar lebih jelas bagaimana cara menggunakanya silahkan ikuti langkah langkah berikut.
Jika kamu belum mengikuti penjelasan sebelumnya, silahkan klik disini.

1. Siapkan Scene

Seperti biasanya, kita akan menyiapkan sebuah scene. disini kita akan buat scene dengan nama "cobaUI".

2. Buat UI Panel

untuk membuat UI panel dapat dilakukan dengan cara klik kanan pada hierarcy window > UI > Panel

Apabila berhasil, maka akan terbentuk gameobject canvas dengan child Panel seperti gambar berikut.

Pada panel kita akan buat sebuat input field dan sebuah button dengan tujuan menampilkan isi dari input field tersebut.

2. Ubah Ukuran UI Panel

sebelum menambahkan input field dan button, kita akan mengubah ukuran UI Panel yang sudah kita buat.
cara mengubah ukuran  UI Panel sama seperti mengubah gameobject pada umumnya, dapat menggunakan scale tools ataupun rect tool. namun pada kali ini kita akan menggunakan rect tool dengan cara seperti berikut.
pada tampilan defaul, klik rect tool seperti gambar diatas.
kemudian klik gameobject yang akan diubah, disini kita akan klik gameobject panel.

kemudian ubah ukuran panel tersebut menjadi seperti ini.


3. Anchor 

Pada setiap UI element terdapat sebuah component anchor yang dapat dilihat di jendela inspector seperti gambar berikut.
Jika Stretch x Stretch diklik, maka akan muncul beberapa preset yang dapat dipilih. 

anchor sendiri ialah orientasi object. misal, apabila layar sebelumnya memiliki rasio 16:9 kemudian berubah menjadi 10:10 maka object dalam UI akan berubah mengikuti orientasi parentnya. 

jika kita memilih stretch x stretch maka object akan berubah sesuai ukuran parent jika parent berubah. 


4. Tambahkan Input Field
Untuk menambahkan Input Field dapat dilakukan dengan cara klik kanan pada UI panel di hierarcy windows > UI > Input Field

Sehingga akan muncul seperti berikut.



5. Tambahkan Button
Tambahkan Button dengan cara sama seperti menambahkan input field.

kemudian posisikan button menjadi seperti berikut.

pada jendela inspector, kita dapat mengubah isi dari text button. namun sebelumnya silahkan pilih gameobject text yang berada di dalam gameobject button.
Kita akan menemukan component text sebagai berikut. dan isi dari text tersebut dapat kita ubah untuk mengganti isi dari text button.


6. Tambahkan UI Text
Tambahkan sebuah UI Text untuk menampilkan hasil seperti berikut.


7. Tambahkan Script
Buat script dengan nama buttonClicked.cs

Isikan dengan script berikut.
Drag and drop script tersebut ke gameobject button.
Drag and drop gameobject Text hasil untuk menampilkan hasil ke field Txt Hasil
Drag and drop gameobject Text hasil untuk input field hasil ke Isi Field

7. Tambahkan Event
Pada gameobject Button terdapat event dengan nama onClick. tambahkan sebuah aksi pada event tersebut dengan cara klik tanda tambah
Drag and drop gameobject button itu sendiri ke field dibawah Runtime.
kemudian disebelah Runtime, pilih fungsi clickMe yang telah dibuat.

7. Hasil




Selamat Mencoba!

Postingan populer dari blog ini

Terrain pada Unity

Gambar
Kunjugi  Budi Luhur University   pada kali ini kita akan mencoba membuat sebuah desa dengan asset yang sudah kita ambil dari Asset Store Unity. bagi yang belum memiliki Asset tersebut, bisa membuka link dibawah ini. https://assetstore.unity.com/packages/essentials/tutorial-projects/viking-village-29140 Jika sudah, kita akan membuat sebuah Scene dengan nama "Cobaterain" 1. Buat Scene sama seperti penjelasan sebelumnya, untuk membuat scene dapat dilakukan dengan cara klik kanan pada project window>create>scene jika berhasil maka akan muncul scene seperti ini 2. Buat Terrain Kosong untuk membuat terrain dapat dilakukan dengan cara klik kanan pada hierarcy window > 3D Object > Terrain. Jika berhasil maka akan muncul terrain baru pada hierarcy window. 3. Buat Layout Desa disini kita akan mencoba membuat layout desa dengan menambahkan rumput dan jalan setapak sehingga akan terlihat lebih jelas objek apa yang akan kita buat. disini ...
Baca selengkapnya

Interaksi Objek dengan Unity

Gambar
Kunjugi  Budi Luhur University   Pada penjelasan kali ini akan dibahas mengenai bagaimana cara melakukan interaksi sederhana pada Unity. Pada Unity dapat melakukan interaksi dengan objek melalui dua cara, yaitu dengan memasang script langsung pada objek, atau memasang script pada objek lain untuk digunakan pada objek yang dituju. pada kesempatan ini kita akan mempelajari kedua cara tersebut. agar lebih jelas, maka kita akan mencoba mempraktikan langkah demi langkahnya. Jika belum mengikuti penjelasan sebelumnya, silahkan klik disini. 1. Buat 3D Object Pertama, Buat 3D Objek Kubus dengan cara Klik kanan pada hierarcy > 3D Object > Cube maka akan terbentuk kubus pada layar. 2. Duplikat Object Setelah membuat objek kubus, maka kita perlu menduplikat objek tersebut agar dapat melihat perbedaan pada setiap script. pada unity, menduplikat objek dapat dilakukan dengan select objek kemudian menekan ctrl + d pada pengguna windows. setelah diduplikat, ma...
Baca selengkapnya

Input Mouse dan KeyBoard dengan Unity

Gambar
Kunjugi  Budi Luhur University   pada kali ini kita akan mempelajari bagaimana cara menangkap dan menggunakan input dari Mouse dan Keyboard. Pada setiap game PC pada umumnya akan menggunakan Keyboard ataupun Mouse. Mungkin dapat menggunakan peripheral tambahan, tetapi pada kali ini kita tidak akan menjelaskanya. Mouse Pada umumnya Mouse memiliki 3 tombol utama, yaitu kiri, tengah, dan kanan. ada juga tipe mouse gaming yang memiliki lebih dari tombol tersebut. kita dapat menangkap dan menggunakan aksi pada setiap tombol yang ditekan. untuk mencoba melakukanya, mari kita buat contoh. apabila belum mengikuti penjelasan sebelumnya, silahkan klik  disini. 1. Membuat File Script Kita bebas memberikan nama pada file Script. disini kita berikan nama "inputMouse" 2. Inisialisasi Variabel Kita inisialisasi teks1 sampai 4 untuk menampung respon dari tiap tindakan yang diambil. jmlScroll untuk menghitung berapa kali kita menggunakan scroll pada suatu arah,...
Baca selengkapnya