VRChatアバターにアニメーションを大量に設定するのに必要な知識とか機能のまとめ[VRChatアバター改変のすすめ その1]
はじめに
こんにちは。
VRChatを始めて２ヶ月くらいのTKSPです。
初心者の人たちと話す機会が増えて意外とUnity難しい、分からないという話を聞くので、アバター作成に覚えておくと便利なUnityの機能をざっくりと解説しながら、改変例を紹介していきたいなと考えております。
なんとなくで書いているので間違っている部分もあるかと思いますが、UnityでのアニメーションがVRChat上でどのように作用してアバターが動いているのか全体の雰囲気をなんとなく感じ取ってもらえれば幸いです。
今回はアニメーションを設定する方法の解説をしていきたいと思います。デスクトップでアバターを動かしている人たちは必見です。
アバターアップロードの手順は省きますので別の方の記事を参照してください。
note.com
本記事ではUnity 2019.4.31f1を使用します。
こちらのページを確認し、現在のVRChatに合わせたバージョンで作成するようにしてください。
Unityのインストール
こちらのページからダウンロード、インストール、UnityIDの登録を済ませておいてください。
unity3d.com
VRChat SDK のダウンロード
こちらからDownload SDK3 - Avatars をダウンロードしてください
https://vrchat.com/home/download
UnityのVRChatアバター作成に必要なタブ
Unityを起動するといろいろなタブが出てきますが、大雑把に説明します。
Hierarchy
現在のシーンに置かれている物体の一覧が表示される
物体をクリックするとその物体が選択され、一部のタブで操作が可能になる(操作できるタブに関しては後述)
Scene
現在開いているシーンが表示される。
Asset Store
ゲームを作るための素材の購入やダウンロードができる。
素材をVRChatに持っていくためには改変が必要なケースが多いため、VRChat初心者にはお勧めしません。Boothを使用しましょう。
Project
現在のプロジェクトに入っている素材一覧です。
Game
基本使用しないです。(アバターのアップロード時には使用する)
アニメーションやパーティクルを作成中で動作確認をする場合などに使用します。
正しく動くかをアップロード前に確認したりできますが、説明が大変なので省きます。
Inspector
Hierarchyで選択した物体の特性を表示、編集します。
Console
エラーや、開発者用のメモを表示したりするところです。
テキストが赤くならなければ気にする必要はほとんどありません。
Animation
Hierarchyで選択した物体か、Projectで選択したアニメーションの作成、編集を行う場所。
Animator
Hierarchyで選択した物体か、Projectで選択したアニメーションコントローラーの編集を行う場所。
Unityをカスタマイズする
これらのタブはドラッグで自分の好きな位置に移動したり、塊から外して別窓で表示できます。
別窓表示時に誤って消してしまった場合は、メニューにあるWindowから探すことで表示させることが可能です。
よく使うショートカット(覚えておくと便利)
Hierarchyの物体を選択している状態で「ctrl + c 」(コントロールキーを押しながらCキーを押す)コピー
「ctrl + v 」ペースト
「ctrl + z」操作を一つ巻き戻す
「ctrl + y」巻き戻した操作を元に戻す
Hierarchyの何もない場所をクリックした後に 「ctrl + s」 シーンを保存する
Hierarchyの物体やProject内の素材を選択している状態で「F2」 名前の変更
Hierarchyの物体やProject内の素材を選択している状態で「ctrl + d」 複製
VRCSDKのインポート
先ほどダウンロードしたVRChat SDK(VRCSDK3-AVATAR-2021.09.30.16.19_Public.unitypackage)をUnityを開いている状態でダブルクリックします。
すると、以下のようなウィンドウが表示されるのでImportします。
Importが終わるとProjectにVRC SDKが導入され、メニューにVRChat SDK と表示されるようになります。
アバターのインポート
次にアバターを導入します。
Dynamic Bone所持済みの方は先にインポートしておいてください。
VRCSDKと同様に.unitypackageがあると思うので導入してください。
無い場合はProjectでAssetsフォルダを選択した状態で右クリックし、Createから作業用のフォルダを作成します。
その中に.fbxやテクスチャなどをドラッグ&ドロップすれば素材として追加することができます。
今回はネロちゃんを使用します。
booth.pm
改変なしでアップロードする場合は多くの場合は.prefabがあると思うのでそちらをHierarchyにドラッグ&ドロップし、メニューのVRChat SDK -> Show Control Panelから表示されるタブからログインしてBuilderタブのBuild & Publish for Windowsからアップロードできるかと思います。
インポートすると.fbxがあると思うのでそれをHierarchyにドラッグ&ドロップします。
すると、Scene画面にオブジェクトが表示されます。
Scene画面の覚えておくと便利な操作方法
Hierarchyに配置した物体を選択するとInspectorにその特性((コンポーネント)が表示されます。
Transform
その物体の位置、回転、大きさを制御
Animator
その物体のアニメーションを制御
VRC Avatar Descriptorコンポーネントの追加
ここにAdd Componentからvrcと検索してVRC Avatar Descriptorを追加します。
View PositionのEditを押して目線の高さを調整します。額の高さくらいが良いです。
大抵のアバターはLipSync(口パク設定)をAuto Detect!で自動的に設定できるかと思います。
Eye Look は目の向きとまばたきを制御します。
まず、Transformに目のボーンをHierarchyからドラッグ&ドロップで設定し、Scene画面を見ながらRotation Statesの値を調整します。
EyelibsでBlend Shapesを選択し、顔のメッシュをドラッグ&ドロップします。
Blinkで瞬きのアニメーションを設定したら、自動でまばたきするようになります。
Looking Up と Looking Down は - none - で大丈夫です。
ここまでで、アップロードできる設定までは完了しました。
アニメーションコントローラーを作成する
ProjectからAssets > VRCSDK > Example3 >Animation > Controllers内にあるvrc_AvatarV3ActionLayerを複製(ctrl + d)します。
複製したActionLayerは分かりやすいようにRenameし、作業フォルダの中に入れておきましょう。
名称例 : nero_ActionLayer
作業フォルダ例 : TKSP > Nero > Animation
Animatorタブを開いた状態で先ほど複製したActionLayerを開きます。
Animatorタブの操作や内容
操作方法
Sceneと同じでマウスホイールで拡大縮小、マウスホイールクリック状態でドラッグすると平行移動ができます。
Layersタブ
レイヤーを管理
Paramtersタブ
アニメーションを制御するフラグを管理する。
フラグは、ある条件を達成しているかを管理するものです。
State
アニメーションが設定できるブロック。
Transition
矢印。アニメーションからアニメーションへどのように切り替わるかを制御する。
Stateの追加
2つの方法があります。
何もないとこで右クリック、Create State > Empty
AnimationファイルをProjectからドラッグ&ドロップ（次回の記事で説明すると思います）
Transition の追加
Stateの上で右クリック Make Transition で矢印を伸ばしたいStateをクリック
Transitionの削除
削除したい矢印を選択した状態でInspectorから繋がっているStateを選択し削除
ActionLayerの仕組み
大雑把に解説します。
オレンジ色のStateを選択してください、「WaitForActionOrAFK」
これがスタート位置になります。
InspectorのMotion内にあるファイルをクリックすると、ProjectのAssets > VRCSDK > Example3 > Animation > ProxyAnimが開きます。
そのファイル(.anim)を選択するとInSpectorの画面が変わると思いますが、ここでアニメーションの確認ができます。
デフォルトでは黒い服着た人ですが、Hierarchyに置いてあるモデルをドラッグ&ドロップすることで好きなアバターに切り替えることができます。
オレンジのStateから上に伸びている矢印を選択してください
- 矢印が繋がっているState
- 時間をかけて矢印を通るか(後述します)
- フラグです。この場合、VRCEmoteが1以上8以下でこの矢印を通るとなります。Greaterは「~より大きい」、Lessは「~より小さい」です。
- 後述します。
次にstand_clap_loopの両端の矢印を見てみましょう。
Equalはイコール(等しい)、NotEqualはノットイコール(等しくない)です。
左のフラグがVRCEmoteが2と等しい時、右のフラグがVRCEmoteが2じゃないときに矢印を通るのが確認できます。
VRCEmoteはParamtersタブでフラグとして登録されていますが、VRChatで切り替える方法を解説します。
先ほどアバターに追加したVRC Avatar DescriptorコンポーネントのPlayable Layersに作成したアニメーションコントローラーを設定します。
作業フォルダにExpression ParametersとExpressions Menuを作成します(名前は分かりやすいようにしておくと良いです)
VRC Avatar DescriptorコンポーネントのExpressions に設定します。
下記の画像のように、ExpressionParametersのInspectorを見てみるとすでにいくつか設定されています。
ここに設定されたものをVRChatのメニューから操作できるようになるので、NameとTypeがActionLayerのParamertersタブのものと一致するか確認しましょう。
今回はVRCEmoteを操作したいので一致していて大丈夫そうですね。
- ExpressionParametersを選択
- NameとTypeを確認する
- AnimatorのParametersタブを確認
- Typeの種類はここで確認できます。(Typeの種類は後述します)
- Nameと一致しているのを確認
誤って追加した項目は右クリックでDeleteを表示して削除できます。
Typeの種類
int 整数 0~255までを管理できるフラグ
float 少数 -1.00 ~ 1.00 を0.01刻みで管理できるフラグ
bool 真偽 0(偽)と1(真)を管理できるフラグ(VRChatで制御できるフラグは上限があるので少ない数字で表現できる分岐の場合にコスパがいい)
次にMenuを開きます。
Add Controlsで項目を追加します。
Name に手を合わせると入力します。
TypeをToggleに変更します。
ParameterをVRCEmoteに変更します。ここで設定できる項目はExpressionParametersで設定した項目であることが分かります。
Valueに2を設定します。
この状態でアップロードして動かしてみましょう。
すると、Expressionsに追加したToggleが表示されていることが確認できます。
ToggleはOnの時に設定したパラメータを指定の数字に、Offにしたときに設定したパラメータを0にするメニューです。
つまり、OnでVRCEmoteに2,OffでVRCEmoteに0が設定できました！
さて、ExpressionParametersに設定してはいけないParametersも存在します。
それは既に定義しているパラメーターです。
詳しくはこちらを参照
公式(英語):https://docs.vrchat.com/docs/animator-parameters
翻訳(非公式)
ankoro199.hatenablog.com
こちらはAnimationController(ActionLayer)のParameterに設定しておくことでメニュー以外からの操作ができるパラメーターの一覧になります。
ミュートやAFKになったときに特別なアニメーションをさせることができそうですね！
次に好きなアニメーションを設定してみましょう。
キャラアニメーションはこちらを使用させていただきます。
booth.pm
- アニメーションを変更したいState選択
- StateのMotion欄に再生したいアニメーションを設定
はい、これで拍手のアニメーションが設定したアニメーションで置き換わりました。
Has Exit Time について
次にstand_waveのStateの右矢印を見てみましょう。
stand_clap_loopと違ってVRCEmoteが1じゃないときに矢印を通るフラグが設定されていないことが確認できます。
しかし、Has Exit TimeがOnになっているので、時間の経過で矢印を通るのです。
Settingsの中身を見てみます。
Exit Timeが0.6秒。これは矢印の左接続Stateが開始されてから0.6秒のタイミングで矢印を通ることを指しています。
Transit Duration 0.25秒。これは0.25秒の間、前のStateを混ぜながら次のStateを開始することを指しています。
Transition Offset 0秒 矢印を通るのを開始した際に、次のアニメーションが混ぜられるため開始しているのですが、矢印を通るタイミングでの次のアニメーションの再生位置を指定できます。(前のアニメーションとうまく混ぜられるように設計するため？)
詳しくは公式のリファレンスを参照してください。
アニメーション遷移 - Unity マニュアル
さて、例えば、先ほど設定したEmote2の時と同じようにToggleでメニューを登録してしまうと問題が発生します。
それは、ToggleがOnになっていてもアニメーション終了判定を通ってしまいループしてしまうからです。
- Onになったら通る
- Offになっていなくても0.6秒経過したら通る
このようなときはToggleではなくButtonを使用しましょう。
ボタンは押している間はOn、離している間はOffになります。
つまり、Onの時に設定したパラメータを指定の数字に、Offにしたときに設定したパラメータを0にするメニューです。
OnでVRCEmoteに1,OffでVRCEmoteに0が設定できました！
さて、ここまで来たらアニメーションの設定はなんとなく分かったのではないかと思います。
Stateの追加方法やTransitionの追加方法も途中で紹介していたりするので見落としてなければできるはずです。
しかし、ActionLayerには罠があります。
それはVRCEmoteの9~16は座っているときのパターンで既に使用されているので追加したらうまく動かなくなることです。
上方向のTransitionに17~の矢印を追加するのが正解になります。
Transitionは同じ個所に複数追加することもできるのです。
先ほど、VRCEmoteが1以上8以下の矢印があったと思いますが、同じ矢印に条件を複数設定した場合は条件A,条件Bとすると、積集合A∩Bとなります。(AかつB)
同じ場所、同じ方向に矢印を2本以上引いた場合、それぞれの矢印をCとDとすると、和集合C∪Dとなります。(CまたはD)
Stateをたくさん追加するのが大変だと思ったので17~58を使用できるようにしたActionLayerを用意しておきました。
https://tksp110.booth.pm/items/3323298
さて、こちらにレイヤーはStateを作る際にSub - State Machineを作成しているのですが、これはStateを入れることができるフォルダのようなものです。
Stateが多くなると、矢印がごちゃごちゃしてしまうので、きれいにしたい場合はフォルダ分けしておくと見やすくなります。
こちらをインポートしてアニメーションを設定し、Toggleでそれぞれの番号に合ったメニューを設定しておけばアニメーションを沢山設定できます。
その際、MenuにはToggleやButtonが8個までしか設定できないことが分かるかと思いますが、その場合はメニューを増やします。
ButtonやToogle以外にSub Menuという項目があるので、こちらを選択すると、メニューの中にメニューを作成することができます(つまり無限に増やせる)
EmoteMenu1をドラッグドロップして登録。
登録したメニューをダブルクリックするとそのままそのメニューの設定ができるので覚えておくと便利です。
また、Parameterはメニューが開かれているときにOn、メニューが閉じられたらOffになります。上級者がアニメーションコントローラーを凝るときに使えそうですね！
