3.複数のユーザーの接続3. Connecting multiple users

このチュートリアルでは、ライブ共有エクスペリエンスの一部として複数のユーザーを接続する方法を学習します。In this tutorial, you will learn how to connect multiple users as part of a live shared experience. チュートリアルを終えるときには、複数のデバイスでアプリを実行して、各ユーザーが他のユーザーのアバターの動きをリアルタイムで確認できるようになります。By the end of the tutorial, you will be able to run the app on multiple devices and have each user see the avatar of other users move in real-time.

目標Objectives

  • 共有エクスペリエンスで複数のユーザーを接続する方法を学習するLearn how to connect multiple users in a shared experience

シーンの準備Preparing the scene

このセクションでは、チュートリアルのプレハブをいくつか追加してシーンを準備します。In this section, you will prepare the scene by adding some of the tutorial prefabs.

[Project](プロジェクト) ウィンドウで、 [Assets](アセット) > [MRTK.Tutorials.MultiUserCapabilities] > [Prefabs](プレハブ) フォルダーに移動し、次のプレハブを [Hierarchy](階層) ウィンドウにドラッグしてシーンに追加します。In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Prefabs folder, then click-and-drag the following prefabs into the Hierarchy window to add them to your scene:

  • NetworkLobby プレハブNetworkLobby prefab
  • SharedPlayground プレハブSharedPlayground prefab

新しく追加された NetworkLobby と SharedPlayground プレハブが選択されている Unity

[Project](プロジェクト) ウィンドウで、 [Assets](アセット) > [MRTK.Tutorials.AzureSpatialAnchors] > [Prefabs](プレハブ) フォルダーに移動し、次のプレハブを [Hierarchy](階層) ウィンドウにドラッグしてシーンに追加します。In the Project window, navigate to the Assets > MRTK.Tutorials.AzureSpatialAnchors > Prefabs folder, then click-and-drag the following prefab into the Hierarchy window to add it to your scene:

  • DebugWindow プレハブDebugWindow prefab

新しく追加された DebugWindow プレハブが選択されている Unity

ユーザー プレハブを作成するCreating the user prefab

このセクションでは、共有エクスペリエンスでユーザーを表すために使用されるプレハブを作成します。In this section, you will create a prefab that will be used to represent the users in the shared experience.

1.ユーザーの作成と構成1. Create and configure the user

[Hierarchy](ヒエラルキー) ウィンドウで空の領域を右クリックし、 [Create Empty](空のユーザーを作成) を選択してシーンに空のオブジェクトを追加し、オブジェクトに「PhotonUser」という名前を付けて、次のように構成します。In the Hierarchy window, right-click on an empty area and select Create Empty to add an empty object to your scene, name the object PhotonUser, and configure it as follows:

  • [Transform](変換) の [Position](位置) が、X = 0、Y = 0、Z = 0 に設定されていることを確認するEnsure the Transform Position is set to X = 0, Y = 0, Z = 0:

新しく作成された PhotonUser オブジェクトが選択されている Unity

[Hierarchy](階層) ウィンドウで、PhotonUser オブジェクトを選択し、[Inspector](インスペクター) ウィンドウの [Add Component](コンポーネントの追加) ボタンを使用して Photon User (Script) コンポーネントを PhotonUser オブジェクトに追加します。In the Hierarchy window, select the PhotonUser object, then in the Inspector window, use the Add Component button to add the Photon User (Script) component to the PhotonUser object:

Photon User コンポーネントが追加された Unity

[Inspector](インスペクター) ウィンドウで、 [Add Component](コンポーネントの追加) ボタンを使用して PhotonUser オブジェクトに Generic Net Sync (Script) コンポーネントを追加し、次のように構成します。In the Inspector window, use the Add Component button to add the Generic Net Sync (Script) component to the PhotonUser object and configure it as follows:

  • [Is User](ユーザーである) チェックボックスをオンにするCheck the Is User checkbox

Generic Net Sync コンポーネントが追加され構成された Unity

[Inspector](インスペクター) ウィンドウで、 [Add Component](コンポーネントの追加) ボタンを使用して PhotonUser オブジェクトに Photon View (Script) コンポーネントを追加し、次のように構成します。In the Inspector window, use the Add Component button to add the Photon View (Script) component to the PhotonUser object and configure it as follows:

  • [Observed Components](観察されるコンポーネント) フィールドに、Generic Net Sync (Script) コンポーネントを割り当てるTo the Observed Components field, assign the Generic Net Sync (Script) component

Photon View コンポーネントが追加され構成された Unity

2.アバターを作成する2. Create the avatar

[Project](プロジェクト) ウィンドウで、 [Assets](アセット) > MRTK > SDK > StandardAssets > [Materials](素材) に移動し、MRTK の素材を見つけます。In the Project window, navigate to the Assets > MRTK > SDK > StandardAssets > Materials folder to locate the MRTK materials.

