Boutons — MRTK2

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

Préfabriqués de bouton dans MRTK

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

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

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

Boutons basés sur un collisionneur

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

bouton de style shell de HoloLens 2 avec plaque arrière qui prend en charge divers commentaires visuels tels que la lumière de bordure, la lumière de proximité et la plaque avant compressée

bouton de style shell de HoloLens 2 sans plaque arrière

bouton de style shell de HoloLens 2 avec forme circulaire

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Bouton de style shell de HoloLens 2 large 32x96mm

Barre de boutons horizontale HoloLens 2 avec plaque arrière partagée

Barre de boutons verticale HoloLens 2 avec plaque arrière partagée

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 case à cocher de style shell 32x32mm

HoloLens 2 commutateur de style shell 32x32mm

HoloLens 2 radio de style shell 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 case à cocher de style shell 32x96mm

HoloLens 2 commutateur de style shell 32x96mm

HoloLens 2 radio de style shell 32x96mm

TogSwitch

Bouton radial

Case à cocher

Commutateur bascule

ButtonHoloLens1

PressableRoundButton

Bouton de style de shell de HoloLens 1ère génération

Bouton push de forme ronde

Bouton De base

( Button Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefabs) est basé sur le concept Interactable pour fournir des contrôles d’interface utilisateur faciles pour les boutons ou autres types de surfaces interactives. Le bouton de base de référence 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 + air-tap pour les interactions éloignées. 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 mouvement précis du bouton pour l’entrée de suivi direct de la main. Il combine un Interactable script avec PressableButton un 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 LSR de profondeur 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 « Ajouter NearInteractionTouchableUnityUI »
• Définissez l’échelle X, Y et Z du composant Rect Transform sur 0,001

Faites ensuite glisser PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Prefabs/PressableButtonUnityUICircular.prefab) ou PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) sur le canevas.

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 des commentaires audio-visuels 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é lui-même ainsi que le composant Interactable peuvent être utilisés pour déclencher des actions supplémentaires. Les boutons appuyables dans 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’air-tap, la rayon de main, ainsi que les pressions physiques sur les boutons à travers le script de bouton pressable.

Vous pouvez configurer lorsque le bouton appuyable déclenche l’événement OnClick via le PhysicalPressEventRouter bouton 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 appuyé et relâché, en définissant Interactable On Click to Event On Press.

Pour tirer parti des informations d’état d’entrée de main articulées spécifiques, vous pouvez utiliser des événements de boutons appuyables : Début tactile, Fin tactile, Bouton appuyé, Bouton libéré. Toutefois, ces événements ne se déclenchent pas en réponse aux entrées d’air tap, de rayons de main ou d’œil. Pour prendre en charge les interactions proches et éloignées, il est recommandé d’utiliser l’événement OnClick d’Interactable.

États d’interaction

À 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 existe une mise en évidence 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 de pouls subtil pour donner un retour visuel du point de contact.

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

Lumière proche	Mise en surbrillance du focus	Compresser la cage	Impulsion sur le déclencheur

L’effet d’impulsion subtil est déclenché par le bouton appuyable, qui recherche proximitylight(s) qui vivent 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 pressable Logique pour le déplacement du bouton avec l’interaction d’appui à la main.

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

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

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

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

Disposition des préfabriqués

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 des bordures éclatantes, une 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 d’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ées par le ButtonConfigHelper composant. Trois styles d’icône sont pris en charge.

• Les icônes de quad sont rendues 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 sprite (Windows -> Gestionnaire de package -> Sprite 2D)
• Les icônes char sont rendues à 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 à l’intérieur du dossier Assets ou de l’un de ses sous-dossiers.)

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

   

Pour ajouter des icônes de quad et de 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 les versions ultérieures, nous recommandons de déplacer les textures d’icônes 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 une icône est introuvable 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 pouvez trouver la police HoloLens par défaut dans Windows/Fonts/holomdl2.ttf. Copiez et collez ce fichier dans votre dossier Assets.

Ensuite, ouvrez le Créateur de ressources de police TextMeshPro 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 renseignée. Pour rendre une icône disponible pour une utilisation par un bouton, cliquez dessus. Il sera ajouté à la liste déroulante Icônes sélectionnées et s’affichera désormais dans le ButtonConfigHelper. vous pouvez éventuellement donner une balise à l’icône. Cela permet de définir l’icône au moment 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. Box Collider à la racine

Cliquez ensuite 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 personnalisation de la

Mettre à jour la taille de la personnalisation de la Box Collider 3

Cliquez sur « Corriger les limites »

Commande vocale (« see-it, say-it »)

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 de commandes vocales globale.

See-it, Say-it label Le préfabriqué de bouton pressable a un espace réservé TextMesh Pro étiquette 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 appuyable avec 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 Inspecteur de, affectez l’objet cube aux visuels de bouton de déplacement.

Lorsque vous sélectionnez le cube, plusieurs couches de couleur 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 appuyez sur (déplacer l’objet) et quand déclencher un é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().

Dépannage

Si votre bouton exécute une double pression, assurez-vous que la propriété Appliquer l’envoi avant est active et que le plan Démarrer la distance push est placé devant le plan tactile d’interaction proche . Le plan tactile 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 à la fois pour les interactions main proche (lumière de proximité) et pointeur lointain (lumière pointeur).

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 attribuez 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 lointaine. Ajoutez Interactable.cs et déplacez 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 (rayon de main ou curseur du 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 .

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

Voir aussi

• Avec interaction
• Thèmes visuels