---
title: Cara menerapkan animasi kustom
slug: world-sdk-guide-id/cara-menerapkan-animasi-kustom
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

Mari kita belajar cara mengimpor file animasi eksternal dan menerapkannya pada karakter ZEPETO.

## LANGKAH 1 : Menyiapkan animasi

Akses situs tempat Anda ingin mengunduh animasi.
Panduan ini adalah contoh penggunaan situs Mixamo.

:::hint{type="info"}
**📘 Mixamo**

[https://www.mixamo.com/](https://www.mixamo.com/)
:::



Klik animasi humanoid yang diinginkan.


![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Kdv5dUQnLhGwEBEGy2QrS-20240904-102415.png)

Unduh animasi dan pilih opsi "FBX untuk Unity (.fbx)".




![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-x0s--QNTC5tCmLVrKGkB0-20240904-102415.png)

Seret dan jatuhkan file yang diunduh ke panel Proyek Unity.




![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-AvIB5VKV756ZABBJuLJMy-20240904-102415.png)

Klik tab Rig dan ubah Tipe Animasi menjadi Humanoid.




::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-eiAQhUSYAyCJzuhBoAaWY-20240904-102416.png" size="64" width="397" height="292" position="center" showCaption="false"}

:::hint{type="danger"}
**❗️ Peringatan**

Tanpa pengaturan humanoid, itu tidak akan kompatibel dengan karakter ZEPETO.
Pastikan untuk mengaturnya.
:::



Ubah Animasi > Gerakan > Opsi Node Gerakan Akar menjadi \<Root Transform> untuk membuat animasi karakter Anda lebih halus dan lebih realistis.



::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1RwYLA2iCS68RneiSUA8B-20240904-102416.png" size="86" width="466" height="1098" position="center" showCaption="false"}

:::hint{type="info"}
📘 **Unity Memilih Node Gerakan Akar**

[https://docs.unity3d.com/560/Documentation/Manual/AnimationRootMotionNodeOnImportedClips.html](https://docs.unity3d.com/560/Documentation/Manual/AnimationRootMotionNodeOnImportedClips.html)
:::

## LANGKAH 2 : Mengatur animator

Kloning objek animator yang terkait dengan variabel animator di inspector komponen ZepetoPlayers.

- Jalur file : Packages/zepeto.character.controller/Runtime/\_Resources/AnimatorController/ZepetoAnimatorV2.controller
- Seret animator ke folder Assets.
- Setelah menyalin, ubah namanya menjadi ZepetoAnimatorV2\_Custom.

  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-5LWxc0ZhjEip2Iv2Jm3WW-20240904-102416.png)


Klik Hierarchy > ZEPETO > ZepetoPlayers untuk membuatnya, dan seret salinan animator yang Anda buat di bidang Animation Controller dari komponen ZepetoPlayers.




![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N--_0qoi-16BEq8dfZapGlC-20240904-102416.png)

Klik dua kali ZepetoAnimatorV2\_Custom untuk membuka tab animator.

- Seret dan jatuhkan animasi baru ke dalam animator untuk membuat status animasi.

  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8n8gaURsgk8TXvVqJUZQ8-20240904-102416.png)

- Klik kanan pada status animasi yang Anda buat, lalu klik Buat Transisi untuk membuat transisi yang kembali ke status Idle.

  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-F02XEpZ2gi4BYCqP10LNl-20240904-102416.png)


![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-xB7pemgHNZaXw0gnou7hb-20240904-102416.png)

## LANGKAH 3 : Contoh penggunaan file animasi kustom

Mari kita buat contoh tentang cara memainkan animasi saat Anda mengklik tombol.



![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-oTOKTkoLzcUS_spT6Hvu5-20240904-102418.gif)

### LANGKAH 3-1 : Mengatur UI

- Tambahkan Hierarki > UI > Tombol.

  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0hxxDqBK32km_ljZVHQHB-20240904-102416.png)


### LANGKAH 3-2 : Menulis skrip

1. Buat Hierarki > Buat Objek Kosong dan ganti namanya menjadi CharacterController.
2. Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi CharacterController.
3. Tulis skrip contoh sebagai berikut:

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { Animator, AnimationClip } from 'UnityEngine';
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';

export default class CharacterController extends ZepetoScriptBehaviour {

    public customAnimationClip: AnimationClip;
    public playCustomAnimationButton: Button;
    private _localPlayerAnimator: Animator;

    Start() {
        this.playCustomAnimationButton.onClick.AddListener(() => {
            this._localPlayerAnimator.Play(this.customAnimationClip.name);
        })

        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
            this._localPlayerAnimator = player.zepetoPlayer.character.GetComponentInChildren<Animator>();
        });

    }

}
```

- Alur skrip adalah sebagai berikut:
  - Mulai()
    - Menambahkan pendengar ke playCustomAnimationButton yang memutar animasi saat diklik.
    - Memanggil fungsi ZepetoPlayers.instance.CreatePlayerWithUserId() untuk membuat pemain lokal.
    - Mengambil komponen animator dari pemain lokal dan menyimpannya dalam variabel localPlayerAnimator.
- Tetapkan klip animasi yang diatur ke Klip Animasi Kustom.
- Seret dan tetapkan tombol ke Tombol Putar Animasi Kustom.

  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7Kzj-j7IacEilseOPmAkC-20240904-102416.png)


6\. Putar dan klik tombol untuk memutar animasi.

:::hint{type="success"}
**👍&#x20;**&#x4A;ika Anda menggunakan karakter kustom selain karakter ZEPETO,

Anda dapat menerapkan animasi ZEPETO jika itu adalah karakter humanoid.
:::