HoloLens 2 公式チュートリアル「Mult-user capabilities tutorials」を試してみた [前編]

# はじめに
今回は Microsoft 公式 HoloLens 2 チュートリアル __「 [Multi-user capabilities tutorials](https://docs.microsoft.com/en-us/windows/mixed-reality/mr-learning-sharing-01?WT.mc_id=MR-MVP-50038681) 」__ の手順に沿って、複数デバイス間でのシェアリング機能の実装方法について検証を行っていきたいと思います。チュートリアルの手順は大きく4つに分かれており、それぞれのステップで段階的に Photon を用いたシェアリング実装法について紹介されています。__[Photon](https://www.photonengine.com/en/photon) とは、Unity上でマルチデバイス間のシェアリング機能を実装するための ネットワーキングフレームワーク ( SDK ) です。__

チュートリアルの全容を一つの記事で紹介するとかなり長くなるので、本記事では前編・後編に2つに分けてご紹介したいと思います。

__MRTK v2.4 がリリースされる前に書き始めたので、この記事では MRTK v2.3 を使用しています。__

__<font color="red">[2020/06/18 追記]</font>__
__後編記事書きました。本記事の続きは、「[HoloLens 2 公式チュートリアル「Mult-user capabilities tutorials」を試してみた [後編]](https://qiita.com/Futo_Horio/items/ed9819889c9fe1aeb068)」をご覧ください。__

# 検証環境

- __開発用PC ( Windows 10 Pro )__
 - Windows 10 SDK ( 10.0.18362.0 ) 
 - __Unity 2019.2.21f1__  
 - Unity モジュール : ユニバーサル Windows プラットフォームビルドサポートモジュール
 - Unity モジュール :  IL2CPP ビルドサポートモジュール
 - AR Foundation 2.0.2 ( Package Manager )
 - PUN2 - FREE ( Pun : 2.18.1 / Photon lib : 4.1.4.1 )
 - Visual Studio 2019 ( Version : 16.6.1 )
- __Microsoft HoloLens 2__

<font color="red">__公式ドキュメントには、「Windows 10 SDK 10.0.18362 or later」 と表記がありますが、開発環境によっては 10.0.19041.0 を使用することで下記サイトと同様のエラーが発生するので注意が必要です。__</font>
― ["Failed to connect to server after testing each known IP." on Universal Windows Platform](https://forum.photonengine.com/discussion/15355/failed-to-connect-to-server-after-testing-each-known-ip-on-universal-windows-platform)

このエラーの原因は、Visual Studio 2019 でのビルド時に Windows 10 SDK バージョン 10.0.19041 の .dll 関連のエラーが発生していることです。 ( 下図 : Visual Studio でのデバッグ画面 )

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/96a2f04e-624f-628e-7205-eed8da27c781.png" width="500">

私の場合、Visual Studio 2019 のプロパティ設定 [Target Platform Version] が、10.0.18362.0 になっているにも関わらず同様のエラーが発生したので、Unity から Export されたプロジェクト内にSDKバージョンの記載があることに気が付きました。この問題の回避策としては、以下対策が考えられます。

Visual Studio 2019 にて Windows 10 SDK 10.0.19041.0 をインストール済みの場合は、__Unity の Build Settings > [ Target SDK Version ] にて、「Latest Installed」ではなく、「10.0.18362.0」を選択するようにしてください。__

公式ドキュメントのシステム要件は、[こちら](https://docs.microsoft.com/en-us/windows/mixed-reality/mrlearning-sharing(photon)-ch1#prerequisites?WT.mc_id=MR-MVP-5003868)をご確認ください。

## 公式チュートリアルの手順

それでは、早速チュートリアルを進めていきましょう。チュートリアルは、以下4つのステップに分かれています。本記事では、前半のステップ2つの手順について解説をしていきたいと思います。

1. __Setting up Photon Unity Network__  
— Photon 事前セットアップ
2. __Connecting multiple users__  
— マルチユーザー間での接続
3. <font color="#cccccc">__Sharing object movements with multiple users__</font>  
— 複数デバイス間でのオブジェクト共有
4. <font color="#cccccc">__Integration Azure Spatial Anchors into a shared experience__</font>  
— シェアリングの仕組みに ASA を統合する


## 詳細手順の説明

## 1. Setting up Photon Unity Network
第1章では、Photon Unity Network ( PUN ) の事前セットアップ、Unityプロジェクトの準備を行っていきます。

### 事前準備

#### 1. Unity 新規プロジェクト ( 3D ) を作成します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e4f55d7f-8c0a-2c0f-45ac-f20ec7e044ec.png" width="600">

#### 2. Windows Mixed Reality 開発用に Unity プロジェクト設定を変更します。

HoloLens アプリケーション開発時に必要となる設定なので、手順をまとめておきます。

1. ビルドプラットフォームの切り替え
2. Unity プロジェクト設定のチューニング
3. Text Mesh Pro ライブラリインスト―ル
4. Mixed Reality Toolkit (MRTK) をインポートする
5. MRTK用に Unity プロジェクトをチューニング
6. 新規シーンを作成し、MRTKを導入
7. MRTKプロファイルを変更する

##### 1. ビルドプラットフォームの切り替え
Build Settings ( ショートカット : Ctrl + Shif + B ) を開き、ターゲットプラットフォームに __「Universal Windows Platform」__ に設定し、「Switch Platform」ボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/d9742182-225a-c48f-e296-fe73f857bfd2.png" width="400">


##### 2. Unity プロジェクト設定のチューニング
Mixed Reality 向けのアプリケーションを開発する場合、立体視 ( 右目、左目で異なる画像を描画、視差効果で立体画像を創り出す ) を有効にする必要があります。これは以下、 [XR Settings] で設定することができます。__<font color="red">※この設定を忘れると、2Dのアプリケーションが配置されるので注意してください。</font>__

グローバルメニュー __[Edit] > [Project Settings] > [Player] > [XR Settings]__ を開きます。 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/a720359d-5e58-fe62-2a81-6dd07004775c.png" width="800">

__[Virtual Reality Supported] にチェック__ を入れます。
チェックを入れると、[Virtual Reality SDKs] 項目が表示されるので、
「＋」ボタンを押下し、__[Windows Mixed Reality] を追加__ します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e5afd8bc-bfa2-c048-2de8-2492a6a274e3.png" width="400">

上記設定が終わった後、HoloLens向けに設定のチューニングを行います。
各項目が下表と同じ設定になるように、オプションを選択してください。

| 項目 | 設定内容 |
| --- | --- |
| Depth Format | __16-bit depth__ |
| Enable Depth Buffer Sharing | ✅ ( チェックを入れる ) |
| Stereo Rendering Mode | __Single Pass Instanced__ |

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b5a1b423-c380-9236-b242-91b3351b462c.png" width="400">

##### 3. Text Mesh Pro ライブラリインスト―ル
グローバルメニュー __[Window] > [TextMeshPro] > [Import TMP Essential Resources]__ を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8f596a0c-ca97-cbcc-7505-2cf4b0edf138.png" width="400">

インポートされるファイル一覧が表示されるので、全て選択された状態であることを確認し、__Importボタンを押下__ します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/fb5b2a16-99a5-6877-6554-f326ceff9021.png" width="300">


これにて、Text Mesh Pro ライブラリ等がインストールされ、Text Mesh Pro が使用できるようになります。

##### 4. Mixed Reality Toolkit ( MRTK ) をインポートする
MRTKとは、Microsoft が主導するオープンソースプロジェクトで、MR開発に役立つUXデザインコンポーネントやスクリプト等がGitHub上にて提供されています。今回のチュートリアルで必要となる__「[Microsoft.MixedReality.Toolkit.Unity.Foundation.2.3.0.unitypackage](https://github.com/microsoft/MixedRealityToolkit-Unity/releases/download/v2.3.0/Microsoft.MixedReality.Toolkit.Unity.Foundation.2.3.0.unitypackage)」__パッケージをローカルマシンにダウンロードし、Unityプロジェクトにインポートします。

<a href="https://github.com/microsoft/MixedRealityToolkit-Unity/releases"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/0f4d34e8-d328-f3a3-e3a8-e069ca117924.png" width="500"></a>

Unity プロジェクトに戻り、グローバルメニューから __[Assets] > [Import Package] > [Custom Package ...]__ を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/74139fcb-9d70-a57e-3fdb-8697d0d949ba.png" width="500">

インポートするファイル __「Microsoft.MixedReality.Toolkit.Unity.Foundation.2.3.0.unitypackage」__ を選択し、開くボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8eaa333e-74bd-d507-871f-9af4efec4e95.png" width="500">

こちらも全てのファイルにチェックがついていることを確認し、__Importボタンを押下__します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3503330a-986f-dd17-dfdd-f92c7f5867b0.png" width="300">

##### 5. MRTK用に Unity プロジェクトをチューニング
MRTK Project Configure を使って、Unityプロジェクトの再構成を行います。

グローバルメニュー __[Mixed Reality Toolkit] > [Utilities] > [Configure Unity Project]__ を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/1afee1cb-8663-2076-689f-8c3b64ca779a.png" width="600">

「Enable MSBuild for Unity」チェックボックス以外、全てのオプションがオンになっていることを確認し、「Apply」ボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b4b0e176-f487-2bba-8606-8c3903db8ad3.png" width="600">


##### 6. 新規シーンを作成し、MRTKを導入

グローバルメニュー __[Mixed Reality Toolkit] > [Add to Scene add Configure...]__ を選択し、シーンにMRTKを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2d3f43f5-2a1f-4166-8510-b79763f5eeb7.png" width="600">

処理後、Unityプロジェクトのヒエラルキーが変更され、MRTKが追加されていることが確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/866eae49-7122-49dd-8015-9adbfe5a1e42.png" width="200"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3a143847-87ab-5a1f-b819-df4252bc7095.png" width="200">
( 変更前 : 左図、 変更後 : 右図 )

##### 7. MRTKプロファイルを変更する
MRTKの設定は、プロファイルで管理が行われ、標準で4種類のプロファイルが存在します。このプロファイル機能は、HoloLens / HoloLens 2 / その他XRデバイス などで異なるMRTK内部の設定を一元管理することができます。MRTKをインポートした際には、「DefaultMixedRealityToolkitConfigurationProfile」がセットされているので、HoloLens 2向けのプロファイル「DefaultHoloLens2ConfigurationProfile」に変更していきます。

Unity ヒエラルキーより、「MixedRealityToolkit」を選択し、Inspector上に表示されているプロファイル設定ドロップダウンより、__[DefaultHoloLens2ConfigurationProfile]__ を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/556394ed-bb1f-6fe0-64b6-a69cd9629923.png" width="600">

あわせて、空間認識メッシュの表示オプションを __「Occlusion」__ 変更する必要があるため、
さきほど設定した「DefaultHoloLens2ConfigurationProfile」を Clone して、カスタマイズを行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c2734318-a2fc-f04c-5a5a-85b773c9c1db.png" width="600">
クローン後のファイル名を入力 ( 任意 )し、Cloneボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/718300e1-4f9a-a014-b703-0ed6cffe3bb8.png" width="600">

[Spatial Awareness] タブを選択し、「Enable Spatial Awareness」オプションにチェックを入れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/db4b9fe6-9c18-2023-e6f1-ea368e51504e.png" width="600">

チェックを入れると、プロファイル設定が表示されるので、__「DefaultMixedRealitySpatialAwarenessSystemProfile」__ を Clone ボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6d0ca8b7-2994-1a26-3feb-af20f5ca3441.png" width="600">

先ほど同様、Profile名 ( 任意 ) を入力し、Cloneボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/52c5145a-bb6a-3add-9cdf-06696eb68acf.png" width="600">

有効表示された「Windows Mixed Reality Spatial Mesh Observer」タブを展開し、「DefaultMixedRealitySpatialAwarenessMeshObserverProfile」を Clone します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/43d20f48-34ee-ed19-3088-a73c0fae48fa.png" width="600">

こちらでも、Profile名 ( 任意 ) を入力し、Cloneボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b7c225d3-b317-7bad-b6d8-63cd46236f7e.png" width="600">

設定項目最下部の「Display Option」項目をドロップダウンより、__[Occlusion]__ に設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/cf106077-b089-99d4-1154-b85d15f290e8.png" width="400">

上記で、Mixed Reality アプリケーション開発の一般的な設定が完了しました。

続いて、Photon Unity Network ( PUN ) を使うための設定を追加していきたいと思います。
__※これまでの手順と同様の項目を編集する場面もありますが、これ以降はチュートリアル向けの個別設定となるので、注意してください。__

### Photon Unity Network ( PUN ) を利用するための設定追加

##### 1. Publishing Settings > Capabilities 追加
続いて、Photon Unity Network ( PUN ) を使用する際に必要となる機能 ( Capability ) の追加を行います。

グローバルメニュー __[Edit] > [Project Settings...] > [Player] > [Publishing Settings]__ を開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c0043c35-5b9f-17f6-a373-6e17eabb83bf.png" width="400">

Capabilities項目で、以下オプションにチェックが入っていることを確認します。

- InternetClient
- Microphone
- SpatialPerception

次に、以下オプションに新たにチェックを入れます。

- InternetClientServer
- PrivateNetworkClientSever
- RemovableStorage

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2919ba3e-b16a-46cb-2d16-7eb0248e2c72.png" width="400">


上記 __6つのオプションが有効__ に設定されることを確認してください。

##### 2. 組み込み Unity パッケージの追加
AR Foundation パッケージのインポートを行います。
( ※次のセクションで使用する Azure Spatial Anchors SDK で使用するため。)

グローバルメニュー [Window] > [Package Manager] を開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2bbe8538-d1f1-aa07-db2d-8e2ce70856c1.png" width="400">

検索バーにて__「AR Foundation」__ を選択し、インストールを実行します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/0c391473-5e5a-6193-6563-daa53f875d83.png" width="400">

#### 3. Tutorial で使用するアセットをインポートします。

以下、表記順に Unity カスタムパッケージをインポートしていきます。

1. [AzureSpatialAnchors.unitypackage](https://github.com/Azure/azure-spatial-anchors-samples/releases/download/v2.1.1/AzureSpatialAnchors.unitypackage) (バージョン 2.1.1)
2. [MRTK.HoloLens2.Unity.Tutorials.Assets.GettingStarted.2.3.0.3.unitypackage](https://github.com/microsoft/MixedRealityLearning/releases/download/getting-started-v2.3.0.3/MRTK.HoloLens2.Unity.Tutorials.Assets.GettingStarted.2.3.0.3.unitypackage)
3. [MRTK.HoloLens2.Unity.Tutorials.Assets.AzureSpatialAnchors.2.3.0.1.unitypackage](https://github.com/microsoft/MixedRealityLearning/releases/download/azure-spatial-anchors-v2.3.0.1/MRTK.HoloLens2.Unity.Tutorials.Assets.AzureSpatialAnchors.2.3.0.1.unitypackage)
4. [MRTK.HoloLens2.Unity.Tutorials.Assets.MultiUserCapabilities.2.3.0.0.unitypackage](https://github.com/microsoft/MixedRealityLearning/releases/download/multi-user-capabilities-v2.3.0.0/MRTK.HoloLens2.Unity.Tutorials.Assets.MultiUserCapabilities.2.3.0.0.unitypackage)

MRTK同様、グローバルメニュー __[Assets] > [Import Package] > [Custome Package...]__ よりインポートを実行します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8de5ab44-0bb2-bbc9-00b8-a6e7e68a6e23.png" width="400">


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8d6f5541-2b4a-2ba3-512d-c7bfd7ee43e8.png" width="600">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/92d67151-1985-eecb-acbb-23831d64d659.png" width="400">

これを4つのパッケージ分繰り返し行います。

最後の__「MRTK.HoloLens2.Unity.Tutorials.Assets.MultiUserCapabilities.2.3.0.0.unitypackage」__をインポートした際に、以下エラーが発生します。「<font color="red">__CS0246: The type or namespace name 'Photon' could not be found (are you missing a using directive or an assembly reference?)__</font>」このエラーは、次の手順で「Photon アセット」をインポートすることで解消されるので、このまま進めて問題ありません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/30972efe-2f96-1e2f-ad25-ab93cc9883d0.png" width="500">

#### 4. Photon アセットをインポートする
Unity アセットストアより、「Photon Unity Network ( PUN ) アセット」を ダウンロード & インポート していきます。

まず、グローバルメニュー [Window] > [Asset Store] を選択し ( ショートカット : Ctrl + 9 ) 、「Asset Store」ウィンドウを開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/bc34a185-6d24-9fda-7bbb-178d76ebe581.png" width="400">

「Asset Store」ウィンドウが開いたら、「Search」ボタンを押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/28f9d54b-dce9-de2f-8a1c-3e89b5552276.png" width="400">

検索バーより、__「PUN 2 - FREE」__ を検索し、Download ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b48f8dbe-56f8-b156-c06a-02b7aee08d3d.png" width="400">

ダウンロードが完了すると、Importボタンが表示されるので、インポートを実行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2c1e4e72-35b6-11d5-186c-6018b178093a.png" width="400">

プロジェクトへのインポートが完了したら、PUN設定ウィザードが表示されますが、アカウント作成前なので「×」ボタンを押下して、ウィザードを閉じておいてください。

#### 5. Photon 設定追加

次に、Photon のアカウント作成、新しい PUN アプリケーションを作成していきます。
( アカウントをお持ちの方は、アカウント作成手順は読み飛ばしてください。 )

1. [photon サインインページ](https://dashboard.photonengine.com/account/signin) より、アカウントの新規作成を行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3416a4e9-1cbf-93e9-52df-3ee940e13b0a.png" width="400">

「メールアドレス」「ボットではないチェックボタン」を入力し、「登録する」ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4840e790-750d-1fab-b380-92f0cf047cf6.png" width="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e987b321-ab93-f663-c989-85f739f18762.png" width="400">

入力したメールアドレスに、「Photon Engine アカウントへようこそ！」というタイトルのメールが送信されているので、確認を行い、メール本文に記載されているURLをクリックし、パスワードの設定を行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e6dca905-4cac-0ba7-ed46-63c58206043e.png" width="400">

これにてアカウント登録は完了です。続いて、ダッシュボードより、Photon 新規アプリケーションの作成を行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4be437b6-b9d7-ff6c-c985-8cfcd27cb1d6.png" width="400">

Photon 新規アプリケーション作成ページが開いたら、以下項目を入力し、「作成する」ボタンを押下します。

|項目|入力値|
|---|---|
|Photonの種別| __<font color="red">Photon PUN</font>__ |
|アプリケーション名| PhotonTutorial (任意) |
|アプリケーションの説明| Photon × MRTK Tutorial (任意) |
|URL| (任意)今回は空欄 | 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/5030258c-c6d5-e11b-5adf-0f07ec819abf.png" width="600">

新規アプリケーションのデプロイが完了すると、新しい PUN アプリケーションがダッシュボードに表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b208f7dd-1061-dbd6-087f-a1f9236a19df.png" width="600">

これで Photon Unity Network ( PUN ) アカウント作成 & アプリケーション作成が完了しました。

#### 6. Unity プロジェクトを PUN アプリケーションに接続します。
ここからは、Unityプロジェクトとさきほど新規作成した Photon Unity Network ( PUN ) アプリケーションを接続する手順となります。

Photon ダッシュボードに表示されている PUN アプリケーション から、アプリケーションIDをコピーします。(赤い部分)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e8a859f8-4876-72a8-0d24-6a1cc909662f.png" width="400">

Unity プロジェクトへ戻り、グローバルメニュー [Window] > [Photon Unity Networking] > [PUN Wizard]を選択し、先ほどのウィザードを再表示します。赤枠部分に、コピーしておいた「アプリケーションID」を入力し、「Setup Project」ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/5580498a-708c-d70f-45b6-224e49c6870d.png" width="400">

セットアップが完了すると、ウィザード下部に「Your AppId is now applied to this project」とのコメントが表示され、プロジェクトに Photon Unity Network ( PUN ) アプリケーションID が適用されたことが通知されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e1c38eaf-0f0d-3090-cb79-3c04c84072ca.png" width="400">

ここまでの手順を実行することで、UnityプロジェクトとPUNアプリケーションの接続を行うことができました。次の章では、Photonを使ったマルチユーザー接続を実現するサンプルを試していきたいと思います。

## 2. Connecting multiple users
第2章では、複数のユーザーを接続し、各ユーザーが互いの位置を確認できるサンプルを動かしていきます。

### シーンの準備

##### 1. Unity プロジェクトを開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3f69738e-8c4d-9f93-b0f7-2c1267966c6a.png" width="600">

##### 2. チュートリアルの実行に必要となるプレハブを追加します。
「Project」ウィンドウより、__[Assets] > [MRTK.Tutorials.MultiUserCapabilities] > [Prefabs]__ フォルダーに移動し、以下3つのプレハブを選択、ヒエラルキーにドラッグ&ドロップして追加をします。

- __DebugWindow__ ( デバッグ用のテキストプレハブ )
- __NetworkLobby__ ( Photon ルーム、ユーザー作成、管理用プレハブ )
- __SharedPlayground__ ( ネットワーク管理用プレハブ )

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4a6ae2ea-2893-0332-8527-9e8bf6fc14f4.png" width="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4e6b738a-9141-e4cf-a688-1ff7ad78b2d9.png" width="400">

### ユーザープレハブを作成する
複数ユーザー接続時に、各ユーザーの位置を表すオブジェクト ( Prefab ) を作成していきます。

##### 1. ユーザーの作成と構成
「Hierarchy」ウィンドウの空スペースを右クリックし、「Create Empty」ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b4cf651e-a02c-5b9d-d17b-ed5652479982.png" width="400">

空のゲームオブジェクトが作成されたら、ゲームオブジェクト名を__<font color="red">「PhotonUser」</font>__に変更し、__Transform > [Position] の値が <font color="red">X = 0、 Y = 0、 Z = 0</font>__  に設定されていることを確認してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7cd5d765-9bcf-2b24-50be-62e6e2c630a3.png" width="600">

PhotonUser オブジェクトを選択した状態で、Inspectorウィンドウで [Add Component]ボタンを押下し、__「Photon User (Script)」__ を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/97a429bd-3b39-e58e-fd03-4e1843d4f0c8.png" width="600">


同様の手順にて、「Generic Net Sync (Script)」コンポーネントを追加します。
設定は、以下と同様になるように編集を行ってください。

- __[Is User] オプションにチェックを入れる。__

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/1b75854c-e5ce-c025-2821-5934cb2b9075.png" width="600">

さらに、__「Photon View (Script)」__ を追加し、以下と同じ設定となるよう編集を行います。

- __Observed Components フィールドに、「Generic Net Sysnc (Script)」をドラッグ&ドロップで追加します。__

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e1084b9b-7578-26bd-b46f-60d34a4de0ec.png" width="600">

###### 2. アバターを作成する
「Hierarchy」ウィンドウで、PhotonUser オブジェクトを右クリックし、[3D Object] > [Spere] を追加します。
PhotonUser オブジェクトの子オブジェクトとして、以下のように Inspector 上の値を編集します。

- Transform > [Position] を変更する。 __( X = 0、 Y = 0、 Z = 0 )__
- Transform > [Scale] を変更する。 __( X = 0.15、 Y = 0.15、 Z = 0.15 )__

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/9907595d-2952-9b31-0c31-0d5b35548fa0.png" width="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/cb29766d-2ac3-c67a-4581-85d7d79f213d.png" width="600">


##### 3. プレハブを作成する
2.で作成したアバターをプレハブにしていきます。

「Project」ウィンドウで、[Assets] > [MRTK.Tutorials.MultiUserCapabilities] > [Resources] へ移動します。__PhotonUser オブジェクトを「Resource」フォルダへドラッグ&ドロップし、PhotonUser オブジェクトをプレハブ__ にします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/064e6ee8-d4f5-8f31-75c5-b5d0c8b455c6.png" width="600">

プレハブ化が完了すれば、「Hierarchy」ウィンドウから PhotonUser オブジェクトを削除します。

### PUN を利用して、ユーザープレハブのインスタンスを作成する

[Hierarchy]ウィンドウで __NetworkLobby__ オブジェクトを展開し、 __NetworkRoom__ 子オブジェクトを選択、[Inspector]ウィンドウで Photon Room (Script) コンポーネントを次のように編集します。

- __Photon User Prefab フィールドに、[Resource]フォルダに保存した PhotonUser プレハブをドラッグ&ドロップで割り当てます。__

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/fb71d2fa-93d3-cf56-f466-80a82b6e3cea.png" width="600">

それでは、Unity からプロジェクトを Export し、Visual Studio を使ってビルドしていきましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/a5eafb8d-a5d8-edaf-e702-808a81f75e25.png" width="400">

エクスポートしたソリューションファイル (.sln) を Visual Studio 2019 で開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/9b4229c8-2514-f450-d9a0-8800ee37e630.png" width="600">

グローバルナビゲーション下のビルド設定を以下内容に切り替え、「Device」ボタンを押下してビルドを実行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ecac338b-ed71-7ef5-d822-ef28bd85574c.png" width="300">

| ビルド設定 | 選択内容 |
| --- | --- |
| ビルドの種類 | __Release__ |
| ターゲットプラットフォーム | __ARM__ | 
| デプロイ先 | __Device__ |

これにて第2章は終了です。上記アプリケーションを HoloLens 2 実機にデプロイし、アプリ起動後、Unity Editor 上でゲームの再生を実行すると、ユーザーのカメラの位置を共有できていることが確認できます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HoloLens 2 公式チュートリアル<br>Multi-user capabilities tutorials<br>Unity Editor + HoloLens 2 で動いた。<br><br>遅延もほとんど無くて良い。<br>早く複数人で試したいなー<br><br>Windows SDK バージョン<br>10.0.19041 でハマったので、<br>ドキュメントにまとめよう。<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/MixedReality?src=hash&amp;ref_src=twsrc%5Etfw">#MixedReality</a><a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> <a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://twitter.com/hashtag/Photon?src=hash&amp;ref_src=twsrc%5Etfw">#Photon</a> <a href="https://t.co/3aDJ2ktqu5">pic.twitter.com/3aDJ2ktqu5</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1268513450000433153?ref_src=twsrc%5Etfw">June 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

思ったより遅延もなく、快適な印象を受けました。

以下、残りの2章は別途ご紹介させていただく予定です。

__3. Sharing object movements with multiple users__
__4. Integration Azure Spatial Anchors into a shared experience__

__本記事の続きは、「[HoloLens 2 公式チュートリアル「Mult-user capabilities tutorials」を試してみた [後編]](https://qiita.com/Futo_Horio/items/ed9819889c9fe1aeb068)」をご覧ください。__

最後までお読みいただき、ありがとうございました。

## Appendix  : Official Tutorials 
Microsoft HoloLens 2

- [Getting started tutorials](https://docs.microsoft.com/en-us/windows/mixed-reality/mrlearning-base?WT.mc_id=MR-MVP-5003868)
- [Azure Spatial Anchors tutorials](https://docs.microsoft.com/en-us/windows/mixed-reality/mrlearning-asa-ch1?WT.mc_id=MR-MVP-5003868)
- [Azure Speech Service tutorials](https://docs.microsoft.com/en-us/windows/mixed-reality/mrlearning-speechsdk-ch1?WT.mc_id=MR-MVP-5003868)
- __<font color="red">[Multi-user capabilities tutorials](https://docs.microsoft.com/en-us/windows/mixed-reality/mrlearning-sharing(photon)-ch1?WT.mc_id=MR-MVP-5003868)</font>__