Unity販売アセットのアニメーションをVCIで使う

## この記事は何？
- VCI(VirtualCast Interactive) Advent Calendar 2023 11日目の記事です
※VCIは[バーチャルキャスト](https://virtualcast.jp/)のユーザー作成可能なアイテムの総称です
- Unityアセットストアで販売されているアニメーション付きのアセットをVCIでアニメーション再生できるようにする方法がわかります

## 目次
1. [アセットの準備](#1-アセットの準備)
2. [VCIをつくる環境の準備](#2-vciをつくる環境の準備)
3. [アニメーションをコピーして使えるようにする](#3-アニメーションをコピーして使えるようにする)
4. [アニメーションの実行コードを書く](#4-アニメーションの実行コードを書く)
5. [バーチャルキャストで実際に動くのを確認する](#5-バーチャルキャストで実際に動くのを確認する)

## 1. アセットの準備
まずは、アニメーション入りのアセットを購入します。
購入時には、以下のようなことに気をつけます。
- バーチャルキャスト(メタバースプラットフォーム)に持ち込んでよいかどうか？
- 有料販売したい場合は、利用したものを二次販売してよいかどうか？
- アニメーション以外にVCIでは利用できないものがないかどうか？<br>もしあってもそれを除いても成り立ちそうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/b18b6bec-0b0f-d4d7-cc6e-6b9f7b2bdf1f.png)

基本的には「標準Unity Asset Store EULA」であれば、VCIに加工して販売することは問題ないはずですが、UnityAssetsStoreでも個別に商品の説明文中にメタバース利用を禁止しているものや、そもそも何処かから盗んだものを販売している人もいるので、そういったものは避けるようにはしたいものです。

なお今回は、[Cute Pet](https://assetstore.unity.com/packages/3d/characters/animals/mammals/cute-pet-96976)を利用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/5f0fffe4-f617-236a-ce6a-dc2a741a63a4.png)
バーチャルキャストのプリセットアバターもいくつかこの作者さんのアセットですね。

Assetsを購入する際のアカウントは、UnityでVCIの作業をするアカウントと同じものにしましょう。
そうでないと、Unityから読み出せないですし、「単一の法人ライセンス」で購入している場合は規約違反にもなってしまいます。

## 2. VCIをつくる環境の準備
次にVCIを作成できる環境を準備します。

こちらは、[VirtualCastToolKit](https://developer.virtualcast.jp/vctk/)のページの説明がわかりやすいので、細かくはこちらのページを参考にしてください。
※画像クリックでページが開きます
<a href="https://developer.virtualcast.jp/vctk/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/dfcc0259-d87d-b702-772d-24ce4c986cc0.png"></a>

VCIをつくる環境の準備手順は以下のようになります。
2-1. UnityHubをインストールする
2-2. [VirtualCastToolKit](https://developer.virtualcast.jp/vctk/)をDL＆展開する
2-3. UnityHubでVirtualCastToolKitのプロジェクトを開く


## 3. アニメーションをコピーして使えるようにする

#### 3-1. アセットをProjectに読み込む
準備が完了したので、アニメーションを使えるようにしていきます。
2で準備したUnityProjectを開き、PackageManagerから購入したアセットを呼び出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a53129a6-2e8a-e04d-3761-344f92679619.png)
画像右下のDownloadからダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2a70561c-6c65-6c6b-09cb-c3f016310479.png)
次にImportで、Unityのフォルダに購入アセットを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/77d66d8f-75b2-b1e6-3e01-eef1a0b4d724.png)
「Cute Pet」は、<b>Assets > Suriyun > Cute Pet</b>の階層に追加されました。

#### 3-2. VCIにしたいPrefabをシーンに追加する
VCIにしたいアセットを<b>Assets > Suriyun > Cute Pet > Prefab</b>から、シーンへドラッグアンドドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/9ca6c4ee-927d-6e96-a1de-b06be75d4f6e.png)
シーンに追加されたアセットを右クリックし、Prefab > Unpack Complete でprefabを加工できるようにします。

#### 3-3. 対象をVCIObject配下に配置する
Heritage上で右クリックして、VCI > Simple VCI を選択して、VCIを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/5779fba0-4257-ce3a-420c-5d3478ff4804.png)
VCIにしたいアセットをVCIの配下に移動し、VCIのタイトルやバージョン、作者等情報を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a4ddb178-580f-340b-1cff-d1a2bb9a7623.png)
VCIにしたいアセットを選択し、Inspector画面から「Add Component」を押下して、「VCI SubItem」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/eb3845a1-1e37-91ca-f5c3-d153df745e37.png)
また、Useでアニメーションを切り替えたいのでUseできるように、Inspector画面から「Add Component」を押下して、「Box Collider」を追加します。
また、重力で落下してしまうと困るので、Rigidbodyの「Use Gravity」のチェックをはずし、「Is Kinematic」二チェックを入れ、VCI Sub Itemの「Grabbable」にチェックを入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/0f7f3cfb-a2c3-cede-0ef5-05540a603837.png)

