Botões

Button Main

Um botão dá ao usuário uma forma de acionar uma ação imediata. Trata-se de um dos componentes mais importantes na realidade misturada. O MRTK fornece vários tipos de pré-fabricados de botão.

Pré-fabricados de botão no MRTK

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

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

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

Botões baseados no Colisor

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens botão estilo shell 2 com backplate que dá suporte a vários comentários visuais, como luz de borda, luz de proximidade e placa frontal compactada

botão estilo shell do HoloLens 2 sem backplate

botão estilo shell do HoloLens 2 com forma circular

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Botão estilo shell do wide HoloLens 2 32x96mm

Barra de botões horizontal HoloLens 2 com backplate compartilhado

Barra de botões vertical HoloLens 2 com backplate compartilhado

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

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

HoloLens 2's shell-style switch 32x32mm

HoloLens 2's shell-style radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

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

HoloLens 2's shell-style switch 32x96mm

HoloLens 2's shell-style radio 32x96mm

RadialRadial

CheckboxCheckbox

ToggleSwitchToggleSwitch

Botão Radial

Caixa de seleção

Switch de alternância

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseBotão

botão estilo shell do HoloLens 1ª geração

Botão de push de forma redonda

Botão Básico

O Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) baseia-se no conceito interacionável para fornecer controles de interface do usuário fáceis para botões ou outros tipos de superfícies interativas. O botão de linha de base dá suporte a todos os métodos de entrada disponíveis, incluindo entrada de mão articulada para as interações próximas, bem como foco + toque de ar para as interações distantes. Você também pode usar o comando de voz para disparar o botão.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) é HoloLens botão de estilo shell 2 que dá suporte ao movimento preciso do botão para a entrada de acompanhamento direto da mão. Ele combina Interactable script com PressableButton script.

Para HoloLens 2, é recomendável usar botões com uma barra inválida opaca. Botões transparentes não são recomendados devido a esses 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 dispara
  • Hologramas exibidos por meio de um plano transparente podem ser instáveis com a estabilização de LSR de profundidade de HoloLens 2

Button plated

Como usar botões pressíveis

Botões baseados na interface do usuário do Unity

Crie uma tela em sua cena (GameObject –> interface do usuário –> Tela). No painel Inspetor da tela:

  • Clique em "Converter na Tela do MRTK"
  • Clique em "Adicionar NearInteractionTouchableUnityUI"
  • Definir 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 Colisor

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. Esses pré-fabricados de botão já estão configurados para ter comentários audiovisuais para os vários tipos de entradas, incluindo entrada e foco articulados.

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

How to Use Interactable

Você pode configurar quando o botão pressionável aciona o evento OnClick por meio do PhysicalPressEventRouter botão. Por exemplo, você pode definir OnClick para disparar quando o botão é pressionado pela primeira vez, em vez de ser pressionado e liberado, definindo Interacionável em Clicar em Evento pressionado.

How to use events

Para aproveitar informações de estado de entrada articuladas específicas, você pode usar eventos de botões pressíveis – Touch Begin, Touch End, Button Pressed, Button Released. No entanto, esses eventos não serão acionados em resposta a toques de ar, raios m mão ou entradas oculares. Para dar suporte a interações próximas e distantes, é recomendável usar o evento OnClick do Interactable.

How to use Pressable Buttons

Estados de interação

No estado ocioso, a placa frontal do botão não está visível. À medida que um dedo se aproxima ou um cursor da entrada do olhar direciona 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 empurrado com um dedo, a placa frontal se move com a ponta do dedo. Quando a ponta do dedo toca a superfície da placa frontal, ela mostra um efeito de pulso sutil para dar comentários visuais do ponto de toque.

Em HoloLens botão estilo shell 2, há muitas indicações visuais e condições para aumentar a confiança do usuário na interação.

Proximity light Focus highlight Compressing cage Pulse on trigger
Luz de proximidade Destaque do foco Compactando gaiola Pulso no gatilho

O efeito de pulso sutil é disparado pelo botão pressível, que procura ProximityLight(s) que reside no ponteiro atualmente interagindo. Se alguma luz de proximidade for encontrada, o ProximityLight.Pulse método será chamado, o que anima automaticamente os parâmetros de sombreador para exibir um pulso.

Propriedades do inspetor

Button Structure

Colisor deBox Collider caixa para a placa frontal do botão.

Botão Pressionável A lógica para o movimento do botão com a interação de pressionar a mão.

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

InteractableInteractable lida com vários tipos de estados e eventos de interação. HoloLens entrada de olhar, gesto e voz e entrada imersiva do controlador de movimento do headset são tratados diretamente por esse script.

Fonte de áudio Fonte de áudio do Unity para os clipes de comentários de áudio.

NearInteractionTouchable.cs Necessário para tornar qualquer objeto tocável com entrada de mão articulada.

Layout de 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 . Mostra bordas brilhantes, luz de proximidade e um efeito de pulso no toque. O rótulo de texto é feito com TextMesh Pro. A visibilidade de SeeItSayItLabel é controlada pelo tema do Interactable.

Button Layout

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.)

Button Config Helper

Criando e modificando conjuntos de ícones

