Boutons — MRTK2

Un bouton permet à l’utilisateur de déclencher une action immédiate. C’est l’un des composants les plus fondamentaux de la réalité mixte. MRTK fournit différents types de préfabriqués de bouton.

Préfabriqués de bouton dans MRTK

Exemples de préfabriqués de bouton sous le MRTK/SDK/Features/UX/Interactable/Prefabs dossier

Boutons basés sur une image ou un graphique de l’interface utilisateur Unity

• UnityUIInteractableButton.prefab
• PressableButtonUnityUI.prefab
• PressableButtonUnityUICircular.prefab
• PressableButtonHoloLens2UnityUI.prefab

Boutons basés sur un collisionneur

( Button Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) est basé sur le concept Interactable pour fournir des contrôles d’interface utilisateur faciles pour les boutons ou d’autres types de surfaces interactives. Le bouton de ligne de base prend en charge toutes les méthodes d’entrée disponibles, y compris l’entrée manuelle articulée pour les interactions proches, ainsi que le regard + appui aérien pour les interactions lointaines. Vous pouvez également utiliser la commande vocale pour déclencher le bouton.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) est le bouton de style shell de HoloLens 2 qui prend en charge le déplacement précis du bouton pour l’entrée de suivi manuel direct. Il combine le Interactable script avec PressableButton le script.

Pour HoloLens 2, il est recommandé d’utiliser des boutons avec une plaque arrière opaque. Les boutons transparents ne sont pas recommandés en raison de ces problèmes de facilité d’utilisation et de stabilité :

• L’icône et le texte sont difficiles à lire avec l’environnement physique
• Il est difficile de comprendre quand l’événement se déclenche
• Les hologrammes affichés via un plan transparent peuvent être instables avec la stabilisation de profondeur LSR de HoloLens 2

Comment utiliser des boutons pressables

Boutons basés sur l’interface utilisateur Unity

Créez un canevas dans votre scène (GameObject -> Interface utilisateur -> Canevas). Dans le panneau Inspecteur de votre canevas :

• Cliquez sur « Convertir en canevas MRTK »
• Cliquez sur « Add NearInteractionTouchableUnityUI »
• Définir l’échelle X, Y et Z du composant Rect Transform sur 0,001

Ensuite, faites glisser PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) ou PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) sur le canvas.

Boutons basés sur un collisionneur

Faites simplement glisser PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) ou PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) dans la scène. Ces préfabriqués de bouton sont déjà configurés pour avoir un retour audio-visuel pour les différents types d’entrées, y compris l’entrée de main articulée et le regard.

Les événements exposés dans le préfabriqué proprement dit ainsi que le composant Interactable peuvent être utilisés pour déclencher des actions supplémentaires. Les boutons pressables de la scène HandInteractionExample utilisent l’événement OnClick d’Interactable pour déclencher une modification de la couleur d’un cube. Cet événement est déclenché pour différents types de méthodes d’entrée, comme le regard, l’appui aérien, les rayons de main, ainsi que les pressions physiques sur les boutons dans le script de bouton pressable.

Vous pouvez configurer le moment où le bouton appuyable déclenche l’événement OnClick via le PhysicalPressEventRouter sur le bouton. Par exemple, vous pouvez définir OnClick pour qu’il se déclenche lorsque le bouton est enfoncé pour la première fois, au lieu d’être enfoncé et relâché, en définissant Interactable On Click surEvent On Press.

Pour tirer parti des informations d’état d’entrée manuelle articulées spécifiques, vous pouvez utiliser des événements de boutons appuyables : Début tactile, Fin tactile, Bouton enfoncé, Bouton relâché. Toutefois, ces événements ne se déclencheront pas en réponse à l’entrée d’air, aux rayons de main ou aux entrées oculaires. Pour prendre en charge les interactions proches et lointaines, il est recommandé d’utiliser l’événement OnClick d’Interactable.

États d’interaction

Dans l’état inactif, la plaque avant du bouton n’est pas visible. À mesure qu’un doigt approche ou qu’un curseur de l’entrée du regard cible la surface, la bordure lumineuse de la plaque avant devient visible. Il y a une mise en surbrillance supplémentaire de la position du bout des doigts sur la surface de la plaque avant. Lorsqu’elle est poussée avec un doigt, la plaque avant se déplace avec le bout des doigts. Lorsque le bout du doigt touche la surface de la plaque avant, il montre un effet d’impulsion subtil pour donner un retour visuel du point tactile.

Dans HoloLens 2 bouton de style shell, il existe de nombreux signaux visuels et affordances pour augmenter la confiance de l’utilisateur en matière d’interaction.

Lumière de proximité	Mise en surbrillance du focus	Compression de la cage	Impulsion sur le déclencheur

L’effet d’impulsion subtil est déclenché par le bouton pressable, qui recherche proximitylight(s) qui résident sur le pointeur en interaction. Si des lumières de proximité sont trouvées, la ProximityLight.Pulse méthode est appelée, qui anime automatiquement les paramètres du nuanceur pour afficher une impulsion.

