【Oculus Quest2】テレポート移動するプレイヤーの実装

Oculus Integrationを使ってテレポート移動を実装します。
![写真 2022-06-21 17 30 50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/365393ab-76bd-89fb-4d9a-a4fa27b52a48.gif)

### 環境
Windows 11
Unity 2021.3.4f1
Oculus Integration 40.0
Oculus Quest 2

### 参考にさせて頂きました
今回は下記の3つの記事・動画の内容を組み合わせて実装しました。
当記事は簡略化しておりますので、より詳しい解説はリンクからご参照下さい。

https://xrdnk.hateblo.jp/entry/2020/03/25/002404
https://www.youtube.com/watch?v=10xu4exNstQ
https://developer.oculus.com/documentation/unity/unity-sf-locomotion/?locale=ja_JP


# 準備
## プレイヤーの作成
空のオブジェクトを作成し、名前をVRPlayerControllerとします。
RigidbodyとCapsuleColliderをAdd Componentします。
今回は画像のように設定しました。
Colliderの大きさなど、実装したい内容に合わせて調整して下さい。
![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/7de05776-aa05-af2f-d3d2-2779a0080715.png)


## OVRCameraRigを設定
Oculus Integrationをインポートし、OVRCameraRigをVRPlayerControllerの子として配置します。
OVRCameraRigのTracking Origin TypeをFloorLevel に設定します。

## プレイヤーの設定
VRPlayerControllerにSimple Capsule With Stick MovementをAdd Componentします。
スティック移動やテレポート移動ができるスクリプトです。
CameraRigの項目にOVRCameraRigをアタッチします。
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/9ced188a-223c-ee70-7190-6fb520338a79.png)

## コントローラーを配置
OVRCameraRig > LeftHandAnchorとRightHandAnchorの子に、お好みのコントローラーを配置します。
今回はCustomHandLeftとCustomHandRightにしました。
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/826fd321-df8c-de02-348e-17886dd9705a.png)

## 環境の準備
MainCameraは削除し、Planeを配置しておきましょう。
後で使うTeleportDestinationとTeleportLaserプレハブも、シーンに配置しておきます。(配置せずに進めることも出来ますが、今回はわかりやすいように配置しています。)

そしてレイヤーを新規作成します。
Layer > AddLayer > User Layer 8 にTeleport を作成し、PlaneのレイヤーをTeleportに設定します。
後の設定で、このレイヤーに設定した場所のみにテレポートするようになります。
![スクリーンショット (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/429ab25e-d5c1-4136-d3d2-3970d946fa51.png)


# LocomotionControllerの作成
## コンポーネントの準備
VRPlayerControllerの子に空のオブジェクトを作成、名前をLocomotionControllerとします。
ここに下記画像のコンポーネントをAdd Componentします。
似た名前のものばかりなのでご注意下さい。
![スクリーンショット (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/72706299-6ade-9045-bc7a-4fbf1dac6ff2.png)

## コンポーネントの設定
各コンポーネントの内容と設定を確認していきます。
### LocomotionController
CameraRigにOVRCameraRigを、CharacterControllerにVRPlayerControllerを、
PlayerControllerにVRPlayerControllerをD&Dします。
![スクリーンショット (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/0a2e882d-a355-6e61-07c8-91413b621c8a.png)

### Locomotion Teleport
今回は移動方法をテレポートのみにするので、スティックを倒した際にプレイヤーが動いてしまわないように設定します。
画像の赤枠を参考に、不要なチェックを外しましょう。

Teleport Destination PrefabとTeleport Destination Layerも、画像のように設定します。
ここで指定する「8」は、Planeに設定したテレポート先のレイヤーの番号です。
![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/68b30bd4-94d5-1279-3e31-24315ca6ab5d.png)

### Teleport Input Handler Touch
テレポート移動のための入力処理を設定するコンポーネントです。
今回は左のサムスティックでテレポートするように設定しました。ここはお好みでカスタマイズしてください。
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/2196c85a-ccb9-b026-21eb-10a9a4b0a166.png)

### Teleport Target Handler Physical
テレポート先を指定したい場合に使うコンポーネントです。
Aim Collision Layer MaskにTeleportレイヤーを設定します。
これで、Teleportレイヤーに指定した場所へだけテレポートするようになります。

### Teleport Aim Visual Laser
テレポート先へと伸びるレーザーを、視覚的に表示するコンポーネントです。
Laser Prefabの項目にTeleportLaserをアタッチします。

### Teleport Aim Handler Parabolic
Teleport Aim Visual Laserだけだと直線的なレーザーになりますが、これを追加することで曲線を描くようになります。
Rangeが0だとレーザーが描画されない為、適当な値にします。
Aim Velocityで移動できる距離、Aim Stepで曲線の描画の滑らかさが変わります。お好みでカスタマイズしてください。
今回は画像のようにしました。

![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/d03fe3a8-b4c6-dc48-7f7e-67a4e6aee7fa.png)

### Teleport Orientation Handler Thumbstick
テレポート移動後にどの方向に向くかをコントローラで指定できるようにするコンポーネントです。
これが無いと上手く動かないようです。
今回はThumbstickをR Touchに設定します。

### Teleport Transition Instant
下記3つのどれをAdd Componentするかで、テレポート移動の仕方を選ぶことができます。
お好みで選んで下さい。
- Teleport Transition Instant
エフェクト無しで瞬時に移動。
- Teleport Transition Blink
フェードアウトを挟んで移動。一番酔いにくい。
- TeleportTransitionWarp
移動する間の描画を省略しない。酔いやすい。

# 完成イメージ
![20220621_155623.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/6b557d63-eb8a-363a-b1c9-9a8bc1682655.gif)

あとはお好みで見た目を整えて下さい。
TeleportLaserの色はTeleportAimVisualLaserのスクリプトから変更できます。
私はこのように仕上げてみました。

![写真 2022-06-21 17 30 50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666148/1d7735dc-11db-27f8-e32e-eccd78cd6f6a.gif)


お疲れ様でした。