はじめに
今回はModular Avatar(MA)でExpressions Menuを作る方法を紹介します。
下記の３つを前提に進めます。
・UnityやModula avatarが導入済みである程度使える
・Modula AvatarでMenuを自作できる
・Gesture Manager導入済み↓前提知識はこちらをご覧ください。
「オプジェクトの表示/非表示」や「Radial」などを作ったあと想定で進めてます。
なので結構解説としては粗いです。
初心者の方はこちらを最初に見た方が良いと思います。
下準備（Blenderで変形用モデルを用意）
今回はBlenderでモデルを用意します。（任意）
モデルがある方は「下準備」を読み飛ばして大丈夫です。
ギミック作成自体はBlenderのモデルがなくても行えます。
ただ表情制作に使われるシェイプキーを動かす方法を紹介したいのでBlenderでモデルを作る所から始めました。
Shift＋A → 立方体などを作成。
オプジェクトデータプロパティ → シェイプキーの「+」ボタンを追加。
変形用のシェイプキーを追加。
さらに「＋」ボタンでシェイプキーを追加。
別方向の変形を追加しました。
あとは位置、回転、スケールのアニメーションを入れる場合はボーンを入れることをおすすめします。
UnityのTransformを使えば位置、回転、スケールの変化も記録できますが…
なぜか動かなかったり、いろいろ挙動が不安定になったります。
いろいろ設定したらUnityを立上げ。
プロジェクトにBlenderデータをドラッグ＆ドロップ。
プロジェクトからヒエラルキーにモデルをドラッグ＆ドロップ。
適当な位置に配置。
以上で下準備が完了です。
これからすることについて
パイメニューから2Axisを使ってアニメーションを再生する機構を作ります。
・赤色＝2/4 Axisメニューの表示
・緑と黄色＝2/4 Axisメニューをアバターと同期
・オレンジ＝入力をパラメーターに変換
・水色＝Animatorによる入力受け皿
・白色＝パラメーターによる挙動設定（条件分岐）
・藤色＝アニメーションの再生
文字潰れ対策、画像拡大用Twitter。
↓MA不使用の設定はこちらで解説。
これの一部をModular Avatarに置き換えます。
そしてこのような回路を作ります。
文字潰れ対策、画像拡大用Twitter。
簡略化すると下記の事をやります。
・2Axisの入力をParameterに保存
・Parameterの値を受け取りアニメーションコントローラーで受け取り
・アニメーションコントローラー経由でBlend Treeを操作してアバターを動かす図にするとこちら。
↓何らかの入力＝ここでは2Axisの入力です。
以上がこれからすることの解説です。
Expメニューに2Axisを作る
そしたら、まずExpメニューに2Axisを作り値を格納する処理を作ります。
ヒエラルキーを右クリック。
空白のオプジェクトを生成して下記のような構造と名前に設定。
3Dモデルデータは上から2番目の階層に入れます。
Test（空白のオプジェクト）
→ Test Model（3Dデータ）
→ Exp Menu
→ 「中身」
→ 2Axis
「中身」を選択。
MA Menu Installerを追加。
Me Menu Itemを追加しタイプを「Sub Menu」に設定。
サブメニュー引用元が「子オプジェクトから生成」になってることを確認。
2Axisを選択。
MA Menu Itemを追加。
タイプを「Two Axis Puppet」に設定。
表示名を好きなモノにに設定。
アイコンも設定できますが…
初期アイコンが優秀なので「アイコン無し」で行きます。
これで2Axis メニューが生成されます。
そしたらパラメーター名を自由に設定。
パラメーターは縦と横の２つがあります。
２つ別々に設定します。
以上がExpメニューに2Axisを作る工程です。
2Axisメニューの値を送る
次は2Axisメニューの値を送る回路を作ります。
Exp Menuを選択。
MA Parametersを追加。
MA Menu Itemを追加して設定した縦と横のパラメーター名を入力します。
データ型はFloatに設定。
MA Menu ItemとMA Parametersの名前を完全に一致させることで連動します。
2Axisで入力されるパラメーターは下記。
・縦：-1.0～1.0（Float）
・横：-1.0～1.0（Float）
なのでデータ型はFloatにしてください。
以上が2Axisメニューの値を送る工程です。
2Axisメニューの値をアニコンで受け取る
次は2Axisメニューの値をアニメーションコントローラーで受け取る処理を作ります。
MAギミックの最上位階層（Test）を選択。
MA Merge Animatorを追加。
そしたら次は「統合されるアニメーター」に入れる用のアニメーションコントローラーを作ります。
プロジェクトを右クリック。
作成 → アニメーションコントローラーを選択。
名前を「New_AniCon」あたりに設定。
アニメーションコントローラーを選択。
MA Merge Animatorの統合されるアニメーターにドラッグ＆ドロップ。
次に統合するレイヤーの種類を選択します。
ここでは「FX」を選択。
レイヤーの概要は下記。
・基本(Base) → アバターの基本動作の設定（立ち、しゃがみ、伏せ＋移動などの動作）
・Additive → アバターの追加動作（呼吸など）
・Gesture → 『手の形』のみに動作を加える
・Action → エモートなどの完結したアニメーションの再生
・FX → シェイプキーや物のON/OFFの設定＋人型ボーン以外の操作設定（耳や尻尾のなど）
・Sitting → 座ってる時のアニメーション指定
・Tpose → アバター視点、手首のねじれ、腕の開き方などの調整、肘を伸ばす等の特殊なモデル調整
・IKPose → 関節の曲がり方の調整。肘や膝のボーンが間違った方向に曲がるモデル調整主に使うのは下記の４つ。
・Additive（手以外の体）
・Gesture（手）
・Aciton（完結動作）
・FX（人型ボーン以外）
一旦、これだけ覚えたらOKです。
詳細はこちらでまとめてます。
これらにアニメーションコントローラーはすでにアバターに刺さってることがあります。
MA Merge Animatorはすでにある要素に “加算” してアニコン処理を追加します。
VRC Avatar Descriptorを見ると確認できます。
なし（Default）の場合はDefaultに対してMAの加算処理が入ります。
これを使うことでいろんなアバターに同じ動作設定を使いまわせます。
他のMA Merge Animator設定は基本そのままでOKです。
下手に触るとややこしい事になります。
しいて操作するなら不具合が起こったら「レイヤー統合優先度」を調整して様子見。
アバターのWrite Defaluts設定に合わせは基本無効でOKです。
が… もし特殊な動作が必要な場合は任意に選択。
Write Defaultsについて
→ オンだとアニメーション切り替え時に一部のパラメーターが初期化されたりする
→ オフだと切り替え時の初期化が起こらない
→ VRChatではWrite Defaultsは「オフ」が推奨されている
→ オンじゃないとまばたきなどの一部の処理が正しく動かないことがあるWrite Defaultsはオンにするなら…
「まばたきを諦める」のが一般的な流れとなってます。
↓このあたりの問題はこちらで解説してます。
あと皆さんが気になりそうなモノで「付属アニメーターの削除」を見ます。
これは有効化のままにします。
有効時は２つの合成されたものが残り、合成に使ったものが消されます。
これがオフだと合成に使ったアニメーターが統合されません。
つまり１つの穴に2つのアニメーションコントローラーが入ります。
これは不具合の原因になるので避けましょう。
これでラジアルメニューの値をアニコンで受け取れます。
受け取った値で動くようにする（アニコン設定）
次は受け取った値をアニメーションコントローラーで使えるようにします。
一言で言うと「引き出し処理」を作ります。
プロジェクトで制作したアニメーションコントローラーをダブルクリック。
アニメーターを開きます。
アニメーターの左上にある「パラメーター」をクリック。
右上の「+」 → 引き出したいデータ型を選択。
ここにMA Parametersで設定した名前と完全に一致する名前を入力。
「名前」と「データ型」が完全一致するとMA Parametersの値をアニコンで引き出せます。
以上が受け取った値をアニコンで引き出す処理です。
アニコンにアニメーションを入れて動かす
次はアニメーションコントローラーにアニメーションを入れる設定を行います。
引き出した後の「処理部分」を作ります。
アニメーションコントローラーを選択。
右側の緑色が開始地点です。
開始地点という情報だけなのでここに「動きの記録」情報は入りません。
何もないところを右クリック。
ステートの作成 → 空を選択。
これで開始地点から生成した「ステート」を繰り返し続ける処理が完成しました。
無限ループの状態になるのでアバター使用中は常時「New State」の処理が読み込まれます。
レイヤー名の変更
このようなステートの処理を管理してる部分が「レイヤー」です。
このレイヤーは名前が初期設定のままだと複数のアニメーションコントローラーで名前が被る可能性があります。
名前が被ると意図しないエラーが発生します。
そこでレイヤーの名前を適当なモノに変えます。
次はステートの中身を設定していきます。
ステートの設定調整
生成したステートを選択。
ここにギミック（アニメーション）を記録します。
速度は再生速度の倍率です。
アニメーションデータの中身は「指定した数字に変化情報を記録してるだけ」になります。
数値と変化情報があるだけなので「時間経過で変化」する情報は設定されてません。
ただ0～60という数値だと一般人にはわかりにくいと思います。
なので上側のメモリーには秒数が書かれてます。
（0:00～1:00 → 0秒～1秒）
ステート側でアニメーションの速度を「1」と設定。
これで一般的なアニメーションは「0～60フレーム」が１秒と定義されます。
ちなみに60フレームが１秒かどうかはアニメーションデータの「FPS」で決定されてます。
多くの場合は「60FPS」です。
たまに謎のツールを使ったりすると「30」や「24」FPSになったりします。
次にWrite Defalutsをオフにします。
これはVRChatの必須設定です。
Write Defaultsについて
→ オンだとアニメーション切り替え時に一部のパラメーターが初期化されたりする
→ オフだと切り替え時の初期化が起こらない
→ VRChatではWrite Defaultsは「オフ」が推奨されている
→ オンじゃないとまばたきなどの一部の処理が正しく動かないことがあるMotion Timeや乗数の右側にある「パラメーター」を選択。
すると2Axisのパラメーターを読み込んで操作できますが…
-1.0という値がやってくるので扱いづらいです。
このあたりのパラメーター操作を設定するなら「Radial」を使うのがおすすめ。
また2Axisを使う人は上下左右の4つにアニメーションを入れたい人がほとんど多と思います。
なのでステートにあるパラメーター入力は使いません。
Motionに「Blend Tree」というモノを入れてアニメーションを制御します。
Blend Treeを使うと複数のアニメーション情報を１つにまとめて入力できます。
そしてBlend Treeにパラメーターを送り複数のアニメーションを操作できます。
↓こちらが一般的な上下左右＋中央の操作例
Brend Treeを使えば上下左右以外にもアニメーションを配置できます。
そしたらこのBlendTreeの使い方を見ていきます。
ステートの設定は以上です。
BlendTreeで複数のアニメーションを登録
次はBlend Treeの設定を行います。
これは無理やり図で表現するなら…
アニメーションコントローラーの出力を受け取りアニメーションを操作する処理です。
流れ的には「3つ目の処理」という別物認識した方が分かりやすいと思います。
プロジェクトを右クリック。
作成 → BlendTreeを選択。
アニメーションコントローラ内のステートを選択。
Motionの中に「Brend Tree」を入れます。
プロジェクトにあるBlendTreeを選択。
インスペクターを開きタイプを「2D Freefom Directional」に設定。
入力するパラメーターを「横」 → 「縦」の順に登録。
ブレンドタイプは「2D」系であればなんでもOKです。
選択を変えると中にあるモーションの動き方が少し変わります。
細かいことを言うならば…
・2D Simple Directional → 4か8方向設定の時綺麗
・2D Freeform Directional → 4か8方向設定以外でもきれい
・2D Freeform Cartesian → XとY方向の操作が独立した別物の時向け（扱いづらい）補間方法の違いが問題になってるだけです。
特にこだわりがなければ…
4と8方向もきれいに出せる「2D Freefom Directional」でOK。
詳細は公式マニュアルをご覧ください。
Motionの「＋」ボタンを選択。
モーションフィールドを追加を選択。
生成された枠にアニメーションを入れると動くようになります。
New Blend Treeを押すと自Blend Treeが入れ子になります。
あまり使わないのと、空白で作ってもあとからBlendTreeは登録可能です。
なので「モーションフィールドを追加」で足すのがおすすめ。
そしたら２つ目のアニメーション枠を追加。
するとBlend Treeのグラフが表示されます。
このグラフの上下が2Axisの入力に対応してます。
そして小さな点がアニメーション入れる場所です。
ここにアニメーションを登録することで間を綺麗につなげれます。
アニメーションの位置は「Pos X」と「Pos Y」で設定できます。
こちらは数値入力が可能。
「＋」を連打で追加していくと円形に配置されます。
斜め45度の位置は「0.71、0.71」です。
この「0.71、0.71」位置は2Axisの入力に対応してます。
「X=-1、X=-0.5、x=0」とすると間に変化情報を作れます。
Pos X/Yは四則演算の入力が可能です。
・足し算 → +
・割り算 → -
・掛け算 → *
・引き算 → /斜めにある0.71のような数値は少し計算で出しにくいです。
なので数値の横に「/2」を入れるとすぐに半分の位置を設定できます。
制御点をクリック → マウスを移動でも操作できます。
ただし値が1を超えて配置が綺麗にならないのでおすすめはしません。
グラフ上にある「赤い丸」は2Axisのプレビューです。
Blend Tree上で「どのアニメーションがどれぐらい有効になるか」が確認できます。
・時計マークはアニメーションの再生速度。
・一番右の人型はアニメーションの左右反転。（基本は人型ボーンのみで利用可能）
・下の操作項目は位置やアニメーションの自動調整系のモノです。（使わなくてOK）
そしたらアニメーションと位置を下記のように設定。
１ → X= 0：Y= 0
２ → X=-1：Y= 0
３ → X= 0：Y= 1
４ → X= 1：Y= 0
５ → X= 0：Y=-1
そしたらBlend Treeに入れるアニメーションを作ります。
プロジェクトを右クリック → 作成 → アニメーションを作成。
今回は5個刺すところを作りました。
なのでアニメーションを選択 → Ctrl＋Dキーで5つ複製します。
作成したアニメーションをBlend Treeに刺します。
以上がBlendTreeで複数のアニメーションを登録する処理です。
アニメーションに動作を記録する（ギミック）
次は制作したアニメーションに動きを登録していきます。
アニメーションデータをダブルクリック。
するとアニメーション記録画面が出てきます。
ただしこの状態ではアニメーションは記録できません。
アニメーションを記録する際はアニコンを記録対象に刺す必要があります。
これで記録できますが…
名前がラジアルに変わってますが気にしないでください。
（Radial解説の画像を使いまわしただです）
アニメーションコントローラーを刺す位置が重要になります。
基本はMerge Animatorを設定したところに刺してください。
アニメーションコントローラーを刺すと「Animator」が生成されます。
この「Animator」と「MA Merge Animator」が同じ位置にあればOKです。
アニメーション情報はヒエラルキーの名前（パス）で記録されます。
なのでどこをスタート地点にするかという設定（アニコンを刺す位置）が重要です。
また基本的にアニメーションコントローラーを刺した位置から上のモノは正しく記録できないです。
MA Merge Animatorのパスモードを「絶対的」にすればアバタートップ階層から記録が始まります。
これを使えば上階層のモノを記録できますが…
階層の名前が少しでも変わると動かなくなるので注意。
絶対的設定の用途は主に２つ。
・特定のアバター “専用” のギミック生成（表情など）
・ヒューマノイドボーンなどを動かす
（ある程度名前が共通してることを前提に操作）
→ ヒューマノイドボーンはアバターによって名前が異なることがあります。
ボーン名が異なると動かなくなるので…
配布の際はそのことを説明書に描くのが親切です。
もし「絶対的」を使う場合はアニコンをアバタートップ階層に刺してください。
参照スタート位置がアバタートップなのでここに刺さないと正しく動きません。
アニコンを刺したらアニメーションが記録できます。
最初は「Animation 1（0,0地点に登録）」が設定されてます。
赤い丸を押して記録開始。
タイムライン左上の数値で記録位置を指定。
この状態でインスペクターから適当な値を操作。
初期状態のアニメーションを記録します。
これでアニメーションに初期状態（シェイプキーが0）の状態が記録されました。
そしたらヒエラルキーでアニメーションコントローラを刺した所を選択。
プレビュー下の枠を選択。
すると登録先のアニメーションを切り替えれます。
次は「2」に変化状態を記録します。
2にシェイプキーを１つだけ操作した値を登録。
これでアニメーション2は縦に長い状態になりました。
同じ手順で3のアニメーションも設定。
こちらは２つ目のシェイプキーを操作して登録。
これでアニメーション3に横に長い状態が記録されました。
そして配置的には下図のような状態になってます。
「Gesture Manager」を操作。
すると2Axisで変形するようになりました。
上下左右に動かしたい場合は「上、下、左、右」に伸びるシェイプキーを4つ作る必要があります。
枠が余ったので適当なアニメーションを作ります。
インスペクターの下にあるマテリアルを「▶」で開きます。
4に色を赤くするアニメーションを設定。
5は水色に設定。
最後に色を初期状態に戻すために「1」に白色のアニメションを設定。
これで2Axisを動かすと状態が変化します。
2Axisは変化状態で画面を消すとその状態で固定になります。
（VR操作の場合はジョイステックを操作した状態でトリガー）
初期化はジョイステック無操作で行えます。
デスクトップの方は…
完璧な初期化はあきらめましょう。
その他の細かな設定
最後に役立ちそうな設定をまとめます。
2つ以上のレイヤーを使う場合
１つのアニメーションコントローラーにレイヤーは２つ以上設定可能です。
レイヤー表示の状態で「＋」で追加。
追加したモノは歯車マークを選択。
ウエイトを「1」に設定。
このウエイト = 1設定がないと動かないので注意。
２つ目以降のレイヤーはウエイトが1じゃないと動きません。
一番最初のレイヤーは自動でウエイトが１になってます。
これでレイヤー影響度が1の状態でアニメーションコントローラーが合成されます。
→ 正しく動くギミックになります。
ボーンや表情のアニメーションを作る（パスの絶対的指定）
MA Merge Animatorのパスモードを絶対的にするとアバター上部の階層から記録が始まります。
こんな感じのイメージです。
※Sig_AddBreathにMA Merge Animatorを刺してます。
このパスの構造や名前が１つでも変わると動かないので注意。
絶対的で記録を行う場合はアニコンをアバタートップ階層に刺します。
するとヒエラルキー上の上にある階層のモノが記録されます。
この絶対的記録は下記の２つで使えます。
・名前がある程度共通しているヒューマノイドボーン
・特定のアバター専用の設定（表情など）１つ目の用途はヒューマノイドボーンのアニメーション作成。
ヒューマノイドボーンはアバター製作者側である程度命名規則が決まってます。
この名前通りのアバターであれば動きます。
たまに違う名前で設定してるアバターがあるので注意。
全てのアバターに完全に対応は難しいです。
ヒューマノイドボーンのアニメーションはUnityで作るのは難しいです。
値が良くわかないことになってます。
なので制作時はBlenderを利用。（上級者向け）
もしくはUnityのアニメーション生成ツールの利用をおすすめします。
もう１つの用途は「○○専用ギミック」の作成です。
あるアバター専用と割り切れば、名前の不一致問題を気にしなくて良くなります。
顔のメッシュは多くの場合で「Body」という名前になってます。
こちらを選択。
そして中にあるシェイプキーを操作することで「表情アニメーション」を作成できます。
あとはこれまで紹介したギミックの作り方を元に動かすようにします。
（アニメーションコントローラーのステート設定）
以上がボーンや表情のアニメーションを作る（パスの絶対的指定）の解説です。
Radialでアニメーションの再生速度を変える
ラジアルメニューはフレーム位置だけでなく再生速度も変えれます。
まず適当なアニメーションを作りループ再生を有効化。
アニメーション素材はこちらのものを使用。
アニメーションの再生速度は「速度」×「乗数」で決まります。
ここでは速度を5、乗数をラジアルのパラメーター入力に設定。
この状態で初期値を「0.2」に設定。
すると5×0.2＝1で等速再生になります。
この状態でラジアルメニューを動かすと乗数が変わります。
↓これでアニメーションの再生速度を変えれます。
この仕組みはヒューマノイドボーンの名前が一致してるアバターであれば使いまわせます。
別アバターに移植。
幽狐さんでは動きました。
以上がRadialでアニメーションの再生速度を変える方法です。
ヒューマノイドボーンの特定パーツを動かなくする（アバターマスク）
ヒューマノイドボーンを動かした際、たまに意図しない動きをすることがあります。
たとえば右手を動かしたいだけなのに左手が動いたり…
そのような時に使えるのがアバターマスクです。
これを設定すると特定のパーツだけ動作しない設定が作れます。
アバターマスクはアニメーションコントローラーのレイヤーに差し込みます。
レイヤーの歯車マーク → マスク右側の２重丸を選択。
これでマスクを読み込んで使います。
以上がその他の細かな設定解説です。
まとめ
今回はModular AvatarでRadialを使ったギミックの作り方を紹介しました。
・MA Menu Itemのタイプを「Tow Axis Puppet」にすると2Axisメニューが使える
・Tow Axisはジョイステック操作で縦と横の値を取得する処理
・MA Parametersを使い縦と横の操作を-1.00～1.00に加工する
・パラメーターの情報をアニメーションに送りコントローラーで引き出す
・コントローラーのステートにBlendTreeを設定して複数アニメーションを操作する
・あとはアニメーションの配置などを調整してギミックを作る
・アニメーション作成時はアニメーションコントローラーを刺す位置に注意
また他にもModula AvatarやVRChatについて解説してます。
ぜひ、こちらをご覧ください。
コメント