Propriétés de l’inspecteur

Collisionneur de boîtesBox Collider pour la plaque avant du bouton.

Bouton appuyable Logique du déplacement du bouton avec l’interaction de l’appui à la main.

Routeur d’événements de presse physique Ce script envoie des événements de l’interaction de la pression manuelle à Interactable.

Interactablegère différents types d’états et d’événements d’interaction. Le regard hololens, le mouvement, l’entrée vocale et l’entrée de contrôleur de mouvement immersif du casque sont gérés directement par ce script.

Source audio Source audio Unity pour les clips de retour audio.

NearInteractionTouchable.cs Obligatoire pour rendre n’importe quel objet tactile avec une entrée manuelle articulée.

Disposition du préfabriqué

L’objet ButtonContent contient une plaque avant, une étiquette de texte et une icône. Le FrontPlate répond à la proximité du doigt d’index à l’aide du nuanceur Button_Box . Il montre les bordures lumineuses, la lumière de proximité et un effet d’impulsion au toucher. L’étiquette de texte est faite avec TextMesh Pro. La visibilité de SeeItSayItLabel est contrôlée par le thème de Interactable.

Comment modifier l’icône et le texte

Les boutons MRTK utilisent un ButtonConfigHelper composant pour vous aider à modifier l’icône, le texte et l’étiquette du bouton. (Notez que certains champs peuvent être absents si des éléments ne sont pas présents sur le bouton sélectionné.)

Création et modification de jeux d’icônes

Un jeu d’icônes est un ensemble partagé de ressources d’icônes utilisés par le ButtonConfigHelper composant. Trois styles d’icône sont pris en charge.

• Les icônes de quad sont affichées sur un quad à l’aide d’un MeshRenderer. Il s’agit du style d’icône par défaut.
• Les icônes sprite sont rendues à l’aide d’un SpriteRenderer. Cela est utile si vous préférez importer vos icônes en tant que feuille de sprite, ou si vous souhaitez que vos ressources d’icône soient partagées avec les composants de l’interface utilisateur Unity. Pour utiliser ce style, vous devez installer le package Éditeur de sprite (Windows -> Gestionnaire de package -> Sprite 2D)
• Les icônes char sont affichées à l’aide d’un TextMeshPro composant. Cela est utile si vous préférez utiliser une police d’icône. Pour utiliser la police d’icône HoloLens, vous devez créer une TextMeshPro ressource de police.

Pour modifier le style utilisé par votre bouton, développez la liste déroulante Icônes dans ButtonConfigHelper et sélectionnez dans la liste déroulante Style d’icône.

Pour créer une icône de bouton :

1. Dans la fenêtre Projet , cliquez avec le bouton droit sur Ressources pour ouvrir le menu contextuel. (Vous pouvez également cliquer avec le bouton droit sur n’importe quel espace vide dans le dossier Assets ou l’un de ses sous-dossiers.)

2. Sélectionnez Créer > Mixed Reality jeu d’icônes > du kit de ressources>.

   

Pour ajouter des icônes quad et sprite, faites-les simplement glisser dans leurs tableaux respectifs. Pour ajouter des icônes Char, vous devez d’abord créer et affecter une ressource de police.

Dans MRTK 2.4 et versions ultérieures, nous vous recommandons de déplacer les textures d’icône personnalisées dans un IconSet. Pour mettre à niveau les ressources de tous les boutons d’un projet vers le nouveau format recommandé, utilisez buttonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Utilitaires -> Fenêtre Migration -> Sélection du gestionnaire de migration -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importation du package Microsoft.MixedRealityToolkit.Unity.Tools requis pour mettre à niveau les boutons.

Si aucune icône n’est trouvée dans le jeu d’icônes par défaut pendant la migration, un jeu d’icônes personnalisé est créé dans MixedRealityToolkit.Generated/CustomIconSets. Une boîte de dialogue indique que cela a eu lieu.

Création d’une ressource de police d’icône HoloLens

Tout d’abord, importez la police d’icône dans Unity. Sur les ordinateurs Windows, vous trouverez la police HoloLens par défaut dans Windows/Fonts/holomdl2.ttf. Copiez et collez ce fichier dans votre dossier Assets.

Ensuite, ouvrez TextMeshPro Font Asset Creator via Window > TextMeshPro > Font Asset Creator. Voici les paramètres recommandés pour générer un atlas de polices HoloLens. Pour inclure toutes les icônes, collez la plage Unicode suivante dans le champ Séquence de caractères :

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

Une fois la ressource de police générée, enregistrez-la dans votre projet et affectez-la au champ Police de l’icône Char de votre jeu d’icônes. La liste déroulante Icônes disponibles est désormais remplie. Pour rendre une icône disponible pour une utilisation par un bouton, cliquez dessus. Il est ajouté à la liste déroulante Icônes sélectionnées et s’affiche désormais dans la ButtonConfigHelper. balise Vous pouvez éventuellement attribuer une balise à l’icône. Cela permet de définir l’icône lors de l’exécution.

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