次に、[Hierarchy](階層) ウィンドウで、PhotonUser オブジェクトを右クリックして [3D Object](3D オブジェクト) > [Sphere](球体) を選択し、PhotonUser オブジェクトの子として球体オブジェクトを作成して次のように構成します。Then, in the Hierarchy window, right-click on the PhotonUser object and select 3D Object > Sphere to create a sphere object as a child of the PhotonUser object and configure it as follows:

  • [Transform](変換) の [Position](位置) が、X = 0、Y = 0、Z = 0 に設定されていることを確認するEnsure the Transform Position is set to X = 0, Y = 0, Z = 0
  • [Transform](変換) の [Scale](スケール) を適切なサイズに変更する。例: X = 0.15、Y = 0.15、Z = 0.15Change the Transform Scale to a suitable size, for example, X = 0.15, Y = 0.15, Z = 0.15
  • [MeshRenderer] > [Materials](素材) > [Element 0](要素 0) フィールドに、MRTK_Standard_White 素材を割り当てるTo the MeshRenderer > Materials > Element 0 field, assign the MRTK_Standard_White material

新しく作成され構成されたアバター球体が表示された Unity

3.プレハブを作成する3. Create the prefab

[Project](プロジェクト) ウィンドウで [Assets](アセット) > [MRTK.Tutorials.MultiUserCapabilities] > [Resources](リソース) フォルダーに移動します。In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder:

[Resources](リソース) フォルダーが選択されているプロジェクト ウィンドウが表示された Unity

[Resources](リソース) フォルダーを選択したまま、[Hierarchy](ヒエラルキー) ウィンドウから PhotonUser オブジェクトを [Resources](リソース) フォルダーに クリックしてドラッグ し、PhotonUser オブジェクトをプレハブにします。With the Resources folder still selected, click-and-drag the PhotonUser object from the Hierarchy window into the Resources folder to make the PhotonUser object a prefab:

新しく作成された PhotonUser プレハブが選択されている Unity

[Hierarchy](ヒエラルキー) ウィンドウで PhotonUser オブジェクトを右クリックし、 [Delete](削除) を選択してシーンから削除します。In the Hierarchy window, right-click on the PhotonUser object and select Delete to remove it from the scene:

新しく作成された PhotonUser プレハブ オブジェクトがシーンから削除されている Unity

PUN を構成してユーザー プレハブのインスタンスを作成するConfiguring PUN to instantiate the user prefab

このセクションでは、前のセクションで作成した PhotonUser プレハブを使用するようにプロジェクトを構成します。In this section, you will configure the project to use the PhotonUser prefab you created in the previous section.

[Project](プロジェクト) ウィンドウで [Assets](アセット) > [MRTK.Tutorials.MultiUserCapabilities] > [Resources](リソース) フォルダーに移動します。In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder.

[Hierarchy](ヒエラルキー) ウィンドウで NetworkLobby オブジェクトを展開して NetworkRoom 子オブジェクトを選択し、[Inspector](インスペクター) ウィンドウで Photon Room (Script) コンポーネントを探し、次のように構成します。In the Hierarchy window, expand the NetworkLobby object and select the NetworkRoom child object, then in the Inspector window, locate the Photon Room (Script) component and configure it as follows:

  • "Photon User Prefab"(Photon ユーザー プレハブ) フィールドに、[Resources](リソース) フォルダーから PhotonUser プレハブを割り当てるTo the Photon User Prefab field, assign the PhotonUser prefab from the Resources folder

Photon Room コンポーネントが部分的に構成された Unity

複数のユーザーのエクスペリエンスを試すTrying the experience with multiple users

Unity プロジェクトをビルドして HoloLens に配置してから Unity に戻り、HoloLens でアプリが実行されている間にゲーム モードに入ると、頭 (HoloLens) を動かした時に HoloLens のユーザー アバターが動くのを確認できます。If you now build and deploy the Unity project to your HoloLens, then, back in Unity, enter Game mode while the app is running on your HoloLens, you will see the HoloLens user avatar move when you move your head (HoloLens) around:

ネットワーク接続されたユーザーが表示された Unity を表示するアニメーション

ヒント

HoloLens 2 に Unity プロジェクトをビルドして配置する方法を再確認するには、HoloLens 2 にアプリをビルドする手順に関する記事を参照してください。For a reminder on how to build and deploy your Unity project to HoloLens 2, you can refer to the Building your app to your HoloLens 2 instructions.

注意事項

アプリから Photon に接続する必要があるため、お使いのコンピューターまたはデバイスがインターネットに接続されていることを確認してください。The app needs to connect to Photon, so make sure your computer/device is connected to the internet.

結論Congratulations

複数のユーザーが同じエクスペリエンスに接続して、互いの動きを確認できるようにプロジェクトを構成できました。You have successfully configured your project to allow multiple users to connect to the same experience and see each other's movements. 次のチュートリアルでは、オブジェクトの動きが複数のデバイスで共有されるようにする機能を実装します。In the next tutorial, you will implement functionality so that the movements of objects are also shared across multiple devices.