#### 3-4. アニメーションをVCIで使えるファイルにコピーする
アニメーション（歩いたりジャンプするような動き）がこのアセットにはAnimatorで付いています。
しかしどうやらこの形式だと、VCIでは動かすことはできないようです。
※もし、このままやる方法を知っている方がいたら教えてほしい・・・
そこで、Animetionファイルを個別にコピーして作成して、それを割り当てることで、VCIでも動くようにします。

VCIにしたいアセットを選択し、Inspector画面のAnimatorのController内を押下して、アニメーション情報があるフォルダを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/0dff91f3-5d6b-e6b3-9250-1164e0ae0a22.png)
このアセットでは <b>Assets > Suriyun ></b> に存在するようです。

フォルダ内をアイテムの表示サイズを最小にして、オブジェクトの名称が見えるようにしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/0fb4953d-cde1-8142-132a-e35678ba8120.png)
そうすると、アニメーションの種類ごとにオブジェクトが存在することがわかります。
今回は、通常の状態（Idle）、歩く状態（Walk）、ジャンプする状態（Jump）をVCIで実行できるようにしましょう。

Idleオブジェクトの階層下に三角形のアイコンのファイル「Idle」があります。
これを選択して、Animetionメニューを開いてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a512dcba-5cfa-ff6f-a3fe-49a9504d2201.png)
場合によっては読み込み専用というメッセージが出ますが、読み込み専用で表示すると画像のように見ることができるようになるかと思います。
これが、アニメーションで対象のアセットの土の部分がどう動くかが書かれている本体です。
ここから、今回のVCIに紐付けるアニメーションファイルを作ります。

まず、Heritageのアセットを選択し、その状態でアニメーション画面を開きます。
そして、右の赤枠のところから「Create New Clip」を押下します。
今回は、名前は「v_Idle」にしました。
当然、アニメーションの具体的な中身は空っぽです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2628a3ce-56aa-b2d4-57f1-5ac28d526bed.png)
※Animationファイルは、フォルダから作るのではなく、アニメーション画面から作成するやり方をしてください。この理由は、アニメーションファイルの形式がLegacyでないとVCIでアニメーションが動かないためになります。

次に、Idleオブジェクトの階層下に三角形のアイコンのファイル「Idle」を開き、アニメーションの画面を開き直します。
そこで「Ctrl+A」をして、アニメーションの情報をすべてコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/24dab69d-20d0-2027-fb62-afbeadc182c7.png)
そしてそのまま、さっき作成した「v_Idle」を選択し直して、開いたアニメーション画面で「Ctrl+V」を実行し、保存するために「Ctrl+S」を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/fc0f3ca2-3e45-cb4f-25fc-0be6bc782166.png)
これで、VCIで使うためのアニメーションファイルができました。

