Friday 18 September 2015

Unity Tutorial Indonesia : Mobile - UI Panel Pop Up [part 2/3]

Advertisement


Part 1 : Mobile - UI Panel Pop Up  [part 1/3]




MULAI

Part 2 akan menjelaskan proses pembuatan animasi Pop Up pada UI Panel.





Karena "Panel Pop Up" berada di dalam objek Canvas. Maka yang jadi Patokan dalam membuat animasi adalah objek canvas.

1. Klik Canvas, buka jendela kerja Animation.
2. Klik simbol segitiga bulak balik untuk membuat animasi baru
3. Beri nama animasi dan simpan di dalam Foldel "Animasi"





Sudah dibuat 2 nama animasi , Pop Up Muncul dan Pop Up Keluar.





Animasi pertama adalah Pop Up Muncul.

1. Klik "Add Curve"
2. Cari Panel Pop Up dan tambahkan Anchored Position





Secara otomatis akan muncul 2 kolom point animasi.

1. Atur frame pada kolom point ke dua, semakin jauh selisih frame dengan kolom 1 maka gerakan akan semakin lama.
2. Klik pada kolom point 2 , sehingga garis merah tepat di tengah point animasi, kemudian klik Panel Pop Up di jendela Hirarki , tarik ke bawah agar masuk ke dalam area canvas sehingga nanti muncul di dalam layar HP.

Jika sudah animasi dapat dijalankan dengan klik tombol Segitiga kecil yang tepat berada di atas nama Animasi.





Animasi kedua Pop  Up Keluar. Gunakan cara yang sama seperti pada animasi 1

1. Pada kolom point 1, Atur terlebih dahulu posisi panel berada tepat di dalam canvas.
2. Pada kolom point 2, atur posisi panel keluar dari canvas
3. Sehingga panel tepat berada di luar canvas dan tidak terlihat di layar HP.





Buka folder Animasi dan terdapat 2 animasi + 1 Animator Controller, AC akan secara otomatis dibuat ketika membuat Animasi.

Klik satu persatu animasi yang ada, kemudian hilangkan ceklis pada kotak Loop Time, berguna agar nantinya animasi tidak terus dijalankan berulang-ulang.





1. Buka jendela Animator
2. KKlik Animator Controller pada folder Animasi
3. Buat Animasi Kosong, klik kanan pada jendela animator - Create State - Empty






Klik kanan pada Animasi Kosong - Set As Default.




Klik kanan "Any State" - Make Transition, kemudian arahkan pada tiap-tiap animasi. 




Tahap selanjutnya adalah membuat parameter untuk setiap animasi.
Klik tombol + pada menu parameter pilih Trigger, kemudian beri nama. 




Tambahkan parameter tadi ke animasi
1. Klik arah panah yang menuju animasi
2. Pilih parameter yang sesuai dengan animasi, sebagai contoh animasi "Pop Up Muncul" diberi parameter "Pop Muncul".

Nantinya parameter ini menjadi kunci agar animasi dapat digerakan melalui listing program.





Selanjutnya tambahkan UI Text ke dalam Panel Pop Up.




Ubah nama menjadi "Text Info" dan atur posisi Text tepat di tangah Panel Pop Up.

BACA JUGA  cara mengatur posisi UI Text : Unity Tutorial Indonesia : Floating Text 





Part 3 akan menjelaskan bagaimana Animasi dapat dijalankan melalui listing program menggunakan C# Script.






EmoticonEmoticon