Botones : MRTK2

Un botón proporciona al usuario una manera de desencadenar una acción inmediata. Es uno de los componentes fundamentales de la realidad mixta. MRTK proporciona varios tipos de prefabricados de botón.

Botones prefabricados en MRTK

Ejemplos de los elementos prefabricados de botón en MRTK/SDK/Features/UX/Interactable/Prefabs la carpeta

Botones basados en imágenes o gráficos de la interfaz de usuario de Unity

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

Botones basados en colisionadores

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

Botón de estilo shell de HoloLens 2 con placa posterior que admite varios comentarios visuales, como luz de borde, luz de proximidad y placa frontal comprimida

Botón de estilo de shell de HoloLens 2 sin placa posterior

Botón de estilo de shell de HoloLens 2 con forma circular

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Botón de estilo shell de wide HoloLens 2 32x96mm

Barra de botones de HoloLens 2 horizontal con placa posterior compartida

Barra de botones de HoloLens 2 vertical con placa posterior compartida

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

casilla de HoloLens 2 de estilo de shell de 32 x 32 mm

Conmutador de estilo shell de HoloLens 2 de 32 x 32 mm

radio de estilo shell de HoloLens 2 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

casilla de HoloLens 2 estilo shell de 32x96mm

Conmutador de estilo shell de HoloLens 2 de 32 x 96 mm

radio de estilo shell de HoloLens 2 32x96mm

ToggleSwitch

Botón radial

Casilla

Conmutador de alternancia

ButtonHoloLens1

PressableRoundButton

botón

Botón de estilo de shell de HoloLens 1.ª generación

Botón de inserción de forma redonda

Botón Básico

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) se basa en el concepto Interactable para proporcionar controles de interfaz de usuario sencillos para botones u otros tipos de superficies interactivas. El botón de línea base admite todos los métodos de entrada disponibles, incluida la entrada manual articulada para las interacciones cercanas, así como la mirada y el toque de aire para las interacciones lejanas. También puede usar el comando de voz para desencadenar el botón.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) es el botón de estilo de shell de HoloLens 2 que admite el movimiento preciso del botón para la entrada de seguimiento directo de manos. Combina Interactable el script con PressableButton el script.

Para HoloLens 2, se recomienda usar botones con una placa posterior opaca. No se recomiendan los botones transparentes debido a estos problemas de facilidad de uso y estabilidad:

• El icono y el texto son difíciles de leer con el entorno físico
• Es difícil comprender cuándo se desencadena el evento
• Los hologramas que se muestran a través de un plano transparente pueden ser inestables con la estabilización de LSR de profundidad de HoloLens 2

Cómo usar botones presionables

Botones basados en la interfaz de usuario de Unity

Cree un lienzo en la escena (GameObject -> UI -> Canvas). En el panel Inspector del lienzo:

• Haga clic en "Convertir en lienzo de MRTK"
• Haga clic en "Agregar NearInteractionTouchableUnityUI"
• Establezca la escala X, Y y Z del componente Rect Transform en 0,001

A continuación, arrastre PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) o PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) al lienzo.

Botones basados en colisionadores

Simplemente arrastre PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) o PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) a la escena. Estos objetos prefabricados de botón ya están configurados para tener comentarios audiovisuales para los distintos tipos de entradas, incluida la entrada y la mirada articuladas de la mano.

Los eventos expuestos en el propio objeto prefabricado, así como el componente Interactable , se pueden usar para desencadenar acciones adicionales. Los botones presionables de la escena HandInteractionExample usan el evento OnClick de Interactable para desencadenar un cambio en el color de un cubo. Este evento se desencadena para diferentes tipos de métodos de entrada, como mirada, pulsación de aire, rayos de mano, así como pulsaciones de botones físicos a través del script de botón presionable.

Puede configurar cuando el botón presionable activa el evento OnClick a través de en PhysicalPressEventRouter el botón . Por ejemplo, puede establecer OnClick para que se active cuando se presione el botón por primera vez, en lugar de presionarlo y soltarlo, estableciendo Interactable On Click (Interactable Al hacer clic) en Event On Press (Evento al presionar).

Para aprovechar la información específica del estado de entrada de la mano articulada, puede usar eventos de botones presionables: Inicio táctil, Final táctil, Botón presionado, Botón liberado. Sin embargo, estos eventos no se desencadenarán en respuesta a entradas de aire, rayos de mano o ojos. Para admitir interacciones cercanas y lejanas, se recomienda usar el evento OnClick de Interactable.

Estados de interacción

En el estado inactivo, la placa frontal del botón no está visible. A medida que un dedo se aproxima o un cursor de entrada de mirada apunta a la superficie, el borde brillante de la placa frontal se vuelve visible. Hay resaltado adicional de la posición del dedo en la superficie de la placa frontal. Cuando se empuja con un dedo, la placa frontal se mueve con el dedo. Cuando el dedo toca la superficie de la placa frontal, muestra un sutil efecto de pulso para proporcionar comentarios visuales del punto táctil.

