3. Connexion de plusieurs utilisateurs3. Connecting multiple users

Dans ce tutoriel, vous allez apprendre à connecter plusieurs utilisateurs dans le cadre d’une expérience partagée en direct.In this tutorial, you will learn how to connect multiple users as part of a live shared experience. À la fin du tutoriel, vous pourrez exécuter l’application sur plusieurs appareils et chaque utilisateur pourra voir l’avatar d’autres utilisateurs se déplacer en temps réel.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.

ObjectifsObjectives

  • Découvrir comment connecter plusieurs utilisateurs dans un environnement partagéLearn how to connect multiple users in a shared experience

Préparation de la scènePreparing the scene

Dans cette section, vous allez préparer la scène en ajoutant une partie des préfabriqués du tutoriel.In this section, you will prepare the scene by adding some of the tutorial prefabs.

Dans la fenêtre Project, accédez au dossier Assets > MRTK.Tutoriels.MultiUserCapabilities > Prefabs, puis cliquez et faites glisser les préfabriqués suivants dans la fenêtre Hierarchy pour les ajouter à votre scène :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:

  • Préfabriqué NetworkLobbyNetworkLobby prefab
  • Préfabriqué SharedPlaygroundSharedPlayground prefab

Unity avec les préfabriqués nouvellement ajoutés NetworkLobby et SharedPlayground sélectionnés

Dans la fenêtre Project, accédez au dossier Assets > MRTK.Tutorials.AzureSpatialAnchors > Prefabs, puis faites glisser le préfabriqué suivant dans la fenêtre Hierarchy pour l’ajouter à votre scène :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:

  • Préfabriqué DebugWindowDebugWindow prefab

Unity avec le préfabriqué nouvellement ajouté DebugWindow sélectionné

Création du préfabriqué utilisateurCreating the user prefab

Dans cette section, vous allez créer un préfabriqué qui sera utilisé pour représenter les utilisateurs dans l’expérience partagée.In this section, you will create a prefab that will be used to represent the users in the shared experience.

1. Créer et configurer l’utilisateur1. Create and configure the user

Dans la fenêtre Hierarchy, cliquez avec le bouton droit sur une zone vide et sélectionnez Create Empty pour ajouter un objet vide à votre scène, nommez l’objet PhotonUser, puis configurez-le comme suit :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:

  • Vérifiez que le paramètre Position de Transform a les valeurs X = 0, Y = 0, Z = 0 :Ensure the Transform Position is set to X = 0, Y = 0, Z = 0:

Unity avec l’objet PhotonUser nouvellement créé sélectionné

Dans la fenêtre Hierarchy, sélectionnez l’objet PhotonUser puis, dans la fenêtre Inspector, utilisez le bouton Add Component pour ajouter le composant Photon User (Script) à l’objet 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:

Unity avec le composant Photon User ajouté

Dans la fenêtre Inspector, utilisez le bouton Add Component pour ajouter le composant Generic Net Sync (Script) à l’objet PhotonUser et configurez-le comme suit :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:

  • Cochez la case Is User.Check the Is User checkbox

Unity avec le composant Generic Net Sync ajouté et configuré

Dans la fenêtre Inspector, utilisez le bouton Add Component pour ajouter le composant Photon View (Script) à l’objet PhotonUser et configurez-le comme suit :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:

  • Affectez au champ Observed Components le composant Generic Net Sync (Script) .To the Observed Components field, assign the Generic Net Sync (Script) component

Unity avec le composant Photon View ajouté et configuré

2. Créer l’avatar2. Create the avatar

Dans la fenêtre Project, accédez au dossier Assets > MRTK > SDK > StandardAssets > Materials pour rechercher les matériaux MRTK.In the Project window, navigate to the Assets > MRTK > SDK > StandardAssets > Materials folder to locate the MRTK materials.

