【Unity2020】MRTK2.6.0でTutorial （基本）

[前回](https://qiita.com/T170521/items/a6027c050ee5c4b386d4)の続き

##本題

###Tutorial用のサンプルを導入([チュートリアル2](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-02?tabs=openxr#importing-the-tutorial-assets))
[ここ](https://github.com/microsoft/MixedRealityLearning/releases/download/getting-started-v2.5.0/MRTK.HoloLens2.Unity.Tutorials.Assets.GettingStarted.2.5.0.1.unitypackage)からTutorial AssetsをDL
Importする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/9331c1df-6c0a-77f3-833f-7adae2ecf355.png)
####Cube
Assets/MRTK.Tutorials.GettingStarted/PrefabsにあるCubeをSceneに配置
positionをz = 0.5にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/edf3ed34-be9b-3cb2-f741-be627f9da53b.png)
CubeのAdd ComponentよりObject ManipulatorとNearInteractionGrabbableを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/9923ce75-d01c-7828-e4c7-b0a132dc86c3.png)
これでobjectをつかんで移動させることができる
シーンを実行するとエミュレータ内で動作させることができる
動作のさせ方は以下の通り

| Key | 動作 |
|:-:|:-:|
| w   | 前進 |
| a   | 左へ |
| s   | 後退 |
| d   | 右へ |
| e   | 上昇 |
| q   | 下降 |
| t   | 左手表示・非表示 |
| y   | 右手表示・非表示 |
| Shift長押し&マウス | 左手操作 |
| Space長押し&マウス | 右手操作 |
| 左クリック | 指タップ(クリック) |
| 右クリック長押し&マウス | 視点操作 |

- - -
###Profileの設定（[チュートリアル3](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-03)）
HoloLens2で使用するのでデフォルトをHoloLens2用に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/d9379bc4-d2e6-5df2-3772-5d9be7797297.png)
詳細な設定を変更するためクローンを生成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/3a1c4f23-fe2f-ecdf-6723-783aefea7f21.png)

Spatial Awareの欄をクリックして有効化する
(Spatial Aware：空間認識機能に関する設定)
Spatial Awareness System Profileも生成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/9f629c39-2a0e-5569-4e88-2395ad5dd7a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/d9382e9a-a37c-c911-20da-720361d7e1ec.png)
Mesh Observer Profile
TypeはTry Repairを押したら赤いのが消えた

Mesh Observer Profileもクローン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/a1a5213b-10a9-a13d-6bc1-1e51dc4f4f49.png)

Display OptionをOcclusionに変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/e7e1cfe9-e5b6-6aee-e42e-88964faed97f.png)
これで一通りの設定は終了

- - -
###オブジェクトの配置([チュートリアル4](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-04))
サンプルを用いてアプリケーションを作る

####Roverとpartsの配置
空のオブジェクトを作成(`RoverExplorer`)
座標を変更する
Transform Position x=0, y=-0.6, z=2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/30c9a4cd-8f58-4bba-b8f7-9df7f471e48f.png)
`Asset > MRTK.Tutorials.GettingStarted > Prefabs`にあるPrefabからTableを`RoverExplorer`内に配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/f48a6496-64c0-9720-62dc-19e0c445a556.png)
Tableの座標を変更
Transform Position x=0,y=-0.005,z=0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/0e7c686e-6143-ac94-91ba-b0631e5c0c8c.png)
同じようにRoverAssemblyをRoverExplorer内に配置する
座標，回転を変更する
Transform
・Position x=-0.1, y=0, z=0
・Rotation x=0, y=-135, z=0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/558eb7cb-c9d0-d7bc-0303-f826e5eee8ed.png)

空のオブジェクトを作成(`RoverParts`)
`RoverExplorer`内に配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/00c28cb2-8299-5420-14e8-c993e6b32086.png)
`RoverAssembly/RoverModel/Parts`の中にあるオブジェクトをすべてコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/a0c58eea-a37c-7b00-df1b-55472c04fbcd.png)
`RoverParts`の中にペースト
名前を変更しておく(後ろに`_Part`をつけた)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/ce9c9d71-f804-2894-4752-6f43c8fc32d4.png)
`RoverParts`を選択してAdd ComponentからGrid Object Collectionを追加
以下のように設定する
Sort Type：Alphabetical
Layout：Horizontal
Cell Width：0.25
Distance from parent：0.38
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/2d7de58d-89b5-1f7e-6470-627b81adabf8.png)