En HoloLens 2 botón de estilo de shell, hay muchas indicaciones visuales y prestaciones para aumentar la confianza del usuario en la interacción.

Luz de proximidad	Resaltado del foco	Jaula de compresión	Pulso en el desencadenador

El efecto de pulso sutil se desencadena mediante el botón presionable, que busca Las luces de proximidad que viven en el puntero que interactúa actualmente. Si se encuentra alguna luz de proximidad, se llama al ProximityLight.Pulse método , que anima automáticamente los parámetros del sombreador para mostrar un pulso.

Propiedades del inspector

Colisionador de cuadrosBox Collider para la placa frontal del botón.

Botón presionable Lógica para el movimiento del botón con la interacción con la presión de la mano.

Enrutador de eventos de prensa física Este script envía eventos desde la interacción con la prensa manual a Interactable.

Interactable Interactable controla varios tipos de estados y eventos de interacción. Este script controla directamente la mirada, los gestos y la entrada de voz de HoloLens y la entrada del controlador de movimiento de auriculares envolventes.

Origen de audio Origen de audio de Unity para los clips de comentarios de audio.

NearInteractionTouchable.cs Necesario para que cualquier objeto sea táctil con entrada de mano articulada.

Diseño prefabricado

El objeto ButtonContent contiene la placa frontal, la etiqueta de texto y el icono. FrontPlate responde a la proximidad de la punta del índice mediante el sombreador de Button_Box. Muestra bordes brillantes, luz de proximidad y un efecto de pulso en el tacto. La etiqueta de texto se realiza con TextMesh Pro. La visibilidad de SeeItSayItLabel se controla mediante el tema de Interactable.

Cómo cambiar el icono y el texto

Los botones MRTK usan un ButtonConfigHelper componente para ayudarle a cambiar el icono, el texto y la etiqueta del botón. (Tenga en cuenta que algunos campos pueden estar ausentes si los elementos no están presentes en el botón seleccionado).

Crear y modificar conjuntos de iconos

Un conjunto de iconos es un conjunto compartido de recursos de iconos utilizados por el ButtonConfigHelper componente. Se admiten tres estilos de icono.

• Los iconos cuadrángulos se representan en un cuadrángulo mediante .MeshRenderer Este es el estilo de icono predeterminado.
• Los iconos de sprite se representan mediante .SpriteRenderer Esto es útil si prefiere importar los iconos como una hoja de sprites o si desea que los recursos de icono se compartan con los componentes de la interfaz de usuario de Unity. Para usar este estilo, deberá instalar el paquete sprite Editor (Windows -> Administrador de paquetes -> Sprite 2D)
• Los iconos char se representan mediante un TextMeshPro componente. Esto resulta útil si prefiere usar una fuente de icono. Para usar la fuente del icono de HoloLens, deberá crear un TextMeshPro recurso de fuente.

Para cambiar el estilo que usa el botón, expanda la lista desplegable Iconos en ButtonConfigHelper y seleccione en la lista desplegable Estilo de icono .

Para crear un icono de botón nuevo:

1. En la ventana Proyecto , haga clic con el botón derecho en Activos para abrir el menú contextual. (También puede hacer clic con el botón derecho en cualquier espacio en blanco dentro de la carpeta Activos o en una de sus subcarpetas).

2. Seleccione Create Mixed Reality Toolkit Icon Set (Crear > conjunto de iconos del kit de herramientas > de Mixed Reality>).

   

Para agregar iconos quad y sprite, simplemente arrástrelos a sus respectivas matrices. Para agregar iconos char, primero debe crear y asignar un recurso de fuente.

En MRTK 2.4 y versiones posteriores, se recomienda mover texturas de icono personalizadas a un iconSet. Para actualizar los recursos de todos los botones de un proyecto al nuevo formato recomendado, use ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Utilities -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importación del paquete Microsoft.MixedRealityToolkit.Unity.Tools necesario para actualizar los botones.

Si no se encuentra un icono en el icono predeterminado establecido durante la migración, se creará un conjunto de iconos personalizados en MixedRealityToolkit.Generated/CustomIconSets. Un cuadro de diálogo indicará que esto ha tenido lugar.

Creación de un recurso de fuente de icono de HoloLens

En primer lugar, importe la fuente del icono en Unity. En las máquinas Windows, puede encontrar la fuente de HoloLens predeterminada en Windows/Fonts/holomdl2.ttf. Copie y pegue este archivo en la carpeta Activos.

A continuación, abra el creador de recursos de fuente TextMeshPro a través de Window > TextMeshPro > Font Asset Creator. Estos son los valores recomendados para generar un atlas de fuentes de HoloLens. Para incluir todos los iconos, pegue el siguiente intervalo Unicode en el campo Secuencia de caracteres :

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

