
久しぶりの「ZEPETO」の活用についての記事になります。今回は表情の変化アニメーションを作る方法についてのご紹介になります。
Unityで ZEPETO のアプリを開発するには、指定されたバージョンを使用します。2025年1月段階で使用できるのは以下のバージョンのようです。
2022.3.34f1(ZEPETOワールド開発)
2020.3.9f
今回は3Dモデルの表情の変化やモーションも作成なので、現段階で推奨されている2020.3.9f を使用して紹介していきます。
事前準備
事前に以下のサイトからサンプルシーンを取得します。https://docs.zepeto.me/studio-guide-ja/preparation-for-3d-modeling
取得するファイルはZipファイルです。ダウンロード後、任意の場所に展開します。 保存したフォルダを任意の名前でReName(Unityで開く際、プロジェクト名になります)

UnityHubを立ち上げ、プロジェクト上段の「追加」⇒「ディスクから加える」を選択し、展開したフォルダを選択します。


追加したプロジェクトを立ち上げます。Assetフォルダ内に含まれる「Playground」シーンをダブルクリック、対象のシーンを立ち上げます。
プレイボタンを押すと、以下のような状態になっていると思います。

まずは、ご自身のアバターが表示されるように設定します。
一旦プレイを停止、以下の方法でアバターを指定します。
・Hierarchyで LOADERを選択、Inspectorで Zepet Character Custom Loader(Script) のZepet ID プロパティに任意のIDを指定
※ このIDの指定には、認証、パスワード等の設定がないので、自分以外のIDも指定できるようです。

今回の課題では、Animationの機能を使用するので、Animationビューを表示しておきます。上部メニューの「Window」⇒「Animation」⇒「Animation」、またはControlキー+6 でAnimatinnを表示

さらに作業しやすいようにレイアウトも変えてみました。

作成したレイアウトは再利用できるように保存しておきましょう。右上の「Layout」から「Save Layout」を選択し、任意の名前で保存します。
呼び出すときは、作成したレイアウト名をクリックするだけです。

表情変化のアニメーション
アニメーションの作成方法はいろいろあるようですが、今回は比較的扱いやすい方法でご説明します。
事前にAssetフォルダ内にAnimationClipを保存するための任意の名前でフォルダを作成します。サンプルでは「Animation」というフォルダを作成しました。

Hierarchyで「LOADER」配下の「Zepeto Context」を選択、Animation で「dynamic」というアニメーションクリップが初期設定で指定されているのがわかると思います。この「dynamic」はただのT字型のポーズをとった状態です。
「dynamic」または右側の▼を右クリック、「Create New Clip」で新しい AnimatorClipを作成します。Assets内に作成済みの「Animation 」フォルダを指定して任意の名前で保存します。サンプルでは「Face」という名前にしておきました。

もとのClip「dynamic」のキーフレームを全選択してコピーします。一番上のひし形のマーカーを選択して、「Controlキー」+「Cキー」。
さらに作成した「Face」を選択して(dynamicを右クリックして表示されます)、0.00秒を指定、「Controlキー」+「Vキー」で貼り付けます。

つづいて「Zepeto Context」配下の「body」を選択、Inspector で「Skinned Mesh Renderer」⇒「BlendShapes」プロパティを展開します。表情のそれぞれの変化を管理する項目が表示されており、それぞれスライダー、または直接入力で0から100の範囲で値を指定することができます。
ここでスライダーを動かしながら、事前に変更するパーツの項目名をチェックしておきましょう。サンプルでは目の瞬きを変化させてみたいと思います。使用するのは「eyeBlinkLeft」および「eyeBlinlRight」です。

つづいて、新たな表情の変化を管理するキーフレームを追加します。
今回は作成したクリップを使用しますので、操作対象のクリップが切り替わっていることを確認しておきます。クリップ名の上に赤色の記録ボタンがあります。クリックして記録状態にします。
上で確認した変更したい項目のスライダーを左右に振ることで、クリップに対象のキーフレームの項目が追加されます。
今回は0.00秒の状態では、フラットな状態に戻しておきます。

ここからは、任意で表情を変えていきます。
これには決まった作り方などはないのですが、サンプルでは0秒のニュートラルな状態を複製し、いくつかのポイントに張り付けています。
この後子のニュートラル状態の合間合間に、表情の変化を作っていきます。

では試しに0.10秒と0.30秒の間の0.20秒のポイントで左目を閉じてみます。
0.20秒をポイントして「eyeBlinlLeft」の値を100にします。
これで1回の瞬きができるようになりました。

作成したキーフレームは範囲でコピーして貼り付けることもできます。
0.10秒から0.30秒の間を範囲選択、0.40秒の場所で貼付け。これで2回瞬きをする動きができました。

一旦ここで動きを確認してみます。記録ボタンの右側に再生ボタン(▶)をクリック。

ここまでの動きはこんな感じです。
さらに右目を瞬きする動きを追加してみます。
任意の時間を選択し、「BlendShapes」の「eyeBlinlRight」を100に指定、そのあとニュートラル状態のキーフレームをコピペで作成します。

以下のような状態です。
続いて口の動きも追加してみます。
口の「BlendShapes」は非常に豊富です。目元の「BlendShapes」を追加したときと同じ要領で、各項目のスライダーを左右に振ってそれぞれの動きを確認し、使用する動きを取り込みます。

サンプルでは以下のように簡単な口元の動きを取り込んでみました。

ここまでの動きは以下のようになっています。
言葉をしゃべるアニメーションをするときは、以下のような値にするとよいかもしれません。サンプルの値を添付するので、もしよければご参考にしてください。





ちょっと修正の余地はありそうですが、このようなAnimationができました。
アニメーションの活用
作成した AnimationClip は部分的にコピペなどして、何度も再利用することができます。今回は簡単な起動方法をご紹介します。
プレイボタンを押して、Hierarchyで「LOADER」を選択、Inspectorで「Zepeto Studio Loader」の Clipsプロパティ(配列) を展開します。Element0からElement9までの各要素は、Game画面で左側に表示される1~10までのボタン、それぞれに順番にリンクしています。

上の課題で作成したAnimationClip「Face」を Element 0 にドラッグ&ドロップ、またはElement 0 の右側の⦿ボタンから、「Face」を選択して、AnimationClipを置き換えます。

これで「1」のボタンをクリックした際に、作成したAnimationが動き出すようになりました。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。