アニメーションするVCIを作ろう

# ご挨拶
はいどうも
自分のアバターをアニメーションで動かしたいと思ってくる。思うよね？
ということで今回はアニメーション人形を作りましょう。

:::note warn
※アバターの改変やストアに公開すると２次配布に当たる可能性があるため、
　作成には規約の確認と自己責任でお願いします。
:::

## ○環境
今回はUnity2022.3.22f1、UniVRM0.124、UniVCI42.1で作成。
最近気がついたけどUniVRMはちゃんと指定したバージョンを使おうね！
ちゃんと依存関係があるのでコンソールに色々とエラーメッセージが表示されちゃうぞ。
<font color="DarkGray">（何回かやった）</font>

  <details> 
  <summary>必須ではないけど追加設定</summary>

アニメーションのデータなどはデフォルトではテキスト形式で保存されます。
そのため、モーションデータからのアニメーションを作成するとデータ量が大きくなり
読込みに凄い時間が掛かります。
 
「編集」→「プロジェクト設定」から、
エディター「アセットのシリアル化」から「ForceBinary」を選びましょう。
データがバイナリかされるので色々と捗ります。
 ![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/2d3ad0ba-8c36-eef2-e970-84d0efd97d82.jpeg)

 
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/9b51c088-2cd2-3107-4dc7-ae1a5201790f.jpeg)

 
  </details>

## ○下準備
①VRMをインポートしましょう。
 ![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b21aa213-7deb-a26f-a16a-1fef542344a3.jpeg)


②ヒエラルキーより「アニメーション人形」等の名前を付け、
　「VCI Object」をアタッチし、VCIとして必要な情報を色々と入力しましょう。
  ![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/2755fdb7-12bf-09bf-c1dd-7979db62bd32.jpeg)


③「アニメーション人形」の下に「sab_item」を作成し、
　アバターを貼り付け「doll」とでもしましょう。
　<font color="DarkGray">（スクショ撮るとき名前間違えてるけど）</font>

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/14cc32b4-af45-154d-2b02-0482f4135726.jpeg)


④念のため、アバターが入っている「doll」を右クリックし、
　「プレハブ」→「全てを展開」をしておきましょう。
  ![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/6ef97f2e-ae5b-7f31-aafc-e6c8d26f1634.jpeg)


⑤「sab_item」で「VCI Sub Item」をアタッチし、必要な情報を入力しましょう。
　（重力OFF、キネマティックONは忘れがち)
　その後「Box Collder」をアタッチし、コライダーサイズを設定しましょう。
　ルームなどで接触判定が不要ならトリガーをONにしましょう。
  ![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/2d7e381e-d68e-eb6a-aae7-e1826970273a.jpeg)


⑥インポートしたアバターはTポーズしているので、
　アームの角度を60度/-60度にしておきましょう。
　※アバターによって構成は違います。
  ![7-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/6cdc6273-7a6f-29e0-9688-d633efa35176.jpeg)


## ○瞬きアニメーションの作成
①「アニメーション人形」を選択し、
　「アニメーション」タブから「作成」をクリックしましょう。
   ![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/403ef2ac-3ed9-b433-85fb-19af85f0c039.jpeg)


<details> 
<summary>アニメーション」のタブがない場合</summary>
「ウィンドウ」→「アニメーション」→「アニメーション」をクリックしましょう。
  
  ![--.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/c5320755-66e6-c1a2-3ca0-dd97b2ce3854.jpeg)

 </details>

 ②瞬きをさせたいので、「blink」として保存しましょう。
  ![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/9fd97c95-e8eb-b23f-f034-205f907997b6.jpeg)


③「プロパティを追加」をクリックし、「sub_item」→「doll」→
　「Body」→「SkinnedMeshRenderer」からシェイプキー右にある「+」を
　　クリックしましょう。
　※アバターによって構成は違います。
![10-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/7ae13215-9ece-c774-8d5a-74e5f7d145a8.jpeg)


④10フレーム目にBlink（とついでに耳）のシェイプキーを100にしましょう。
 ![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/5a0f4f4d-4ad5-f30c-1932-b6daca066853.jpeg)


　20フレーム目にBlink（とついでに耳）のシェイプキーを0にしましょう。
  ![13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b90ee409-7fc6-c117-f178-87e2d73c5588.jpeg)


　1:00の所にあるキーを右クリックし、「キーを削除」をクリックし、
　不要な設定を削除しましょう。
  ![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/d2d765f3-98ea-65e8-d71f-9c665049808a.jpeg)


