手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)

日本時間 10/2(金)、MRTK v2.5.0 がリリースされましたね！🎉
(**MRTK** (**Mixed Reality Toolkit**) とは、HoloLens などの Mixed Reality アプリを開発するさいに利用する Microsoft 公式 SDK です。)
なので、`手乗りちょまぎょ!(*ﾟ▽ﾟ* っ)З` アプリ開発手順を MRTK v2.5.0 でもう一度手順をなぞってみようと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8e2f9ff1-05ed-c0f4-2649-fc33eb5d88d6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/63e3f636-cf84-43a4-5445-8e2c2bc912e5.png)

もともと、この`手乗りちょまぎょ!(*ﾟ▽ﾟ* っ)З` アプリは、
3 か月弱ほど前 (2020 年 7 月)、モンさんの神ブログ記事『[MRTK v2.4.0を使ってHoloLens2で手乗りキャラクターアプリを作成する](https://bluebirdofoz.hatenablog.com/entry/2020/07/21/232553)』をもとに作成したものです。

なので、今回、復習がてら、
また彼のこの記事を見ながら最新の MRTK v2.5 で手順をやり直してみたスクショを
こちらにメモとして残しておこうと思います。

（まあ大体手順同じですが、今回 MRTK v2.5 になって Unity Package Manager に対応したので、そこだけ新しい手順になりました。）

（v2.4 から 2.5 になってもっと色々変わるかと思ってやっていたのですが、この手乗りアプリの場合、本当にそこしか変更なかったので、なので、途中まで書いたら「あとはモンさんのブログ見てください」となります）

## ちょまぎょ 3D モデルについて

モンさん ([@HoloAdventure](https://twitter.com/HoloAdventure)) が「記事の紹介のお礼に」と
ちょまぎょ `(*ﾟ▽ﾟ* っ)З` をモデリングしてくれました！
アスキーアートを 3D にデザインするところから、それをモデリングするところまで、本当に全部すごい！（感動）　ありがとうございます…！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c1c0e76e-9047-2c62-4c87-4fcd5923366e.png)

## 参考資料

* モンさんのブログ記事：
 * 『[MRTK v2.4.0を使ってHoloLens2で手乗りキャラクターアプリを作成する その１](https://bluebirdofoz.hatenablog.com/entry/2020/07/21/232553)』
 * 『[MRTK v2.4.0を使ってHoloLens2のHelloWorldアプリを作成する その１](https://bluebirdofoz.hatenablog.com/entry/2020/06/03/233145)』
* 公式 [MRTK v2.5 リリースノート](https://techcommunity.microsoft.com/t5/mixed-reality-blog/mrtk-2-5-0-is-now-available-on-github-and-unity-package-manager/ba-p/1732715) 
* 公式『[MRTK 公式ドキュメント](https://microsoft.github.io/MixedRealityToolkit-Unity/version/releases/2.5.0/Documentation/WelcomeToMRTK.html)』
  * 今回 Unity Package Manager 対応が入ったのでそのページ：『[Mixed Reality Toolkit and Unity Package Manager](https://microsoft.github.io/MixedRealityToolkit-Unity/version/releases/2.5.0/Documentation/usingupm.html)』
* 基本
  * 公式チュートリアル『[3.MRTK プロファイルの構成](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mr-learning-base-03?WT.mc_id=spatial-8948-machiy)』
  * MS 公式ドキュメント『[Unity 用の MRTK の概要](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-getting-started?WT.mc_id=spatial-8948-machiy)』
  * Microsoft の自主学習サービス『Microsoft Learn』の Mixed Reality モジュール『[Mixed Reality ツールキットを使用して Unity で Mixed Reality プロジェクトを設定する](https://docs.microsoft.com/ja-jp/learn/modules/mixed-reality-toolkit-project-unity/?WT.mc_id=spatial-8948-machiy)』
* この記事の内容の登壇スライド『[手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応) - SlideShare](https://www.slideshare.net/chomado/mrtk-mrtk-25-238719649/)』

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ce4c0df4-9422-42e2-439d-0ac594efa0f2.png)
https://www.slideshare.net/chomado/mrtk-mrtk-25-238719649/

# MRTK について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a5ae3e07-59b5-2304-a1dc-6570d6d83703.png)


> MRTK (Mixed Reality Toolkit) とは
> Mixed Reality アプリケーション向けのオープンソースのクロスプラットフォーム開発キット(SDK) です。

(引用元：MS 公式ドキュメント [https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-getting-started](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-getting-started) )

とくに HoloLens アプリ開発するならほぼほぼ必須だと思う。

### モジュール化されている MRTK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b55d8e3b-3ae0-5d86-e601-1dbae5340280.png)
(↑図：[MRTK の GitHub レポジトリ](https://github.com/microsoft/MixedRealityToolkit-Unity)より)

MRTK v2 はきれいにモジュール化されており、
例えば、今回の手乗りちょまぎょアプリに使うコンポーネントは以下の 6 つです：

* `Hand Tracking`：ハンドメッシュの表示で使用
* `Profile`：プロファイル設定で使用
* `Solvers`：手乗りのオブジェクト追従で使用
* `Spatial Awareness`：床に落ちる判定の空間認識で使用
* `MRTK Standard Shader`：手乗りちょまぎょの台の見た目で使用
* `In-Editor Simulation`：エディタ内のシミュレーターでの実行に使用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/30998932-bfdf-1ba4-effc-33e02552377e.png)

例えばハンドメッシュ。手の形を表示する機能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b5c21cc6-7438-944a-8438-78f59998155f.png)



# 1. Unity で新規プロジェクト作成

私は `2019.4.11f1` で開きました。
プロジェクト名は `TenoriChomagyo` にしました。（安直…）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9a003a1d-c1f4-323a-6893-3b9b7a125238.png)

こんな感じの画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/74f5d474-f137-697a-adc5-80ebc0e2a4be.png)

# 2. MRTK 入れる (Unity Package Manager 経由)

この手順については別記事に書いたのでご覧ください（めちゃ短いです）

→ 『[MRTK 2.5 を Unity Package Manager を使って取り込む](https://qiita.com/chomado/items/ff21e57aa563191f3be0)』

# 3. もろもろの初期設定（下地準備）

プロジェクト初期設定に関しては、
このモンさんの記事『[MRTK v2.4.0を使ってHoloLens2のHelloWorldアプリを作成する その１](https://bluebirdofoz.hatenablog.com/entry/2020/06/03/233145)』の
『プラットフォームの選択』セクション以下が参考になりますので、これをやっていきます。以下記録。

### MRTK Project Configurator

MRTK (の Foundation) パッケージが入ると、`MRTK Project Configurator ダイアログ` が上がってきます。MRTK 用に Unity プロジェクトの設定をよしなにやってくれる人です。

`Apply` を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b81962dc-3c35-669f-1969-222551d02356.png)

また、MRTK が正しく入っていると、Unity エディタのメニューバーに `Mixed Reality Toolkit` というメニューが追加されています。

そこの `Utilities` > `Configure Unity Project` から 先ほどの `MRTK Project Configurator` を手動で開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/dff689e0-5838-c139-ed55-86e5d0629625.png)

すべての設定項目がチェック済みであることを確認しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9eee5fff-11c7-d7ff-8459-ad0843df1d27.png)

## ビルド対象プラットフォームを UWP に

今回は HoloLens 用のアプリを作るので、その設定をしていきます。

HoloLens で動くアプリは UWP (Universal Windows Platform) なので、
アプリのビルドプラットフォームを UWP に切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6d23cf0c-04f9-e963-6018-7b54221fe0b0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0364cbc4-4b18-2ad4-9c2d-a33f957315b0.png)

すると、また MRTK Project Configurator が立ち上がります。
先ほどのプロジェクト設定の他に「UWP Capabilities」が生えましたね。
また「Apply」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6e70b40b-0b51-806c-89ff-c4ef7c5384cf.png)

## シーンの設定

メニューの `Mixed Reality Toolkit` > `Add to Scene and Configure...` を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/af7b7129-55fd-4e07-7f25-bef0bc3c6f93.png)

すると、Hierarchy の構成が以下のようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3e3663e6-c0a8-1d8d-9eea-72d542b4152d.png)