設定ができればUpdate Collectionを押す
オブジェクトの配置が変更される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/ed72fad1-5cb3-58d0-0016-e510e81adb8f.png)

- - -
###Solver（[チュートリアル5](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-05)）
####Chevronの配置
続いてオブジェクトを見失った際に場所を示してくれる機能を追加する

`Asset > MRTK.Tutorials.GettingStarted > Prefabs`からChevronをScene上に配置する
座標を変更
Transform position z=2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/2b83159e-469e-690a-15a0-c8efdcba68ca.png)
Add ComponentからDirectionalIndicatorを追加
(付随してSolverHandlerも追加される)
Directional TargetにRoverExplorerを当てる(Drag＆Drop)
View Offset：0.2に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/4caf4188-f53c-97a4-d79e-347d09fb626e.png)
これで実装完了

####オブジェクトの移動
`RoverAssembly`を選択してAdd ComponentからTap to Placeを追加
(付随してSolverHandlerも追加される)
変更は以下の通り
Use Default Surface Nomal Offset：チェックを外す
Keep Orientation Vertical：チェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/9a36afec-95df-4192-8bbe-e857efa50dc8.png)

`On Placeing Started()`で＋を押して追加
Runtime OnlyでRoverAssemblyを当てる
`Tap to Place`の`float SurfaceNormalOffset`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/32e97c74-b7d0-0a7f-c0f9-688426586c5a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/2e373f9c-806d-24d9-4b7f-5c984717380f.png)
地面として白いBoxを作成
Transform
・Position: X = 0, Y = -1.65, Z = 6
・Rotation: X = 0, Y = 0, Z = 0
・Scale: X = 10, Y = 0.2, Z = 10
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/418da03f-c244-0c22-b933-a137a7011fe5.png)
CubeのLayerをSpatial Awarenessに変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/a35aaf34-4c15-1a1d-022d-65e8fc5948c3.png)
実行するとRoverAssemblyをクリックで持つ，離すことができる
また地面に沿わせて配置することができる
（試すことができたらCubeは削除してよいとされている）

- - -
###UI（[チュートリアル6](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-06)）
####Button
RoverExplorerの中に空のオブジェクトを作成する
名前をButtonsとし，座標と回転を変更する
Position: X = -0.6, Y = 0.036, Z = -0.5
Rotation: X = 90, Y = 0, Z = 0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/8db96a65-da1f-2ad5-30a2-876735c0cbaf.png)

`Asset > MRTK.Tutorials.GettingStarted > Prefabs`からPressableRoundButtonを`Buttons`の中に配置する
配置したPressableRoundButtonをDuplicateで３つ複製する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/5c83ff83-6f17-eef4-6e30-bb4c32210bff.png)

Buttonsを選択し，Add ComponentからGridObjectCollectionを追加する
変更は以下の通り
Sort Type: Child Order
Layout: Horizontal
Cell Width: 0.2
Anchor: Middle Left
設定できたらUpdate Collectionを押す
すると配置が完了する

ボタンの名前をそれぞれHints，Explode，Resetと変更する
またそれに伴って`[ボタンの名前]/SeeltSayltLabel/TextMeshPro`からTextMeshPro-Textで名前と同じ表記に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/9351d81c-113b-61ad-da8d-aa477e010513.png)

Hintsを選択し，Interactable.OnClick()の+を押す
Runtime OnlyでRoverAssemblyを当てる
`PlacementHintsController`の`TogglePlacementHints()`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/ed354c86-7784-1993-c221-f454da351aed.png)

同様にExploadeを選択，Interactable.OnClick()の+を押す
Runtime OnlyでRoverAssemblyを当てる
`ExploadeViewController`の`ToggleExploadeView()`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/50d7dd42-4b74-94d7-9f24-7cd61fedfd9f.png)

これでHintsを押すと配置する場所を示す表示がON/OFFできる
Exploadeを押すとパーツが広がり構造が見やすい表示となる


####Menu
追従するMenuを作成する
`Package > MRTK Reality Toolkit Foundation > SDK > Features > UX > Prefabs > Menu`から`NearMenu4x1`をシーン上に配置，座標を変更する
Transform Position X = 0, Y = -0.4, Z = 0