:::note warn
※エディター上では60fpsで動作するため、20フレーム目がおよそ0.167秒です。
 タイムラインが「0:20」と書いていても20秒とは限らないので注意しましょう。
:::


## ○腕ふりアニメーションの作成
①「アニメーション人形」が選択されている状態から、
　「アニメーション」タブより▽から「新しいクリップを作成」をクリックし
　適当に「udefuri」とまて保存しょう。
   ![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/09ff9d8c-d468-402f-ace4-13af485ac5e8.jpeg)


②「プロパティを追加」をクリックし、
　「sub_item」→「doll」→「Amature」→「Hips」→「Spine」→「Chest」→
　「Neck」→「Transform」→「回転」を追加しましょう。　
   ![16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/449cc308-f0b9-6bdc-5e96-217ce52d9fe8.jpeg)


そんな感じに「arm」「elbow」「wrist」を追加しましょう
※アバターによって構成は違います。

![17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/7c9fc606-4b02-253f-3151-b1ead74848bc.jpeg)


③20フレーム目に「Neck」10「arm」 60「elbow」 20「wrist」10と設定し、
 ![18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/42756e61-41c0-2f00-aa6e-c9cbcb6575f0.jpeg)


　40フレーム目に「Neck」 5「arm」 30「elbow」-10「wrist」-5と設定し、
  ![19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/6afe16c9-b5b2-fe7d-4419-87ebfe8f1622.jpeg)


　60フレーム目に「Neck」10「arm」 60「elbow」 20「wrist」10と設定し、
  ![20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/eb24cc6a-086e-9af9-623f-7c9eccc4b54c.jpeg)


　80フレーム目に「Neck」 0「arm」-60「elbow」  0「wrist」 0と設定しましょう。
  ![21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/2db79c9a-211a-391c-fd12-336777c81641.jpeg)


④ボーンを右クリックし、「補完」から「クォータニオン」を選びましょう。
　**これを全てのオブジェクトに対して行います（忘れがち）。**
  ![22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/d2b95cca-c9fa-fb5e-aaa7-dd07ad875d72.jpeg)


## ○確認作業
①「アニメーション人形」のアニメーションコントローラーが作成されているので
　「アニメーション人形」ダブルクリックし、
　「blink」と「udefuri」の2つ登録されていることを確認しましょう。
  ![23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b8dc1163-d9a3-54ea-e426-e66d620ebf38.jpeg)


②「アニメーション人形」に「Animator」が自動でアタッチされ、
　コントローラーに「アニメーション人形」が登録されていることを確認しましょう。
![24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b4b0551f-7ca8-362a-cce1-ce2b694f61c0.jpeg)



## ○プログラム
適当にプログラムを書いて

 ```Lua
  --変数セット
math.randomseed (os.time())
local AnimeTime_Offset=math.random(5,50)/10 --ランダム数値を5～50の範囲を生成して1/10にして0.5～5秒を作る
local AnimeTime=AnimeTime_Offset+os.time()  --次回アニメーション動作時刻を作る
local frame_step=10 --10フレーム毎に処理するよう変数を設定する

function update()
    if vci.me.FrameCount %frame_step ==0 then   --frame_stepに設定したフレーム毎に処理を行う
        if os.time()>=AnimeTime then            --現在時刻がAnimeTimeで設定した時刻を超えたなら
            if math.random(0,10)>=9 then        --ランダム数値を0～10の範囲で生成して判定する
                vci.assets._ALL_PlayAnimationFromName('udefuri', false) --9を超えたら腕を振る
                AnimeTime_Offset=math.random(15,50)/10  --腕振りアニメーションは1.1秒程度あるので、1.5秒～5秒を作る
            else
                vci.assets._ALL_PlayAnimationFromName('blink', false)   --9を超えたら腕を振る
                AnimeTime_Offset=math.random(5,50)/10   --瞬きは一瞬なので再び0.5～5秒を作る
            end
            AnimeTime=AnimeTime_Offset+os.time()  --次回アニメーション動作時刻を作る
        end
    end
end
```

はいかわいい
![2024113023282873.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/dc75ae3e-c23b-c9af-7a29-e5b5e24bde89.gif)

## ○最後に
自分でアニメーションをポチポチするほか、
公開されているモーションデータをレコーディングすることも出来ます。
Takiさんのルームで勉強することが出来るのでご紹介までに。
 ![2024-12-01 01-15-40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/2f3de177-f7a8-d967-af14-4beda3c480ee.gif)


後言い忘れてたけど、
**オブジェクトの名前とか変更するとアニメーションが参照できなくなるので注意。**