Partager via


Utiliser des contrôles d’interface utilisateur prédéfinis

Vue d’ensemble

Le package Exemples de contrôles fournit des contrôles d’interface utilisateur prédéfinis créés à l’aide du Mesh Toolkit que vous pouvez importer dans vos projets. Nous les utilisons largement dans nos didacticiels Mesh 101 et Mesh 201 .

Capture d’écran de plusieurs exemples de contrôle dans le didacticiel Mesh 101.

Les échantillons de contrôle sont toujours en cours de développement afin que nous les appelons « échantillons » pour indiquer qu’ils évoluent et sont susceptibles de changer au fil du temps. Des détails sur les exemples de contrôle sont fournis dans la section Détails des exemples de contrôle plus loin dans cette page, mais voici un aperçu rapide de la façon dont nous les utilisons dans nos didacticiels.

BackplateBase

Étant donné qu’un backplate est un objet de prise en charge utile pour tout affichage de texte d’information, nous utilisons le prefab BackplateBase dans quelques endroits.

Capture d’écran des nombreuses instances du prefab BackplateBase dans le didacticiel Mesh 101.

Un exemple : Dans le didacticiel Mesh 101, BackplateBase est disponible en tant qu’objet enfant vers ChapterLabel , qui est l’affichage du texte d’informations pour la première station, 3.1 : Lecture vidéo.

Capture d’écran d’une instance BackplateBase dans le didacticiel Mesh 101.

ButtonBase

Dans le didacticiel Mesh 101, le prefab ButtonBase est utilisé pour créer le bouton Lecture de l’écran vidéo dans la station de lecture vidéo 3.1 : Vidéo. Notez que le préfabriqué a été renommé ici en « PlayVideoButton ».

Capture d’écran d’une instance ButtonBase dans le didacticiel Mesh 101.

Environnement

Dans le tutoriel Mesh 201, le préfabriqué Earth est utilisé pour la station 4 : Charger une URL à partir d’une ressource 3D.

Capture d’écran d’une instance de préfabriqué Earth dans le didacticiel Mesh 101.

InformationButton

Dans le didacticiel Mesh 101, le préfabriqué InformationButton est utilisé pour la station de déclencheur de boîte de dialogue d’informations 3.2. Notez que le préfabriqué a été légèrement renommé ici en « Information_Button ».

Capture d’écran d’une instance InformationButton dans le didacticiel Mesh 101.

Mise en route

Le package Exemples de contrôle est inclus lorsque vous téléchargez les exemples Mesh à partir de GitHub.

Capture d’écran du package Exemples de contrôle dans Explorateur de fichiers.

Pour ajouter le package d’exemples de contrôle à votre projet :

  1. Dans votre projet Unity dans la barre de menus, sélectionnez Fenêtre> Gestionnaire de package.
  2. Cliquez sur la liste déroulante « + », puis sélectionnez Ajouter un package à partir du disque ....

Capture d’écran du menu Gestionnaire de package avec l’élément de menu Ajouter un package à partir de l’élément de menu disque mis en surbrillance.

  1. Dans la fenêtre Sélectionner un package sur disque , accédez au dossier nommé com.microsoft.mesh.toolkit.control.samples , puis double-cliquez sur le fichier package.json .

Capture d’écran du fichier package.json dans Explorateur de fichiers.

  1. Le package Exemples de contrôles s’affiche dans la Gestionnaire de package étiquetée « Local » ...

Capture d’écran du package Exemples de contrôle dans le Gestionnaire de package.

... et se trouve dans le dossier Packages de projet>.

Capture d’écran du package Exemples de contrôle dans le dossier Packages.

Exemples de contrôle en détail

Les préfabriqués de l’exemple de contrôle se trouvent dans les sous-dossiers du dossier Runtime .

Runtime>ButtonBase

  • BackplateBase : utilisez ce préfabriqué pour placer tous vos contrôles sur une plaque arrière avec des angles arrondis et une surface iridescente.

Capture d’écran du préfabriqué BackplateBase dans la scène.

  • ButtonBase : préfabriqué de base pour toutes les variantes de bouton. Le bouton anime, génère des commentaires audio lorsque vous appuyez dessus et contient une étiquette. Utilisez visual Scripting pour configurer des événements qui se déclenchent lorsqu’un avatar clique sur le bouton.

Capture d’écran du préfabriqué ButtonBase dans la scène.

Runtime>Globe

  • Terre : globe terrestre qui tourne et peut être sélectionné. Lorsqu’il est sélectionné, le globe génère une position de latitude et de longitude et ajoute un marqueur. Cette fonctionnalité peut être étendue et modifiée avec visual Scripting. Toutes les actions sont partagées par défaut par tous les clients.

Capture d’écran du préfabriqué de la Terre dans la scène.

Runtime>InformationButton

  • InformationButton : bouton de pièce de monnaie de l’espace flottant. Le bouton présente la détection de proximité par le biais du Avatar Trigger comportement. Lorsqu’un avatar est à une certaine distance du bouton, la pièce cesse de tourner et est affiché à la place. L’avatar est en mesure de cliquer sur la pièce. Si l’avatar est hors limites, il n’est plus en mesure de cliquer sur le bouton et le bouton revient à tourner. Le comportement interagissant du bouton est piloté par son composant Mesh Interactable Setup et le script InformationButton .

Capture d’écran du préfabriqué InformationButton dans la scène.

Étapes suivantes