VRCアバターへの飛行機能、飛行時アイテム、これらスイッチの実装

# 目的・注意
- [らすちんワークス様提供のフラット](https://booth.pm/ja/items/3562180)くんが [Best Place様提供の肉球クッション](https://booth.pm/ja/items/3235576)に乗って飛ぶ機能を作成の上、ON/OFFできるようにする
- アバター、乗り物は適宜変更してください
- アバターのサイズによっては下の手順のみでは飛行できないことがあります（標準サイズフラットくんはOK）

# コライダージャンプ(飛行機能)の実装
まずは飛行機能を実装します。
| No | 説明 | 参考画像 |
| :-- | :- | :--: |
| 1 | Create Emptyを実行 | ![q1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/caad70e1-6eb9-26ac-5324-26d13932ee1c.png)  |
| 2 | GameObjectの名前をJumpColliderに変更 | ![q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/2d7595c0-ced8-716e-2e49-ee2f4b87901d.png) |
| 3 | JumpColliderのInspectorより「Add Component」を実行、boxを検索して「Box Collider」を追加 | ![q2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/358a93bf-cd0b-c439-95bf-6e92aa874997.png) |

以上で、飛行機能の実装完了です。
アバターをアップロードして動作確認しましょう。
ジャンプ連打で飛べば成功です。

# アイテムの追加
足元にアイテムを追加することによって浮いている雰囲気に説得力を持たせます。
アイテムは、後で機能と同時にON/OFFするために1つのオブジェクトにまとめます。
| No | 説明 | 参考画像 |
| :-- | :- | :--: |
| 4 | No1・2と同じ手順で、Create Empty→名前をJumpObjectに変更 |![q3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/4562c6e9-b7fb-f978-7532-c997b98075bd.png)|
| 5 | JumpColliderをJumpObjectの中にドラッグ&ドロップ| ![q4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/b137f713-b760-c330-6f9e-747120313ef0.png) |
| 6 | [肉球クッション](https://booth.pm/ja/items/3235576)等使いたいアイテムをDLしてunitypackageをImport |
| 7 | **Assets/肉球/FBX内の**肉球をJumpObjectの中にドラッグ&ドロップ<font color=lightgray>Assets/肉球内の肉球は椅子判定があるマップ用アイテムなので今回は使わない</font> | ![q5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/5e7e1f99-eae5-220d-512c-6099fbdb530a.png) |
| 8 | Assets/肉球/Matelialの1,2をScene上肉球の適切な場所にドラッグ&ドロップしてマテリアルを適応 | ![q6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/d71e04ae-0ad6-5175-1ca5-6396fc654026.png) |
| 9 | 好みに応じて肉球のInspectorを変更して角度や座標を変更する | ![q7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/ca7b40e4-9faa-fea9-a365-f8786337f185.png) |

以上で、アイテムの実装完了です。
アバターをアップロードして動作確認しましょう。
※初回はAutoFixが要求されるので実行してください。
ジャンプ連打で空を飛び、アイテムが足元についてくれば成功です。

# スイッチの実装
ここまででアイテムに乗って飛ぶことができますが、機能が常時ONで割と不便です。
ON/OFFを実装していきます。
<font color=lightgray>Radial InventryでJumpObjectをON/OFFすればいいだけなのですが、私の宗教上の理由によりAnimation実装の方法で解説します！</font>

**スイッチ用アニメーションの作成**
| No | 説明 | 参考画像 |
| :-- | :- | :--: |
| 10 | **JumpObject**のInspectorのチェックを外し、非表示にする<font color=lightgray>手順の目的：通常は飛行機能はいらないので、OFFにしておく。ObjectをON/OFFすればアイテムとコライダーが同時にON/OFFされる。</font> | ![q16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/db9f97f0-1932-4ae8-759f-39d0c5a25766.png) |
| 11 | Hierarchyよりアバターを右クリックし、Duplicateを実行する。すると「flatver.1.01 (1)」というアバターができる。 <font color=lightgray>手順の目的：Animationを作る際コントローラをアバターに紐づけする必要があり、アバターが汚れるので、作業用に複製する。</font>| ![q9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/1f4d1ee6-e30e-0c94-4a92-1c55e99e3173.png)
| 12 | Assets/Flat/Animの何もないところを右クリックし、Create, Animationをクリック | ![q10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/2116724f-8746-3672-39eb-b290b1fadbdc.png) |
| 13 | 作成したAnimationの名前をJumpSWにする | ![q11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/f156f290-bafc-3cc9-58ca-ad60ad246bed.png) |
| 14 | No11で作成した「flatver.1.01 (1)」にJumpSWをドラッグ&ドロップ <font color=lightgray>実行すると自動でアニメーションコントローラというものが作成されて(1)に関連付けされる。これをしないとアニメーションの編集ができない。</font>| ![q12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/690c030d-941c-aa73-b465-d1c403fd81ef.png) |
| 15 | JumpSWをダブルクリックしてAnimationウィンドウを開く<font color=lightgray>環境によってはタブ化されています。操作は同じ | ![q13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/f63562ad-5295-5b45-9fce-9b0a85f49945.png) |
| 16 | HierarchyよりNo11で作成した「flatver.1.01 (1)」をクリック <font color=lightgray>これをするとAnimationの録画ボタンがグレーアウトされていたところ、カラーになります。後の手順でまたグレーアウトして困ったら再度これ実施の事| ![a14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/3f436baf-1205-c461-41c9-7f2d6ecbe063.png)|
| 17 | No15で開いたAnimationウィンドウで「JumpSW」が選択されていることを確認したら、赤丸のボタンを押す。<font color=lightgray>もともとのアバターに別のアニメーションが組み込み済みだと違うかもしれないので、その場合はJumpSWを選択。| ![q15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/98b6cf9c-93b6-6beb-3e1e-e7951544473f.png) |
| 18 | 「flatver.1.01 **(1)**」のJumpObjectのInspectorにおいて表示のチェックを入れる<font color=lightgray>なお間違えて元のアバターに触ると赤丸がグレーアウトするのでチェックを戻したりしつつNo16からやり直し | ![q18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/80f67cd7-be7c-a184-aa30-39e47a28121e.png) |
| 19 | Animationウィンドウの赤丸を押して操作記録を終了する。 | ![a19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/d37d38e3-79b9-0acb-b596-e611b4459802.png) |
| 20 | Inspectorより(1)のアバターを削除 | ![a20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/239a2dd2-545d-07b1-e268-d60164b38cdd.png) |

以上で、「実行するとJumpObjectを有効にする」Animationを作りました。
まだこれを実行する方法がないので、作っていきます。
まずは、呼び出すためのUIと関連付けの変数を作ります。


**アニメーション呼び出しの為のExpressionMenu, Parametorの作成**
| No | 説明 | 参考画像 |
| :-- | :- | :--: |
| 21 | アバターのInspector内Expressionより、Parametersをダブルクリック | ![a22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/a3332976-0308-de15-da40-44053791b96e.png) |
| 22 | Addを押してパラメータを追加、Nameを「fly」、Typeを「Bool」、Savedを「空欄」に設定 <font color=lightgray>空欄にしておくと、ワールド移動等のさい自動解除されます| ![a23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/b8a5a8d4-dc46-ae55-96b9-9659257a12a2.png) |
| 23 |アバターのInspector内Expressionより、Menuをダブルクリック | ![a24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/18b42765-fd30-bfd7-458f-670df993b569.png) |
| 24 |Add Controlを実行→作成されたNew Controlをクリック | ![a25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/7907a34d-b59c-6c27-2305-b1ae3858dba7.png) |
| 25 |Nameをfly, TypeをToggle, Parameterをfly,Boolに設定 <font color=lightgray>NameとIconはなんでもOK|![a26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/aa3b1fd9-ebd1-bb56-c149-0bf0b46b477d.png) |

以上で、ExpressionMenuに「fly」というメニューを追加し、クリックすると「fly」というパラメータがtrue,falseを交互に移り変わるUIを作りました（ここまでアバターアップロードして確認することもできます）。
ただこのパラメータとAnimationの紐づけをしていないので、現状押しても何も起きません。
最後にFXを設定してこのパラメータとAnimationの紐づけをしていきます。

**FXの設定によるExpressionParametorとAnimationの紐づけ**
| No | 説明 | 参考画像 |
| :-- | :- | :--: |
| 26 | アバターのInspector内Playable Layersより、FXをダブルクリック | ![a27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/196b1b5f-fa45-9113-5514-74d6a595aaa1.png) |
| 27 | Animatorが表示されるので、Parametersをクリック | ![a28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/14aa2b40-0926-7de8-4c0e-496c0e1fbd3e.png) |
| 28 | +ボタンを押して、Boolをクリック | ![a29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/f9377abb-34e5-5dd8-0767-9d505ba061b5.png) |
| 29 | 追加したParameterの名前をflyに変更  <font color=lightgray>**No22で作成したParameterのName,Typeと厳密に一致する必要がある**| ![a30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/e35d057d-071c-94c2-4026-94cc7186bdab.png) |
| 30 | Layersをクリック | ![a31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/174c02fd-d10e-26d4-5fc5-5dca804509e6.png) |
| 31 | +ボタンを押して作成、名前をflyに変更　<font color=lightgray>この名前はなんでもいい | ![a32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/cc05ce2f-1bbc-6b71-eac7-d4ac1783434c.png) |
| 32 | <font color=red>**flyの歯車マークを押して、Weightを1に設定**</font>　<font color=lightgray>過去に何人のVRC民がやり忘れたんだろう・・？| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/65f5e533-0438-5cd2-0f65-b07d0e4d3044.png) |
| 33 | Animatorの格子柄部分の空白を右クリック、Create State→Empty | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/f77587e5-e277-b19d-6d62-258760a147dd.png) |
| 34 | No33をもう一度実施 | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/d6b805f8-c56e-bcf6-9f5d-627e425cb280.png) |
| 35 | No34で作ったものを左クリックしてInspectorを表示する。|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/d1987620-78aa-8d8b-d880-7428733802bb.png) |
| 36 | 名称をONに変更、MotionをJumpSWに変更 <font color=lightgray>ONという状態になったら、JumpSWというAnimationを実行する、という指定| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/1d8d9e04-1be5-901a-ac23-aa0044b53c56.png)|
| 37 | No33で作ったものを左クリックしてInspectorを表示、名称をOFFに変更 |![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/2e5eef9e-ea41-d650-3557-7c922819ff07.png) |
| 38 | OFFを右クリックしてMake Trandition | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/20622a1b-3aef-9479-b5a5-58292edbad8d.png) |
| 39 | ONを左クリックすると矢印でつながる |![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/5c1bc67d-6af4-91fb-945b-97d11b129bbf.png)　|
| 40 |No.38,39同様にしてONからExitに矢印を繋げる |![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/2715173b-b2db-bcd6-432b-5f91bfbb79f7.png)　|
| 41 | OFFからONの矢印をクリックしてInspectorを表示 | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/52a6a603-be3c-ee8e-77a0-80ed6eaec451.png)|
| 42 | HasExitTimeのチェックを外し、下の+を押してConditionsを追加する。追加したConditionはflyをtrueに設定する <font color=lightgray>flyがtrueになったら（ボタンを押したら）ONという状態にする、という設定| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/673ff25b-f499-c73e-b962-5a276c20a721.png)|
| 43 | No41,42同様にしてONからExitのInspectorをflyをfalseに設定 <font color=lightgray>flyがfalseになったら（もういちどボタンを押したら）Exitという状態にする、という設定（このとき自動でNew State(この場合OFF）に戻る）| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/0919f2ad-00c3-aab5-fe03-2fb4b8ed955d.png) | 

