Exercício – Painel de botões e menus dinâmicos

  • 10 minutos

Há várias maneiras de fornecer entradas. As entradas disparam determinados eventos e executam algumas alterações. Os componentes da interface do usuário ajudam os usuários a interagir com os hologramas na cena.

Criar um painel estático de botões

  1. Na janela Hierarquia, clique com o botão direito do mouse em RoverExplorer e selecione Criar Vazio para adicionar um objeto vazio como um filho do RoverExplorer. Em seguida, no objeto Botões, configure o componente Transformar da seguinte maneira:

    • Posição: X = -0,6, Y = 0,036, Z = -0,5
    • Rotação: X = 90, Y = 0, Z = 0
    • Escala: X = 1, Y = 1, Z = 1

    Screenshot of Unity with newly created Buttons object selected and positioned.

  2. Na janela Projeto, navegue para a pasta Ativos>MRTK.Tutorials.GettingStarted>Prefabs, clique e arraste o prefab PressableCylinderButton para o objeto Botões e clique com o botão direito do mouse em PressableCylinderButton e selecione Duplicar para criar uma cópia. Repita até você ter um total de três objetos PressableCylinderButton em Botões:

    Screenshot of Unity with newly added PressableRoundButton prefabs.

    Uma janela solicitará que você importe o TextMesh Pro. Selecione a primeira opção para "Importar TMP Essentials".

  3. No painel Hierarquia, selecione o objeto Botões e, no painel de Inspetor, selecione Adicionar Componente para adicionar o componente Object Bar. Configure-o da seguinte forma:

    • Direção do fluxo da Barra de Objetos: horizontal
    • Espaçamento entre: X = 0,2; Y = 0

    Atribua cada objeto na lista Botões aos Objetos da Barra de Objetos no componente Barra de Objetos:

    Screenshot of Unity Buttons object with GridObjectCollection component added, configured, and applied.

  4. No painel Hierarquia, dê aos botões os nomes Dicas, Explodir e Redefinir. Para cada botão, altere a propriedade SpeechRecognitionKeyword em Configurações Avançadas StatefulInteractable no componente Botão Pressionável para corresponder aos nomes dos botões:

    Screenshot showing button text labels configured.

  5. No painel Hierarquia, selecione o objeto de botão Dicas e, na janela Inspetor, configure o evento PressableButton.OnClicked () da seguinte forma:

    • Atribua o objeto RoverAssembly ao campo Nenhum (Objeto)
    • 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 disparado

    Screenshot of Hints button object OnClick event configured.

  6. No painel Hierarquia, selecione o objeto de botão Explodir e, na janela Inspetor, configure o evento PressableButton.OnClicked () da seguinte forma:

    • Atribua o objeto RoverAssembly ao campo Nenhum (Objeto)
    • 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 disparado

    Screenshot of Unity with Explode button object OnClick event configured.

  7. Pressione o botão Reproduzir para entrar no modo de Jogo. Pressione e segure a 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:

    Screenshot of Unity Play mode split view with Hints button being pressed.

  8. O botão Explodir alternará entre ligado e desligado na exibição explodida:

    Screenshot of Unity Play mode split view with Explode button being pressed.

    Implementaremos o botão Redefinir mais adiante no módulo.

Criar um menu dinâmico que segue o usuário

  1. No painel Projeto, navegue para a pasta Pacotes>Componentes MRTK UX>Near Menu, clique e arraste o prefab NearMenuBase para a janela Hierarquia, defina a Posição Transformar como X = 0; Y = -0,4; Z = 0 e configure-o da seguinte maneira:

    • Verifique se o Tipo de Destino Rastreado do componente SolverHandler está definido como Cabeça
    • Marque a caixa de seleção ao lado do componente Resolvedor RadialView para que ele seja habilitado por padrão

    Screenshot of Unity with newly added near menu prefab selected.

  2. Na janela Hierarquia, renomeie o objeto para Menu e, em seguida, expanda o seu objeto filho MenuContent-HorizontalLayout (Menu e Pin) > Buttons-GridLayout (Botões) para revelar os três botões:

    Screenshot of Unity with Menu object selected and ButtonCollection object expanded.

  3. Renomeie o primeiro botão no Buttons-GridLayout (Botões) para Indicator e, na janela Hierarquia, configure o objeto de jogo Indicator da seguinte maneira:

    • Selecione o objeto Frontplate > AnimatedContent > Icon > Label e altere o componente TextMesh Pro para corresponder ao nome do botão. Verifique se o objeto Label está ativado na hierarquia
    • Configure o evento PressableButton.OnClicked() atribuindo o objeto Indicator que se parece com uma divisa, ao campo Nenhum (Objeto) e selecionando GameObject > SetActive (bool) na lista suspensa Sem Função (verifique se a caixa de seleção do argumento está marcada)
    • Selecione o objeto Frontplate > AnimatedContent > Icon > UIButtonFontIcon e altere o ícone para o ícone de pesquisa no componente Seletor de Ícones de Fontes. Você pode encontrá-lo na lista de ícones ou definir o Nome do Ícone Atual como "Ícone 130"

    Screenshot of Unity with Indicator button object Button Config Helper configured.

  4. Para desabilitar o objeto Indicador de divisa, no painel Hierarquia, selecione o objeto Indicador que se parece com uma divisa e, no painel Inspetor:

    • Desmarque a caixa de seleção ao lado do respectivo nome para torná-la inativa por padrão
    • Use o botão Adicionar Componente para adicionar o componente Controlador de Indicador Direcional (Script)

    Screenshot of Unity with Indicator object selected, disabled, and DirectionalIndicatorController component added.

  5. Renomeie o segundo botão para TapToPlace e, na janela Hierarquia, configure o objeto de jogo TapToPlace da seguinte forma:

    • Selecione o objeto Frontplate > AnimatedContent > Icon > Label e altere o componente TextMesh Pro para corresponder ao nome do botão. Verifique se o objeto Label está ativado na hierarquia
    • Configure o evento PressableButton.OnClicked() atribuindo o objeto RoverExplorer >RoverAssembly ao campo Nenhum (Objeto) e selecionando TapToPlace>bool Enabled na lista suspensa Sem Função (verifique se a caixa de seleção do argumento está marcada)
    • Selecione o objeto Frontplate > AnimatedContent > Icon > UIButtonFontIcon e altere o ícone para o ícone de mão no componente Seletor de Ícones de Fontes. Você pode encontrá-lo na lista de ícones ou definir o Nome do Ícone Atual como "Ícone 13"

    Screenshot of Unity with TapToPlace button object Button Config Helper configured.

  6. Na janela Hierarquia, selecione o objeto RoverAssembly e, na janela Inspetor, configure o componente Tocar para Posicionar (Script) da seguinte maneira:

    • Desmarque a caixa de seleção ao lado do nome para torná-la inativa por padrão
    • Na seção do evento On Placing Stopped(), selecione o ícone + para adicionar um evento:
    • Atribua o objeto RoverExplorer>RoverAssembly ao campo Nenhum (Objeto)
    • Na lista suspensa Sem Função, selecione TapToPlace>bool Enabled para atualizar esse valor da propriedade quando o evento for disparado
    • Verifique se a caixa de seleção do argumento está desmarcada

    Screenshot of Unity with TapToPlace component reconfigured.