ZEPETO活用講座、第6弾。前回の記事「Unityで ZEPETO キャラクターの表情アニメーションを作る方法」の続きで、今回は体の動きのアニメーションを作ってみたいと思います。
モーションAnimationを作る方法はいくつかあるようですが、今回は2つの方法をご紹介します。
1 プロパティを指定してAnimation を作成
■ 素材の準備
前回の動画で表情を作った時と同じ方法で体の関節を動かして、キーフレームを作っていきます。
取り込んだプロジェクトの「Playground」シーンをプレイした状態で、「Zepet Context」を選択、Animation メニューから、既存の「dinamic」クリップを選択、右側の▼ボタン、または右クリックから「Create New Clip」で新たなクリップを作成します。サンプルでは用意したAnimationフォルダ内に「Body」という名前で作成しました。※フォルダ名、クリップ名は任意です。

■ AnimationClip作成
「Dynamic」クリップのニュートラル状態のキーフレームをコピーし、作成した「Body」の 0.00 のポイントに張り付けます。

AnimationClips を作っていきます。左上の記録ボタン(赤色のボタン)をクリックして、記録開始。
サンプルでは0.10フレームの場所で「Head Nod Down-Up」の値を0.7程度に変更してみました。キャラクターの首が前に傾きました。

同様に、0.20フレームで「Head Tilt Left-Right」「Head Turn Left-Right」を変更し顔を左方向に向けてみました。

作成したキーフレームをベースにコピー&ペースト、値の調整などを行って左向きの動きを作成。さらに動きが速すぎるので、作成範囲を選択し右側に引き伸ばし、クリップのサイクルを長くしてみました。

ここまでの動きがこちらです。
手の動きも作ってみました。

かんたんな手の動きのアニメーションができました。
この方法の場合、それぞれの関節がどのプロパティに相当するのか探し当てるのに時間がかかってしまいます。さらにひじの関節などが見当たらなかったり、すべてのプロパティが網羅されているわけではなさそうです。
そこで直感的に動きを作成する、次の方法をご紹介します。
2 関節を直接動かしてAnimation を作成
■ 素材の準備
事前にAnimationContoroller とAnimationClip を作成します。AnimationContoroller とは、複数のクリップの発動タイミングや遷移タイミング、停止などを管理するオブジェクトです。
Animationは以下に body というフォルダを作成、その配下に Create → Animator Controller からAnimatorController、および Create → Animation から AnimationClip を作成し配置します。それぞれ「Body」「Body2」など任意の名前を付けておきます。

作成したAnimationController を立ち上げます。Animatorメニューが表示されていない場合は、上部Unityメニューの Windows ⇒ Animation ⇒ Animator で表示。
Body2(AnimationClip)をAnimationController の表示エリアにドラッグアンドドロップ、EntryステートからBody2 へのトランジションが自動的に作成されます。

続いて公式ZEPETOサイトの以下ページからBpdyのテンプレートを取得します。
上のサイトにアクセスし、STEP:2 アイテム作成のためのガイドファイル creatorBaseSet_ZEPETO から3Dモデルを取得、展開してUnityのAsset内にドラッグアンドドロップで取り込みます。


■素材の配置
Platy状態で取り込んだ3Dモデル(creatorBaseSet_zepeto)をHierarchyにドラッグアンドドロップ、モデルのクローンを作成します。
この状態でキャラクターと重なってしまうので座標をずらします。

creatorBaseSet_zepeto(Clone)のTransformコンポーネント、PositionプロパティのXの値を任意の値にずらして、キャラクターと間隔を取ります。サンプルでは1程度に指定しました。
Animatorコンポーネントのチェックを外し、一旦Animationを無効化します。

同様にメインキャラクターの「Zepeto Contect」のAnimatorコンポーネントのチェックを外し無効化しておきます。
「Zepeto Context」と「creatorBaseSet_zepeto」、内部を確認すると、どちらも「hips」というオブジェクトを持っています。展開するとどちらも同じ構造になっているようです。このオブジェクトにAnimatorController をセットすることで、同様のAnimationを作ることができるようです。
両方の「hips」に 作成したAnimatorController「Body」をドラッグアンドドロップします。

■ AnimationClipの作成
Scene 上でのオブジェクトに対する操作を回転にします。これで回転用のギズモが表示されオブジェクトを直感的に操作することができるようになります。
サンプルとして、hips ⇒ spine ⇒ chest ⇒ chestUpper ⇒ neck と辿り首の関節を管理するオブジェクトを見つけます。neck を選択した状態でギズモのy軸を前後に振ると、3Dモデルのが首を前後に回すのが確認できると思います。

あとはこれまで学習してきたことと同じ手順で、Animationを作っていきます。
Animationの記録ボタンを押して、任意のキーフレームで任意の関節のプロパティの値を指定します。

手間のかかる作業ですが、どんどん作っていきましょう。

一通り作ったらメインキャラクターのZepeto Context で動きを確認してみます。ZrpetoContext 配下の hips に追加したAnimatorコンポーネントのActiveのチェックの入り切りで動き出すはずす。

Animationをループさせたい場合は、AnimationClipのループを有効にします。
Body2を選択し、Inspectorから「Loop Time」にチェックを入れます。

簡単なAnimationを作ってみました。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
Comentarios