Botões — MRTK2

Artigo
07/12/2023

Um botão dá ao utilizador uma forma de acionar uma ação imediata. É um dos componentes mais fundamentais na realidade mista. O MRTK fornece vários tipos de pré-fabricados de botões.

Pré-fabricados de botões no MRTK

Exemplos das pré-tarefas de botão na MRTK/SDK/Features/UX/Interactable/Prefabs pasta

Botões baseados em Imagens/Gráficos da IU do Unity

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

Botões baseados no Collider

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

O botão estilo shell de HoloLens 2 com uma placa traseira que suporta vários comentários visuais, tais como luz de limite, luz de proximidade e placa frontal comprimida

botão estilo shell de HoloLens 2 sem backplate

botão estilo shell de HoloLens 2 com forma circular

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Botão estilo shell de HoloLens 2 largo 32x96mm

Barra de botões horizontal HoloLens 2 com a barra de retrocesso partilhada

Barra de botões de HoloLens 2 vertical com a barra de retrocesso partilhada

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

caixa de verificação estilo shell do HoloLens 2 32x32mm

comutador de estilo shell de HoloLens 2 32x32mm

O rádio 32x32mm do estilo shell do HoloLens 2

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

caixa de verificação estilo shell do HoloLens 2 32x96mm

comutador de estilo shell de HoloLens 2 32x96mm

O rádio de estilo shell de HoloLens 2 32x96mm

Radial

Verificação

ToggleSwitch

Botão radial

Caixa de verificação

Alternar botão

PressableRoundButton

Botão estilo shell do HoloLens da 1.ª geração

Botão de premir forma redonda

Botão Básico

O Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) baseia-se no conceito Interactável para fornecer controlos de IU fáceis para botões ou outros tipos de superfícies interativas. O botão de linha de base suporta todos os métodos de entrada disponíveis, incluindo a introdução articulada da mão para as interações próximas, bem como olhar + toque de ar para as interações mais distantes. Também pode utilizar o comando de voz para acionar o botão.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) é HoloLens 2 botão de estilo da shell que suporta o movimento preciso do botão para a entrada de controlo manual direta. Combina script com InteractablePressableButton script.

Para HoloLens 2, é recomendado utilizar botões com uma placa inativa opaca. Os botões transparentes não são recomendados devido a estes problemas de usabilidade e estabilidade:

O ícone e o texto são difíceis de ler com o ambiente físico
É difícil compreender quando o evento é acionado
Os hologramas que são apresentados através de um plano transparente podem ser instáveis com a estabilização LSR de Profundidade do HoloLens 2

Como utilizar botões premidos

Botões baseados na IU do Unity

Crie uma Tela na sua cena (GameObject –> IU –> Tela). No painel Inspetor da tela:

Clique em "Converter em Tela MRTK"
Clique em "Adicionar NearInteractionTouchableUnityUI"
Defina a escala X, Y e Z do componente Rect Transform como 0,001

Em seguida, arraste 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) na Tela.

Botões baseados no Collider

Basta arrastar PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) ou PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) para a cena. Estes pré-fabricados de botão já estão configurados para ter feedback audiovisual para os vários tipos de entradas, incluindo entrada manual articulada e olhar atento.

Os eventos expostos no próprio pré-fabricado, bem como o componente Interacionável , podem ser utilizados para acionar ações adicionais. Os botões premidos na cena HandInteractionExample utilizam o evento OnClick do Interactable para acionar uma alteração na cor de um cubo. Este evento é acionado para diferentes tipos de métodos de entrada, como olhar, toque de ar, raios à mão, bem como premir botões físicos através do script de botão premido.

Pode configurar quando o botão premido acionar o evento OnClick através do PhysicalPressEventRouter botão . Por exemplo, pode definir OnClick para ser acionado quando o botão é premido pela primeira vez, em vez de ser premido e libertado, ao definir Interactable On Click como Event On Press.

