Belajar Augmented Reality dengan 'Button Play' Animasi | Unity3D 4

Assalamualaikum Wr. Wb.

Selamat pagi,
Bismillahirahmannirahim.

Hai semua, alhamdulillah akhirnya saya dapat juga menyelesaikan tutorial ini. Oiya maaf banget yaa sebelumnya baru sekarang saya nyelesain ini tutorial, soalnya sebelumnya saya lagi ribet sama tugas hehe *curcol. Kali ini kita bakal belajar bagaimana mengontrol animasi yang ingin dimainkan di Unity3D 4. Dengan menggunakan 'Button Play', kita dapat memilih animasi manakah yang ingin dimainkan pada scene Augmented Reality (AR). Oke langsung aja kali yaa kita belajarnyaa.

Sebelumnya, saya belajar mengenai ini dari channel youtube Unity itu sendiri. Berikut adalah link youtube Unity untuk belajar animasi ini [this one].

Dalam membuat scene AR kita kali ini, setidaknya kita menggunakan dua animasi dan dua gambar (untuk button). Kemudian untuk controlling animasinya sendiri, kita menggunakan 3 buah file scripts. Script pertama (Kijang Trigger.cs) adalah file yang berfungsi dalam mengatur animasi yang akan dimainkan. Script kedua (BtnA.cs) dan ketiga (BtnB.cs) adalah file yang berfungsi sebagai button untuk memainkan animasi, animasi loncat dan malu. Kalian dapat menggunakan file-file pada drive ini sebagai bahan belajar kita kali ini [this one].

Setelah menyiapkan file-file tersebut, buat project unity baru dan import file-file tersebut kedalam project. Kemudian, atur ulang model3D yang telah didownload pada inspector. Kalo kalian lupa, kalian dapat melihat kembali tutorial sebelumnya untuk pengaturan model3D. Pada pengaturan import model3D kali ini, kita tidak perlu menandai ceklist pada loop pose-nya. Jadi kita hanya perlu mengatur ulang scale factor model dan nama clip animasi.

Gambar 1. Scene AR Kijang

Untuk pengaturan import gambar button-nya, pada inspector kalian dapat menggunakan texture type "GUI" agar menampilkan texture gambar yang lebih baik. Selanjutnya, kita akan membuat sebuah button dengan menggunakan gambar tersebut. Caranya pilih salah satu gambar tersebut, lalu klik pada menu bar GameObject > Create Other > GUI Texture. Kemudian atur penempatan dan ukuran button sesuai keinginan kalian. Silahkan perhatikan gambar-gambar dibawah ini :

Gambar 2. Cara Pembuatan Button dengan GUI Texture

Gambar 3. Pengaturan Penempatan Ordinat Letak dan Ukuran Button

Pengaturan Animasi

Hal yang kita lakukan selanjutnya adalah membuat skema animasi pada animator controller. Caranya, klik create pada window project, lalu pilih animator controller. Selanjutnya pada window Animator, kita akan mulai membuat skema animasi untuk model 3D (si Kijang) kita. Kemudian buat empty state. beri nama none, dan Set As Default sebagai penanda bahwa model3D secara default berada pada state none tersebut (diam). Kemudian drag animasi loncat dan malu yang ada pada model3D ke window animator seperti pada gambar berikut.

Gambar 4. State Animasi Yang Akan Dimainkan

Selanjutnya, kita harus membuat transition antara ketiga state tersebut. Caranya, klik pada salah satu state, kemudian klik kanan dan pilih Make Transition. Lalu, hubungkan antara state none dengan state loncat dan malu menggunakan transition tersebut. Kemudian pada window animator ini, kita akan membuat dua buah parameter yang akan digunakan sebagai trigger dalam menentukan perubahan animasi dari masing-masing state. Caranya, klik tanda plus "+" pada Parameters lalu pilih tipe data boolean. Kita membuat dua buah parameter, parameter "Loncat" sebagai trigger animasi loncat dan parameter "Malu" sebagai trigger animasi malu. 

Kemudian, kita akan membuat kondisi perubahan state dengan menggunakan kedua buah parameter tersebut. Caranya pada transition dari state none ke state loncat, kita ubah kondisinya apabila parameter "Loncat" bernilai true. Lalu, pada transition dari state none ke state malu, kita ubah kondisinya apabila parameter "Malu" bernilai true. Sedangkan untuk transition sebaliknya, kita biarkan kondisinya sesuai dengan Exit Time. Silahkan perhatikan gambar berikut.

