Bouton — MRTK3

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, et fournir des interactions de bouton satisfaisantes et fiables est essentiel pour une expérience de réalité mixte de qualité. MRTK fournit deux catégories de préfabriqués de boutons : basé sur un canevas et non basé sur un canevas. Les deux configurations utilisent le PressableButton script, une sous-classe de StatefulInteractable étendue pour inclure des comportements spécifiques aux boutons.

En savoir plus sur le fonctionnement du système d’interface utilisateur canvas hybride.

Exemples de scènes

Si vous utilisez le projet de modèle de développement, plusieurs exemples de scènes sont disponibles qui illustrent les préfabriqués de bouton disponibles.

CanvasUITearSheet.unity affiche toutes les variantes de préfabriqués de boutons basés sur un canevas disponibles dans MRTK.

CanvasExample.unity montre quelques exemples de création de dispositions plus grandes à l’aide des composants basés sur le canevas.

Prefabs

Les boutons basés sur un canevas sont flexibles et configurables, et peuvent être redimensionnés à n’importe quelle dimension ou proportion. Par conséquent, seuls quelques préfabriqués de boutons sont fournis.

• EmptyButton fournit l’effet surface/frontplate pressable, fond holographique et lumineux. Il n’y a pas de texte, d’icône, d’étiquette ou d’autre contenu. Il s’agit donc de contrôles de type bouton plus abstraits qui peuvent être générés en tant que variante de ce préfabriqué sans interférer avec le contenu du texte ou de l’icône.
• ActionButton est un bouton simple qui comprend une icône, du texte et une étiquette. Ces composants individuels peuvent être activés ou désactivés, et le système de disposition s’adapte en conséquence.

D’autres améliorations peuvent être ajoutées au bouton, telles que l’indicateur de commutateur bascule. Les fonctionnalités qui ne sont pas destinées à se déplacer avec la plaque avant doivent être attachées au composant de la plaque arrière.

Structure

Les différentes parties d’un ActionButton peuvent être activées/désactivées pour personnaliser l’apparence et le comportement du bouton. Nous avons décortiqué deux configurations possibles différentes pour afficher les différentes parties du préfabriqué de bouton. Le « backglow » n’est pas visible dans ces captures d’écran, car le bouton n’est pas activement appuyé.

Tout d’abord, une configuration plus grande où l’objet Text main est actif et utilise des styles inline pour afficher un en-tête et un sous-texte. Deuxièmement, une configuration plus petite où est actif pour afficher une description de l’action sous l’icône. L’objet Text main est désactivé.

Classe PressableButton

La PressableButton classe est dérivée de StatefulInteractable avec les fonctions nouvelles et remplacées spécifiques aux boutons. Dans l’inspecteur, vous pouvez configurer les paramètres liés à la pression volumétrique en plus de tous les autres paramètres configurables à partir de StatefulInteractable.

Construction de l’interface utilisateur avec des boutons

Lors de la création d’un menu ou de panneaux d’interface utilisateur avec plusieurs boutons, il est recommandé d’utiliser une géométrie de plaque arrière partagée. En utilisant une plaque arrière partagée, nous pouvons réduire le bruit visuel et améliorer la convivialité. Voici quelques exemples de disposition de boutons sur la plaque arrière partagée.

Composants supplémentaires

Pour référence, voici quelques composants supplémentaires responsables de la gestion des aspects des visuels et des fonctionnalités de bouton :

• L’impulsion de la plaque avant visuelle observée lorsque le bouton est sélectionné est gérée par un InteractablePulse composant.
• L’icône de bouton peut être définie sur une icône MRTK à l’aide de FontIconSelector.
• Un RectTransformColliderFitter peut éventuellement être utilisé sur les boutons canvas pour l’adapter BoxCollider à son RectTransform. Ce composant est désactivé par défaut pour les performances.