Um Conjunto de Ícones é um conjunto compartilhado de ativos de ícone usados pelo ButtonConfigHelper componente. Há suporte para três estilos de ícone.

  • Ícones quádruplos são renderizados em um quad usando um MeshRenderer. Esse é o estilo de ícone padrão.
  • Ícones de sprite são renderizados usando um SpriteRenderer. Isso será útil se você preferir importar seus ícones como uma planilha de sprite ou se quiser que seus ativos de ícone sejam compartilhados com componentes da interface do usuário do Unity. Para usar esse estilo, você precisará instalar o pacote do Editor do Sprite (Windows –> Gerenciador de Pacotes –> Sprite 2D)
  • Os ícones char são renderizados usando um TextMeshPro componente. Isso será útil se você preferir usar uma fonte de ícone. Para usar a fonte de ícone HoloLens, você precisará criar um TextMeshPro ativo de fonte.

Para alterar o estilo que o botão usa, expanda a lista suspensa Ícones no ButtonConfigHelper e selecione na lista suspensa Estilo de Ícone .

Para criar um ícone de botão:

  1. Na janela Project, 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 da pasta Ativos ou de uma de suas subpastas .)

  2. Selecione Criar > Realidade Misturada > conjunto de ícones de Toolkit>.

    Screenshot of the Icon Set menu item.

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

No MRTK 2.4 e posteriores, recomendamos que texturas de ícone personalizadas sejam movidas para um IconSet. Para atualizar os ativos em todos os botões de um projeto para o novo formato recomendado, use o ButtonConfigHelperMigrationHandler. (Realidade Misturada Toolkit – 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.

Upgrade window dialogue

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.

Custom icon notification

Criando um ativo de fonte de ícone de HoloLens

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

Em seguida, abra o Criador de Ativos da Fonte TextMeshPro por meio do Criador de Ativos da Fonte TextMeshPro >>. Aqui estão as configurações recomendadas para gerar um atlas de fonte 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

Button creation 1

Depois que o ativo de fonte for gerado, salve-o em seu projeto e atribua-o ao campo Fonte de Ícone do Conjunto de Ícones. A lista suspensa Ícones Disponíveis agora será preenchida. Para disponibilizar um ícone para uso por um botão, clique nele. Ele será adicionado à lista suspensa Ícones Selecionados e agora aparecerá no ButtonConfigHelper. ícone Você pode, opcionalmente, dar uma marca ao ícone. Isso permite definir o ícone em runtime.

Button creation 3

Button creation 2

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

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

Button Icon set

Como alterar o tamanho de um botão

HoloLens tamanho do botão estilo shell 2 é 32x32mm. Para personalizar a dimensão, altere o tamanho desses objetos no prefab do botão:

  1. FrontPlate
  2. Quad 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 Button Size customization 1

Atualizar o tamanho do Quad Button Size customization 2

Atualizar o tamanho do Box Collider Button Size customization 3

Clique em 'Corrigir Limites' Button Size customization 4

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

Manipulador de Entrada de Fala O script interacionável no Botão Pressível já implementa IMixedRealitySpeechHandler. Uma palavra-chave de comando de voz pode ser definida aqui.

Buttons Speech

Perfil de Entrada de Fala Além disso, você precisa registrar a palavra-chave de comando de voz no Perfil de Comandos de Fala global.

Button speech 2

See-it, rótulo Say-it O prefab de botão pressionável tem um espaço reservado TextMesh Pro rótulo 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.

Button Speech 3

Como criar um botão do zero

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

Pressable button cube 0

1. Criando um botão pressionável com cubo (somente interação próxima)

  1. Criar um cubo do Unity (Cubo de Objeto > 3D GameObject>)
  2. Adicionar PressableButton.cs script
  3. Adicionar NearInteractionTouchable.cs script

PressableButtonNo painel Inspetor do 's, atribua o objeto de cubo aos visuais de botão de movimentação.

pressable button cube 3

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

Pressable Buton cube 1Pressable button cube 2

Quando você pressionar o botão, ele será movido e gerará eventos adequados expostos no PressableButton.cs script, como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Pressable button cube run 1

Solução de problemas

Se o botão estiver executando uma tecla dupla, verifique se a propriedade Impor Push Frontal está ativa e se o plano Iniciar Distância por Push será colocado na frente do plano Tocáveis de Interação Próxima . O plano Touchable de Interação Próxima é indicado pelo plano azul colocado na frente da origem da seta branca no gif abaixo:

Pressable button script component with Enforce Front Push property highlighted

Animated example of moving the start push distance in front of the near interaction touchable plane

2. Adicionando comentários visuais ao botão básico do cubo

O Sombreador Padrão do MRTK fornece vários recursos que facilitam a adição de comentários visuais. 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 Sombreador Padrão do MRTK.

Pressable button cube 4

Verifique Hover Light e Proximity Light em opções de Fluent. Isso permite comentários visuais para interações próximas (Luz de Proximidade) e ponteiros distantes (Hover Light).

pressable button cube 5pressable button cube run 2

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

Como PressableButton.cs o script expõe eventos como TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), podemos atribuir comentários de áudio facilmente. Basta adicionar o Unity ao Audio Source 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.

pressable button cube 7Pressable Button Cube 6

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. 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 Escala e Deslocamento. Verifique Easing e defina a duração para tornar a transição visual suave.

Select profile theme

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

Pressable Button Cube Run 3Pressable Button Cube Run 4

Exemplos de botão personalizados

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

Pressable Custom1Pressable Custom2

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

Pressable Custom3

Confira também