![見出し画像](https://assets.st-note.com/production/uploads/images/154766222/rectangle_large_type_2_52b3ba70c5f25cdfb28bd447be4cea7f.png?width=1200)
ExpressionsMenuの実装について(MA有り)
※コンテンツ部分はすべて無料で最後まで読めます。
※この記事は後編です。前編の「ExpressionsMenuの実装について(MA無し)」の内容を前提としますが、MAについてはこの記事から解説するのでそのまま読んでも問題ないかと思います。
はじめに
前編から引き続きの方はお疲れさまです。
前編の内容はいかがでしたでしょうか。項目一つ追加するだけでなんでここまで苦労しなきゃならねえんだと思いましたか?私も思います。
実際古のVRChatter達は(おそらく)このように項目一つ一つ丁寧丁寧丁寧に改変してきていたのでしょう。(知らんけど)
現代はある革命を経ています。そう、MAの登場です。
用語定義
Modular Avatar
言わずと知れたアバター改変のおともModular Avatar。MAと表記します。
もしまだ導入していない場合は上のリンクが導入説明のページなので、VCCからインストールしておいてください。
この手の常套ですが、何か困ったら公式ドキュメントを見返すことを推奨します。
MAは非破壊性が強調されてますが、ExMenuに関して言うと、メニューの階層構造をヒエラルキー上でのGameObjectの階層で表現できるという恩恵が大きいと思います。後ほどハンズオンで解説します。
MAコンポーネント
MAに含まれる便利機能コンポーネント群の総称です。
この記事内では以下を使います。使うときに記事内でも解説しますが、公式リファレンスへのリンクを張っておきます。
モジュール
MAとの理念とも重なりますが、この記事内でのモジュールという言葉について定義しておきます。
たとえばboothでアバターを購入し、unity上でアバターのプレハブを開き、ヒエラルキー上に展開したあとの画面を想像してください。
そこにある「アバター」関連のオブジェクト群はまとめて一つのモジュールです。
そして次にboothで別の作者が作成した「衣装A」を購入してunity上で配置したとしましょう。その「衣装A」関連のオブジェクト群も一つのモジュールです。
つまりモジュールとは作者それぞれが作成した、成果物のまとまりを指します。
ヒエラルキー上のオブジェクトについて、作者が異なるならば別モジュールです。この"作者"は字の通り、作成した人物を指します。よって、あなたが「アバターを構成するオブジェクト群」に何か新規追加した場合、新規追加した部分と「アバターを構成するオブジェクト群」は別モジュールになります。
MAはこれら別モジュール間の結びつきをいい感じにサポートしてくれます。
ハンズオン1:既存Exメニュー抽出
MA導入は済ませましたか?では効果を実感してみましょう。
これからやることは公式ドキュメントの「メニューを編集」を参考にしています。あわせて参照ください。
まずアバタールートをヒエラルキー上で右クリック->Modular Avatar->Extract Menuを選択します。
![](https://assets.st-note.com/img/1726623991-YbRFI2zEQPrfv4ydCUJGZNK9.png?width=1200)
するとヒエラルキー上にAvatar Menuなるオブジェクトが増えました。
![](https://assets.st-note.com/img/1726624028-CEAysGK4z6q02lJQOFfVm7t9.png?width=1200)
何やらMAコンポーネントがいろいろついていますが、まず注目すべきはインストール先です。もともとのExMenuファイルの後ろにplaceholderとついています。アバタールートを見に行ってもExpressions->Menuにはこのplaceholderつきのものが設定されています。
![](https://assets.st-note.com/img/1726624387-aQcDxHL5kWzIOFKMYB76oXgt.png?width=1200)
実はこのplaceholderつきのファイルそのものには全くメニュー情報が含まれていません。空のメニューです。(もともとのメニューファイルは別で残っていますので戻そうと思えば戻せるのでご安心を)
メニュー情報はAvatar Menuオブジェクト配下にすべて移動しています。これからはAvatar MenuオブジェクトがExMenuです。
このままプレイモードでExメニューがどうなっているか見てみましょう。
![](https://assets.st-note.com/img/1726625365-w27vzK6WBtOx5efqGklcN1XT.png)
Extract Menuする前と何も変わらずに、元のExメニューがそのまま表示されれば正常です。(前編でSmartwatchの項目を追加している場合、それも含まれています。)
アバタールートのExpressions->Menuを見るとメニュー情報が含まれていないplaceholderを設定しているのにも関わらずExメニューが表示されています。
カラクリとしてはAvatar MenuオブジェクトについているMAコンポーネントがメニューを表現し、MAが、アバタービルド時にそれらの表現を解釈してplaceholderに合成、VRCがExメニューとして解釈できる形で実装するということをやってくれているイメージです。
ヒエラルキー上のオブジェクトでメニューを表現することの利点に、取り回しが良くなることが挙げられます。
例えば「このアバターでは絶対髪型は変えないからこのメニュー項目要らないな」とか「ケモミミとケモ尻尾は絶対出したままにするからオンオフ項目すら要らない」とか、もちろん追加は前編の方法やMAを用いた方法でできます。追加削除だけでなく「この項目はよく使うから階層の浅いところに置こう」等の用途にも対応することができます。
MAを用いるとそれらの配置がヒエラルキー上だけで済みます。もうExMenuファイルをアバタールートから参照して辿っていく必要はありません。
![](https://assets.st-note.com/img/1726625785-wHITdse0rXPBvgF9OKAlUVo5.png?width=1200)
MAコンポーネント説明
MAコンポーネントは自動でついたり、もちろん自分でつけたりもできます。それぞれのコンポーネントが何を担っているか見てみましょう。
MA Menu Installer
![](https://assets.st-note.com/img/1726632501-CywIPjbeTMml3DniW7sdQJUg.png)
MA Menu Installerはこれがついているオブジェクトに同じくついているMAコンポーネント(Group, Item)を「インストール先」のExMenuに合成します。
Extract Menu後は「インストール先」がplaceholderになっています。
placeholderはアバターのExpressions->Menuに設定されているので、ExMenuのルートにインストールされます。(つまりExtractする前と変わらないメニューが見える)
「メニュー内容を表示」を展開するとインストールされる配下のメニュー項目のプレビューが見れます。
用途が多いコンポーネントですが、MA Menu関連コンポーネントを、実際のExMenuとして表示するための橋渡しと考えてOKです。
プレハブ開発者向け設定内の「インストールされるメニュー」は別モジュール追加時に真価を発揮しますが自分で使う分にはなしで大丈夫です。
MA Menu Group
![](https://assets.st-note.com/img/1726633597-q2A7zFRmvelTYxOfg8icK6aB.png)
まとめているだけなので要素はそれぞれMA Menu Item
配下をサブメニューに入れずにグループとして扱います。配下の要素は後述のMA Menu Itemです。配下をサブメニューに入れずに同階層のメニューとして扱うので、配下のMA Menu Itemは最大8つまでです。(8個以上つっこんでもMAが気を利かせていい感じにしてくれるだろうけど未検証)
MA Menu Item
![](https://assets.st-note.com/img/1726633917-iqLKRQmHADpWbf0dyG4BjV9O.png?width=1200)
おそらく一番よく使います。
メニュー項目一つ一つに対応するMAコンポーネントです。ユーザーが実際に選択するサブメニュー、操作するトグルボタン等それぞれがMA Menu Itemで表現されます。タイプがサブメニューのMA Menu Itemの配下には、またMA Menu Itemを入れることができます(入れ子、階層の表現)。
サブメニュー引用元は「Expressions Menu アセットを指定」か「子オブジェクトから生成」のどちらかを選択できます。既にサブメニューを表現したExMenuがある場合は、「Expressions Menu アセットを指定」を指定してファイルを指定することですべて取り込まれます=従来のExMenuファイルに実装されていたメニュー情報を、MA対応のオブジェクトとして取り込めます。
「オブジェクトに展開」ボタンを押すとメニュー項目に対応するMA Menu Itemがヒエラルキー上で子オブジェクトとして追加されます。項目を編集したい場合は末端まで展開していってください。特に使わないサブメニューならそのままでもいいですが基本的に触る部分は全展開して良いと思います。邪魔ならヒエラルキー上で畳めばいいだけです。
![](https://assets.st-note.com/img/1726634203-JHKyWDZX5eT73mCkxboRtaQN.png?width=1200)
Avatar Menu->Costume->Bag ON/OFFと末端まで「オブジェクトに展開」を行った
タイプがトグルボタンのitemについては、「パラメーター名」が設定できるということを把握しておいてください。
MA Parameters
MA Parametersは名前の通りParametersのMA版です。アバタールートのExpressions->Parametersファイルにはそのアバターで使うパラメータが一覧で定義されていますが、別モジュールのパラメータについては認知していません(モジュール性を維持するためにも認知するべきではありません)。
では各モジュール内で使うパラメータはどこで定義するのかというと、各モジュールのルートにこのMA Parameterをつけて定義します。MA Parameterコンポーネント上で定義したパラメータは、(基本的には)その配下でのみ使用可能です。
入れ子にしたり外部とのやりとりにも使えますがここでは割愛します。
MA Merge Animator
Animatorを統合します。
これも様々な用途がありますが、たとえばギミックが含まれているある小物をboothで購入して導入することを考えます。このときアバタールートからPlayeble Layers->Base->FXに設定されているアバターのAnimator(FXレイヤー)に、別モジュールである小物のギミック動作を定義した別のAnimatorを統合する用途に使います。
小物としてはどんなアバターに搭載されるかに関わらず自分の動きをAnimatorで定義すれば済むし、アバター側としても小物がどのようなアニメーションをするのかを気にする必要がなくなります。
モジュール性を高めるのに必須のコンポーネントです。
ハンズオン2:メニュー階層の操作
それでは実践編です。Extract Menuを行った後のシアンちゃんのヒエラルキーは、Avatar Menuが自動生成されて以下のようになっていると思います。
![](https://assets.st-note.com/img/1726636191-SB7152zIsKbfe64lVw3Xq0QA.png?width=1200)
このままプレイモードに入ると元のメニューが再現されるのは確認しましたが、ここではこれらのサブメニューを引っくるめた新たなサブメニューを間に作ってみようと思います。
どういうことかというと、例えば ExMenu->Costume->Bag ON/OFF->OFF という項目に着目したときに ExMenu->Cian->Costume->Bag ON/OFF->OFF となるようにCianという名前のサブメニューを一段階追加します。
意味的には「デフォルトのシアンちゃんに含まれているメニュー項目をまとめたサブメニュー」を追加します(単独でここだけ見るとただ階層を深くしてるだけのように見えますが練習ってことで・・・)
ではやっていきます。まずはヒエラルキー上でAvatar Menuを右クリックして空のオブジェクトを作成します。名前はCianとします。
![](https://assets.st-note.com/img/1726636771-HIKAqbDC2JzP8NtuGS4xrYko.png?width=1200)
空なので当然何もついていない
ヒエラルキー上で操作して、Body~Advanced SettingsまでをCianオブジェクトの子になるように移動させます。
![](https://assets.st-note.com/img/1726637054-ehnv9qX7Q0aTFYmMzOblC5J6.png?width=1200)
Cianオブジェクトのインスペクターを表示して「コンポーネントを追加」から「MA Menu Item」を選択します。
MA Menu Itemの設定ですが、まずはタイプをサブメニューに変更。ついでにアイコンを良さげなものに変更します。
次にサブメニュー引用元を「子オブジェクトから生成」に変更します。変更したときに、配下のサブメニューがプレビューに出てくることを確認してください。
設定後、一つ上の階層のAvatar Menuのインスペクターを見ると、MA Menu GroupがCianオブジェクトのみになっています。ヒエラルキー上での階層構造を考えると合っていますね。
![](https://assets.st-note.com/img/1726637223-lN7uXK53v9frzDn4GQ0RCawT.png?width=1200)
このままプレイモードで確認してみましょう。
![](https://assets.st-note.com/img/1726637699-H5qgjNcUEoBymMJRTv4nKrXC.png?width=1200)
ヒエラルキー上での階層構造と実際のメニュー構造が一致しました。MAを使うとこのように階層の挿入や削除が簡単になります。
ハンズオン3:別モジュールの組み込み
次はギミックつきの小物を導入してみましょう。作者様によっていろいろですが、MA対応のような文言があれば導入はとても簡単です。今回は以下のカタナを追加してみます。(ハンズオンで有料商品使うなという言は無視します。買って☆)
導入方法はたいていの場合それぞれの製品の作者様が案内しているのでよく読みましょう。導入まで済ませたものが以下になります。
![](https://assets.st-note.com/img/1726639022-oHgDk1yIA8zc0S7ai4RGEPY6.png?width=1200)
MA Merge AnimatorとMA Parametersが見える
![](https://assets.st-note.com/img/1726639145-Aa4LlXgfoNqWm6tGsMrIpTBY.png)
MA対応のプレハブを見ると、さっそくMA Merge AnimatorとMA Parametersが見えます。「統合されるアニメーター」にこのカタナの動き部分(ハンドサインを特定の形にすると抜刀、右手追従の動作部分など)が実装されています。
また、MA Menu Installerを見ると、プレハブ開発者向け設定内の「インストールされるメニュー」にEXMenuが設定されています。このEXMenuにはカタナのExメニューが実装されています(カタナ本体の表示オンオフ項目、動き追従のオンオフ項目等)
中央のEXSubMenuもカタナのサブメニューです。
それをインストール先、つまりアバターのルートにインストールするという設定がされています。
ここまでプレハブぽん置きそのままです。特に手動で設定はいじってません。MA対応小物は作者様があらかじめMAで設定しているので導入側としては本当にプレハブぽん置きでほぼ動きます。らくらく。(位置合わせ等の設定は必要なんですけどね。これはまた別の話。)
このままプレイモードで見てみましょう。
![](https://assets.st-note.com/img/1726639611-RMLHv9tCxzaw5QrkW3lZUuBO.png)
ハンズオンで作成した「デフォルトのシアンちゃんに含まれているメニュー項目をまとめたサブメニュー」に加えて、カタナのメニュー項目が追加されています。
もちろんメニュー項目を選択すればその通りにきっちり動作します。
補助ツールについて:AvatarMenuCreator for MA
購入した小物にはあらかじめAnimatorやアニメーションファイルは付属しています。
しかし自分で独自機能を作ろうとすると、それらの作成からは逃れられません。操作の記録であるアニメーションファイルは無ければ動きの定義ができずに何も始まらないからです。
前編でもやったように特にアニメーションファイルの作成はとてもめんどくさいです。
アニメーションファイルをどうしても作りたくない場合はそれを解消する補助ツールがあるので導入を検討しましょう。
ここではAvatarMenuCreator for MAというツールを紹介します。
こちらのAvatarMenuCreator for Modular Avatarを使うと、小物のオンオフのような簡単な動作なら自前でアニメーションを作らずにコンポーネントを追加するだけで済みます。
ただしこれは細かい設定(複雑な条件での遷移)ができないというデメリットもあるので用途によっては自前で全部作る必要はあります。
そういう意味ではMA前提だとしてもMAを用いない方法で実装できるという実績・知識は無駄になりません。
他にも有志の方々が様々な補助ツールを開発していますので探してみてください。(良さげなものあったら私にも教えてください)
MAを用いたメニュー構造の管理について
やっと本題が書けます。今までのはすべて前提だったのだ。
さて、ハンズオンを通してなんとなくMAの威力が分かってきたかと思います。
MAを用いるとメニュー構造についてオブジェクトの階層で表現できます。ではどのような階層構造が適しているでしょうか。
これはVRC内での用途、ひいては各プレイヤーのプレイスタイルに依存するものが大きいと思います。
全くExメニューを使わない人もいれば、表情変更や姿勢制御を駆使してエモいスクショを撮ったり、もちろん小物に実装されているギミックの起点としてExメニューを使うでしょう。様々な用途で本当に千差万別だと思います。
その中で自分に合ったExメニュー構造を設計することはより価値があることではないかと思っています。スクショ撮るぞ~となったときにさっと表情変更できないとカッコ悪いですからね(自意識過剰)
![](https://assets.st-note.com/img/1726642684-OLBlsuoDg8M9q2fxd61YZhEK.png)
一例ですが私の運用しているアバターのExメニュー階層を載せておきます。ベースはExtract Menuで抽出した後の構造ですがいろいろ改変しています。
まず、デフォルトのシアンちゃんのメニューはハンズオンでもやったようにCian配下にまとめています。ただし、自分が絶対使用しないものは消しています。逆によく使うものは直下に置いたりしています。
次にAdvancedですが、ここは主に購入した小物に実装されているメニューを取り込んだり、自分で実験的に作った機能のメニューを置いています。紹介していませんが MA Menu Install Target を使用するとMA Menu Installerのインストール先を任意の場所に"引っ張る"ことができます。
順番が前後しましたがScreenshotはそのままスクショ用の機能を配下にまとめています。表情変更(FacialChange)や表情固定(GestureLock)は見ると分かりますが実はCian配下にも同じ機能のものがあります。同じ機能でも複数の場所にメニュー項目を配置できるので、こうやって「スクショ用」といった用途別にまとめることも可能です。
最後にDefaultですがこちらはVRCの機能であるデフォルトエモートとハンドムービングシステムを置いています。
実はExメニュー改変をするとデフォルトのエモートのメニューが消えてしまいます。VRCEmoteという定義済のパラメータをいじることで復元できますがこれはそれを戻す改変の練習をした名残です。
ハンドムービングシステムは以下のギミックです。
デスクトップモードでもExメニューを介して腕が動かせるという仕組みなのですが、このギミックはMA非対応です。これも勉強のために仕組みを解析して無理やりMA対応させました。余力があれば皆さんも試してみてください。(元からMA対応版の似た機能があったら車輪の再発明だあ)
この記事で言いたいこと
皆さんはExメニューの管理はどのようにしているでしょうか?おすすめの管理運用の方法や、使っている補助ツールを教えて下さい!
(この一文を書くためだけに前編・後編に分けてまでこの文章量書きました。)
みんなもExメニューの設計・改変、しよう!
おわりに
お疲れさまでした。
とても冗長で長い内容をここまで読んでくださりありがとうございました。
前編から引き続きの方は2倍ありがとうございました。
MA有りの方の内容をメインに書きたかったので書いたのですが、前提となるMA無しの管理方法を記述するのに体力の大半を持ってかれました。
今回の知見が誰かの役に立てば幸いです。
(有料部分にはコンテンツはありません。この記事を気に入っていただけたなら、ご支援いただければ幸いです。)
終
2024/09/18
written by shift
ここから先は
¥ 100
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?