Partilhar via

Botões — MRTK2

  • Artigo

Botão Principal

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

Pré-fabricados de botões em MRTK

Exemplos dos botões pré-fabricados na MRTK/SDK/Features/UX/Interactable/Prefabs pasta

Botões baseados em imagem/gráfico da interface do usuário Unity

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

Botões baseados em Collider

PressionávelButtonHoloLens2 PressionávelButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressionávelButtonHoloLens2Circular PressionávelButtonHoloLens2Circular

Botão estilo concha do HoloLens 2 com placa traseira que suporta vários comentários visuais, como luz de borda, luz de proximidade e placa frontal comprimida

Botão estilo concha do HoloLens 2 sem placa traseira

Botão estilo concha do HoloLens 2 com forma circular

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressionávelButtonHoloLens2Bar3HPressionávelButtonHoloLens2Bar3H

PressionávelButtonHoloLens2Bar3VPressionávelButtonHoloLens2Bar3V

Botão estilo concha do Wide HoloLens 2 32x96mm

Barra de botões HoloLens 2 horizontal com placa traseira partilhada

Barra de botões HoloLens 2 vertical com placa traseira compartilhada

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

Caixa de seleção estilo concha do HoloLens 2 32x32mm

Interruptor estilo concha HoloLens 2 32x32mm

Rádio estilo concha HoloLens 2 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

Caixa de seleção estilo shell do HoloLens 2 32x96mm

Interruptor estilo concha HoloLens 2 32x96mm

Rádio estilo concha HoloLens 2 32x96mm

RadialRadial

Caixa de verificaçãoCaixa de seleção

ToggleSwitchToggleSwitch

Botão radial

Caixa de verificação

Interruptor de alternância

BotãoHoloLens1BotãoHoloLens1

PressionávelRoundButtonPressionávelRoundButton

Base de botõesBotão

Botão estilo shell do HoloLens 1st gen

Botão de pressão de forma redonda

Botão Básico

O Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) é baseado no conceito Interactable para fornecer controles fáceis de interface do usuário 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 entrada de mão articulada para as interações próximas, bem como olhar + toque de ar para as interações distantes. Você também pode usar o comando de voz para acionar o botão.

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) é o botão estilo shell do HoloLens 2 que suporta o movimento preciso do botão para a entrada direta de rastreamento de mão. Ele combina Interactable script com PressableButton script.

Para o HoloLens 2, recomenda-se a utilização de botões com uma placa traseira opaca. Botões transparentes não são recomendados devido a estes problemas de usabilidade e estabilidade:

  • Ícone e texto são difíceis de ler com o ambiente físico
  • É difícil entender quando o evento é acionado
  • Hologramas que são exibidos através de um plano transparente podem ser instáveis com a estabilização LSR de profundidade do HoloLens 2

Botão chapeado

Como usar botões pressionáveis

Botões baseados em Unity UI

Crie um Canvas em sua cena (GameObject -> UI -> Canvas). No painel Inspetor do seu Canvas:

  • Clique em "Converter para MRTK Canvas"
  • 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) para a tela.

Botões baseados em 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 botões pré-fabricados já estão configurados para ter feedback audiovisual para os vários tipos de entradas, incluindo entrada manual articulada e olhar.

Os eventos expostos no próprio pré-fabricado, bem como o componente Interactable, podem ser usados para desencadear ações adicionais. Os botões pressionáveis na cena HandInteractionExample usam o evento OnClick do Interactable para disparar uma alteração na cor de um cubo. Este evento é acionado para diferentes tipos de métodos de entrada, como olhar, toque no ar, raio de mão, bem como pressionamentos de botões físicos através do script de botão pressionável.

Como usar o Interactable

Você pode configurar quando o botão pressionável dispara o evento OnClick através do PhysicalPressEventRouter botão on. Por exemplo, você pode definir OnClick para disparar quando o botão for pressionado pela primeira vez, em vez de ser pressionado e liberado, definindo Interactable On Click to Event On Press.

Como utilizar os eventos

Para aproveitar informações específicas do estado de entrada articulado da mão, você pode usar eventos de botões pressionáveis - Touch Begin, Touch End, Button Pressioned, Button Released. No entanto, esses eventos não serão disparados em resposta a toques de ar, raios de mão ou entradas oculares. Para suportar interações próximas e distantes, recomenda-se usar o evento OnClick da Interactable.

Como usar botões pressionáveis

Estados de interação

No estado ocioso, a placa frontal do botão não é visível. À medida que um dedo se aproxima ou um cursor da entrada do olhar atinge a superfície, a borda brilhante da placa frontal torna-se visível. Há realce adicional da posição da ponta do dedo na superfície da placa frontal. Quando pressionada com um dedo, a placa frontal move-se com a ponta do dedo. Quando a ponta do dedo toca a superfície da placa frontal, mostra um efeito de pulso subtil para dar feedback visual do ponto de toque.

No botão estilo shell HoloLens 2, há muitas dicas visuais e recursos para aumentar a confiança do usuário na interação.

