カスタムアニメーションを適用する方法
外部アニメーションファイルをインポートし、それをZEPETOキャラクターに適用する方法を学びましょう。
ステップ 1 : アニメーションの設定
アニメーションをダウンロードしたいサイトにアクセスします。 このガイドはMixamoサイトの使用例です。
📘 Mixamo
希望のヒューマノイドアニメーションをクリックします。
アニメーションをダウンロードし、「FBX for Unity (.fbx)」オプションを選択します。
ダウンロードしたファイルをUnityプロジェクトパネルにドラッグアンドドロップします。
リグタブをクリックし、アニメーションタイプをヒューマノイドに変更します。
❗️ 注意
ヒューマノイド設定がないと、ZEPETOキャラクターと互換性がありません。 設定を確認してください。
アニメーション > モーション > ルートモーションノードオプションを<Root Transform>に変更して、キャラクターのアニメーションをよりスムーズでリアルにします。
📘 Unity ルートモーションノードの選択
ステップ 2 : アニメーターの設定
ZepetoPlayersコンポーネントインスペクター内のアニメーター変数に関連付けられたアニメーターオブジェクトをクローンします。
- ファイルパス : Packages/zepeto.character.controller/Runtime/_Resources/AnimatorController/ZepetoAnimatorV2.controller
- アニメーターをアセットフォルダーにドラッグします。
コピー後、ZepetoAnimatorV2_Customに名前を変更します。
階層 > ZEPETO > ZepetoPlayersをクリックして作成し、ZepetoPlayersコンポーネントのAnimation Controllerフィールドに作成したアニメーターのコピーをドラッグします。
ZepetoAnimatorV2_Customをダブルクリックしてアニメータータブを開きます。
新しいアニメーションをアニメーターにドラッグ＆ドロップしてアニメーションステートを作成します。
作成したアニメーションステートを右クリックし、次に「遷移を作成」をクリックしてIdleステートに戻る遷移を作成します。
ステップ 3 : カスタムアニメーションファイルの使用例
ボタンをクリックしたときにアニメーションを再生する例を作成しましょう。
ステップ 3-1 : UIの設定
階層 > UI > ボタンを追加します。
ステップ 3-2 : スクリプトを書く
- 階層を作成 > 空のオブジェクトを作成し、CharacterControllerに名前を変更します。
- プロジェクトを作成 > 作成 > ZEPETO > TypeScriptを選択し、CharacterControllerに名前を変更します。
- 以下のようにサンプルスクリプトを書きます：
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変数に格納します。
- カスタムアニメーションクリップに設定されたアニメーションクリップを割り当てます。
ボタンをドラッグして、カスタムアニメーションボタンに割り当てます。
6. アニメーションを再生するためにボタンをクリックします。
👍 ZEPETOキャラクター以外のカスタムキャラクターを使用する場合、
ヒューマノイドキャラクターであれば、ZEPETOアニメーションを適用できます。