Para tirar partido de informações de estado de entrada manual articuladas específicas, pode utilizar eventos de botões premidos – Início do Toque, Fim do Toque, Botão Premido, Botão Libertado. No entanto, estes eventos não serão acionados em resposta a toques de ar, raios-mão ou entradas oculares. Para suportar interações próximas e distantes, é recomendado utilizar o evento OnClick do Interactable.

Estados de interação

No estado inativo, a placa frontal do botão não está visível. À medida que um dedo se aproxima ou um cursor de entrada de olhar para a superfície, o limite brilhante da placa frontal torna-se visível. Existe um realce adicional da posição da ponta do dedo na superfície da placa frontal. Quando empurrado com um dedo, a placa frontal move-se com a ponta do dedo. Quando a ponta do dedo toca na superfície da placa frontal, mostra um efeito de pulso subtil para dar feedback visual sobre o ponto tátil.

No HoloLens 2 botão estilo shell, existem muitas ajudas visuais e acessibilidades para aumentar a confiança do utilizador na interação.


Luz de proximidade	Destaque do foco	Gaiola de compressão	Impulso no acionador

O efeito de impulso subtil é acionado pelo botão premido, que procura o(s) ProximityLight(s) que se encontra no ponteiro que está atualmente a interagir. Se forem encontradas luzes de proximidade, o ProximityLight.Pulse método é chamado, que anima automaticamente parâmetros de sombreado para apresentar um pulso.

Propriedades do inspetor

Colisor de CaixasBox Collider para a placa frontal do botão.

Botão premido A lógica para o movimento do botão com a interação de premir a mão.

Router de Eventos de Imprensa Física Este script envia eventos da interação manual para Interacionável.

Interacionável Interacionável processa vários tipos de eventos e estados de interação. O olhar do HoloLens, o gesto e a entrada de voz e a entrada envolvente do controlador de movimento do headset são processados diretamente por este script.

Origem de Áudio Origem de áudio do Unity para os clips de comentários de áudio.

NearInteractionTouchable.cs Necessário para tornar qualquer objeto tátil com entrada manual articulada.

Esquema pré-fabricado

O objeto ButtonContent contém a placa frontal, a etiqueta de texto e o ícone. O FrontPlate responde à proximidade da descrição do índice com o Button_Box sombreado. Mostra limites brilhantes, luz de proximidade e um efeito de pulso no toque. A etiqueta de texto é feita com TextMesh Pro. SeeItSayItLabel a visibilidade é controlada pelo tema Interactable.

Como alterar o ícone e o texto

Os botões MRTK utilizam um ButtonConfigHelper componente para o ajudar a alterar o ícone, o texto e a etiqueta do botão. (Tenha em atenção que alguns campos poderão estar ausentes se os elementos não estiverem presentes no botão selecionado.)

Criar e Modificar Conjuntos de Ícones

Um Conjunto de Ícones é um conjunto partilhado de recursos de ícone utilizados pelo ButtonConfigHelper componente. São suportados três estilos de ícone.

Os ícones quad são compostos num quad com um MeshRenderer. Este é o estilo de ícone predefinido.
Os ícones sprite são compostos com um SpriteRenderer. Isto é útil se preferir importar os ícones como uma folha de sprite ou se quiser que os seus ativos de ícone sejam partilhados com componentes da IU do Unity. Para utilizar este estilo, terá de instalar o pacote Do Editor Sprite (Windows –> Gestor de Pacotes -> Sprite 2D)
Os ícones de caráter são compostos com um TextMeshPro componente. Isto é útil se preferir utilizar um tipo de letra de ícone. Para utilizar o tipo de letra do ícone do HoloLens, terá de criar um TextMeshPro recurso de tipo de letra.

Para alterar o estilo que o botão utiliza, expanda a lista pendente Ícones no ButtonConfigHelper e selecione a partir da lista pendente Estilo de Ícone .

Para criar um novo ícone de botão:

