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

在本節中,您將藉由新增一些教學課程 Prefab 來準備場景。In this section, you will prepare the scene by adding some of the tutorial prefabs.

在 [專案] 視窗中,瀏覽至 [資產] > [MRTK.Tutorials.MultiUserCapabilities] > [Prefabs] 資料夾,然後按一下下列 Prefab 並將其拖曳到 [階層] 視窗中,將其新增到您的場景中: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 prefabNetworkLobby prefab
  • SharedPlayground prefabSharedPlayground prefab

已選取新增 NetworkLobby 和 SharedPlayground Prefabs 的 Unity

在 [專案] 視窗中,瀏覽至 [資產] > [MRTK.Tutorials.AzureSpatialAnchors] > [Prefabs] 資料夾,然後按一下下列 Prefab 並將其拖曳至 [階層] 視窗中,將其新增到您的場景中: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 prefabDebugWindow prefab

已選取新增 DebugWindow Prefab 的 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

在 [階層] 視窗中,以滑鼠右鍵按一下空白區域,然後選取 [建立空物件] 以將空的物件新增至場景,並將物件命名為 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:

  • 請確定變形的 位置 已設定為 X = 0、Y = 0、Z = 0:Ensure the Transform Position is set to X = 0, Y = 0, Z = 0:

已選取新建立 PhotonUser 物件的 Unity

在 [階層] 視窗中選取 [PhotonUser] 物件,在 [偵測器] 視窗中,使用 [新增元件] 按鈕,將 Photon User (指令碼) 元件新增至 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 使用者元件的 Unity

在 [偵測器] 視窗中,使用 [新增元件] 按鈕,將 Generic Net Sync (指令碼) 元件新增至 PhotonUser 物件,並進行下列設定: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:

  • 勾選 [是使用者] 核取方塊Check the Is User checkbox

已新增和設定 Generic Net Sync 元件的 Unity

在 [偵測器] 視窗中,使用 [新增元件] 按鈕,將 Photon View (指令碼) 元件新增至 PhotonUser 物件,並進行下列設定: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:

  • 針對 [觀察到的元件] 欄位,請指派 Generic Net Sync (指令碼) 元件To the Observed Components field, assign the Generic Net Sync (Script) component

已新增和設定 Photon View 元件的 Unity

2.建立虛擬人偶2. Create the avatar

在 [專案] 視窗中,瀏覽至 [資產] > [MRTK] > [SDK] > [StandardAssets] > [材質] 資料夾,以找出 MRTK 材質。In the Project window, navigate to the Assets > MRTK > SDK > StandardAssets > Materials folder to locate the MRTK materials.

然後在 [階層] 視窗中,以滑鼠右鍵按一下 [PhotonUser] 物件,然後選取 [3D 物件] > [球體],將球體物件建立為 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:

  • 請確定變形的 位置 已設定為 X = 0、Y = 0、Z = 0Ensure the Transform Position is set to X = 0, Y = 0, Z = 0
  • 將變形 縮放 變更為適當大小,例如 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] > [材質] > [元素 0] 欄位,指派 MRTK_Standard_White 材質To the MeshRenderer > Materials > Element 0 field, assign the MRTK_Standard_White material

具有新建立和已設定頭像球體的 Unity

3.建立預製物件3. Create the prefab

在 [專案] 視窗中,瀏覽至 [資產] > [MRTK.Tutorials.MultiUserCapabilities] > [Resources] 資料夾:In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder:

已選取 [資源] 資料夾的 Unity [專案] 視窗

在仍選取 [資源] 資料夾的情況下,從 [階層] 視窗中 按一下並拖曳 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 Prefab 的 Unity

在 [階層] 視窗中,以滑鼠右鍵按一下 [PhotonUser] 物件,然後選取 [刪除],從場景中將其移除:In the Hierarchy window, right-click on the PhotonUser object and select Delete to remove it from the scene:

已從場景中移除新建立 PhotonUser Prefab 物件的 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.

在 [專案] 視窗中,瀏覽至 [資產] > [MRTK.Tutorials.MultiUserCapabilities] > [Resources] 資料夾。In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder.

在 [階層] 視窗中,展開 NetworkLobby 物件,然後選取 NetworkRoom 子物件,接著在 [偵測器] 視窗中找出 Photon Room (指令碼) 元件,並依照下列方式進行設定: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 使用者預製物件] 欄位中,從 [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

提示

如需有關如何建立 Unity 專案並將其部署至 HoloLens 2 的提醒,您可以參閱對您的 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.