Una vez generado el recurso de fuente, guárdelo en el proyecto y asígnelo al campo Fuente de icono de char del conjunto de iconos. Ahora se rellenará la lista desplegable Iconos disponibles . Para que un icono esté disponible para que lo use un botón, haga clic en él. Se agregará a la lista desplegable Iconos seleccionados y ahora se mostrará en La ButtonConfigHelper. opción Puede asignar al icono una etiqueta. Esto permite establecer el icono en tiempo de ejecución.

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

Para usar el conjunto de iconos, seleccione un botón, expanda la lista desplegable Iconos de ButtonConfigHelper y asígnelo al campo Conjunto de iconos .

Cómo cambiar el tamaño de un botón

el tamaño del botón de estilo shell de HoloLens 2 es de 32 x 32 mm. Para personalizar la dimensión, cambie el tamaño de estos objetos en el botón prefabricado:

1. FrontPlate
2. Quad bajo BackPlate
3. Box Collider en la raíz

A continuación, haga clic en el botón Corregir límites en el script NearInteractionTouchable que se encuentra en la raíz del botón.

Actualizar el tamaño de la frontplate 1

Actualizar el tamaño de la

Actualizar el tamaño de la personalización de tamaño del botón Colisionador

Haga clic en la "Corregir límites" 4

Comando de voz ('see-it, say-it')

Controlador de entrada de voz El script interactable en el botón presionable ya implementa IMixedRealitySpeechHandler. Aquí se puede establecer una palabra clave de comando de voz.

Perfil de entrada de voz Además, debe registrar la palabra clave de comando de voz en el perfil global de comandos de voz.

Etiqueta See-it, Say-it El botón prefabricado presionable tiene una etiqueta TextMesh Pro de marcador de posición en el objeto SeeItSayItLabel . Puede usar esta etiqueta para comunicar la palabra clave de comando de voz del botón al usuario.

Cómo hacer un botón desde cero

Puede encontrar los ejemplos de estos botones en la escena PressableButtonExample .

1. Crear un botón presionable con cubo (solo interacción cercana)

1. Crear un cubo de Unity (cubo de objetos > 3D gameobject>)
2. Agregar PressableButton.cs script
3. Agregar NearInteractionTouchable.cs script

En el PressableButtonpanel Inspector del elemento , asigne el objeto de cubo a los objetos visuales de botón en movimiento.

Al seleccionar el cubo, verá varias capas de color en el objeto. Esto visualiza los valores de distancia en Presionar configuración. Con los identificadores, puede configurar cuándo iniciar la presión (mover el objeto) y cuándo desencadenar el evento.

Al presionar el botón, se moverá y generará eventos adecuados expuestos en el PressableButton.cs script, como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Solución de problemas

Si el botón está ejecutando una doble pulsación, asegúrese de que la propiedad Aplicar inserción frontal está activa y que el plano Iniciar distancia de inserción se coloca delante del plano táctil interacción cercana . El plano táctil interacción cercana se indica mediante el plano azul situado delante del origen de la flecha blanca en el gif siguiente:

2. Agregar comentarios visuales al botón básico del cubo

MRTK Standard Shader proporciona varias características que facilitan la adición de comentarios visuales. Cree un material y seleccione sombreador Mixed Reality Toolkit/Standard. También puede usar o duplicar uno de los materiales existentes en /SDK/StandardAssets/Materials/ que se usa MRTK Standard Shader.

Compruebe Hover Light y Proximity Light en Opciones de Fluent. Esto permite comentarios visuales para las interacciones de mano cercana (luz de proximidad) y puntero lejano (luz de desplazamiento).

3. Adición de comentarios de audio al botón básico del cubo

Dado que PressableButton.cs el script expone eventos como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), podemos asignar fácilmente comentarios de audio. Basta con agregar unity al objeto de Audio Source cubo y, a continuación, asignar clips de audio seleccionando AudioSource.PlayOneShot(). Puede usar MRTK_Select_Main y MRTK_Select_Secondary clips de audio en la /SDK/StandardAssets/Audio/ carpeta .

4. Adición de estados visuales y control de eventos de interacción lejana

Interactable es un script que facilita la creación de un estado visual para los distintos tipos de interacciones de entrada. También controla eventos de interacción lejanos. Agregue Interactable.cs y arrastre y coloque el objeto de cubo en el campo Destino en Perfiles. A continuación, cree un nuevo tema con un tipo ScaleOffsetColorTheme. En este tema, puede especificar el color del objeto para los estados de interacción específicos, como Foco y Presionado. También puede controlar la escala y el desplazamiento. Compruebe Easing y establezca la duración para que la transición visual sea fluida.

Verá que el objeto responde a interacciones lejanas (rayo de mano o cursor de mirada) y cercanas (mano).

Ejemplos de botones personalizados

En la escena HandInteractionExample, vea los ejemplos de botones de piano y round que usan PressableButton.

Cada tecla de piano tiene un PressableButton y un NearInteractionTouchable script asignados. Es importante comprobar que la dirección de avance local de NearInteractionTouchable es correcta. Se representa mediante una flecha blanca en el editor. Asegúrese de que la flecha señala lejos de la cara frontal del botón:

Vea también

• Interactable
• Temas visuales