#### 3-5. VCIにアニメーションを紐づけ直す
アセットについているAnimatorは、VCIで使えないので削除します。
Heritageから、対象アセットを選択し、Inspectorから、Animatorを削除（Remove Component）します。
次に、Animationを追加し直します。
このAnimationの「Animations」で＋をクリックし、Element 0　に先ほど作成したアニメーションファイル「VCI-Idle」を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/e1d11835-16cd-fab7-9584-774f14c1ab2d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/447a1bbf-3a75-3c59-9627-13ee5beb92d2.png)
※複数個のアニメーションを使いたいときは、Animationsの数字を増やしてその数だけアニメーションファイルを指定しましょう。

#### 3-6. UnityEditor上で動くのを確認する
Heritageから、対象アセットを選択し、アニメーション画面を表示します。
そうすると、先程Animationsに紐づけた「v_Idle」のアニメーションが表示されるので、再生ボタンをクリックしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/28a3f6d5-e256-afd1-0152-4b867a13a5f6.png)
設定がうまく行っていれば、対象のアセットが紐づけたアニメーションで動くのが確認できます。

## 4. アニメーションの実行コードを書く
これで、実行できるアニメーション自体は移植できました。
しかしこのままではどのアニメーションがどのタイミングで動くかの情報が何もありません。
そのため、今の状態のVCIをバーチャルキャストで取り出してもアニメーションは動くことはありません。
そこで、どういうときにどのアニメーションを実行するかをLuaで書く必要があります。

今回は複雑なことはしないので、VCIをUseしたらアニメーションが3種類に切り替わるようにしてみます。
なお、前述ではIdleのコピーだけ紹介しましたが同じように「v_Jump」「v_Walk」アニメーションファイルを作成してVCIに紐づけています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/1e4b7ac1-bcef-9b54-8872-6ba43adf860d.png)


#### 4-1. 初回呼び出し時に待機アニメーションを再生する
```
local transform = vci.assets.GetTransform("Cat")
local animation = transform.GetAnimation()
animation.PlayFromName('v_Idle', true)
```

#### 4-2. Useしたら、アニメーションを切り替えていく
```
local step = 1
function onUse(use)
   if step == 1 then 
      animation.PlayFromName('v_Jump', true)
      step = 2
   elseif step == 2 then 
      animation.PlayFromName('v_Walk', true)
      step = 3
   elseif step == 3 then 
      animation.PlayFromName('v_Idle', true)
      step = 1
   end
end

```
#### 4-3. UnityでLuaコードを書き込む
Heritageから、VCIのオブジェクトを選択して、Inspector内の「VCI Object」内のScripts内のSourceにコードをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/c95e38ba-dd35-5045-f70a-71bd6d4fa3ca.png)
これで完成しました。

#### 4-4. バーチャルキャストのWebページにVCIを登録する
Unityから直接VCIをバーチャルキャストにアップロードすることができます。
VCToolKitを利用している場合は、VCIのInspectorへ「Tso Item Descriptor」を追加することで、  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/bff5918f-07ce-453c-7eaf-0bc263f58d70.png)
「VCIをVirtualCastにアップロードする」を押下すると、VCIの投稿が完了します。


## 5. バーチャルキャストで実際に動くのを確認する
バーチャルキャストにHMDを被って入って動くことを確認します。
うまく出来ていれば、VCIをUseするごとにアニメーションが切り替わり動くことが確認できます。
![2023121101582246_検証ルーム_しきはふり.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/38e77b12-2e8e-858e-aec8-133a57079cfb.jpeg)


## おわりに
この記事では、アニメーションがあるUnity販売アセットから、アニメーションがあるVCIを作る方法を紹介しました。
Unity Assets Storeや様々なストア等に現代は多くの素晴らしいアセットがあります。
それらアセットなども活用することで、VCIをリッチに表現を広げることができます。
是非試してみてください！