NearMenu4x1のRadialViewをチェックして有効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/19f78fe5-5dac-559c-31dc-8de78d2caeb6.png)

`Menu/ButtonCollection/ButtonOne`を選択する
名前をIndicatorに変更
Button Config HelperのLabels/Main Label TextにIndicatorを記入
OnClick()のNone(Object)に`Chevron`を当てる
`GameObject`の`SetActive(bool)`を選択
下のチェックボックスをチェックする
アイコンをSearchにしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/adf6be8d-42f5-3d87-1b7a-a3a3887e2dfe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/bdf635a8-dade-9ee8-54ed-efdf159ef8a1.png)

これでMenuからボタンを押した際に`Chevron`が有効になるようになった
DefaultではOFFになっていてほしいので`Chevron`のチェックをはずす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/64af6aaf-55e8-01ec-7474-92374d1946d9.png)
またChevronを選択して
Add ComponentからDirectional Indicator Controllerを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/dfb93ea0-5b57-4bf4-111b-e317b653c907.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/a0d69b19-2c0a-a3cf-59d0-294212e38013.png)

`Menu/ButtonCollection/ButtonTwo`を選択する
名前をTapToPlaceに変更
Button Config HelperのLabels/Main Label TextにTapToPlaceを記入
OnClick()のNone(Object)に`RoverExplorer/RoverAssembly`を当てる
`TapToPlace`の`bool Enabled`を選択
下のチェックボックスをチェックする
アイコンをhand with rayにしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/62a53d96-fa59-2022-f298-088a6bdcae6f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/89aff922-88c0-c167-793d-ea5999c99162.png)

`RoverAssembly`を選択する
Tap To Placeの設定を以下のように変更する
・デフォルトで機能しないようにチェックをはずす
・`On Placing Stopped ()`の+を押して，None(Object)に`RoverExplorer/RoverAssembly`を当てる
・`TapToPlace`の`bool Enabled`を選択
・下のチェックボックスはチェックしない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/0b7a265c-6ccd-79b1-9af4-4f2df756ae27.png)

これでデフォルトはOFF
ボタンを押したらONになる

####テキストを追加する
`Table`で右クリックして`3D Object/Text - TextMeshPro`を追加する
Rect Transformを以下のように変更する
・Pos Y：1
・Width：1
・Height：1
・Rotation X：90

TextMeshPro - Textを以下のように変更する
・Text：Rover Explorer
・Font Style：Bold
・Font Size：1
・Extra Settings > Margins(Left, Top, Right, Bottom)：0.03
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/0ec1dc36-91e9-36ba-a1f5-c74934d3e3f0.png)

####tooltips
`Packages > Mixed Reality Toolkit Foundation > SDK > Features > UX > Prefabs > ToolTip`を開いておく
`RoverExplorer/RoverParts`の中の子オブジェクトすべてを選択する
選択した状態でAdd ComponentからToolTipSpawnerを追加
以下のように設定する
・`Focus Enabled`のチェックをいれる
・`Prefab`に開いておいたToolTipから`Simple Line ToolTip`を当てる
・`ToolTip Override Settings` > Settings Mode：Override
・`ToolTip Override Settings` > Manual Pivot Local Position Y：1.5

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/5d18c720-82fa-70b1-b3d4-6d1e1c0b6c8b.png)

今度はそれぞれの`ToolTipSpawner` の `Tool Tip Text`を一つずつ設定する
・Generator_Part：Generator
・Lights_Part：Lights
・UHFAntenna_Part：UHF Antenna field
・Spectrometer_Part：Spectrometer

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/79d97bda-0aba-65ee-371f-2961b4a337f2.png)

実行してカーソルをパーツに合わせるとTipsが出現する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/ed65771a-1262-59c9-e3eb-2b2afe460a3f.png)

- - -
###インタラクション（[チュートリアル7](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-07)）

####3Dオブジェクトの操作
`RoverExplorer/RoverParts`の中の子オブジェクトすべてとRoverAssemblyを選択する
選択した状態でAdd ComponentからObject ManipulatorとNear Interaction GrabbableとPart Assembly Controllerを追加
（Constraint ManagerはObject Manipulatorに付随して追加される）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/74904d46-e034-956a-b4e9-1e65b4f60053.png)

Object Manipulatorを以下のように設定する
 Two Handed Manipulation Type：MoveとRotateをチェックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/d0d6996a-8b72-cfa6-d73f-8d7dd5cb2655.png)