Na janela Projeto , clique com o botão direito do rato em Recursos para abrir o menu de contexto. (Também pode clicar com o botão direito do rato em qualquer espaço em branco dentro da pasta Recursos ou de uma das respetivas subpastas .)
Selecione Criar > Mixed Reality > Conjunto de Ícones do Toolkit>.

Para adicionar ícones quad e sprite, basta arrastá-los para as respetivas matrizes. Para adicionar ícones de Caráter, primeiro tem de criar e atribuir um recurso de tipo de letra.

No MRTK 2.4 e posterior, recomendamos que as texturas de ícone personalizadas sejam movidas para um IconSet. Para atualizar os recursos em todos os botões num projeto para o novo formato recomendado, utilize ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Utilitários -> Janela de Migração -> Seleção do Processador de Migração -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importar o pacote Microsoft.MixedRealityToolkit.Unity.Tools necessário para atualizar os botões.

Diálogo da janela de atualização

Se não for encontrado um ícone no ícone predefinido definido durante a migração, será criado um conjunto de ícones personalizado em MixedRealityToolkit.Generated/CustomIconSets. Uma caixa de diálogo indicará que ocorreu.

Notificação de ícone personalizado

Criar um Recurso de Tipo de Letra do Ícone do HoloLens

Primeiro, importe o tipo de letra do ícone para o Unity. Em computadores Windows, pode encontrar o tipo de letra HoloLens predefinido no Windows/Fonts/holomdl2.ttf. Copie e cole este ficheiro na pasta Ativos.

Em seguida, abra o TextMeshPro Font Asset Creator através da Janela > TextMeshPro > Font Asset Creator. Eis as definições recomendadas para gerar um atlas de tipo de letra holoLens. Para incluir todos os ícones, cole o seguinte intervalo Unicode no campo Sequência de Carateres :

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

Assim que o recurso do tipo de letra for gerado, guarde-o no seu projeto e atribua-o ao campo Tipo de Letra do Ícone de Caráter do Conjunto de Ícones do Ícone. A lista pendente Ícones Disponíveis será agora preenchida. Para disponibilizar um ícone para utilização por um botão, clique no mesmo. Será adicionado à lista pendente Ícones Selecionados e será agora apresentado na opção ButtonConfigHelper. Pode atribuir uma etiqueta ao ícone. Isto ativa a definição do ícone no runtime.

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

Para utilizar o seu Conjunto de Ícones, selecione um botão, expanda o menu pendente Ícones no ButtonConfigHelper e atribua-o ao campo Conjunto de Ícones .

Como alterar o tamanho de um botão

O tamanho do botão de shell do HoloLens 2 é de 32x32mm. Para personalizar a dimensão, altere o tamanho destes objetos no prefáb do botão:

FrontPlate
Quad em BackPlate
Colisor de Caixas na raiz

Em seguida, clique no botão Corrigir Limites no script NearInteractionTouchable que está na raiz do botão.

Atualizar o tamanho da FrontPlate 1

Atualizar o tamanho da

Atualizar o tamanho da do Colisor de Caixas 3

Clique em "Corrigir Limites"

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

Processador de Entrada de Voz O script Interacionável no Botão Premido já implementa IMixedRealitySpeechHandler. Pode definir uma palavra-chave de comando de voz aqui.

Perfil de Entrada de Voz Além disso, tem de registar a palavra-chave do comando de voz no Perfil de Comandos de Voz global.

Etiqueta See-it, Say-it A pré-visualização do botão premida tem uma etiqueta TextMesh Pro de marcador de posição no objeto SeeItSayItLabel . Pode utilizar esta etiqueta para comunicar a palavra-chave do comando de voz do botão ao utilizador.

Como criar um botão do zero

Pode encontrar os exemplos destes botões na cena PressableButtonExample .

1. Criar um botão premido com cubo (apenas interação próxima)

Criar um Cubo unity (GameObject > 3D Object > Cube)
Adicionar PressableButton.cs script
Adicionar NearInteractionTouchable.cs script

