---
title: วิธีการใช้แอนิเมชันแบบกำหนดเอง
slug: world-sdk-guide-th/GsAV30H1OMVB0F1ivcxWJ
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

มาศึกษาวิธีการนำเข้าไฟล์อนิเมชันภายนอกและนำไปใช้กับตัวละคร ZEPETO กันเถอะ

## ขั้นตอนที่ 1 : การตั้งค่าอนิเมชัน

เข้าถึงเว็บไซต์ที่คุณต้องการดาวน์โหลดอนิเมชัน
คู่มือนี้เป็นตัวอย่างการใช้เว็บไซต์ Mixamo

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

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



คลิกที่อนิเมชันมนุษย์ที่ต้องการ


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

ดาวน์โหลดอนิเมชันและเลือกตัวเลือก "FBX for Unity (.fbx)" 




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

ลากและวางไฟล์ที่ดาวน์โหลดไปยังแผงโปรเจกต์ Unity




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

คลิกที่แท็บ Rig และเปลี่ยนประเภทการเคลื่อนไหวเป็น 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"}
**❗️ ระวัง**

หากไม่มีการตั้งค่า humanoid จะไม่สามารถใช้งานร่วมกับตัวละคร ZEPETO ได้
โปรดตรวจสอบให้แน่ใจว่าตั้งค่าเรียบร้อยแล้ว.
:::



เปลี่ยนการเคลื่อนไหว > การเคลื่อนไหว > ตัวเลือก Root Motion Node เป็น \<Root Transform> เพื่อทำให้การเคลื่อนไหวของตัวละครของคุณราบรื่นและสมจริงยิ่งขึ้น.



::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"}
📘 **การเลือก Root Motion Node ใน Unity**

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

## ขั้นตอนที่ 2 : การตั้งค่า Animator

ทำการโคลนวัตถุ Animator ที่เชื่อมโยงกับตัวแปร Animator ใน Inspector ของ ZepetoPlayers.

- เส้นทางไฟล์ : Packages/zepeto.character.controller/Runtime/\_Resources/AnimatorController/ZepetoAnimatorV2.controller
- ลาก Animator ไปยังโฟลเดอร์ Assets.
- หลังจากคัดลอกแล้ว ให้เปลี่ยนชื่อเป็น ZepetoAnimatorV2\_Custom.


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



คลิก Hierarchy > ZEPETO > ZepetoPlayers เพื่อสร้างมัน และลากสำเนาของ animator ที่คุณสร้างใน Animation Controller ของ ZepetoPlayers component.




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

ดับเบิลคลิก ZepetoAnimatorV2\_Custom เพื่อเปิดแท็บ animator.

- ลากและวางอนิเมชันใหม่ลงใน animator เพื่อสร้างสถานะอนิเมชัน.


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


- คลิกขวาที่สถานะอนิเมชันที่คุณสร้างขึ้น จากนั้นคลิก Make Transition เพื่อสร้างการเปลี่ยนแปลงที่กลับไปยังสถานะ Idle.


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



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

## ขั้นตอนที่ 3 : ตัวอย่างการใช้ไฟล์อนิเมชันที่กำหนดเอง

มาสร้างตัวอย่างว่าเราจะเล่นอนิเมชันเมื่อคลิกปุ่มได้อย่างไร



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

### ขั้นตอนที่ 3-1 : การตั้งค่า UI

- เพิ่ม Hierachy > UI > ปุ่ม.


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



### ขั้นตอนที่ 3-2 : การเขียนสคริปต์

1. สร้างลำดับชั้น > สร้างวัตถุเปล่าและเปลี่ยนชื่อเป็น CharacterController.
2. สร้างโปรเจกต์ > สร้าง > ZEPETO > TypeScript และเปลี่ยนชื่อเป็น CharacterController.
3. เขียนสคริปต์ตัวอย่างดังนี้:

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

    }

}
```

- ลำดับการทำงานของสคริปต์มีดังนี้:
  - เริ่ม()
    - เพิ่มผู้ฟังไปยัง playCustomAnimationButton ที่เล่นอนิเมชันเมื่อคลิก.
    - เรียกใช้ฟังก์ชัน ZepetoPlayers.instance.CreatePlayerWithUserId() เพื่อสร้างผู้เล่นท้องถิ่น.
    - รับส่วนประกอบ animator ของผู้เล่นท้องถิ่นและเก็บไว้ในตัวแปร localPlayerAnimator.
- กำหนดคลิปอนิเมชันที่ตั้งค่าเป็นคลิปอนิเมชันแบบกำหนดเอง.
- ลากและกำหนดปุ่มไปยังปุ่มเล่นอนิเมชันแบบกำหนดเอง.


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



6\. เล่นและคลิกปุ่มเพื่อเล่นอนิเมชัน.

:::hint{type="success"}
**👍&#x20;**&#xE2B;ากคุณใช้ตัวละครที่กำหนดเองที่ไม่ใช่ตัวละคร ZEPETO,

คุณสามารถใช้อนิเมชัน ZEPETO ได้หากเป็นตัวละครมนุษย์.
:::