BlendTreeで目ン玉をグルグル動かす奴
はじめに
表情作成で視線を横にズラしたいのだが有識者助けて
— 6t@KawaiiFuguri (@unko_6t) September 13, 2021
目にボーンはあるが、そこの角度の数値を変更出来ないんだよね
尚、VRoid
金玉の人が困ってたので試しにExpressionMenuで視線を制御する奴を組んだ
そんでまあ「誰か配布してるか解説記事書いとるやろｗｗｗｗ」と思って特にそれから発展とかなかったわけだけど
たまにフレンドとかに見せるとわりとウケるんでTwitterとNoteとBoothを雑に検索しても解説とかが見つからなかったので最近Twitterが料理垢になりそうなのを軌道修正するため、Note解説を書く事にした。（あくまでも雑検索で出なかったという話でしかない、いいね？）
5000文字オーバーの解説なんか読んでられるか現物見せろって人は末尾のオマケの所から落としたらええで
アバターを用意
ひとまずこちらUnity2019.4.31fにVRCSDK3-AVATAR-2021.09.30.16.19_PublicをImportした後、拾い部屋さんのVR用3Dモデル「2A-7/LC (ニアナ/ライトカスタム)」をがとーしょこらのおみせさんのVRCAvatars3ToolsでAvatar3.0に対応させたのちEyeTrackingの設定を行ったものが
こちら↓にありますのでこれを使用していきます。
https://www.dropbox.com/s/rpxu0g4zvdbqjf2/2A-7s3.0Edit.unitypackage?dl=0 (CC BY 4.0)
UnityとVRCSDKは付属していないのでそれぞれ公式サイトからダウンロードしてきて下さい。
アップロードして鏡の前でポーズを取るなどし、目が動いていればオッケーとする。
※基本2パターンバリエーション4パターンの合計8パターンも入ってるので別のモデルが使いたいならこのリンクからダウンロードして使うんやでhttps://hiroiheya.booth.pm/items/1381874
目線アニメーションの作成
作成といっときながら何なんですがAnimation作成そのものの説明はめんどくさいので省きます。他に多分記事あるし・・・。
「Humanoid RigのLeft Eye/Right Eyeが設定されて動くようになっているアバター」であれば多分流用できるので作ったのを置いときます。
https://www.dropbox.com/s/gcmrjkf6rp6upwo/EyeMoveAnimations.unitypackage?dl=0
ボーンのTransformじゃなくてHumanoidAvatarに対するアニメーションを作成するってのがポイントになってます。
「別のアバターに使うとアヘ顔になるんすけど・・・。」みたいなケースではアニメーションのここんとこの数値をいいぐらいに調整して下さい。詳細はググれ
「Empty」は本当に何も設定してない単なる空のアニメーションです。
後で使う。
Animator Controllerの準備
まず「Assets\VRCSDK\Examples3\Animation\Controllers」にある「vrc_AvatarV3IdleLayer.controller」を探します。
見つけたら適当に（CTRL+Dをするなど）複製して名前をわかりやすく変更してどこかわかりやすいフォルダーに移動させておきます。
上の例では名前を"Idle"に変更し、アバターのフォルダ内に”EyeMover”というフォルダを作って突っ込みました。
突っ込んだAnimatorをダブルクリックするとAnimator編集ウィンドウが出るはずなので
＋を2回押してレイヤーを2つ作り、名前をわかりやすいように変更(名前ダブルクリック)しておきます。
毎回忘れるんですけどWeight1にしとかないとアップしたときにギミック動かねぇ～ってなるのでここは毎秒確認しましょう。例ではEyeMoveのWeightを変更していますがSwitchEyeTrackingの方も同様に。
Animator編集ウィンドウの左上あたりのParametersタブを押してパラメータを追加します。
3つ必要なのでここはもうコピペでBool型の「DisableEyeTracking」とFloat型の「EyeX」「EyeY」を用意してください。
一旦スタジオにお返しします。
BlendTreeを設定
なんで標準で空のBlendTreeアセットファイルが作れないのかが謎すぎてキレそうになるんですがキレてても仕方がないのでVRCSDK内のをコピーして弄る方向で行きます。
先程のAnimatorの時と同じように適当なBlendTree(上の画像では立ちモーション用のBrendTree)を複製して名前を変更し、自分のフォルダに突っ込みましょう。
そしてコピーしたりしてる間にもう見たかとは思いますがBrendTreeを選択中
Inspectorにこんな感じの複雑そうなので出てると思いますので下の方にスクロールして・・・
ややこしいので全部一旦消しましょう
スッキリしたので「＋」ボタンを押して「Add Motion Field」を5回選択して5つのフィールドを用意し、Parametersを「EyeX」「EyeY」に変更してください。
多分こんなかんじになるはずです。ParametersにEyeX、EyeYがでてこない場合はさっきコピーしてきた「Idle」アニメーターを開いてないのが原因です。もっぺんダブルクリックしてきてください。
一番最初にダウンロードなり作成してもらったアニメーションの出番がようやく来ました。
各モーションをフィールドに突っ込み、座標を設定してやります。
できました。このBlendTreeの内容を解説すると、
Parametersに設定した2つのパラメーターはFloat型なので、-1.0から1.0の値を取ります。
「EyeX」を横軸、「EyeY」を縦軸として2つのパラメーターの数値に基づいて5つ設定したアニメーションを合成したものを出力するという仕組みなわけです。
PosXが-1.0、PosYが+1.0なら目を左に向ける「EyeLeft」と下に向ける「EyeDown」が合成され、目が左下に向くという具合になります。
多分わかりにくいと思うので動画を用意しました
BlendTreeにある赤い点をマウスでドラッグすればパラメータのテストができます。
プレビューのとこが衝突実験おじさんなんすけどみたいな向きには実は
こうすると変更できるんでおすすめです。
Animatorに投入
ようやく半分ぐらいは終わった感じが出てきました。
先程の”Idle”Animatorに戻りましょう。
EyeMoveレイヤーを選択し、適当な開いてる所にEyeMoverブレンドツリーを投げ込みましょう。オレンジのStateMachineが作られるはずです。
VRChatにおいてはWrite Defaultsパラメーターの使用は非推奨となっていますので、今出来たStateMachineを選択してInspectorからチェックを外しておきましょう。
だんだん面倒になってきたので基本操作的なところはもうすっ飛ばしてもいいですよね？いいよ。ありがとう。
SwitchEyeTrackingレイヤーを選択し、空いたところに適当に「Empty」アニメーションを2回投げ込み、名前をわかりやすいように変更し、Write Defaultsのチェックを外す。
※Write Defaultsを外す際にモーションなしにすると不具合の原因になる
そしてオレンジのState Machineを右クリックし、”Make Transition”で矢印をつなぎ、「Entry→オレンジ→灰色→Exit」の流れを作ります。
Enableを選択してInspector下部、”Add Behaviour”を押して、”VRCAnimatorTrackingControl”を追加しましょう。
こんな具合のコンポーネント的なものが追加されます。
ここで変更するのは”Eyes & Eyelids”のチェックボックス一つだけです。
「VRCAnimatorTrackingControl」は
「フルトラでSitした時に足を動かさない」だとか
「VALVE Indexコントローラーでピースした時にアニメーションを再生する」とかの時に使う奴で、
今の設定は目とまぶたの動きをスタジオ（VRChatのトラッキングシステム)にお返しする奴で、つまるところギミックを解除する状態ですね。
次にDisableです。
ほぼ同じですがチェックボックスの位置が違います。
こちらがギミックを起動する設定になり、目とまぶたが指定されたアニメーションに従うようになります。
最後に遷移条件を設定しましょう。「DisableとEnableの間」「EnableとExitの間」の矢印をクリックしてそれぞれ設定します。
どんどん駆け足になりますが左右がそれぞれ別の矢印の設定です。どっちがどっちかは名前見て下さい。
”Has Exit Time”は別にチェックあってもなくてもいい気もしますが、パッパッと移動してほしいときはオフで良かったはずです。切っておきましょう。
重要なのは”Conditions”です。右下あたりの「＋」をクリックするとParameterとそのParameterの値を設定する欄が出現します。
左側、「DisableからEnableの間」の矢印のConditionsは
「”DisableEyeTracking”がTrue（チェックが入っている・オン状態）ならこの矢印を通過して次のマスに向かう」という意味になります。右側はその逆ですね。
するとどうなるのかはちょっと文で説明しづらいので動画を見て下さい。
青いバーが動いているのが今再生されているステートです。
動画では左上のParameter欄のチェックボックスを直接操作することでアニメーターの遷移をコントロールしています。
Exitマスに到達した場合、そのままEntryに帰ってくるという基本ルールを把握していればイメージはしやすいと思います。
今回は関係ないですが物を出し入れしたりするギミックにそのまま使える奴です。（AnyState使う派もいらっしゃるのは把握してますがわたしはわからないので割愛します。）
これでAnimatorの中身は完成しました。あとはVRC_AvatarDescriptorに戻り
Playable Layersの”Additive”あたりに先程のIdleアニメーターを突っ込んでやればAnimatorは終わりです。あと一歩です。
Expressionsの作成
久々のEyeMoverフォルダに戻ってきました。
適当に開いてるところを右クリックして”Expression Menu”と
”Expression Parameters”を作ってやりましょう。
既に自分のアバターにはこれがあるんですけど的な向きには、既にお持ちのExpressionsに追加していく形になりますので、注意して追加してみて下さい。バックアップを忘れずに！
作成したExpressionsをAvatarDescriptorに設定してやります。
初期状態では「Customize」となっている部分をクリックすれば枠が出てきます。投入。
まずはExpression Parameterです。先ほど作成した”VRCExpressionParameters”(名前は変えてもいい)を選択してInspectorを見て下さい。
ここが最も重要なポイントなのですが、
「Expression Parameterの名前と型をAnimatorのParameterと同じにする」
これによりExpressionsを操作した結果がAnimatorに認識されるわけです。
"DisableEyeTracking"が"DisableYeahTracking"とかにならないようにコピペするといいでしょう。
右のチェックボックス”Saved”はアバターを変更した後もその値が引き継がれるかどうかという設定なので正直どっちもいいといえばいいですが、
今回のギミックで保存する必要はおそらくないでしょう。OFFです。
ここまで出来ていればExpression Menuはシンプルなもんです。
選択し、「Add Control」で新しいコントロールを追加し、メニュー名を「EyeMover」、Typeを「Two Axis Puppet」各種パラメーターを設定してやるだけです。
Parameterが3つありますが、一番上のParameterにBool型を設定した場合、このExpressionを操作している間は"True"になります。先程のSwitchEyeTrackingレイヤーですね。
下段に並んでいるParameter Horizontal/Verticalはそれぞれ横軸と縦軸の位置が入るパラメーターです。BlendTreeの操作ですね。
最低限のExpressionsの設定はこれだけです。
好みに応じてアイコンなどを追加してもいいでしょう。目玉のマークとか。
動かしてみる
お疲れ様でした！
オマケ
セットアップ完了したやつ
https://www.dropbox.com/s/hs50vbf915vr59r/AvatarEyeMover_Setup.unitypackage?dl=0
VRCSDK3(VRCSDK3-AVATAR-2021.09.30.16.19_Publicを想定)の後にImportしたらええと思う
このアセットには
拾い部屋さんのVR用3Dモデル「2A-7/LC (ニアナ/ライトカスタム)」の一部が含まれており、ライセンスはCC BY 4.0となります。詳細は元アセットの配布ページをご確認ください。