Gambar 5. Pengaturan Kondisi Animasi dengan Parameter

Koding

Seperti yang telah disebutkan sebelumnya, disini kita akan menggunakan tiga buah script. Satu buah script sebagai trigger animasi dan dua buah script yang berfungsi sebagai tombol untuk memainkan animasi. Kali ini kalian dapat mencoba menggunakan script yang telah disediakan pada drive ini [this one]. Script Kijang Trigger.cs akan digunakan pada Model3D Kijang, sedangkan script BtnA.cs dan BtnB.cs akan digunakan pada tombol A dan B. 

Disini kita akan bahas sedikit mengenai ketiga kodingan tersebut. Setelah kita mengatur skema animasi pada animator controller, kita juga harus membuat sebuah kodingan untuk men-trigger skema animasi tersebut (Kijang Trigger.cs). Pada kondingan tersebut, terdapat dua buah bagian. Bagian pertama adalah bagian berisi fungsi untuk menerima nilai true yang dibutuhkan untuk memainkan animasi. Kemudian, bagian kedua adalah bagian yang berisi case perubahan state animasi. Jadi, kan pada awalnya state none aktif secara default, apabila salah satu parameter bernilai true maka state akan berubah dan memainkan animasi sesuai dengan state-nya.

Gambar 6. Potongan Script Pada Kijang Trigger.cs

Untuk bagian kodingan BtnA.cs dan BtnB.cs sepertinya ga usah kita banyak bahas yaa hehe. Soalnya pada bagian kodingan tersebut hanya berisi fungsi untuk melempar/ memberikan nilai true kepada fungsi di kodingan KijangTrigger.cs. Buat yang penasaran gimana cara mengakses fungsi pada kelas yang berbeda, kalian bisa liat caranya pada kodingan tersebut :) .

Well, udah mau selesai nih, semangaat semangaat !!! :D

Selanjutnya, setelah selesai mengatur skema animasi dan pengodingan scripts/ kelas-kelas yang dibutuhkan, sekarang saatnya kita add/ tambahkan ketiga scripts tersebut ke masing-masing gameobject yg membutuhkan. Pertama kita akan menambahkan script KijangTrigger.cs ke gameobject Kijang. Drag file tersebut ke gameobject Kijang. Kemudian tambahkan pula script BtnA.cs dan BtnB.cs ke gameobject Button 1 dan Button 2. Silahkan lihat gambar berikut.

Gambar 7. Penambahan Script KijangTrigger.cs ke GameObject Kijang

Gambar 8. Penambahan Script BtnA.cs ke GameObject Button1

Terakhir, sekarang saatnya kita mencoba hasilnya deh. Klik tombol play di Unity3D, terus sekarang coba kalian klik Button A dan Button B. Kalo berhasil, ketika kita klik Button A maka model Kijang akan memainkan animasi loncat. Sedangkan, apabila kita klik Button B maka model Kijang akan memainkan animasi malu. Alhamdulillah, punya saya berhasil nih, kijangnya bisa bergerak loncat sama malu haha XD

Gambar 9. Hasil Akhir Pembelajaran

Alhamdulillah, selesai juga belajar bareng kita kali ini. Pada bisa jalan kan semua animasinya?? Tombol-tombolnya pada bisa jalanin animasinya kan?? Semoga pada bisa jalan semuaa yaa. Mungkin kalo belum pada bisa, ada step yang ketinggalan. Beberapa detail emang tidak saya jelaskan pada postingan disini tapi telah saya jelaskan pada postingan saya sebelumnya. [this one] and [this one]

Oiya, saya mau minta tolong doain saya sama temen-temen saya yaa. Maklum saya sama yang lain lagi mau mulai penulisan thesis kami, jadi agak sedikit deg-degan hehe. Yaa mudah"an semuanya lancar dan hasilnya baik, semoga juga yang ngedoain bakal balik doanya ke kalian, biar pada dimudahin urusannya dan sukses :D Aamiin.

Terima kasih yaa semuaa, mohon maaf bila ada kekurangan sama jangan lupaa di share lagi yaa ilmunya ke temen-temen yang lain. :)

Wassalamualaikum Wr. Wb.

Artikel Terkait: