mocopiのモーションデータをSTYLYで再生する

## はじめに
Sony製モーションキャプチャデバイス「[mocopi](https://www.sony.jp/mocopi/)」で記録したモーションデータをSTYLYにアップロードしてみたので、手順を解説します。

https://twitter.com/afjk01/status/1616668995045953543?s=20&t=yLKJoAjIMTwYQ75Mw99lsg

## 手順
1. mocopiでモーション記録する
1. bvhファイルをfbxに変換する
1. Unityでキャラクターにモーションデータを適用する
1. STYLYにアップロードする

## mocopiでモーションを記録する
* mocopiアプリで記録
モーションを選択し、保存モードで記録ボタンを押せば記録されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/9c524228-f82d-521b-d849-14952e8c9e6c.png)

* bvhファイルを取得する
ファイルの保存場所は以下の通りです。iPhoneの場合はファイルアプリなどで取り出すことができます。
> ヒント
> データ（BVHファイル）は、スマートフォンの下記の場所に保存されます。
> iPhone：mocopiフォルダのMotionData配下
> Android：ユーザーが初回保存時に指定したフォルダ配下

https://helpguide.sony.net/mobile/qm-ss1/v1/ja/print.pdf

## bvhファイルをfbxに変換する
STYLYにアニメーション付きのキャラクターをアップロードために、Unityにインポートします。
Unityは直接bvhファイルをインポートできないのでBlenderを使ってbvhをfbxに変換します。

### bvhファイルをインポートする
File > Import > Motion Capture(.bvh)
でmocopiのbvhファイルを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/48826a5b-2d00-5dd9-cffd-84a0581c7d62.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/5e319d9f-1b1e-a983-bf51-9d52e00b1d45.png)

### Frame Rateを50に変更する
Timelineを表示し、アニメーションを再生するとちょっともっさりしています。
FPSが24になっているため50に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/b78cb7de-45d0-e8b6-48d7-099caff4adbb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/c8f10a68-6ac9-ea9a-9de4-de1c6f8c8eb0.png)

### 再生範囲を調整する
TimelineのStartとEndの値を変更して再生範囲を調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/20718ee9-7818-331a-76e0-64d73aa6b5c5.png)

### fbxファイルにエクスポートする
File > Export > FBX (.fbx)を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/efb75d08-09a9-3a9f-5fc3-bdd567bd4ad3.png)

Object TypesはArmatureのみを選択してExport
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/5faa467d-1b79-0cba-b431-7e3fd5851897.png)

毎回同じ操作をするのは面倒なので変換スクリプトを作成しました。

https://qiita.com/afjk/items/334b69727ea473a53190

## Unityでキャラクターにモーションデータを適用する
### fbxファイルをUnityインポート
エクスポートしたfbxファイルをUnityのProjectへDrag & Drop
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/e8985062-5765-e69c-0a67-076dd0a991ce.png)

RigのAnimation Typeを Humanoid に変更し、Apply
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/1ca31b59-d9b7-7d4a-5a75-1dea302fb8fb.png)

### Humanoidのキャラクターを用意する
Humanoidなら何でもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/f7fd752d-bcb9-ad89-df3b-556a38fd8104.png)

### fbxからキャラクターにアニメーションを適用する
* Animatorの場合
Animation をHumanoidモデルへDrag & Drop
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/11693712-53cd-fea5-a0bf-6f55eabcaa56.png)

Unity EditorでPlayすると動き出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/ce85ff09-2054-f7ef-e224-439fa271b721.png)

* Timelineの場合
Timelineウィンドウを開き、キャラクターをHierarchyで選択してCreateボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/29f9fbe8-081b-24da-9c57-294e5ca64b44.png)
Animator欄ができるので、ここにmocopiのアニメーションデータをDrag & Drop
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/f9bcd77e-4618-8eea-3bd9-d2f31e6eb7eb.png)

Timelineで操作できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/98e7465d-007d-e378-b867-53e39f74cc5c.png)

## STYLYにアップロードする
こちらの記事を参考に、GameObjectをPrefab化してSTYLYにアップロードしてください。

https://styly.cc/ja/manual/unity-asset-uploader/

https://qiita.com/afjk/items/e2925366fa99fa70bb10#styly%E3%81%A7%E5%85%B1%E6%9C%89%E3%81%97%E3%82%88%E3%81%86

## おわりに
mocopiはスマホがあればワイヤレスでお手軽にモーションキャプチャできる素晴らしいデバイスだと思います。
本記事ではSTYLYでmocopiで記録したモーションデータを再生する方法について解説しました。
STYLYでのAR/VRコンテンツの制作に参考になれば幸いです。