--- title: Menggunakan acara animasi slug: world-sdk-guide-id/menggunakan-acara-animasi docTags: createdAt: 2024-09-02T08:34:13.135Z --- Peristiwa animasi menyediakan cara untuk memanggil fungsi yang disesuaikan atau melakukan tindakan pada waktu tertentu dalam klip animasi. Ini memungkinkan interaksi antara animasi dan skrip, dan berguna saat melakukan tindakan pada waktu yang tepat dari animasi. ### Menambahkan Peristiwa ke Animasi Objek Contoh berikut menambahkan peristiwa animasi ke objek yang dianimasikan. Struktur ini mengeluarkan informasi ke log konsol setiap kali peristiwa dieksekusi dengan menambahkan peristiwa Naik dan Turun ke animasi yang berulang naik dan turun. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-xO_1nL7IRhCFVsPcmwFGM-20240904-102422.gif" size="74" width="1310" height="864" position="center" showCaption="false"} 1\) Pilih GameObject > 3D Object > Cube untuk membuat kubus di dalam scene. - Pilih kubus yang telah dibuat dan tambahkan komponen Animator dengan mengklik tombol Tambah Komponen di panel Inspector. - Terapkan Animator Controller kubus ke Animator yang telah ditambahkan. - Terapkan klip animasi kubus ke entri Animator Controller kubus agar animasi kubus dapat diputar saat scene dimainkan. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wMEQaupztsnprYFC5J74G-20240904-102422.png) Silakan merujuk ke panduan berikut untuk pendaftaran Animator dan pengeditan klip animasi. :::hint{type="info"} **📘 Panduan Acara Animasi Unity** [https://docs.unity3d.com/kr/current/Manual/script-AnimationWindowEvent.html](https://docs.unity3d.com/kr/current/Manual/script-AnimationWindowEvent.html) ::: :::hint{type="info"} **📘 Tutorial Animasi Belajar Unity** [https://learn.unity.com/tutorial/may-18-animation?language=en#](https://learn.unity.com/tutorial/may-18-animation?language=en#) ::: 2\) Tambahkan properti berikut ke klip animasi kubus. - Ada key frame Posisi (x: 0, y:0, z:0) di bagian 0 detik, 2 detik dari klip animasi kubus. - Ada key frame Posisi (x: 0, y:1, z:0) di bagian 1 detik dari klip animasi kubus. (1) Daftarkan Event Animasi di bagian 1 detik dari klip animasi kubus. - Fungsi : Panggil - String : Atas (2) Daftarkan Event Animasi di bagian 2 detik dari klip animasi kubus. - Fungsi : Panggil - String : Bawah ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Yzu5ZqoYDS9lZKn-vpM9K-20240904-102422.png) :::hint{type="success"} - Saat menulis peristiwa animasi melalui C# di Unity, tulis nama fungsi dalam Function. - Namun, untuk memanggil peristiwa animasi dalam Typescript, Invoke harus ditulis dalam Funtion dan nama fungsi harus ditulis dalam String, nilai argumen. ::: 3\) Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi ObjectAnimationController. - Tulis skrip contoh seperti di bawah ini. :::CodeblockTabs ObjectAnimationController.ts ```typescript import { ZepetoScriptBehaviour } from 'ZEPETO.Script' export default class ObjectAnimationController extends ZepetoScriptBehaviour { public Up() { console.log(`Cube is Up`); } public Down(){ console.log(`Cube is Down`); } } ``` ::: 4\) Jika Anda menekan tombol play untuk menjalankannya, Anda dapat melihat keluaran log konsol saat animasi kubus diputar. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-nI5ZbpXCgO1e15p48DAX4-20240904-102422.gif) ### Putar suara langkah kaki menggunakan peristiwa animasi pada karakter lokal. Untuk menambahkan peristiwa animasi ke Animator karakter ZEPETO, peristiwa tersebut harus ditambahkan saat runtime, ketika karakter dibuat. Contoh berikut menerapkan peristiwa pada Animation Clip tertentu dari Animator pemain lokal saat runtime, dan memutar suara langkah kaki ketika peristiwa terjadi. 1\) Buat skrip FootStepController yang akan diterapkan pada objek animator pemain lokal. FootStepController bertanggung jawab untuk menambahkan peristiwa animasi ke Animator. - Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi FootStepController. - Tulis skrip seperti di bawah ini. :::CodeblockTabs FootStepController.ts ```Text import { AnimationEvent, Animator, AudioClip, AudioSource } from 'UnityEngine'; import { ZepetoScriptBehaviour } from 'ZEPETO.Script'; export default class FootStepController extends ZepetoScriptBehaviour { // Suara yang digunakan untuk efek langkah kaki public footStepSound: AudioClip; // Sumber audio untuk memutar suara langkah kaki private _zepetoAudio: AudioSource; // Menambahkan event animasi untuk memicu suara langkah kaki public AddAnimationEvent() { // Dapatkan komponen Animator yang terpasang pada GameObject ini const anim = this.GetComponent(); // Periksa apakah komponen Animator ada if (anim != null) { // Buat AudioSource untuk suara langkah kaki this.SetAudio(); // Tentukan waktu dalam klip animasi ketika suara langkah kaki harus diputar const runSoundEventTimes = [0.1, 0.6]; // Tambahkan event animasi ke klip animasi yang ditentukan this.AddAnimationClipEvent(anim, "move_walk", runSoundEventTimes); } } // Menyiapkan AudioSource untuk memutar suara langkah kaki private SetAudio() { // Buat dan konfigurasi komponen AudioSource this._zepetoAudio = this.gameObject.AddComponent(); this._zepetoAudio.clip = this.footStepSound; } // Mengaktifkan suara langkah kaki public ActivateFootSteps() { // Keluarkan pesan log yang menunjukkan bahwa suara langkah kaki sedang diputar console.log("Langkah Kaki!"); // Putar suara langkah kaki menggunakan AudioSource yang telah dikonfigurasi this._zepetoAudio.Play(); } // Menambahkan event animasi ke klip animasi yang ditentukan private AddAnimationClipEvent(anim: Animator, clipName: string, eventTimes: number[]) { // Inisialisasi indeks klip animasi let animationClipIndex: number; // Dapatkan semua klip animasi dari runtimeAnimatorController const clips = anim.runtimeAnimatorController.animationClips; // Temukan indeks klip animasi yang ditentukan for (let i = 0; i < clips.length; i++) { if (clips[i].name == clipName) { animationClipIndex = i; } } // Iterasi melalui waktu event yang ditentukan eventTimes.forEach(eventTime => { // Buat AnimationEvent baru untuk pemicu suara langkah kaki const newEvent: AnimationEvent = new AnimationEvent(); newEvent.time = eventTime; newEvent.functionName = "Invoke"; newEvent.stringParameter = "ActivateFootSteps"; // Tambahkan AnimationEvent baru ke klip animasi clips[animationClipIndex].AddEvent(newEvent); }); } } ``` ::: - deskripsi skrip - FootStepController menambahkan sebuah event animasi dan memutar efek suara langkah kaki saat event tersebut terjadi. - SetAudio() menambahkan komponen AudioSource untuk menerapkan suara langkah kaki pada objek. - AddAnimationClipEvent() menambahkan sebuah event animasi ke klip animasi yang ditentukan. Anda harus memasukkan elemen berikut sebagai nilai argumen. - Animator untuk pemain lokal - Nama klip animasi yang diterapkan event - Sebuah array waktu animasi untuk menerapkan event - Dalam newEvent yang terdaftar dengan AddAnimationClipEvent(), item-item berikut diatur. (1) newEvent.time : Waktu animasi ketika peristiwa terjadi. Nilai 0 adalah awal dari panjang penuh, dan nilai 1 adalah akhir dari panjang penuh. (2) newEvent.functionName : Nama fungsi yang dipanggil saat peristiwa terjadi. Dalam Typescript, itu harus ditulis sebagai "Invoke". (3) newEvent.stringParameter : Nilai parameter yang ditetapkan untuk fungsi saat peristiwa mengeksekusi fungsi. Typescript mencantumkan nama fungsi yang akan dieksekusi. - Ketika peristiwa terjadi, ActivateFootSteps() dieksekusi dan suara langkah kaki diputar. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-PQibq7pcRcM2_Iwp6BIwW-20240904-102422.png) 2\) Sekarang buat FootStepManager yang menambahkan komponen FootStepController ke objek Animator pemain lokal saat pemain lokal dibuat pada runtime. - Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi FootStepManager. - Tulis skrip seperti di bawah ini. :::CodeblockTabs FootStepManager.ts ```Text import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller' import { ZepetoScriptBehaviour } from 'ZEPETO.Script' import FootStepController from './FootStepController' import { WorldService } from 'ZEPETO.World' import { AudioClip } from 'UnityEngine'; export default class FootStepManager extends ZepetoScriptBehaviour { // Suara yang akan diputar untuk langkah kaki public footStepSound: AudioClip; Start() { // Pendengar acara ketika pemain lokal ditambahkan ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { // Akses karakter Zepeto dari pemain lokal const zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character; // Lampirkan skrip FootStepController ke GameObject ZepetoAnimator const footStepController = zepetoCharacter.ZepetoAnimator.gameObject.AddComponent(); // Atur footStepSound untuk FootStepController footStepController.footStepSound = this.footStepSound; // Tambahkan acara animasi untuk memicu langkah kaki footStepController.AddAnimationEvent(); }); } } ``` ::: - deskripsi skrip - Setelah FootStepManager mendeteksi bahwa pemain lokal sedang ditambahkan, ia melampirkan skrip FootStepController ke GameObject ZepetoAnimator pemain. - FootStepController bertanggung jawab untuk menambahkan acara animasi yang memutar suara langkah kaki. :::hint{type="success"} * Skrip fungsi yang dieksekusi oleh acara animasi dari Animator harus diterapkan secara identik pada objek yang diterapkan komponen Animator yang sesuai. * Jadi Anda perlu menemukan ZepetoAnimator.gameObject dan menerapkan skrip FootStepController sebagai AddComponent. ::: 3\) Terapkan suara langkah kaki ke footStepSound dari FootStepManager. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-xzBMK0F7JDaBCBNoarBm0-20240904-102422.png) 4\) Jika Anda menekan tombol Putar untuk menjalankannya, Anda dapat melihat bahwa suara diputar sesuai dengan langkah pemain lokal setiap kali mereka berjalan. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-sOZL6vMX48bJ25maFSkLR-20240904-102423.gif" size="70" width="1328" height="745" position="center" showCaption="false"} :::hint{type="success"} **👍 Tips** - ZEPETO Animator Dasar terdiri dari beberapa campuran dan keadaan animasi. - Karena contoh ini hanya menerapkan suara pada keadaan move\_walk, Anda dapat menyesuaikan AddAnimationClipEvent() dan memasukkannya langsung ke keadaan seperti berjalan cepat dan berlari. - Ketika suara diterapkan pada beberapa Keadaan Animasi, suara langkah kaki mungkin tumpang tindih karena campuran animasi. Untuk mengatasi ini, tulis pernyataan kondisional tambahan sehingga suara yang sesuai diputar ketika AnimationEvent.animatorClipInfo.weight adalah 0.5. ::: :::hint{type="danger"} **❗️ Masalah Dikenal** - Ketika diimplementasikan mengikuti gaya panduan pengembangan, pesan kesalahan berikut mungkin muncul, tetapi tidak ada masalah dengan eksekusi. ::: ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-233nZRPAw731S17OMHzra-20240904-102422.png)