VRMで表情変更に合わせてマンガ文字を表示する方法

↓↓↓ のやり方です。

前提

• Windows 10（おそらくmacでも同じです）
• Unity 2022.3.0f1
• UniVRM 0.110.0

おおまかな流れ

1. こちらからプログラムをダウンロード。
2. マンガ文字の準備。このときに加工して、マンガ文字と透過のエリアを作ります。
3. VRMの表情とマンガ文字の紐付け。マンガ文字の表示・非表示を切り替えます。

手順

1. プログラムをダウンロード

git cloneでも大丈夫ですし、以下の通りzipでダウンロードでも大丈夫です。

2. マンガ文字の準備

2.1 画像の準備

マンガ文字の画像の3/4を透過エリアになるように加工しますが、好きな編集ソフトでやっても大丈夫です。

1. マンガ文字の画像を準備します。（私はdododoFontsさんから拝借しました、ありがとうございます！）
2. ダウンロードしたマンガ文字をAssets/Texturesに置きます。（今回のマンガ文字が"てへっ"なので、ファイル名以下teheとしています。）
3. tehe（①）のInspector（②）を表示して、Read/Write（③）にチェックを入れて、Applyボタン（④）を押します。（この画像はチェックを入れる前の画像です）
4. メニューのTools → ConvertPNGを選択し、PNG Converterを起動します。
5. 2で置いた画像をドラッグアンドドロップでinput png:のところに設定します。
6. Convertボタンを押して、出力先をAssets/Texturesに変更し、適当なファイル名に変更して保存します。（今回はtehe_tranとして保存しています）

2.2 マテリアルへの設定

1. Assets/Materials/mangaを選択し、Color/TextureのLit Color, Alphaのところに2.1で準備した画像を、ドラッグアンドドロップで設定します。
   
2. 【作業不要です、後で必要になる知識なので確認だけしてください。】すでにマテリアルにはTilingの設定がしてあり、Offsetの位置を変更することで文字が表示されたり、透過だけになったりするようになっています。以下画像と同じ手順で確認することができます。
   

3. BlendShapeとの紐づけ

3.1 VRMのロード

1. マンガ文字をつけたいVRMをAssets/Models/beforeにドラッグアンドドロップして、UnityEditorにVRMをロードします。
2. ロードしたvrmのprefabをSampleSceneにドラッグアンドドロップします。
   

3.2 マンガ文字

1. Hierachyの空いたスペースを右クリックして、3DOjbect → Planeを選択しPlaneを作成します。
2. HierarchyでPlaneを選択（①）し、Inspector（②）を表示し、Assets/Materials/mangaをドラッグアンドドロップ（③）でMeshRendererのMaterialsのElement0に設定します。
3. Assets/Materials/mangaをInspectorに表示して、UV CorrdinatesのOffsetのYを0.5に変更して、文字が表示されるようにします。（後で戻します）
4. Planeの位置をTransformの値で調整します。画像はRotationのXを90にすることで立てて、PositionのYを1.7、Zを-0.2にして、頭の少し上、少しうしろになるようにしています。
5. VRMの構造の一部としてPlaneの位置を変更して、頭の位置と連動して動くようにします。画像では、頭（J_Bip_C_Head）の下に移動させています。
   
6. Assets/Materials/mangaをInspectorに表示して、UV CorrdinatesのOffsetのYを0.0に戻して、文字が表示されないようにします。

3.3 エクスポート

1. メニューからVRM0->Export to VRM 0.xを選択します
2. ExportRootにHerarchyのVRMのRootをドラッグアンドドロップで設定します。
3. Exportボタンを押して好きな場所にVRMを出力します。
4. ↑で出力したVRMをAssets/Models/afterにドラッグアンドドロップしてロードします
5. Assets/Models/after/xxx(VRMファイル名に読み替えて）.BlendShapes/BlanedShape.Funを選択します。（他の表情にしたければJoyなど好きなものを選んでください）
6. InspectorのIsBinaryにチェックを入れます
7. InspectorのMaterial Listを選択し、Serialized Propertyのドロップダウンからmangaを選び、その上で_MainText_STを選択し、Tillingのxを0.5、yを0.5、Offsetのyを0.5に設定します

3.4 確認

1. 設定したVRMをHierarchyにドラッグアンドドロップします。（前のvrmのprefabが残っている場合は削除しておいてください）
2. Unityを実行（①）し、Hierarchy上のVRMを選択（②）し、Inspector（③）を表示し、VRM BlendShape Proxy（④）が表示されるまで下げて、Fun（⑤）の値を1（⑥）に設定すると、VRMの表情が変わってマンガ文字が表示されます。

3.5 再度エクスポート

3.3と同じ方法でエクスポートすると、他のアプリなどでも利用できるVRMの出来上がりです。

1. メニューからVRM0->Export to VRM 0.xを選択します
2. ExportRootにHerarchyのVRMのRootをドラッグアンドドロップで設定します。
3. Exportボタンを押して好きな場所にVRMを出力します。

参考

• dododoFonts
• 【Unity】VRMアバターにBlendShapeで物を持たせる