Pour utiliser votre jeu d’icônes, sélectionnez un bouton, développez la liste déroulante Icônes dans le ButtonConfigHelper et affectez-le au champ Jeu d’icônes.

Comment modifier la taille d’un bouton

la taille du bouton de style shell de HoloLens 2 est de 32 x 32 mm. Pour personnaliser la dimension, modifiez la taille de ces objets dans le préfabriqué du bouton :

1. FrontPlate
2. Quad sous BackPlate
3. Collisionneur de boîtes à la racine

Ensuite, cliquez sur le bouton Corriger les limites dans le script NearInteractionTouchable qui se trouve à la racine du bouton.

Mettre à jour la taille de la personnalisation de la FrontPlate 1

Mettre à jour la taille de la

Mettre à jour la taille de la personnalisation de la

Cliquez sur « Corriger les limites »

Commande vocale (« voir, dire »)

Gestionnaire d’entrée vocale Le script Interactable dans Pressable Button implémente IMixedRealitySpeechHandlerdéjà . Une commande vocale mot clé peut être définie ici.

Profil d’entrée vocale En outre, vous devez inscrire la commande vocale mot clé dans le profil global Speech Commands.

See-it, Say-it label Le préfabriqué de bouton pressable a une étiquette TextMesh Pro d’espace réservé sous l’objet SeeItSayItLabel . Vous pouvez utiliser cette étiquette pour communiquer la commande vocale mot clé pour le bouton à l’utilisateur.

Comment créer un bouton à partir de zéro

Vous trouverez les exemples de ces boutons dans la scène PressableButtonExample .

1. Création d’un bouton pressable avec un cube (interaction proche uniquement)

1. Créer un cube Unity (GameObject > 3D Object > Cube)
2. Ajouter un PressableButton.cs script
3. Ajouter un NearInteractionTouchable.cs script

Dans le PressableButtonpanneau Inspector de, affectez l’objet cube aux visuels de bouton de déplacement.

Lorsque vous sélectionnez le cube, plusieurs couches colorées s’affichent sur l’objet. Cela permet de visualiser les valeurs de distance sous Paramètres d’appui. À l’aide des handles, vous pouvez configurer quand démarrer l’appui (déplacer l’objet) et quand déclencher l’événement.

Lorsque vous appuyez sur le bouton, il déplace et génère les événements appropriés exposés dans le PressableButton.cs script, tels que TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Résolution des problèmes

Si votre bouton exécute une double pression, vérifiez que la propriété Appliquer l’envoi avant est active et que le plan Start Push Distance est placé devant le plan touchable d’interaction proche . Le plan touchable d’interaction proche est indiqué par le plan bleu placé devant l’origine de la flèche blanche dans le gif ci-dessous :

2. Ajout de commentaires visuels au bouton de cube de base

MRTK Standard Shader fournit diverses fonctionnalités qui facilitent l’ajout de commentaires visuels. Créez un matériau et sélectionnez le nuanceur Mixed Reality Toolkit/Standard. Vous pouvez également utiliser ou dupliquer l’un des matériaux existants sous /SDK/StandardAssets/Materials/ qui utilise MRTK Standard Shader.

Cochez Hover Light et Proximity Light sous Options Fluent. Cela permet un retour visuel pour les interactions main proche (lumière de proximité) et pointeur lointain (lumière de pointage).

3. Ajout de commentaires audio au bouton de cube de base

Étant donné PressableButton.cs que le script expose des événements tels que TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), nous pouvons facilement attribuer des commentaires audio. Ajoutez simplement unity à l’objet Audio Source cube, puis affectez des clips audio en sélectionnant AudioSource.PlayOneShot(). Vous pouvez utiliser des clips audio MRTK_Select_Main et MRTK_Select_Secondary sous le /SDK/StandardAssets/Audio/ dossier .

4. Ajout d’états visuels et gestion des événements d’interaction lointaine

Interactable est un script qui facilite la création d’un état visuel pour les différents types d’interactions d’entrée. Il gère également les événements d’interaction à distance. Ajoutez Interactable.cs et faites glisser l’objet cube dans le champ Cible sous Profils. Ensuite, créez un thème de type ScaleOffsetColorTheme. Sous ce thème, vous pouvez spécifier la couleur de l’objet pour les états d’interaction spécifiques, tels que Focus et Pressed. Vous pouvez également contrôler l’échelle et le décalage. Cochez l’option Accélération et définissez la durée pour faciliter la transition visuelle.

Vous verrez l’objet répondre à la fois aux interactions lointaines (curseur de rayon de main ou de regard) et proches (main).

Exemples de boutons personnalisés

Dans la scène HandInteractionExample, consultez les exemples de piano et de bouton rond qui utilisent PressableButtontous deux .

Un et un NearInteractionTouchable script sont attribués à chaque touche PressableButton de piano. Il est important de vérifier que la direction vers l’avant locale de NearInteractionTouchable est correcte. Il est représenté par une flèche blanche dans l’éditeur. Assurez-vous que la flèche pointe loin de la face avant du bouton :

Voir aussi

• Interagissant
• Thèmes visuels