* `MixedRealityToolkit` : MRTK 本体
* `MixedRealityPlayspace` : ヘッドセットの親オブジェクト
  * `Main Camera` : もともとあったメインカメラが子オブジェクトとして移動してきた


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/726ecad1-b7de-48aa-3669-b83ee1935861.png)

## プロファイル選択

hierarchy ビューで MixedRealityToolkit を選択した状態で Inspector ビュー。
プロファイルの選択。今回 HoloLens 2 用のを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6e80e11a-07cc-ea42-2a47-8a588872379a.png)

## プロジェクト設定

Project Settings ウィンドウ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/5a32c8b5-ff99-2807-72d5-cba69f991cff.png)

この `Virtual Reality Supported` に チェックを入れると Virtual Reality SDKs のセクションが表示される。（もし何もなかったら + でインポートする）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4168ee44-2064-ccab-da83-49ff388c533b.png)

また `MRTK Project Configurator` 出てきたので `Apply` する。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0d01b774-0897-2443-260f-bb1fd765119a.png)

## パッケージ名の変更

インストール時に同名のアプリが上書きされる問題を避けるために `Package name` をデフォルト ("Template3D") から変えましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f5ffa060-5b42-1fe9-d6e1-e90be9298c64.png)

# 4. アプリ作成

