[VRChat] Avatars3.0で物を出し入れする (EmoteSwitchみたいなもの)
この記事は以下に移行しました。今後の更新は以下でおこなわれます
https://gatosyocora.net/posts/vrchat_avatars3_action_switch/
はじめに
これまでのアバター(Avatars2.0)では
Emote(エモート)機能でオブジェクトを出したり、消したりするギミック（通称：EmoteSwitch）がありました。
Avatars 3.0ではアクションメニューを拡張してボタンを追加することで、
そのボタンの操作によってオブジェクトを出したり、消したりできるようになりました。
これはEmoteSwitch(エモートスイッチ)に比べて、
- 単純な設計で実装できる
- 後からインスタンスに来た人にもオブジェクトの状態が同期する
- 多くのオブジェクトの出し入れを管理できる
- ワールドを移動してもオブジェクトの状態が維持されるようにできる
などメリットがいくつもあります。
この記事ではAvatars3.0のアクションメニューのToggleボタン操作によって、
後から来た人にも同期するようにオブジェクトを出し入れするギミック(以下、ActionSwitch)を実装する方法を解説します。
[2020/8/31]
2つ以上の物を入れ替えるときに一瞬同時に出てしまう問題を解消する方法を追記しました。
[2021/1/10]
WriteDefaultsの注意について追記しました。
[2021/3/26]
ギミックに使用するParameterの種類をIntからBoolに変更しました。
WriteDefaultsがオフを想定した内容に変更しました。
動作確認環境
- Unity 2018.4.20f1
- VRCSDK3-AVATAR-2021.03.22.18.27_Public.unitypackage
実装する手順
この記事では実装手順の紹介なのでCubeを使ってオブジェクトの出し入れを紹介します。
他のもの（服や武器など）の出し入れの場合は本記事のCubeの部分を置き換えて実装してみてください。
【注意】（2021/1/10, 3/26追記）
以下は各StateのWriteDefaultsがオフ(チェックが入っていない)を想定しています。
オンとオフが混在している場合、ギミックがうまく動作しないことがあるので注意してください。
大まかな手順
- FXに設定されたAnimatorControllerに新しいLayerを追加する
（これに対してStateを追加したりしていく）- weightが1になっているか確認
- 初めから存在するEntry, AnyState, Endに加えて、新しく以下のStateを追加する
- CubeOFF : Cubeが出ていない状態（デフォルト状態）
- CubeON : Cubeが出ている状態（アクティブ状態）
- 各StateのWriteDefaultsをオフ（チェックが入っていない状態）にする
- Entry->CubeOFF->CubeON->Endとなるように遷移の矢印を追加する
- AnimationParameterにBool型の「ActiveCube」というパラメータを追加する（初期値false）
- 遷移の矢印に以下の設定をする
- CubeOFF -> CubeON
- Conditions : ActiveCube true
- Has Exit Time : false
- Transition Duration(s) : 0 [2020/8/31追記]
- CubeON -> End
- Conditions : ActiveCube false
- Has Exit Time : false
- Transition Duration(s) : 0 [2020/8/31追記]
- CubeOFF -> CubeON
- CubeONに以下のようなAnimationClipを設定する
- CubeのActiveをtrue (表示) にする
- 0フレーム目にのみキーを持つ
- CubeOFFに以下のようなAnimationClipを設定する
- CubeのActiveをfalse (表示) にする
- 0フレーム目にのみキーを持つ
- CubeのデフォルトのActiveはfalse (非表示) にしておく
- Expression ParametersにBool型の「ActiveCube」というパラメータを追加する
- Expressions Menuに以下のようなControlを追加する
- Type : Toggle
- Parameter : ActiveCube
1. ActionSwitchの実装の準備
VRCAvatarDescriptorのPlayable LayersのFXに設定されたAnimatorControllerをダブルクリックして選択します。
（まだ設定されていない場合、Assets/VRCSDK/Examples3/Animation/Controllersにあるvrc_AvatarV3HandsLayerを複製してここに設定してください。）
次に、選択された状態でAnimatorウィンドウを開きます。
（Unity上部のWindow>Animation>Animatorで開けます。）
左上にある「+」を押して新しいLayerを作成します。
Layerには分かりやすい名前をつけてください。
今回はCubeを出すのでCubeという名前をつけました。
Debugメニューで文字化けしてしまうため、日本語ではなく英語の名前にしたほうがよいです。
次に右のほうにある歯車のマークをクリックして、
以下の画像のようなLayerの設定画面を開きます。
Weightの項目を0から1に変更してください。
このようにLayerのWeightを1にしないと、
そのLayerでの変更はアバターに反映されないので注意が必要です。（よく忘れがち）
これで新しいギミックを作成する準備は完了です。
この流れは今回紹介するActionSwitchだけでなく、
多くのギミックを新しく実装する手順に含まれる操作です。
2. ActionSwitchの実装
今回はActionSwitchを使って、
Cubeを出したり、消したりしていきます。
以下の画像が完成したときのStateとParameterです。
これを目指して作っていきます。
2.1 Stateの作成と設定
このギミックはCubeが出ている状態と出ていない状態の2つの状態でできています。
先ほどの画像では
- 橙色のStateがCubeが出ていない状態(デフォルト状態)
- 灰色のStateがCubeが出ている状態(アクティブ状態)
のようになっています。
まず、まだCubeを出していないデフォルト状態を作成します。
何もない場所で右クリックして、
Create State>Emptyで新しいStateを作成します。
同じ手順でCubeが出ているアクティブ状態のStateも作成します。
それぞれのStateをクリックするとInspectorに詳細が表示されます。
ここの名前部分を選択して、それぞれのStateを分かりやすい名前にしておきましょう。
Debugメニューで文字化けしてしまうため、日本語ではなく英語の名前にしたほうがよいです。
CubeOFF : Cubeが出ていない状態（デフォルト状態）橙色
CubeON：Cubeが出ている状態（アクティブ状態）灰色
また、VRChat公式ではWriteDefaultsはオフを推奨しているのでこちらもチェックを外しておきましょう
次にState同士を矢印でつないでいきます。
CubeOFFのStateを右クリックして、Make Transitionを選択します。
すると矢印がついた白線がマウスに追従するのでその状態でCubeONのStateをクリックします。
これでCubeOFFからCubeONへの矢印（遷移, Transition）が追加されました。
同じように今度はCubeONからExit（赤色のState）に向けて矢印を追加します。
2.2 Parameterの作成と設定
次にStateから別のStateへの移動の条件を設定するためにParameterを設定します。
Layersの横にあるParametersをクリックして、
そのAnimatorControllerに設定されたAnimationParameterの一覧を表示します。
左上にある「+」をクリックして新しいParameterを追加します。
今回はオブジェクトを出し入れするのでBoolを選択します。
名前はActiveCubeにしました。
特にこれでないといけないわけではないですが、
以降でActiveCubeを選択・設定するときに同じ名称になるようにしてください。
また、日本語ではなく英語の名前にしたほうがよいです。
次にLayersを押してLayer一覧に戻り、記事序盤で作成した「Cube」レイヤーを選択します。
CubeOFFとCubeONの間にある矢印をクリックします。
するとInspectorに矢印の詳細が表示されます。
Conditionsの「+」をクリックして新しい項目を追加します。
左から順にActiveCube, trueに変更します。
これでCubeOFFにいるときにActiveCubeというParameterがtrue(チェックが入った状態)になったらCubeONに移動します。
さらにHas Exit Timeのチェックを外します。
[2020/8/31追記]
また、SettingsにあるTransition Duration (s) を0にします。
これはStateの遷移にかける時間で、0より大きい場合、State間の状態が補完されながら遷移されます。
これでCubeが出ていないデフォルト状態からCubeが出ているアクティブ状態にするギミック部分はできました。
次にCubeが出ているアクティブ状態からCubeが出ていないデフォルト状態に戻す部分を作っていきます。
CubeONのStateとExitのStateの間にある矢印を選択します。
先ほどと同じような手順でConditionsとTransition Duration, Has Exit Timeを以下のように設定します。
Has Exit Time : チェックを外す
Transition Duration (s) : 0
Conditions : ActiveCube false
2.3 Animationの作成と設定
アバターにCubeを追加します
(説明用にCubeを追加しているので、
このCubeが今回出し入れしたいものだと考えてもらって大丈夫です)
Cubeの代わりにするオブジェクトにAnimatorがついている場合には削除してください。
2.3.1 表示状態にするAnimation(CubeOn)の作成
まず、Projectウィンドウで右クリックをして、
Create>AnimationでAnimationClipを作成します。
Cubeを出すアニメーションなのでCubeOnという名前にしました。
次に先ほど触っていたAnimatorControllerに戻って、
CubeONのStateを選択します。
CubeONのmotionに先ほど作成したCubeOnというAnimationClipを設定します。
Animationの設定のために一時的に
アバターのルートにあるAnimatorのControllerに
FXに設定されているAnimatorControllerを設定します。
VRCAvatarDescriptorが設定されたオブジェクトを選択している状態で
Animationウィンドウを開きます。
AnimationウィンドウはUnity上部のWindow>Animation>Animationで開けます。
左側にあるPreviewの下をクリックすると、
先ほどAnimatorに設定したAnimatorControllerが持つAnimationClipの一覧が表示されます。
先ほど設定したCubeOnを選択してください。
Previewの横の録画ボタンをクリックすると、録画モードが開始されます。
この状態で出現させたいオブジェクト（本記事ではCube）を選択します。
そしてInspectorの左上にあるチェックマークを入っている状態にします。
最初から入っている場合はチェックボックスを一度押して再度押して入っている状態にしてください。
下の画像のようになれば大丈夫です。
すると先ほどのAnimationウィンドウにCubeのIs Activeを操作するキーが0:00のところに追加されました。 これがチェックマークが入っている状態になっていることを確認してください。
これで録画は完了なので、Previewボタンを一度押して録画モードを停止してください。
これでAnimationの準備は完了なので、AnimatorからAnimatorControllerを外しておきましょう。
Controllerの右の方にある二重丸を選択して一番上にあるNoneを選択すると外すことができます。
Cubeは最初は消えている状態にするのでチェックを外して消しておきましょう。
2.3.2 非表示状態にするAnimation(CubeOff)の作成
次にCubeを初期状態の非表示状態にするAnimationを作成します。
先ほど作成したCubeOn.animを選択した状態でCtrl+Dを押すと複製されます。
複製されたCubeOn 1を右クリックしてRenameでCubeOffという名前に変更します。
Animatorウィンドウを開いて、CubeOFFステートのMotionに複製したCubeOffを設定します。
CubeOff.animを選択した状態でAnimationウィンドウを開くとその内容が見れます。
Cube : Game Object.Is Active 1のようになっているので、1のところをクリックし、0に変更します。
これでCubeを非表示状態にするAnimationファイルになりました。
これでギミック部分は完成しました。
2.4 ExMenuの設定
最後にメニュー操作でオブジェクトを出し入れできるようにします。
VRCAvatarDescriptorのExpressionsのParametersに設定しているExpressionParametersをダブルクリックして選択します。
設定されていない場合はCreate>VRChat>Avatars>Expression Parametersで新しく作成して設定してください。
左上のAddを押すと新しい項目が増えるのでNameにActiveCubeと入力してTypeはBoolを選択してください。
ここの名称はAnimatorControllerのParametersで新しく設定した名称と同じにしてください。
（大文字小文字も同じになるように）
DefaultはCubeが最初出ていない状態なのでチェックがない状態にします。
Savedは別のワールドやVRChatの再起動でもCubeが出ている状態を維持するためにチェックがある状態にします。（ここはお好みでどちらでも良いです）
次にVRCAvatarDescriptorのExpressionsのMenuに設定しているExpressionsMenuをダブルクリックして選択します。
設定されていない場合はCreate>VRChat>Avatars>Expressions Menuで新しく作成して設定してください。
Add Controlを押して新しい項目を増やします。
既に項目が8個ある場合は追加できないので、
ExpressionMenuを新しくしてSubMenuとして追加することを検討してください。
NameとIconは分かりやすいように設定してください。
TypeはToggle, ParameterはActiveCube, Boolに設定してください。
これですべての設定が完了です。
VRChatにアップロードしてCubeを出してみましょう。
3. 注意点（おさらい）
- 新しく作成したLayerはweightが0になっているので1にする
- オブジェクトの出し入れのギミックはFX Layerに設定したAnimatorControllerに追加する
- Expression ParametersとAnimatorControllerのParameterの名称は完全に同じにする
- AnimatorControllerにあるStateのWriteDefaultsはオフ（チェックが入っていない状態）にする
4.応用編
デフォルトで表示されているものを消す
本記事で紹介したものは「消えているものを表示する」でしたが、
その逆も紹介した方法の応用で実現できます。
おおまかな設定手順は同じで以下のものを変更します。
- 出し入れするオブジェクトの左上のチェックを入れて表示されている状態にしておく(工程)
- 設定するAnimationClipでIs Activeにチェックをはずす(工程)
- 1を0に変更ではなく、0になっているので1に変更する(工程)
初期状態と変更後にどういう状態にするかを変えただけです。
これで「表示されているものを消す」というギミックになります。
さいごに
今回紹介した方法は個人的に最小構成でActionSwitchを実装する方法だと思います。
Expression Parametersの節約や初期状態でオブジェクトが出ているようにする方法など、応用する方法がいろいろあります。
また、これだけ長い手順なので毎回設定するのは大変です。
同じようなことを実現する方法としてこのようなツールも出ているので使ってみてもいいかもしれないです。
いろんな方が作っておられるので用途と自分にあったツールを選ぶのが良いと思います。
