Unity UI - Button

Halo apa kabar sobat Unity semuanya? Sesuai janji saya, rencananya saya mau bikin tutorial simpel soal login scene, tapi berhubung GUI nya belum dijelasin, jadi saya coba jelasin GUI dulu deh sedikit. Nah, apa itu GUI? GUI adalah Graphic User Interface yang artinya Interface Graphic untuk User. Interface itu apa ya? Ya itu, si GUI tadi. *gubrak!* Buat agan-agan yang pernah belajar visual basic, atau delphi, pasti ngeh dengan GUI kan? Secara kalao di pemrograman visual, kalau agan mau bikin button, label, edit box dll, tinggal klak-klik doang, beres. Nah, di Unity ga bisa kayak gitu bro. Untuk bikin GUI mesti bersusah payah pake coding. Saya pernah bahas method soal posisi GUI button di sini: Unity GUI Button

Sejak Unity versi 4.6 beta di rilis, ada fitur baru super keren yang bener-bener ajib. Fitur ini namanya adalah UI yang disinyalir akan menggantikan fitur GUI lama milik Unity (meski fitur ini masih tetep ada juga). Fitur UI bentuknya akan sama percis-cis kayak pemrograman visual versi game. Dengan fitur ini, agan bisa bikin tampilan user interface tanpa ngoding sama sekali. Penasaran? Penasaran?

Langsung aja deh kita praktek di TKP.

Pertama-tama klik menu GameObject -> UI dan pilih Button.

Secara ostosmastis akan muncul sebuah kotak transparan dan sebuah tombol di sana. Kotak Transparan itu namanya adalah Canvas. Langkah yang resmi sebenarnya adalah klik Canvas, baru klik Button-nya. Tapi kalau mau lebih singkat klik Button langsung juga boleh. Ini hebatnya Unity. 

Habis itu agan klik deh tombol Play dan voila! Dalam beberapa detik anda sudah berhasil bikin button di Unity. Yeeeey! Oke, sekian tutorial hari ini. Sampai ketemu lagi di tutorial selanjutnya. *Hah? Udah gitu doang? Asa meni garing kieu tutorial teh!*

Masih mau lagi? Haduuh, da tutorial button mah gini aja atuh. Mau di apain lagi? Hmmm, gini aja deh. Coba buttonnya agan geser ke pojok kanan atas.Caranya sama kayak geser GameObject yang lain, di drop-drag wae lah.

Terus habis gitu jalananin lagi. Klik Play. 

Habis gitu agan geser deh tab Hierarcy ke kiri sampai button menghilang.

 

Tadaaa! Button hilang. Sulap selip susulapan. Keren kan? *Naon sih?* Nggak ngerti ya kita lagi ngapain? Penjelasannya gini gan, game yang agan buat punya ukuran layar yang ditentukan oleh Screen.Width dan Screen.Height. Anggap aja agan bikin game dengan resolusi 1024x768.Nah, terus agan pasang button persis di posisi (1024,768). Sok coba pikir, gimana player bisa mencet orang buttonnya nggak keliatan?

Untuk memastikan player bisa mencet tentunya agan perlu pasang button itu di dalam posisi layar, misalnya di (900,700). Keliatan kan? Bisa dipencet kan? Mantap. Gimana kalau usernya pengin mindahin resolusi jadi 800x600. Kan buttonnya jadi nggak kelihatan lagi?Solusinya mah gampang. Hajar aja playernya sambil bilang, "Game bikininan gue mah resolusinya fix euy! Nggak bisa diganti2!"

Sip!Masalah selesai. Tapi bagaimana kalau playernya adalah bilang: "Lo bikin game yang resolusinya bisa diganti-ganti tapi tampilannya tetep ntar gue kasih duit 2 milyar!"Nah, kalau duit sudah berbicara lain lagi masalahnya, hehehe.

Teorinya sih, bikin tampilan game yang sama di setiap resolusinya dalah mustahil. Tapi bikin tampilan yang "nyaris" sama itu masih mungkin. Dalam konsep GUI yang lama, cukup dengan membuat perintah perhitungan dengan ratio pada Screen.Width dan Screen.Height, misalnya untuk dapat posisi tengah-tengah bikin script: PosisiButton = Screen.Width div 2 - LebarButton/2.

Tapi itu sumpah lieur! 