Ensuite, dans la fenêtre Hierarchy, cliquez avec le bouton droit sur l’objet PhotonUser, puis sélectionnez 3D Object > Sphere pour créer un objet Sphere en tant qu’enfant de l’objet PhotonUser et configurez-le comme suit :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:

  • Vérifiez que le paramètre Position de Transform a les valeurs X = 0, Y = 0, Z = 0.Ensure the Transform Position is set to X = 0, Y = 0, Z = 0
  • Changez le paramètre Scale de Transform en une taille appropriée, par exemple X = 0,15, Y = 0,15, Z = 0,15.Change the Transform Scale to a suitable size, for example, X = 0.15, Y = 0.15, Z = 0.15
  • Affectez au champ MeshRenderer > Materials > Element 0 le matériau MRTK_Standard_WhiteTo the MeshRenderer > Materials > Element 0 field, assign the MRTK_Standard_White material

Unity avec la sphère d’avatar nouvellement créée et configurée

3. Créer le préfabriqué3. Create the prefab

Dans la fenêtre Project, accédez au dossier Assets > MRTK.Tutorials.MultiUserCapabilities > Resources :In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder:

Fenêtre de projet Unity avec le dossier Resource sélectionné

Le dossier Resources étant toujours sélectionné, cliquez et faites glisser l’objet PhotonUser de la fenêtre Hierarchy vers le dossier Resources pour transformer l’objet PhotonUser en préfabriqué :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:

Unity avec le préfabriqué PhotonUser nouvellement créé sélectionné

Dans la fenêtre Hierarchy, cliquez avec le bouton droit sur l’objet PhotonUser et sélectionnez Delete pour le supprimer de la scène :In the Hierarchy window, right-click on the PhotonUser object and select Delete to remove it from the scene:

Unity avec l’objet préfabriqué nouvellement créé PhotonUser supprimé de la scène

Configuration de PUN pour instancier le préfabriqué utilisateurConfiguring PUN to instantiate the user prefab

Dans cette section, vous allez configurer le projet pour qu’il utilise le préfabriqué PhotonUser créé dans la section précédente.In this section, you will configure the project to use the PhotonUser prefab you created in the previous section.

Dans la fenêtre Project, accédez au dossier Assets > MRTK.Tutorials.MultiUserCapabilities > Resources.In the Project window, navigate to the Assets > MRTK.Tutorials.MultiUserCapabilities > Resources folder.

Dans la fenêtre Hierarchy, développez l’objet NetworkLobby et sélectionnez l’objet enfant NetworkRoom. Ensuite, dans la fenêtre Inspector, localisez le composant Photon Room (Script) et configurez-le comme suit :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:

  • Affectez au champ Photon User Prefab le préfabriqué PhotonUser du dossier Resources.To the Photon User Prefab field, assign the PhotonUser prefab from the Resources folder

Unity avec le composant Photon Room partiellement configuré

Essai de l’expérience avec plusieurs utilisateursTrying the experience with multiple users

Vous pouvez à présent générer le projet Unity et le déployer sur votre HoloLens. De retour dans Unity, passez au mode Game pendant que l’application s’exécute sur votre HoloLens : vous voyez l’avatar de l’utilisateur HoloLens se déplacer quand vous bougez la tête (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:

Animation montrant Unity avec des utilisateurs en réseau

Conseil

Pour vous rappeler comment générer et déployer votre projet Unity sur HoloLens 2, vous pouvez vous référer aux instructions de Génération de votre application sur votre 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.

Attention

L’application doit se connecter à Photon : vérifiez donc que votre ordinateur/appareil est connecté à Internet.The app needs to connect to Photon, so make sure your computer/device is connected to the internet.

FélicitationsCongratulations

Votre projet est désormais configuré pour permettre à plusieurs utilisateurs de se connecter à la même expérience et de voir leurs mouvements.You have successfully configured your project to allow multiple users to connect to the same experience and see each other's movements. Dans le tutoriel suivant, vous allez implémenter des fonctionnalités pour partager les mouvements d’objets avec plusieurs appareils.In the next tutorial, you will implement functionality so that the movements of objects are also shared across multiple devices.