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

↓↓↓ のやり方です。

https://twitter.com/machidyo/status/1665662918774366208?s=20

# 前提
* Windows 10（おそらくmacでも同じです）
* Unity 2022.3.0f1
* UniVRM 0.110.0

# おおまかな流れ
1. [こちら](https://github.com/machidyo/vrm-with-manga-sound-effects)からプログラムをダウンロード。
1. マンガ文字の準備。このときに加工して、マンガ文字と透過のエリアを作ります。
1. VRMの表情とマンガ文字の紐付け。マンガ文字の表示・非表示を切り替えます。

# 手順
## 1. プログラムをダウンロード
git cloneでも大丈夫ですし、以下の通りzipでダウンロードでも大丈夫です。
![2023-06-04_17h09_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/da1939f3-d3a5-de5f-a09b-fcbcb3c85926.png)

## 2. マンガ文字の準備
### 2.1 画像の準備
マンガ文字の画像の3/4を透過エリアになるように加工しますが、好きな編集ソフトでやっても大丈夫です。
1. マンガ文字の画像を準備します。（私は[dododoFonts](https://dddfont.com/)さんから拝借しました、ありがとうございます！）
1. ダウンロードしたマンガ文字をAssets/Texturesに置きます。（今回のマンガ文字が"てへっ"なので、ファイル名以下teheとしています。）
1. tehe（①）のInspector（②）を表示して、Read/Write（③）にチェックを入れて、Applyボタン（④）を押します。（この画像はチェックを入れる前の画像です）<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/3c0a55a2-763b-254d-2b58-3fe8bbbf0737.png" width="400" />
1. メニューのTools → ConvertPNGを選択し、PNG Converterを起動します。
1. 2で置いた画像をドラッグアンドドロップでinput png:のところに設定します。
1. Convertボタンを押して、出力先をAssets/Texturesに変更し、適当なファイル名に変更して保存します。（今回はtehe_tranとして保存しています）

### 2.2 マテリアルへの設定
1. Assets/Materials/mangaを選択し、Color/TextureのLit Color, Alphaのところに2.1で準備した画像を、ドラッグアンドドロップで設定します。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/98096160-dd87-4455-424d-fbca79105f02.png" width="320" />
2. 【作業不要です、後で必要になる知識なので確認だけしてください。】すでにマテリアルにはTilingの設定がしてあり、Offsetの位置を変更することで文字が表示されたり、透過だけになったりするようになっています。以下画像と同じ手順で確認することができます。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/57087b97-c2d9-e6b7-c28d-e23532ec3109.gif" width="240" />

## 3. BlendShapeとの紐づけ
### 3.1 VRMのロード
1. マンガ文字をつけたいVRMをAssets/Models/beforeにドラッグアンドドロップして、UnityEditorにVRMをロードします。
1. ロードしたvrmのprefabをSampleSceneにドラッグアンドドロップします。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/7fdd0c4b-ef15-b362-4807-00122855de7d.png" width="320" />

### 3.2 マンガ文字
1. Hierachyの空いたスペースを右クリックして、3DOjbect → Planeを選択しPlaneを作成します。
1. HierarchyでPlaneを選択（①）し、Inspector（②）を表示し、Assets/Materials/mangaをドラッグアンドドロップ（③）でMeshRendererのMaterialsのElement0に設定します。![2023-06-04_17h33_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/e5478017-7d43-8bb7-31cf-49b7ed693cbc.png)
1. Assets/Materials/mangaをInspectorに表示して、UV CorrdinatesのOffsetのYを0.5に変更して、文字が表示されるようにします。（後で戻します）
1. Planeの位置をTransformの値で調整します。画像はRotationのXを90にすることで立てて、PositionのYを1.7、Zを-0.2にして、頭の少し上、少しうしろになるようにしています。![2023-06-04_18h13_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/31be1474-7af9-8641-bd7e-162038e44b27.png)
1. VRMの構造の一部としてPlaneの位置を変更して、頭の位置と連動して動くようにします。画像では、頭（J_Bip_C_Head）の下に移動させています。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/00ccd23d-1ada-a73a-0c5f-ed9c4b95c325.png" width="200" />
1. Assets/Materials/mangaをInspectorに表示して、UV CorrdinatesのOffsetのYを0.0に戻して、文字が表示されないようにします。

### 3.3 エクスポート
1. メニューからVRM0->Export to VRM 0.xを選択します
1. ExportRootにHerarchyのVRMのRootをドラッグアンドドロップで設定します。![2023-06-04_18h16_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/ac3af275-2fd8-4c8f-dba4-2e5b1555a061.png)
1. Exportボタンを押して好きな場所にVRMを出力します。
1. ↑で出力したVRMをAssets/Models/afterにドラッグアンドドロップしてロードします
1. Assets/Models/after/xxx(VRMファイル名に読み替えて）.BlendShapes/BlanedShape.Funを選択します。（他の表情にしたければJoyなど好きなものを選んでください）
1. InspectorのIsBinaryにチェックを入れます
1. 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が残っている場合は削除しておいてください）![2023-06-04_18h55_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/c084b249-4d7e-c32a-6cca-e2581f0e9d19.png)
1. Unityを実行（①）し、Hierarchy上のVRMを選択（②）し、Inspector（③）を表示し、VRM BlendShape Proxy（④）が表示されるまで下げて、Fun（⑤）の値を1（⑥）に設定すると、VRMの表情が変わってマンガ文字が表示されます。![2023-06-04_18h56_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/2be9c6c3-95ac-da9f-e3a1-47dbcf019519.png)

### 3.5 再度エクスポート
3.3と同じ方法でエクスポートすると、他のアプリなどでも利用できるVRMの出来上がりです。
1. メニューからVRM0->Export to VRM 0.xを選択します
1. ExportRootにHerarchyのVRMのRootをドラッグアンドドロップで設定します。
1. Exportボタンを押して好きな場所にVRMを出力します。

# 参考
* [dododoFonts](https://dddfont.com/)
* [【Unity】VRMアバターにBlendShapeで物を持たせる](https://note.com/frontendpict/n/n0351a15ec39f)