6. Como criar interfaces do usuário6. Creating user interfaces

Neste tutorial, você aprenderá a criar uma interface do usuário simples usando os pré-fabricados de menu e de botão do MRTK junto com o componente TextMeshPro do Unity.In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. Você também aprenderá a configurar os botões para disparar eventos e adicionar elementos de interface do usuário de dica de ferramenta dinâmica para fornecer ao usuário informações adicionais.You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

ObjetivosObjectives

  • Saber como organizar botões em uma coleçãoLearn how to organize buttons in a collection
  • Saber como usar os pré-fabricados de menu do MRTKLearn how to use MRTK's menu prefabs
  • Saber como interagir com hologramas usando os botões e menus da interface do usuárioLearn how to interact with holograms using UI menus and buttons
  • Saber como adicionar elementos de textoLearn how to add text elements
  • Saber como gerar dicas de ferramentas em objetos dinamicamenteLearn how to spawn tooltips on objects dynamically

Criar um painel estático de botõesCreating a static panel of buttons

Na janela Hierarquia, clique com o botão direito do mouse no objeto RoverExplorer e selecione Criar Vazio para adicionar um objeto vazio como um filho do RoverExplorer, nomeie o objeto Buttons e configure o componente Transformar da seguinte maneira:In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • Posição: X = -0,6, Y = 0,036, Z = -0,5Position: X = -0.6, Y = 0.036, Z = -0.5
  • Rotação: X = 90, Y = 0, Z = 0Rotation: X = 90, Y = 0, Z = 0
  • Escala: X = 1, Y = 1, Z = 1Scale: X = 1, Y = 1, Z = 1

Unity com o objeto Buttons recém-criado selecionado e posicionado

Na janela do projeto, navegue até a pasta Ativos > MRTK.Tutorials.GettingStarted > Pré-fabricados, clique e arraste o pré-fabricado PressableRoundButton no objeto Buttons e, em seguida, clique com o botão direito do mouse no PressableRoundButton e selecione Duplicar para criar uma cópia, repita até que você tenha um total de três objetos PressableRoundButton:In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

Unity com os pré-fabricados PressableRoundButton recém-adicionados

Na janela hierarquia, selecione o objeto Buttons, em seguida, na janela Inspetor, use o botão Adicionar Componente para adicionar o componente GridObjectCollection e configure-o da seguinte maneira:In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • Tipo de Classificação: Ordem do FilhoSort Type: Child Order
  • Layout: HorizontalLayout: Horizontal
  • Largura da Célula: 0,2Cell Width: 0.2
  • Âncora: Centro EsquerdaAnchor: Middle Left

Em seguida, clique no botão Atualizar Coleção para atualizar a posição dos objetos filho do objeto Buttons:Then click the Update Collection button to update the position of the Buttons object's child objects:

Objeto Buttons do Unity com o componente GridObjectCollection adicionado, configurado e aplicado

Na janela Hierarquia, nomeie os botões Dicas, Detalhar e Redefinir.In the Hierarchy window, name the buttons Hints, Explode, and Reset.

Para cada botão, selecione o objeto filho SeeItSayItLabel > TextMeshPro e, em seguida, na janela Inspetor, altere o respectivo texto de componente TextMeshPro – Texto para corresponder aos nomes dos botões:For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

Unity com os rótulos de texto dos botões configurados

Quando tiver terminado, recolha os objetos filho do objeto Buttons.Once done, collapse the Buttons object's child objects.

Na janela Hierarquia, selecione o objeto do botão Dicas e, na janela Inspetor, configure o evento Interactable.OnClick () da seguinte maneira:In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Atribua o objeto RoverAssembly ao campo Nenhum (Objeto)Assign the RoverAssembly object to the None (Object) field
  • Na lista suspensa Sem Função, selecione PlacementHintsController > TogglePlacementHints () para definir essa função como a ação a ser executada quando o evento for disparadoFrom the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Unity com o evento OnClick do objeto de botão Hints configurado

Dica

O componente de interação é um contêiner all-in-one para facilitar a interação e a resposta à entrada de qualquer objeto.The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Um componente passível de interação engloba todos os tipos de entrada, incluindo toque, raios de mão, fala etc. e afunila essas interações em eventos e respostas de tema visual.Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. Para saber como configurá-lo para diferentes tipos de entrada e personalizar o tema visual, veja o guia de Interação no Portal de Documentação do MRTK.To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

Na janela Hierarquia, selecione o objeto do botão Detalhar e, na janela Inspetor, configure o evento Interactable.OnClick () da seguinte maneira:In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Atribua o objeto RoverAssembly ao campo Nenhum (Objeto)Assign the RoverAssembly object to the None (Object) field
  • Na lista suspensa Sem Função, selecione ExplodedViewController > ToggleExplodedView () para definir essa função como a ação a ser executada quando o evento for disparadoFrom the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Unity com o evento OnClick do objeto de botão Detalhar configurado

