---
title: カスタムアニメーションを適用する方法
slug: world-sdk-guide-ja/gznkP8_LCCyCw1PcRvuYg
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)

リグタブをクリックし、アニメーションタイプをヒューマノイドに変更します。




::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"}
**❗️ 注意**

ヒューマノイド設定がないと、ZEPETOキャラクターと互換性がありません。
設定を確認してください。
:::



アニメーション > モーション > ルートモーションノードオプションを\<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"}
📘 **Unity ルートモーションノードの選択**

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

## ステップ 2 : アニメーターの設定

ZepetoPlayersコンポーネントインスペクター内のアニメーター変数に関連付けられたアニメーターオブジェクトをクローンします。

- ファイルパス : Packages/zepeto.character.controller/Runtime/\_Resources/AnimatorController/ZepetoAnimatorV2.controller
- アニメーターをアセットフォルダーにドラッグします。
- コピー後、ZepetoAnimatorV2\_Customに名前を変更します。

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


階層 > ZEPETO > ZepetoPlayersをクリックして作成し、ZepetoPlayersコンポーネントのAnimation Controllerフィールドに作成したアニメーターのコピーをドラッグします。




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

ZepetoAnimatorV2\_Customをダブルクリックしてアニメータータブを開きます。

- 新しいアニメーションをアニメーターにドラッグ＆ドロップしてアニメーションステートを作成します。

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

- 作成したアニメーションステートを右クリックし、次に「遷移を作成」をクリックして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の設定

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

    }

}
```

- スクリプトの流れは次のとおりです：
  - Start()
    - playCustomAnimationButtonにリスナーを追加し、クリック時にアニメーションを再生します。
    - ZepetoPlayers.instance.CreatePlayerWithUserId()関数を呼び出してローカルプレイヤーを作成します。
    - ローカルプレイヤーのアニメーターコンポーネントを取得し、localPlayerAnimator変数に格納します。
- カスタムアニメーションクリップに設定されたアニメーションクリップを割り当てます。
- ボタンをドラッグして、カスタムアニメーションボタンに割り当てます。

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


6\. アニメーションを再生するためにボタンをクリックします。

:::hint{type="success"}
**👍&#x20;**&#x5A;EPETOキャラクター以外のカスタムキャラクターを使用する場合、

ヒューマノイドキャラクターであれば、ZEPETOアニメーションを適用できます。
:::