PressableButtonNo painel Inspetor, atribua o objeto de cubo aos Elementos Visuais do Botão Móvel.

Quando selecionar o cubo, verá várias camadas coloridas no objeto. Isto visualiza os valores de distância em Premir Definições. Com as alças, pode configurar quando iniciar a premição (mover o objeto) e quando acionar o evento.

Ao premir o botão, este irá mover e gerar eventos adequados expostos no PressableButton.cs script, como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Resolução de problemas

Se o botão estiver a executar uma premição dupla, certifique-se de que a propriedade Impor Push Frontal está ativa e que o plano Iniciar Distância Push é colocado em frente ao plano Tátil Interação Próxima . O plano Tátil de Interação Próxima é indicado pelo plano azul colocado em frente à origem da seta branca no gif abaixo:

2. Adicionar feedback visual ao botão de cubo básico

O MrTK Standard Shader fornece várias funcionalidades que facilitam a adição de comentários visuais. Crie um material e selecione shader Mixed Reality Toolkit/Standard. Em alternativa, pode utilizar ou duplicar um dos materiais existentes /SDK/StandardAssets/Materials/ em que utiliza o Standard Shader do MRTK.

Verifique Hover Light e Proximity Light em Opções fluentes. Isto permite feedback visual para interações de mãos próximas (Luz de Proximidade) e ponteiros distantes (Hover Light).

3. Adicionar feedback de áudio ao botão de cubo básico

Uma PressableButton.cs vez que o script expõe eventos como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), podemos facilmente atribuir feedback de áudio. Basta adicionar unity's Audio Source ao objeto de cubo e, em seguida, atribuir clips de áudio ao selecionar AudioSource.PlayOneShot(). Pode utilizar MRTK_Select_Main e MRTK_Select_Secondary clips de áudio na /SDK/StandardAssets/Audio/ pasta.

4. Adicionar estados visuais e lidar com eventos de interação distantes

Interacionável é um script que facilita a criação de um estado visual para os vários tipos de interações de entrada. Também lida com eventos de interação distantes. Adicione Interactable.cs e arraste e largue o objeto de cubo no campo Destino em Perfis. Em seguida, crie um novo Tema com um tipo ScaleOffsetColorTheme. Neste tema, pode especificar a cor do objeto para os estados de interação específicos, como Foco e Premido. Também pode controlar o Dimensionamento e o Deslocamento. Verifique a opção Diminuir e definir a duração para tornar a transição visual suave.

Verá o objeto responder a interações distantes (raios de mão ou olhar) e interações próximas(da mão).

Exemplos de botões personalizados

Na cena HandInteractionExample, veja os exemplos de piano e botão redondo que estão ambos a utilizar PressableButton.

Cada tecla de piano tem um PressableButton e um NearInteractionTouchable script atribuído. É importante verificar se a direção do NearInteractionTouchableReencaminhamento Local está correta. É representado por uma seta branca no editor. Certifique-se de que a seta aponta para longe do rosto frontal do botão:

Botões — MRTK2

Pré-fabricados de botões no MRTK

Botões baseados em Imagens/Gráficos da IU do Unity

Botões baseados no Collider

Como utilizar botões premidos

Botões baseados na IU do Unity

Botões baseados no Collider

Estados de interação

Propriedades do inspetor

Esquema pré-fabricado

Como alterar o ícone e o texto

Criar e Modificar Conjuntos de Ícones

Criar um Recurso de Tipo de Letra do Ícone do HoloLens

Como alterar o tamanho de um botão

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

Como criar um botão do zero

1. Criar um botão premido com cubo (apenas interação próxima)

Resolução de problemas

2. Adicionar feedback visual ao botão de cubo básico

3. Adicionar feedback de áudio ao botão de cubo básico

4. Adicionar estados visuais e lidar com eventos de interação distantes

Exemplos de botões personalizados

Ver também

Recursos adicionais