下準備ができたので、次はいよいよ 手乗りちょまぎょアプリ作成です。
（何度か出していますが、モンさんのブログ記事『[MRTK v2.4.0を使ってHoloLens2で手乗りキャラクターアプリを作成する](https://bluebirdofoz.hatenablog.com/entry/2020/07/21/232553)』をもとに作っていきます）

## モデルを配置する

Assets に ちょまぎょモデルを入れます。（手元からドラッグアンドドロップ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2e40ad38-9509-29a2-1f62-2f35dfb8a1f6.png)

シーンに追加した後、Transform でサイズを調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fb2801f6-45b9-be04-8b96-7b9148c8bc2b.png)

## 掌に追従するソルバーを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e6479517-9e2e-5613-b3f0-15fc248f14d6.png)


`Hand Constraint Palm Up` は UI メニューを表示するためによく使うコンポーネントで、手のひらの表裏の動きを検出しオブジェクトを制御するためのソルバー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c94c78b0-bdea-1ba0-c6f0-1066571840b2.png)

`Hand Constraint Palm Up` コンポーネントをアタッチすると
`Hand Bounds` と `Solver Handler` のコンポーネントも追加される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4f954d76-ed97-246a-b065-17f1510db6ed.png)

## 手の検出イベントに合わせて重力の設定を切り替える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7665d0a1-a0b8-1369-7280-3dc539530e75.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b5dbd75c-3d8a-2f40-d8fc-40481a0bcaa7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9109d5e3-3192-5bfb-4a0f-f636d23289d6.png)

## MRTK プロファイルのカスタマイズ

MRTK v2 では、プロファイル (MRTK の設定集的なもの) を直接編集することはできないので、コピー & カスタマイズしていく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/34186656-14d7-2321-d4e6-ffdf2f916adb.png)

親プロファイルのコピー＆カスタマイズ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1058ad40-0518-9da1-e16a-5fcb96318f97.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/d3767cda-2b94-f966-cc04-bb9e45bde71f.png)

その中の (例：Spatial Awareness) のプロファイルをまた コピー＆カスタマイズして編集していく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8673c33f-1d4d-7445-f448-aedb059cca1b.png)


## あとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/074a4890-3128-581a-8b2e-f1cd0e00d2bc.png)

→ モンさんのブログ『[MRTK v2.4.0を使ってHoloLens2で手乗りキャラクターアプリを作成する](https://bluebirdofoz.hatenablog.com/entry/2020/07/22/002710)』
をご覧ください