Pressione o botão Reproduzir para entrar no Modo de jogo e pressione e segure o botão barra de espaço para ativar a mão; e use o mouse para pressionar o botão Dicas para alternar a visibilidade dos objetos de dica de posicionamento:Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

Modo de exibição dividida do Modo de reprodução do Unity com o botão Dicas recebendo um clique

e o botão Detalhar para ativar e desativar a exibição detalhada:and the Explode button to toggle the exploded view on and off:

Modo de exibição dividida do Modo de reprodução do Unity com o botão Detalhar recebendo um clique

Como criar um menu dinâmico que segue o usuárioCreating a dynamic menu that follows the user

Na janela Projeto, navegue até a pasta Ativos > MRTK > SDK > Recursos > UX > Pré-fabricados > Menus, clique e arraste o pré-fabricado NearMenu4x1 para a janela Hierarquia, defina a sua Posição de Transformar como X = 0, Y = -0,4, Z = 0 e configure-o da seguinte maneira:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • Verifique se o Tipo de Destino Rastreado do componente SolverHandler está definido como CabeçaVerify that the SolverHandler component's Tracked Target Type is set to Head
  • Marque a caixa de seleção ao lado do componente Solucionador RadialView para que ele seja habilitado por padrãoCheck the checkbox next to the RadialView Solver component so it is enabled by default

Unity com o pré-fabricado do menu próximo recém-adicionado selecionado

Na janela Hierarquia, renomeie o objeto para Menu e, em seguida, expanda o seu objeto filho ButtonCollection para revelar os quatro botões:In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Unity com o objeto Menu selecionado e o objeto ButtonCollection expandido

Renomeie o primeiro botão como Indicador e, na janela Inspetor, configure o componente Auxiliar de Configuração do Botão (Script) da seguinte maneira:Rename the first button to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Altere o Texto do Rótulo Principal para que ele corresponda ao nome do botãoChange the Main Label Text to match the name of the button
  • Atribua o objeto Indicador ao campo Nenhum (Objeto)Assign the Indicator object to the None (Object) field
  • Na lista suspensa Sem Função, selecione GameObject > SetActive (bool) para definir essa função como a ação a ser executada quando o evento for disparadoFrom the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • Verifique se a caixa de seleção do argumento está marcadaVerify that the argument checkbox is checked
  • Altere o Ícone para o ícone "pesquisar"Change the Icon to the 'search' icon

Unity com o Auxiliar de Configuração do Botão do objeto de botão Indicator configurado

Na janela Hierarquia, selecione o objeto Indicador e, na janela Inspetor:In the Hierarchy window, select the Indicator object, then in the Inspector window:

  • Desmarque a caixa de seleção ao lado do nome para torná-la inativa por padrãoUncheck the checkbox next to its name to make it inactive by default
  • Use o botão Adicionar Componente para adicionar o componente Controlador de Indicador Direcional (Script)Use the Add Component button to add the Directional Indicator Controller (Script) component

Unity com o objeto Indicator selecionado e desabilitado e o componente DirectionalIndicatorController adicionado

Observação

Agora, quando o aplicativo é iniciado, o Indicador é desabilitado por padrão e pode ser habilitado pressionando o botão Indicador.Now, when the app starts, the Indicator is disabled by default and can be enabled by pressing the Indicator button.

Renomeie o segundo botão como TapToPlace e, na janela Inspetor, configure o componente Auxiliar de Configuração do Botão (Script) da seguinte maneira:Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Altere o Texto do Rótulo Principal para que ele corresponda ao nome do botãoChange the Main Label Text to match the name of the button
  • Atribua o objeto RoverExplorer > RoverAssembly ao campo Nenhum (Objeto)Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • Na lista suspensa Sem Função, selecione TapToPlace > bool Enabled para atualizar esse valor da propriedade quando o evento for disparadoFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Verifique se a caixa de seleção do argumento está marcadaVerify that the argument checkbox is checked
  • Altere o Ícone para o ícone "mão com raio"Change the Icon to the 'hand with ray' icon

Unity com o Auxiliar de Configuração do Botão do objeto de botão TapToPlace configurado

Na janela Hierarquia, selecione o objeto RoverAssembly e, na janela Inspetor, configure o componente Tocar para Posicionar (Script) da seguinte maneira:In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • Desmarque a caixa de seleção ao lado do nome para torná-la inativa por padrãoUncheck the checkbox next to its name to make it inactive by default
  • Na seção de evento On Placing Stopped () , clique no ícone + para adicionar um novo evento:In the On Placing Stopped () event section, click the + icon to add a new event:
  • Atribua o objeto RoverExplorer > RoverAssembly ao campo Nenhum (Objeto)Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • Na lista suspensa Sem Função, selecione TapToPlace > bool Enabled para atualizar esse valor da propriedade quando o evento for disparadoFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Verifique se a caixa de seleção do argumento está desmarcadaVerify that the argument checkbox is unchecked

Unity com o componente TapToPlace reconfigurado