Luz de proximidade Destaque em foco Gaiola de compressão Pulso no gatilho
Luz de proximidade Destaque em foco Gaiola de compressão Pulso no gatilho

O efeito de pulso sutil é acionado pelo botão pressionável, que procura por ProximityLight (s) que vivem no ponteiro que está interagindo no momento. Se alguma luz de proximidade for encontrada, o ProximityLight.Pulse método é chamado, que anima automaticamente os parâmetros do sombreador para exibir um pulso.

Propriedades do inspetor

Estrutura do botão

Box ColliderBox Collider para a placa frontal do botão.

Botão pressionável A lógica para o movimento do botão com interação de pressão manual.

Roteador de Eventos de Imprensa Física Este script envia eventos da interação de imprensa manual para Interactable.

InteractableInteractable lida com vários tipos de estados e eventos de interação. A entrada de olhar, gestos e voz HoloLens e a entrada imersiva do controlador de movimento do fone de ouvido são diretamente manipuladas por este script.

Fonte de áudio Fonte de áudio Unity para os clipes de feedback de áudio.

NearInteractionTouchable.cs Necessário para tornar qualquer objeto tocável com entrada manual articulada.

Layout pré-fabricado

O objeto ButtonContent contém placa frontal, rótulo de texto e ícone. O FrontPlate responde à proximidade da ponta do dedo indicador usando o sombreador Button_Box . Ele mostra bordas brilhantes, luz de proximidade e um efeito de pulso no toque. O rótulo de texto é feito com TextMesh Pro. A visibilidade do SeeItSayItLabel é controlada pelo tema da Interactable.

Layout do botão

Como alterar o ícone e o texto

Os botões MRTK usam um ButtonConfigHelper componente para ajudá-lo a alterar o ícone, o texto e o rótulo do botão. (Observe que alguns campos podem estar ausentes se os elementos não estiverem presentes no botão selecionado.)

Auxiliar de configuração de botão

Criando e modificando conjuntos de ícones

Um conjunto de ícones é um conjunto compartilhado de ativos de ícone usados pelo ButtonConfigHelper componente. Três estilos de ícone são suportados.

  • Os ícones Quad são renderizados em um quad usando um MeshRendererarquivo . Este é o estilo de ícone padrão.
  • Os ícones de Sprite são renderizados usando um SpriteRendererarquivo . Isso é útil se você preferir importar seus ícones como uma folha de sprite ou se quiser que seus ativos de ícone sejam compartilhados com componentes da interface do usuário Unity. Para usar esse estilo, você precisará instalar o pacote Sprite Editor (Windows -> Gerenciador de Pacotes -> 2D Sprite)
  • Os ícones de caracteres são renderizados usando um TextMeshPro componente. Isso é útil se você preferir usar uma fonte de ícone. Para usar a fonte do ícone HoloLens, você precisará criar um TextMeshPro recurso de fonte.

Para alterar o estilo usado pelo botão, expanda a lista suspensa Ícones no ButtonConfigHelper e selecione na lista suspensa Estilo do ícone .

Para criar um novo ícone de botão:

  1. Na janela Projeto, clique com o botão direito do mouse em Ativos para abrir o menu de contexto. (Você também pode clicar com o botão direito do mouse em qualquer espaço em branco dentro do Pasta de ativos ou uma de suas subpastas.)

  2. Selecione Create Mixed Reality Toolkit Icon set (Criar > conjunto de ícones do kit de ferramentas de realidade > > mista).

    Captura de ecrã do item de menu Conjunto de ícones.

Para adicionar ícones quad e sprite, basta arrastá-los para suas respetivas matrizes. Para adicionar ícones Char, você deve primeiro criar e atribuir um ativo de fonte.

