Menggunakan acara animasi

14min
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.
﻿
﻿
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.
﻿
﻿
Silakan merujuk ke panduan berikut untuk pendaftaran Animator dan pengeditan klip animasi.
📘 Panduan Acara Animasi Unity
https://docs.unity3d.com/kr/current/Manual/script-AnimationWindowEvent.html﻿
📘 Tutorial Animasi Belajar Unity
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
﻿
﻿
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.
ObjectAnimationController.ts
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`);
    }
}
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.
﻿
﻿
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.
FootStepController.ts
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<Animator>();

        // 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<AudioSource>();
        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);
        });
    }
}
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<Animator>();

        // 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<AudioSource>();
        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.
﻿
﻿
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.
FootStepManager.ts
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<FootStepController>();

            // Atur footStepSound untuk FootStepController
            footStepController.footStepSound = this.footStepSound;

            // Tambahkan acara animasi untuk memicu langkah kaki
            footStepController.AddAnimationEvent();

        });
    }

}
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<FootStepController>();

            // 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.
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.
﻿
﻿
4) Jika Anda menekan tombol Putar untuk menjalankannya, Anda dapat melihat bahwa suara diputar sesuai dengan langkah pemain lokal setiap kali mereka berjalan.
﻿
﻿
👍 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.
❗️ Masalah Dikenal
Ketika diimplementasikan mengikuti gaya panduan pengembangan, pesan kesalahan berikut mungkin muncul, tetapi tidak ada masalah dengan eksekusi.
﻿
﻿
Diperbarui 11 Oct 2024
Apakah halaman ini membantu Anda?
SEBELUMNYA
Contoh Tampilan Kuartal
BERIKUTNYA
Mengukur tinggi karakter Anda