Fitur baru Unity UI ini telah memberikan kemudahan untuk penempatan posisi dinamis  sebuah UI yang dinamakan anchor yang konsepnya sama persis dengan di pemrograman visual. Tapi saya ragu agan-agan pernah "ngeh" dengan konsep  anchor ini, hehehe. Intinya adalah menentukan titik pusat pada sebuah objek agar dapat berpindah dinamis pada saat ukuran layar berubah. Contohnya untuk kasus button ini, coba deh agan klik Anchor dan pilih Top-Right.

Habis itu agan klik Play untuk jalanin.

Habis itu agan geser lagi panel Hierarchy dan coba lihat apa yang terjadi!

Nah, kan? Itu gunanya Anchor. Karena si button sudah dianchor ke Top-Right, kalao ukuran game berubah, ujung tombol akan tetap berada di pojok kanan atas. Fitur ini jelas telah memangkas coding-coding GUI yang ga perlu. Sehingga kita bisa bikin game dengan jauh lebih cepat! Apalagi ya?Oh ya, soal ngeganti Caption/Text di button tinggal klik aja textnya dan edit langsung di situ.

Secara default, button ini sudah memiliki animasi hover-color yang bagus (Color Tint). Tapi kalau agan pengin ganti pake gambar (misal normal gambar1, hover gambar2) dan sebagainya ya tinggal masukin aja gambarnya dan pilih evennya yang bersesuaian. Dan jangan lupa pilih Transition yang (Sprite Swap)

Oke, sekian dulu tutorialnya. Bye bye! *Lah? terus kalau Buttonnya di klik gimana?* Yah, kalao diklik mah diklik aja tuh. Pake mouse kan? Atau agan-agan nggak bisa pake mouse? *Maksudnya eventnya, bos. Eventnya!" Oooh, epennya. *EVENT! Pake F!* Oh. EFENT gitu? *AAAAARGHH*

Tenang, tenang. Jangan esmosi, hehehe. Kalau soal event di versi UI yang baru ini memang sedikit berbeda dengan GUI yang lama. Kalao yang lama kan, semua diketik via script, tapi kalau UI, script diketik secara biasa namun dipanggil via event OnClicknya si button. Ngerti nggak? *Nggaaak!*

Ya udahlah, mending praktek aja. Agan bikin dulu satu buah script C# namanya ScriptButton. Cara bikin skrip klik kanan di panel Assets -> Create -> C# Script. 

Habis itu agan ketikin skrip ini:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class ScriptButton : MonoBehaviour {  
4:       // Use this for initialization  
5:       void Start () {  
6:       }  
7:       // Update is called once per frame  
8:       void Update () {  
9:       }  
10:       public void ClickOnMe(){  
11:            Debug.Log("Hello World UI");  
12:       }  
13:  }  

Habis itu agan  tarik scriptnya dan pasang ke Game Object EventSystem (sebenernya ga mesti ke gameobject ini sih, tapi berhubung saya maksa ikutin ajalah, hehehe)

 

Kalau udah, agan lihat property button paling bawah. Klik + untuk nambahin sebuah even dan klik browse untuk Select GameObject arahin ke EventSystem.

Kalau udah, agan klik Combp No Function dan pilih fungsi yang barusan kita bikin yaitu ClickOnMe().

Habis itu agan jalanin lagi dan klik buttonnya. Kalo sukses bakalan muncul tulisan di bagian pojok kiri bawah.

Selesaaaai! Walaupun materi tutorial ini sederhana tapi masalah ini penting banget karena berhubungan dengan dasar-dasar penggunaan UI Unity versi 4.6++. Untuk tutorial-tutorial selanjutnya, saya nggak bakalan ngulang bahas ini lagi, khususnya yang berkaitan dengan button+event. Saya anggap udah pada ngerti. Lagian saya yakin agan-agan juga udah pada gede jadi pasti bisa belajar sendiri ya. Lagian mana mungkin ada anak balita udah bisa ngoding di Unity?

Bener nggak de? *bener om.* Ade ganteng lagi main apa di laptop? Main ngetik-ngetik nggak jelas ya? *bukan om, ade mah lagi main Oracle Bussiness Intellegence, Data Warehouse sama Data Mining.* Hah? Ehm. Oke, sekian dulu tutorial geje hari ini, terima kasih banyak atas perhatiannya.