Créer des boutons avec des cubes Unity et des scripts MRTK

  • 10 minutes

Mixed Reality Toolkit (MRTK) comprend 18 préfabriqués de boutons que vous pouvez ajouter à votre projet de réalité mixte. Même si les préfabriqués de boutons sont configurés avec des composants tels que des scripts, vous pouvez les personnaliser davantage pour répondre à vos besoins. En outre, vous pouvez utiliser les préfabriqués existants pour créer vos propres préfabriqués.

Pour ce projet, vous allez créer un préfabriqué de bouton qui contient les éléments suivants :

  • Un bouton qui affiche le nom et l’image du joueur.
  • Une carte qui s’affiche lorsque l’utilisateur appuie sur le bouton et qui montre le nom et les statistiques du joueur.

Tous les objets de bouton sont créés comme les enfants d’un GameObject vide. Considérez cet objet parent comme un conteneur pour tous les objets de bouton. Cette structure vous permet d’organiser votre préfabriqué.

À présent, vous allez utiliser des scripts fournis par MRTK pour créer un bouton à partir de zéro, qui permettra d’afficher le nom et l’image du joueur.

Important

Pour être sûr que les objets que vous allez créer ne provoquent pas de conflit avec les scripts du projet, nommez tous les objets comme indiqué dans ce module.

Créer un conteneur pour le préfabriqué

  1. Dans la fenêtre Hierarchy, sélectionnez l’icône +, puis sélectionnez Create Empty.

    Screenshot of the hierarchy window. The plus icon and Create Empty menu item are highlighted.

  2. Dans Hierarchy, sélectionnez le GameObject. Vous voyez les propriétés de GameObject dans la fenêtre Inspector. Dans Inspector, renommez l’objet PlayerContainer.

    Screenshot of the PlayerContainer object highlighted.

  3. Dans la fenêtre Inspector, sélectionnez les points de suspension situés à droite du composant Transform. Ensuite, sélectionnez Reset. Cela réinitialise la position du conteneur sur 0, 0, 0 (cette position est considérée comme l’origine ou comme le milieu de votre tête si vous portez un casque). Étant donné que les objets de bouton seront créés comme les enfants de PlayerContainer, la position des objets enfants sera relative à la position de PlayerContainer.

    Screenshot of the inspector window. The plus icon and Reset menu item are highlighted.

Maintenant que vous avez une zone pour tous vos joueurs, vous devez créer des boutons pour chacun d’eux. Unity fournit des primitives que vous pouvez utiliser dans vos projets comme des espaces réservés et des prototypes à des fins de test. Pour ce projet, vous allez utiliser une primitive de cube, puis ajouter des scripts MRTK pour rendre les primitives de cube cliquables.

Créer la primitive de cube

La primitive de cube est un objet 3D sur lequel vous placez l’image, le nom et le PER d’un personnage. Vous rendez ensuite ce cube interactif.

Pour créer la primitive de cube, effectuez les étapes suivantes :

  1. Dans la fenêtre Hierarchy, cliquez avec le bouton droit sur l’objet PlayerContainer, puis sélectionnez 3D Object>Cube. Veillez à ce que le cube soit créé en tant qu’enfant de l’objet PlayerContainer.

    Screenshot of the cube object as a child of player roster.

    Notez que le cube est visible uniquement dans la fenêtre Scene, et non dans la fenêtre Game. La fenêtre Game est une représentation de ce que vous pouvez voir si vous portez ou utilisez un casque. La position du cube se situe à l’origine, ce qui explique pourquoi elle n’est pas visible dans la fenêtre Game. En outre, le cube mesure 1 mètre de côté, ce qui est relativement grand pour la fenêtre Game. Vous modifierez la distance et la taille du cube plus tard.

  2. Sélectionnez Cube dans la fenêtre Hierarchy. Vous voyez les propriétés du cube dans la fenêtre Inspector. Dans Inspector, renommez le cube PlayerButton.

  3. Dans Inspector, définissez PlayerButtonPosition sur 0, 0, 0.9. La valeur de l’axe Z contrôle la distance (ou profondeur) de l’objet à partir de votre vue. Ce paramètre positionne le cube à une distance de 0,9 mètre devant vous.

    Screenshot of the inspector window for the player button object. The position property is highlighted.

  4. Remplacez la valeur de Scale par .25, .25, .25. Cela modifie l’échelle du cube de 0,5 mètre sur chaque axe.

    Screenshot of the inspector window for the player button object. The scale property is highlighted.

  5. Par défaut, le cube est de couleur anthracite uni. MRTK contient des nuanceurs que vous pouvez utiliser pour modifier la couleur (ou la texture) du cube. Dans la fenêtre Project, entrez MRTK_Standard_Charcoal dans la barre de recherche. Sous la barre de recherche, en regard de Search, sélectionnez In Packages. Cela vous permet d’effectuer des recherches dans le dossier Packages où se trouvent les nuanceurs MRTK.

    Screenshot of the project window. The search bar and m r t k standard transparent charcoal search result are highlighted.

    Sélectionnez le nuanceur MRTK_Standard_Charcoal, puis faites-le glisser dans la fenêtre Inspector pour l’objet PlayerButton. La couleur du cube passe à l’anthracite.

    Screenshot of the scene window. The player button object is charcoal.

Ajouter des scripts MRTK pour créer des boutons

MRTK comprend deux scripts qui sont utilisés pour transformer un objet en bouton :

  • PressableButton.cs
  • NearInteractionTouchable.cs

Le script PressableButton contient des propriétés permettant de gérer différents aspects des pressions de bouton, comme la distance de pression, la vitesse de retour et les événements de pression. Le script NearInteractionTouchable contient des propriétés permettant de gérer les interactions tactiles avec l’objet.

Pour que le bouton fonctionne, vous devez ajouter chaque script comme composant du cube.

  1. Sélectionnez l’objet PlayerButton dans la fenêtre Hierarchy. Dans la fenêtre Inspecteur, sélectionnez Ajouter un composant.

    Screenshot of the inspector window for the player button object. The add component button is highlighted.

  2. Dans la fenêtre Search qui s’affiche, entrez PressableButton, puis sélectionnez le script PressableButton.

    Screenshot of the search screen for adding a component. The search result is the pressable button script.

  3. Sélectionnez à nouveau Add Component, puis recherchez NearInteractionTouchable. Sélectionnez le script NearInteractionTouchable à ajouter en tant que composant.

  4. Il est probable que les paramètres Bounds et Center de Touchable Collider pour le script NearInteractionTouchable ne correspondent pas aux paramètres Collider Size et Center de l’objet PlayerButton. Les colliders définissent la forme de l’objet pour les collisions physiques. Dans ce cas, une pression de bouton est une collision, car votre main appuie sur (ou rentre en collision avec) le cube.

    Pour ajuster les limites et le centrage, dans les propriétés Touchable Collider, sélectionnez à la fois Fix Bounds et Fix Center.

    Screenshot of the near interaction touchable properties. The bounds and center properties are highlighted.

  5. Pour que l’objet soit un bouton, vous devez affecter l’objet PlayerButton dans le script PressableButton. Dans le composant PressableButton, faites glisser l’objet PlayerButton vers la propriété Moving Button Visuals.

    Screenshot of the pressable button properties. The moving button visuals property is highlighted.

© 2021 Warner Bros. Ent. Tous droits réservés.