`Packages > Mixed Reality Toolkit Standard Assets > Audio`を開く
`RoverExplorer/RoverParts`の中の子オブジェクトすべてを選択
選択した状態でAdd ComponentからAudio Sourcesを追加
以下のように変更する
AudioClip：開いたAudioからMRTK_Scale_Startを当てる
Play On Awake：チェックを外す
Spatial Blend：1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/77a7ca35-4ec7-8ee0-63dd-caf0b029ff0e.png)

`RoverAssembly/RoverModel_PlacementHints_XRay/Parts_PlacementHints`の子オブジェクトを表示させておく
`RoverExplorer/RoverParts`の子オブジェクトと`RoverAssembly`をそれぞれ変更する

・`RoverExplorer/RoverParts/Camera_Part`のPart Assembly Controller
Location To Place：`Camera_PlacementHint`を当てる
・`RoverExplorer/RoverParts/Generator_Part`のPart Assembly Controller
Location To Place：`Generator_PlacementHint`を当てる
・`RoverExplorer/RoverParts/Lights_Part`のPart Assembly Controller
Location To Place：`Lights_PlacementHint`を当てる
・`RoverExplorer/RoverParts/UHFAntenna_Part`のPart Assembly Controller
Location To Place：`UHFAntenna_PlacementHint`を当てる
・`RoverExplorer/RoverParts/Spectrometer_Part`のPart Assembly Controller
Location To Place：`Spectrometer_PlacementHint`を当てる
・`RoverExplorer/RoverAssembly`のPart Assembly Controller
Location To Place：`RoverAssembly`（自身）を当てる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/cda513df-2bf2-3f98-c52d-73900cc04a72.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/2110ba4c-4a76-9c57-c184-b9804a881f04.png)

`Buttons/Reset`を選択
InteractiveのOnClick()を変更
OnClick()のNone(Object)に`RoverAssembly`を当てる
`PartAssemblyController`の`ResetPlacement ()`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/1450452c-69d9-7b5a-05b6-39cb3092c648.png)

これでそれぞれのパーツを適切な位置まで運ぶととパーツがはまります
Resetのボタンを押すと元の位置にパーツが再配置されます

####Bound Control
Bounds Controlは、拡大縮小や回転に使用できるハンドルを提供することで、近くでも遠くでも、片手で簡単かつ直感的にオブジェクトを操作することが可能となる

`RoverExplorer`を選択
Add ComponentからBoundsControlとObject Manipulatorを追加
標準ではOFFにしておくためそれぞれチェックを外す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/2a708fa9-41da-4e8f-b1d4-5ad4dc89c698.png)

`Menu/ButtonCollection/ButtonThree`を選択する
名前をBoundsControl_Enableに変更
Button Config Helperを以下のように変更
・Labels/Main Label TextにEnableを記入
・OnClick()のNone(Object)に`RoverExplorer`を当てる
・`BoundsControl`の`bool Enabled`を選択
・下のチェックボックスをチェックする
・さらに+を押して項目を追加する
・None(Object)に`RoverExplorer`を当てる
・`ObjectManipulator`の`bool Enabled`を選択
・下のチェックボックスをチェックする
・アイコンをcube with bounds controlにしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/6bcd5158-7251-02b0-8d29-48ec4a068086.png)

`Menu/ButtonCollection/ButtonForth`を選択する
名前をBoundsControl_Disableに変更
Button Config Helperを以下のように変更
・Labels/Main Label TextにDisableを記入
・OnClick()のNone(Object)に`RoverExplorer`を当てる
・`BoundsControl`の`bool Enabled`を選択
・下のチェックボックスはチェックしない
・さらに+を押して項目を追加する
・None(Object)に`RoverExplorer`を当てる
・`ObjectManipulator`の`bool Enabled`を選択
・下のチェックボックスはチェックしない
・アイコンをcube with bounds controlにしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563922/67446059-cb99-5ac3-c080-839262c1af22.png)
これでEnableボタンを押すとオブジェクトの拡縮，移動が可能となり，Disableボタンで変更を終了することができる

##あとがき
以上で2~7のチュートリアルは終了する
以降8：アイトラッキング，9：ボイスコマンドは応用として次回にする

##補助資料
[作業映像](https://youtu.be/J6WKPhQc2tk?t=1021)
シーン分けできたらします...