No MRTK 2.4 e posteriores, recomendamos que as texturas de ícones personalizados sejam movidas para um IconSet. Para atualizar os ativos em todos os botões em um projeto para o novo formato recomendado, use o ButtonConfigHelperMigrationHandler. (Kit de ferramentas de realidade mista -> Utilitários -> Janela de migração -> Seleção do manipulador de migração -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

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

Caixa de diálogo da janela de atualização

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

Notificação de ícone personalizado

Criando um recurso de fonte de ícone do HoloLens

Primeiro, importe a fonte do ícone para o Unity. Em máquinas Windows, você pode encontrar a fonte HoloLens padrão em Windows/Fonts/holomdl2.ttf. Copie e cole esse arquivo na pasta Ativos.

Em seguida, abra o TextMeshPro Font Asset Creator através do Window > TextMeshPro > Font Asset Creator. Aqui estão as configurações recomendadas para gerar um atlas de fontes HoloLens. Para incluir todos os ícones, cole o seguinte intervalo Unicode no campo Sequência 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

Criação de botões 1

Depois que o ativo de fonte for gerado, salve-o em seu projeto e atribua-o ao campo Char Icon Font do seu conjunto de ícones. A lista suspensa Ícones disponíveis será preenchida. Para disponibilizar um ícone para uso por um botão, clique nele. Ele será adicionado ao menu suspenso Ícones selecionados e agora aparecerá na ButtonConfigHelper. tag Você pode, opcionalmente, dar ao ícone uma tag. Isso permite definir o ícone em tempo de execução.

Criação de botões 3

Criação de botões 2

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

Para usar seu Conjunto de ícones, selecione um botão, expanda a lista suspensa Ícones e ButtonConfigHelper atribua-o ao campo Conjunto de ícones.

Conjunto de ícones de botão

Como alterar o tamanho de um botão

O tamanho do botão estilo concha do HoloLens 2 é de 32x32mm. Para personalizar a dimensão, altere o tamanho desses objetos no botão pré-fabricado:

  1. Placa frontal
  2. Quádruplo sob BackPlate
  3. Box Collider na raiz

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

Atualizar o tamanho do FrontPlate Personalização do tamanho do botão 1

Atualize o tamanho do Quad Personalização do tamanho do botão 2

Atualizar o tamanho do Box Collider Personalização do tamanho do botão 3

Clique em 'Corrigir limites' Personalização do tamanho do botão 4

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

Manipulador de entrada de fala O script interactable no botão pressionável já implementa o IMixedRealitySpeechHandler. Uma palavra-chave de comando de voz pode ser definida aqui.

Botões de Fala

Perfil de entrada de fala Além disso, você precisa registrar a palavra-chave do comando de voz no perfil global de comandos de fala.

Botão de fala 2

See-it, Say-it label O botão pressionável pré-fabricado tem um rótulo TextMesh Pro de espaço reservado sob o objeto SeeItSayItLabel . Você pode usar esse rótulo para comunicar a palavra-chave de comando de voz para o botão para o usuário.

Botão Fala 3

Como fazer um botão do zero

Você pode encontrar os exemplos desses botões na cena PressableButtonExample .

Cubo de botão pressionável 0

1. Criação de um botão pressionável com cubo (apenas interação próxima)

  1. Criar um cubo Unity (GameObject > 3D Object > Cube)
  2. Adicionar PressableButton.cs script
  3. Adicionar NearInteractionTouchable.cs script

PressableButtonNo painel Inspetor do , atribua o objeto de cubo aos visuais do botão em movimento.

cubo de botão pressionável 3

Ao selecionar o cubo, você verá várias camadas coloridas no objeto. Isso visualiza os valores de distância em Configurações de imprensa. Usando as alças, você pode configurar quando iniciar a pressão (mover o objeto) e quando acionar o evento.

Cubo Buton prensado 1Cubo de botão pressionável 2

Quando você pressiona o botão, ele se move e gera eventos adequados expostos no PressableButton.cs script, como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Cubo de botão pressionável executar 1

Resolução de Problemas

Se o botão estiver executando uma pressão dupla, verifique se a propriedade Enforce Front Push está ativa e se o plano Start Push Distance está colocado na frente do plano Toque de Interação Próxima . O plano sensível ao toque de interação próxima é indicado pelo plano azul colocado à frente da origem da seta branca no gif abaixo:

Componente de script de botão pressionável com a propriedade Enforce Front Push realçada

Exemplo animado de mover a distância de impulso inicial na frente do plano tocável de interação próxima

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

O MRTK Standard Shader fornece vários recursos que facilitam a adição de feedback visual. Crie um material e selecione o sombreador Mixed Reality Toolkit/Standard. Ou você pode usar ou duplicar um dos materiais existentes sob /SDK/StandardAssets/Materials/ o qual usa o MRTK Standard Shader.

Botão pressionável cubo 4

Verifique Hover Light e Proximity Light em Opções fluentes. Isso permite o feedback visual para interações próximas (Luz de proximidade) e ponteiro distante (Luz de foco).

cubo de botão pressionável 5cubo de botão pressionável executar 2

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

Como PressableButton.cs o script expõe eventos como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), podemos facilmente atribuir feedback de áudio. Basta adicionar Unity Audio Source ao objeto de cubo e, em seguida, atribuir clipes de áudio selecionando AudioSource.PlayOneShot(). Você pode usar MRTK_Select_Main e MRTK_Select_Secondary clipes de áudio na /SDK/StandardAssets/Audio/ pasta.

cubo de botão pressionável 7Botão Cubo Pressionável 6

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

Interactable é um script que facilita a criação de um estado visual para os vários tipos de interações de entrada. Ele também lida com eventos de interação distantes. Adicione Interactable.cs e arraste e solte o objeto de cubo no campo Destino em Perfis. Em seguida, crie um novo tema com um tipo ScaleOffsetColorTheme. Neste tema, você pode especificar a cor do objeto para os estados de interação específicos, como Foco e Pressionado. Você também pode controlar Scale e Offset. Marque Flexibilização e defina a duração para tornar a transição visual suave.

Selecionar tema do perfil

Você verá o objeto responder tanto a interações distantes (raio de mão ou cursor de olhar) quanto próximas (mão).

Botão Botão Cubo Executar 3Botão pressionável Cube Run 4

Exemplos de botões personalizados

Na cena HandInteractionExample, veja os exemplos de piano e botão redondo que estão usando PressableButtono .

Personalizado Pressionável1Personalizado Pressionável2

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

Personalizado Pressionável3

Consulte também