Observação

Agora, quando o aplicativo é iniciado, a funcionalidade Tocar para Posicionar é desabilitada por padrão e pode ser habilitada pressionando o botão Tocar para Posicionar.Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. Além disso, quando o recurso tocar para posicionar for concluído, ele se desabilitará sozinho.Additionally, when the tap to place is completed, it will disable itself.

Como adicionar texto à cenaAdding text to the scene

Na janela Hierarquia, clique com o botão direito do mouse no objeto Tabela e selecione Objeto 3D > Texto – TextMeshPro para adicionar um objeto de texto como um filho do objeto Table e, em seguida, na janela Inspetor, configure o componente Transformação de Retângulo da seguinte maneira:In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • Altere a Posição Y para 1Change Pos Y to 1
  • Altere a Largura para 1Change Width to 1
  • Altere a Altura para 1Change Height to 1
  • Altere a Rotação X para 90Change Rotation X to 90

Unity com o objeto TextMeshPro recém-criado selecionado

Em seguida, configure o componente TextMeshPro – Texto da seguinte maneira:Then configure the TextMeshPro - Text component as follows::

  • Altere o Texto para o Explorador do RoverChange Text to Rover Explorer
  • Altere o Estilo da Fonte para NegritoChange Font Style to Bold
  • Altere o Tamanho da Fonte para 1Change Font Size to 1
  • Altere as Configurações Adicionais > Margens para 0,03Change Extra Settings > Margins to 0.03

Unity com o componente TextMeshPro configurado

Como adicionar dicas de ferramentaAdding tooltips

Na janela Projeto, navegue até a pasta Ativos > MRTK > SDK > Recursos > UX > Pré-fabricados > Dica de Ferramenta para localizar os pré-fabricados de dica de ferramenta:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

Janela Projeto do Unity com a pasta Dicas de Ferramentas selecionada

Na janela Hierarquia, expanda o objeto RoverExplorer > RoverParts e selecione todos os seus objetos filhos de peças do rover. Em seguida, na janela Inspetor, use o botão Adicionar Componente para adicionar o componente ToolTipSpawner e configurá-lo da seguinte maneira:In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • Verifique se a caixa de seleção Foco Habilitado está marcada para exigir que o usuário olhe a peça para que a dica de ferramenta apareçaEnsure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • Atribua o pré-fabricado Dica de Ferramenta de Linha Simples da janela Projeto para o campo Pré-fabricado da Dica de FerramentaAssign the Simple Line ToolTip prefab from the Project window to the Tool Tip Prefab field
  • Altere as Configurações de Substituição da Dica de Ferramenta > Modo de Configurações para SubstituirChange the ToolTip Override Settings > Settings Mode to Override
  • Altere as Configurações de Substituição da Dica de Ferramenta > Dinamizar Manualmente a Posição do Local Y para 1,5Change the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

Unity com todos os objetos das partes da sonda selecionados e o componente ToolTipSpawner adicionado e configurado

Na janela Hierarquia, selecione a primeira peça do Rover, RoverParts > Camera_Part e configure o componente ToolTipSpawner da seguinte maneira:In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • Altere o Texto da Dica de Ferramenta para refletir o nome da peça, ou seja, CâmeraChange Tool Tip Text to reflect the name of the part, i.e., Camera

Unity com o Camera ToolTipText configurado

Repita essa etapa para cada um dos objetos da peça do Rover para configurar o componente ToolTipSpawner da seguinte maneira:Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Para o Generator_Part, altere o Texto da Dica de Ferramenta para GeradorFor the Generator_Part, change the Tool Tip Text to Generator
  • Para o Lights_Part, altere o Texto da Dica de Ferramenta para LuzesFor the Lights_Part, change the Tool Tip Text to Lights
  • Para o UHFAntenna_Part, altere o Texto da Dica de Ferramenta para o campo Antena UHFFor the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Para o Spectrometer_Part, altere o Texto da Dica de Ferramenta para EspectrômetroFor the Spectrometer_Part, change the Tool Tip Text to Spectrometer

Pressione o botão Reproduzir para entrar no Modo de jogo e pressione e segure o botão direito do mouse enquanto move o mouse até que o olhar esteja em uma das peças e a dica de ferramenta para essa peça seja exibida:Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

Modo de exibição dividida do Modo de reprodução do Unity com a dica de ferramenta disparada pelo foco

ParabénsCongratulations

Neste tutorial, você aprendeu a criar uma interface do usuário simples usando os pré-fabricados de menu e de botão fornecidos do MRTK junto com o componente TextMeshPro do Unity e como configurar os botões para disparar eventos quando eles forem pressionados.In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. Você também aprendeu como adicionar elementos de interface do usuário de dica de ferramenta dinâmicos para fornecer ao usuário informações adicionais.You also learned how to add dynamic tooltip UI elements to provide the user with additional information.

Próximo tutorial: 7. Interagir com objetos 3DNext Tutorial: 7. Interacting with 3D objects