これで完成です！お疲れさまでした！
アバターをアップロードして動作確認しましょう。
- 普段は何もアイテムがなくて、飛ぶこともできない
- ExpressionMenuを開くとflyというメニューがあり、押すと足元にアイテムが出てくる
- その状態でジャンプ連打すると飛ぶことができる

これがうまく動けば、成功です！


# うまく動かなかった場合…
- 間違いなくアップロードに成功しているか確認（体の色を変えてみる等）
- アバターが対応しているか確認
    - スケール0.83(標準サイズ）のフラットくんであること
    - スケールシステム等で一時的なものを含みアバターのサイズ変更をしていないこと
- DEBUG機能を開いて確認
    1. 緑色のメニューを開く
    1. Optionsを開く
    1. Configを開く
    1. Debugを開く(VRモードの場合アバターにめり込んで開いたりします。Grabして移動可能）
    1. Expressionのflyに矢印がないとき次の通りであること
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/9d6a8228-439e-d52a-7b48-27a7b01aec5e.png)
    1. Expressionのflyに矢印があるとき次の通りであること
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/8ec8a566-1826-eb37-defa-2a36c5a9be75.png)

# VRモードの方向け・・・DEBUGを開いた後なんか閉じれなくなった上にExpressionMenuが動かなくなった！！？！という場合
<font color=lightgray>この記事とは直接関係ないけれど、DEBUGを初めて使った時にあるあるの困りごとについて…</font>
- ExpressionMenuは「選択するだけで動くモード」と「選択してからその手でトリガーを引くと動く」モードがあって、後者のモードに入ってしまったと思われます
    1. 緑色のメニューを開く (現状で表示されていて、Flick Selectというメニューが見えていれば最後まで飛ばしてください)
    1. Optionsをスティックで選択して、トリガーを押してOptionsに入る
    1. 同様にして、Configを開く
    1. メニュー一番下のFlick Selectをスティックで選択して、トリガーを押す