変形するVCIを作りたい

#はじめに
この記事では変形するVCIの作り方をまとめます。
作ったのはこのゆうれい君です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">VCIでつくったゆうれい君です！ <a href="https://t.co/MQz9SxZZun">pic.twitter.com/MQz9SxZZun</a></p>&mdash; ナツオリ (@che3_eps) <a href="https://twitter.com/che3_eps/status/1470049309534322691?ref_src=twsrc%5Etfw">December 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

VCIを変形させる方法はいろいろあると思いますが、
今回はBlenderで3Dモデルにアーマチュアを設定し、アニメーションすることで実現します。

#こんな人向け
・Unityわからん、、
・Blenderは触ったことあるけどアーマチュアの設定方法がよくわからない
・[VCIのチュートリアル](https://virtualcast.jp/wiki/vci/beginner)はクリアした


#実行環境
・Windows 10 pro
・Blender 2.83.16
・Unity 2019.4.20f1
・UniVCI 0.33.0

※本当は[UniVRM 0.33.0](https://github.com/virtual-cast/VCI/releases/tag/v0.33.0)の推奨環境は__Unity 2019.4.30f1__です。

#手順
##1. Blender
好きな3Dモデルを用意します。モデルの作成方法についてはネットにたくさん情報があるので割愛します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/db4cf46c-46d2-2562-5ea1-e465b3f28dce.png)

__オブジェクトモード__で[Shift]+[A]キーを押して、[アーマチュア]-[単一ボーン]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/5a10a8fa-23df-f31a-3352-54e2c587073c.png)

作成したアーマチュアを選択して__編集モード__にします。
[ツール]-[オプション]でX軸ミラーにチェックを入れます。
こうすることで左右対称に編集できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/6bd1ccee-290d-19a0-7edf-1b8233799c7b.png)

ボーンの丸い部分を選択した後、[E]キーを押すとボーンを伸ばせます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/f0e2c19c-3b8c-d684-23d3-fd1a5569a3e1.png)

またボーンの丸い部分を選択した後、[Shift]+[E]キーで左右対称にボーンを伸ばすこともできます。

このボーンを伸ばす作業を繰り返しながら、ボーンを動かしたいメッシュの近くに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/80c63003-553f-cb49-c995-ce9f81826c30.png)

ボーンを配置し終わったら、ウェイト設定をします。

__オブジェクトモード__で[Ctrl]キーを押しながら、メッシュ、ボーンの順で選択します。
※必ず最後にボーンを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/3109e224-7e5d-8754-7ad6-ff5e1478df19.png)

[Ctrl]+[P]キーを押して[自動のウェイトで]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/71e6b240-c441-2ddb-0283-bcda78a6f91d.png)

アーマチュアの階層の下にメッシュがくるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/d0c85dc4-58ef-6b57-aaf1-63d25ea2924c.png)


この状態で__ポーズモード__にしてボーンを動かすと、メッシュもそれに連動して動くはずです。
違和感があれば、ボーンの位置を変えたり、ウェイト設定を手動で行います。

ウェイト設定が終わったら、以下の操作を1, 2の順で実施します。
(__不可逆的な操作なので、事前にBlendファイルのバックアップを取ることをおすすめします__)
1. モディファイアを使用している場合は、アーマチュア以外を適用します。
必ず上から順に適用してください。
この操作をしないと、Unityでうまく表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/54b4f563-1ca2-8c72-94e9-4c571e6d9c19.png)

2.メッシュが複数に分かれている場合は統合します。
__オブジェクトモード__ですべてのメッシュを[Ctrl]キーを押しながら選択した後に、[Ctrl]+[J]キーを押します。
この操作をすることで、ファイルサイズを小さくすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/e54b6379-f782-ed56-ec37-1860e52cc9fa.png)

最後にFBXファイルをエクスポートしたら、次に進みます。

##2. Unity
作成したFBXファイルとテクスチャをUnityのProjectウィンドウにドラッグドロップして、わかりやすいフォルダにまとめておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/729dc3c9-764b-ac7e-cbdb-9d06d280c0ff.png)

作成したフォルダを右クリックして、[Create]-[Material]を選びます。
作成したマテリアルファイルはわかりやすい名前に変えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/3079acae-fa67-e847-0cae-95dec2af6f34.png)

マテリアルの「Shader」を「VRM/MToon」、「Lit Color, Alpha」の左にある小さな丸を選択してドラッグドロップしたテクスチャを選択します。
また、「Shade Color」で影を好きな色にすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/db260b75-14f0-f5ae-116e-31ba9908c9a5.png)

Hierarchyウィンドウを右クリックして「Create Empty」を選択して、以下の階層構造を作ります。
今回は「Ghost_main」がrootオブジェクト、「Ghost_sub」がサブアイテムです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/f6715797-5685-32ed-c9c3-563bc85c52ee.png)

サブアイテムにFBXファイルをドラッグドロップします。
さらにドラッグドロップしたFBXファイルを見ると、アーマチュアとメッシュの2つがあると思います。
メッシュのほうにProjectウィンドウのマテリアルをドラッグドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/06276615-3c64-b29c-fb66-35867458177b.png)

この時点でSceneウィンドウにBlenderで作成したオブジェクトと同じものができあがっているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/5f40801d-c42a-c061-0661-e41975c270b8.png)

ルートオブジェクト、サブアイテムにコンポーネントを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/9a99cf90-096d-870e-a1c2-00259583d5a6.png)

Herarchウィンドウのアーマチュアを選択した状態で、[Windows]-[Animation]-[Animation]を選択します。
Animationウィンドウを開いたら、[Create]ボタンを押して、Animファイルをわかりやすい場所に保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/743bf5c7-f85c-b609-779a-251d8fd65b43.png)

[Add Property]を押すとボーンの一覧が出てくるので、回転/移動/スケールなどをいじってアニメーションを作ります。
アニメーションの作り方は[公式wiki](https://virtualcast.jp/wiki/vci/sample/animation/tutorial2)にもあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/7e1ee3e5-0e7a-47fb-bb8e-0c8bb28abf41.png)

作成したAnimファイルはサブアイテムのAnimationコンポーネントにドラッグドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/771dc283-7790-80aa-9f86-680a9141be58.png)

ルートオブジェクトのScriptsにアニメーションを再生するスクリプトを書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930094/fab6b081-558c-81aa-e664-c8fd218a5312.png)

一応文字でのソースコードも記載しておきます。
([公式wiki](https://virtualcast.jp/wiki/vci/sample/animation/tutorial2)を参考にしました)

```Lua
local Anime = vci.assets.GetTransform("Ghost_sub")
local SubitemAnime = Anime.GetAnimation()
SubitemAnime.PlayFromName('Ghost Animation', true)
```
最後にVCIをエクスポートしてThe Seed Onlineにアップロードすれば完成！


#最後に
BlenderもUnityも初心者なので、ところどころ非効率的な方法や不正確な表現があるかもしれません。
もしアドバイスやご指摘などがあればコメントをくださるとうれしいです。
最後まで読んでいただき、ありがとうございました！