Avatar Dynamicsでハイタッチを実装してみたら思いのほか楽しくて、みんなもやってみようよということで、手順をまとめてみました。
(動画は自分の手とか顔叩いてますが、そこらへんの対象も細かく設定できます。)
ぶっちゃけAvatar Dynamicsの情報は公式ドキュメントとSDKに入ってるサンプルシーンをみればだいたい分かりますが、Animatorの設定が必要でそこが意外とハードルが高めなので、全然わからん人向けに、細かいことは置いといてとりあえず手順通りやれば実装できるように書いてます。
各項目について細かく説明したりはしませんので、興味出てきたら各種ドキュメント熟読してみてね。
執筆時の3月12日現在、Avatar Dynamicsの機能はOpenBetaなので、導入は自己責任でお願いします。
正式リリースされたら記事の更新はかける予定です。
参考資料
1.前準備
SDK3のインポート~アバターの基本的なセットアップは終わっているものとします。そこらへんはググって。
2022年3月12日現在、Avatar DynamicsはOpen betaなので、VRChatの公式DiscordからBeta用SDKを落とす必要があります。以下の手順でBeta用SDKを入手して下さい
・VRChat公式ページ→COMMUNITY→DiscordからVRChat公式Discordサーバーに参加
・#open-beta-announcementsチャンネルのそれっぽい投稿を探す(ちょいちょい更新入ってるっぽい)
・SDKs here:~~ って感じでリンクが貼られているので、そこから入手
SDKを入手したら、いつものようにSDKをドラッグアンドドロップして更新したいところですが、
Betaなので、プロジェクトごと複製してバックアップを取ってから更新することをおすすめします。
2.VRC Contact Receiverを入れる
・HierarchyからアバターのArmatureをたどり、ハイタッチを入れたい側の手のひらのボーン(Handとか名前がついてることが多い)を選択
・右クリック→Create EmptyでGame Objectを追加
・手のひらのボーンの子に、Game Objectが追加される
・GameObjectに任意の名前をつけておく(ここではHighFivesReceiverとする)
・High Fives Receiverを選択しInspectorから、Add Component→VRC Contact Receiverを追加する
・Shapeを任意のShapeTypeを選択(だいたいSphereでよい)
・Radiusで大きさをちょうどよい大きさに調整。アバターのスケールによってはクソデカSphereになっていることもあるので注意。
・手のひらの中央~ちょっと手のひらぐらいの位置になるようにTransformからPosisionもうまいこと調整
・Filteringを設定する。Allow Othersのみチェック入れるのがおすすめ。
・Allow Selfにチェックを入れると、トップの動画のように拍手ができる(しかし、結構誤爆するので注意)
・ただ、Allow Othersのみだと一人で動いてるかどうかのテストができないので、最初はAllow Selfにも設定しときましょう。
・Collision Tagsを設定する。Addを押下し、プルダウンからHandを選択する
・これで、他人のHandで反応する、という設定になる。(Headを追加すると頭を殴ることができるが、これまた誤爆しやすいので注意)
・Receiverを設定する。ReceiverTypeはOn Enterにする。
・Min Velocityは0.7~0.9ぐらいで設定する。実際に使いながら値調整するのがおすすめ。
・これで、Min Velocityで設定した値より速い速度でコライダーに入らないと反応しないように設定できる。(小さな値にすると、ゆっくり触れても反応する)
・Parameterに任意の値を入力する(ここではhighfivesとする)のちほどAnimatorの設定で使う値なので、忘れずに入れる。
3.各種素材を仕込む
・Animatorの設定(ラスボス)前に、必要な素材系を仕込んでおきます。
AudioClip
・まずハイタッチした時に鳴らしたい音源をUnityにインポートします。
・個人利用の範囲なら、各種無料効果音サイトなどから音源を探すとよいです。
・もし探すのがめんどくさかったら自分で使っているやつを配布するので、DLして使っても良いです(読者サービス)
・容量と負荷削減のために、AudioClipは以下の画像のように設定しました。あくまでも設定は一例なので、興味ある人はUnity公式ドキュメント参照
AudioSource
・次にAudioSourceを仕込みます。
・HierarchyのHighfivesReceiverの隣にAudioSourceを追加します。
・PositionはHighFivesReceiverと同じ位置にしときましょう。
・任意の名前をつけておきます(ここではHighFivesSoundとする)。
・HighFivesSoundを選択し、InspectorからAudioSourceの設定をします。
・AudioClipに先程取り込んだ音源を入れます。
・Play On Awakeにチェックが入っていることを確認します(デフォルトでチェックが入っている)
・Volumeは0.5~0.6ぐらいにしときます(実際に使いながら調整しましょう)
・あとの項目は今回は特に触らなくて大丈夫です。​​​​​​​
・これだけだと音の範囲がクソデカでやばいので、Add ComponentからVRC Spatial Audio Sourceを追加します
・Enable Spatializationにチェックを入れると、赤いギズモが出てきます。
・Farは2、Nearは1ぐらいで設定しときます。
・あくまでも設定は一例なので、実際に使いながら調整(ry
・詳しくは公式ドキュメント参照
・最後にHighFivesSoundを非Active状態にしといて設定は完了です。
Particle
・音と一緒にParticleが出るとより楽しいのでParticleも仕込みます。音だけ鳴ればいいやって人は飛ばしてもOKです。
・まずはBoothなどで良さげなパーティクルを探します。星とかウィンクとかで検索すると良さげなのが出てきます。(もちろん自作してもいいぞ)
私はこれ↓を使ってます。

particle集01(雪、桜、ウィンク、星) | ストラスショップ https://booth.pm/ja/items/1906529

・よさげなのがみつかったら、Unityにインポートして、HighFivesSoundと同じように、HighFivesReceiverと同じ階層&同じPositionに配置します。
・Particleによっては、そのままで使うとハイタッチっぽくないエフェクトになっちゃうので、Inspectorでいろんなパラメーターをいじっていい感じにします。
DurationとかLifetime、Speedあたりをいじれば良さそうです。
・自分が採用している上記のParticle集の設定例は以下のとおりです。wink_particleを使っています。​​​​​​​
・どのParticleを使った場合でも、HighFivesSoundと同様にPlayOnAwakeにチェックが入ってることを確認しましょう。
・最後に非アクティブにしてParticleの設定は完了です。
4.Animatorの設定
Animation
・Animatorをいじる前にAnimationを先に作っておきます。
・Project内で右クリック→Create→Animationで、Animationを作成します。
・任意の名前をつけておきます(ここではHighFives_ONとする)
・Highfives_ONをHierarchy上のアバターにドラッグアンドドロップします
・Hierarchy上でアバターを選択した状態で、Ctrl+6を押してAnimationウィンドウを出します。
・赤い丸◎のボタンを押してrecording modeにする
・HighFivesSoundと追加したParticleをActiveにする
・もう一回赤い丸を押してrevording modeを終了する
・そうすると、HighFivesSoundと追加したParticleをActiveにするAnimationができました。
・Project上でHighFives_ONを選択して、Ctrl+Dで複製します。
・複製したものの名前をHighFives_OFFに変更します。
・HighFives_OFFをダブルクリックして、両方の値を1→0に変更します。
・これでHighFivesSoundと追加したParticleを非ActiveにするAnimationができました。
Animator Controller
・ラスボスです。最初はなんのこっちゃだと思いますが頑張ってください
・ここからやっとAnimatorControllerの設定ですが、基本はモノの出し入れなので、FX用のAnimatorControllerを使っていきます
・すでに他のアバターギミック等をいじってたり、すでに設定済みのアバターであれば、設定済みのFX用のAnimatorControllerを使用します
・VRC Avatar DescriptorのPlayable LayerのFXのところになんか入っていたらそれが、FX用のAnimatorControllerです
・FX用のAnimatorControllerが設定されていない場合は作る必要があります(おそらくSDK3対応の販売アバターは設定されてないほうが少ないような気はしますが)
・右クリック→Createから空のAnimatorControllerを作成してそれを使っても良いですが、以下ドキュメントの”表情だけを変更する設定の項目”の手順通りやるとちゃんと設定できますので、これを機にきちんと設定するのがおすすめです
・FX用のAnimatorControllerが用意できたら、それをダブルクリックするとAnimatorウィンドウが開きます。
・Layersタブの右上の+をクリックして新規レイヤーを追加し、任意の名前をつけます(ここではhighfivesとする)
・レイヤーの右側の歯車アイコンを押して、Weightを1に設定します
・次は上部のParametersタブを押して、タブを切り替えます。
・Parametersタブの右上の+をクリックして、Floatをクリックします。
・Floatの新規パラメーターが追加されるので、名前をVRC Contact Receiver コンポーネントのParameterで設定した値と同じにします
・今回はhighfivesだったのでhighfivesにします。コピペが一番安全です。
・Layersのhighfivesレイヤーを選択してステートを作ってつなげていきます
・なにもないところで右クリック→Create→Emptyで、空のステートを作成できます
・ステート上で右クリック→Make Transitionで、トランジション(矢印)を作成できます
・2つステートを作成して、それぞれのステートにOFF,ONという名前をつけておきます
・OFF→ON、ON→OFFとつながるようにトランジションを作成します
・Inspector上で、OFF,ONそれぞれのMotionに先ほど作成したAnimation(HighFives_OFF,Highfives_ON)を割り当てます
・Write Defaultsのチェックは外しておきます
・OFF→ON、ON→OFFそれぞれのトランジションは以下のように設定します。矢印をクリックするとInspectorで設定できます。
・OFF→ONは瞬時に切り替わってほしいので、Has Exit timeをはずして、Transition Durasionを0にしてます。ON→OFFはHasExitTimeを設定しないと音がなり終わる前にOFFに切り替わっちゃうので、このようにしています。
・Conditionsは、0と1しか受け渡さんのにはずなのになんでこんな設定やねんという感じですが、仕様上Float値なので、何となくこうしてます。
完成!!
VRChatでみんなでハイタッチ!
Back to Top