Unity Tutorial : UI Unity ~ Menambahkan Animasi pada Komponen UI

Penambahan animasi ini sebenernya optional boleh dipake boleh tidak, alasannya sederhana agar menu atau komponen UI terlihat lebih unik,menarik dan keren tentunya.

Baca Juga System UI dasar : Menambahkan Event dan Script pada Komponen UI

MULAI

Hanya ada beberapa komponen UI yang bisa diberi animasi : 

- Button

- Slider

- Scrollbar

- Toggle

- InputField

Tambahkan komponen UI Button ke game.

Pada UI Button lihat jendela inspektor - Button (Script). Transition adalah jenis animasi yang mau dipakai :

- None : Tanpa Animasi

- Color Tint : Animasi warna, warna akan berubah sesuai kondisi

- Sprite Swap : Animasi gambar

- Animation : Animasi pada komponen UI.

Ada 3 kondisi antara kursor dan UI komponen :

Normal  : Kondisi semua atau ketika kursor tidak besentuhan dengan UI komponen

Highlighted : Ketika kursor menyentuh UI komponen

Pressed : Ketika kursor menekan UI komponen

Disabled : --------

Pertama adalah Animasi warna (Color Tint).

Untuk animasi warna cukup mudah, hanya tinggal mengganti warna-warna pada kondisi yang ada.

Kedua, animasi gambar.

Hampir sama seperti animasi warna, tinggal masukkan gambar ke dalam kondisi yang ada.

Ketiga adalah animasi langsung pada komponen UI.

Pada animasi ini ada 2 hal yang harus dipersiapkan, yaitu komponen "Animator" dan "Animasi". Animator adalah tempat untuk mengatur, merubah dan menyimpan banyak animasi. Animasi adalah gerakan yang terjadi pada komponen dan sudah ditentukan sebelumnya.

Untuk membuat animator sebenarnya ada caranya, akan dipelajari pada tutorial membuat animasi di Unity.

Tapi pada UI System cukup tekan "Auto Generate Animator" maka akan tampil dialog "dimana animator tersebut akan disimpan". Buat folder baru pada dialog tersebut dengan nama "Animator" atau bebas sekreatif mungkin. Kemudian simpan animator di dalam folder tersebut.

Kemudian untuk membuat animasi, langkah pertama adalah tambahkan jendela animasi.

Window - Animation.

Saatnya menambahkan animasi. 

1. Klik komponen UI button pada jendela hirarki

2. Lihat pada jendela Animation, ada 4 kondisi disediakan (Normal, Highlighted, Pressed, Disabled)

Pada tutorial kali ini hanya kondisi Highlighted dan Pressed yang akan diberi animasi.

Pilih highlighted, kemudian klik kiri pada timeline animasi (yang dikotakin merah).

kemudian ubah posisi, rotasi atau scale komponen UI. 

Pilih pressed, kemudian klik kiri pada timeline animasi.

kemudian ubah posisi, rotasi atau scale komponen UI. 

Gunakan perintah ini untuk merubah posisi, rotasi dan scale.

1. Hand, digunakan untuk melihat jendela game (shortcut : Q)

2. Position, untuk merupah posisi objek (shortcut : W)

3. Rotation, untuk merubah rotasi objek (shortcut : E)

4. Scale, untuk merubah ukuran objek. (shortcut : R)

5. --------

Jalankan game.

A. Adalah kondisi normal

B. Kondisi ketika kursor menyentuh komponen UI

C. Kondisi ketika kursor menekan komponen UI

SELESAI