【STYLY】等身大アクションフィギュアの作り方【PICO4】

# はじめに
これは【STYLY主催】XR Advent Calendar 2022の19日目の記事です。
PICO4で遊べる **等身大アクションフィギュア** を作ってみました。
簡単な作り方をStep by Stepで解説します。

https://twitter.com/afjk01/status/1582525814520049665?s=20&t=RoHEpxEZKbPqQL2Lx5eMsQ

## 環境
今回使う環境は以下です。
* Unity2019.4.29f1
ModuleとしてWindows/Mac/Android/iOS/WebGLのBuild Supportを入れてください。
* [Ragdoll helper](https://assetstore.unity.com/packages/tools/modeling/ragdoll-helper-49288)
* [STYLY Plugin for Unity](https://styly.cc/ja/download/)

# 作り方
# UnityEditorにキャラクターをインポート
HumanoidモデルならなんでもOKです。
今回は「Space Robot Kyle」をアセットストアからインポートします。

https://assetstore.unity.com/packages/3d/characters/robots/space-robot-kyle-4696

HierarchyにKyleのPrefabを配置しま...うゎあ、ピンク色！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/32a1cd8e-b82c-1c79-0a99-a9590b4065b2.png)

Kyle君、いつの間にかシェーダーがURPになったんですね。
STYLYはURP非対応なので、Unlit Textureに変えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/d9e5c488-2fc6-1792-6227-fbf799b8c278.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/ddaf13aa-1c3a-4e5a-93d9-c492dc3dcdca.png)

# Ragdoll Helperでセットアップ
Ragdoll Helperを使ってKyleをRagdollにしましょう。
アセットストアからインポートしてください。

https://assetstore.unity.com/packages/tools/modeling/ragdoll-helper-49288

## セットアップ
Unityメニュー [Window]>[BzSoft]>[Ragdoll Helper]を選択してダイアログを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/d84e9210-7cc2-7291-d4cc-3f122dd0675a.png)
HierarchyでKyleのGameObjectを選択すると画像のように **Humanoid selected** と表示され、セットアップが可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/f050a76a-c8b3-a237-23c8-1805dac80589.png)

試しにCreateをクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/3828168e-3dab-e58c-5d9b-c34d88e726da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/a29505aa-8717-02aa-ba5c-eaefed6f90fd.png)
各部位にCollider、Character Joint、Rigidbodyが自動で付加されます。便利ですね！！
Colliderのサイズが大きすぎたりしたら手動で調整しましょう。

この状態で実行してみます。
落っこちない様に床になるPlaneを配置してPlayボタンを押すと...
物理演算によってぐにゃっと崩れます。糸が切れた操り人形という感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/4e747c72-5167-977b-b573-0aa36db4950d.png)

崩れてほしくないので、もう一度Ragdoll Helperで再設定します。
今度は **Rigid Drag & Rigid Anguler Drag の値を1000にしてCreateボタンを押して下さい。**
![2CE4C4A4-AA1D-4134-9AC3-42CCA568C07B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/6270c076-d29c-4c4b-8f00-850b34145f5b.jpeg)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/1f8f1bf1-7e4b-923e-0d50-25083ba5f145.png)
重力に抵抗してポーズが固定できました！

Rigid Drag、Rigid Angluar Dragはそれぞれ移動・回転の空気抵抗です。
この値を大きくすることで重力に抗って位置を固定出来ます。

# コントローラーで操作出来るようにする
キャラクターの各部位を動かしてポーズを付けられるようにしましょう。
まずはSTYLY Pluginを[ここ](https://styly.cc/ja/download/)からダウンロード＆インポートしてください。

https://styly.cc/ja/download/

STYLY Pluginには **InteractionSDK** と言う簡単にインタラクションを付けられる機能が備わっています。

https://styly.cc/ja/manual/interaction_sdk_manual/

InteractionSDKのSTYLY_Attr_Draggableコンポーネントを付けるとマウスやVRコントローラーでDrag操作出来ます。

## 各部位をDrag操作出来るようにする
Hierarchyの検索欄に「Rigidbody」と入力。
フィルタされたGameObjectを全て選択してください。
この状態でInspectorでSTYLY > STYLY_Attr_DraggableコンポーネントをAdd Componentすると一括で追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/fae8e5ff-d4d2-2b25-5dc4-9dcb1700f074.png)

InteractionSDKにはUnityEditorで動作するシミュレーターがあるので、Playすればマウス操作でDraggableの操作を確認できます。が、今回は空気抵抗の値が大きいので動きません。

# VRで動作確認する
* STYLY Local Pleview Toolを使えば、Unityから直接PICO4やQuestなどのVRデバイスで動作を確認出来ます。
※ STYLYはデバイスに事前にインストールしてください。PICO4の場合はストアで検索すれば見つかります。
Quest版は [App Lab](https://www.oculus.com/experiences/quest/3982198145147898/) から入手できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/cee00251-d12e-c5cc-0d79-d93818c0eff0.png)

https://styly.cc/ja/manual/styly-local-preview-tool/

Unityメニューから、[STYLY] > [STYLY Local Preview Tool]でダイアログ表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/4ec27da8-5edc-98ce-c553-c12f7d8df9f4.png)
PCとPICO4をUSBで接続して、「Preview on Android VR」ボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/9748e51f-fdf3-218c-8d5d-d1d72e404a46.png)

STYLYが起動してシーンが読み込まれると成功です！
各部位をDragしてポーズをつけましょう。コントローラーでポインターを当ててTriggerボタンでDrag出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/7bb54611-8ec9-f1b6-cbae-670240966dbb.png)

## パススルーにする方法
パススルーにするにはSkyboxを外すだけです。
STYLYではSkyboxを外すと背景が透過します。分かりやすいですね！！

* Light SettingからSkyboxをnoneにしてください。
VRデバイスはPICOのみパススルーに対応しています。Questではパススルーになりません。悪しからず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/eae08fcc-617a-0db5-8cd7-523af3c03820.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/2c14d2a3-b623-1cf1-b352-29acf7a8dd41.png)
これで再びLocal Preview Toolを実行すると...
PICO4のカラーパススルーで現実空間に等身大でKyleを召喚出来ました！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/d5d87417-435a-8c27-1647-3e52338e60aa.png)

# STYLYで共有しよう！
STYLYにアップロード＆公開すれば、作品を共有出来ます。
こちらの記事を参考に、Prefabとしてアップロードして下さい。

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

STYLY Studioでのシーン作成はテンプレートに「AR Scene Template」を選択して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/3597fe72-0698-2b5e-fa12-2f6aff422bf1.png)
AssetSelector > My Uploads > Unityから、アップロードしたモデルを選択して配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43734/bc686eeb-f826-4bee-33bb-7364b826d15b.png)
PublishしてGalleryページのURLを共有しましょう！

公開された作品をPICO4で体験するにはMyListに登録してください。
今回作った物もこちらのページで見ることが出来ます。

https://gallery.styly.cc/scene/54368e8b-a8a4-4ec7-9650-1667f040af95

# おわりに
スクショでは伝わりにくいと思いますが、等身大のキャラクターのポージング、やってみて思いの外楽しかったです。
是非、お好きなキャラクターでやってみて下さい！

---

Psychic VR Labでは新メンバーを募集しています！
どうぞお気軽にご応募ください！
https://psychic-vr-lab.com/recruit/