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

  • 10 minutos

Existem várias formas de fornecer inputs. As entradas acionam determinados eventos e executam algumas alterações. Os componentes da interface do usuário ajudam os usuários a interagir com os hologramas em cena.

Criar um painel estático de botões

  1. Na janela Hierarquia, clique com o botão direito do mouse no objeto RoverExplorer e selecione Criar vazio para adicionar um objeto vazio como filho do RoverExplorer. Nomeie o objeto Botões e 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 até o MRTK de Ativos>. Tutorials.GettingStarted pasta pré-fabricada, clique e arraste o pré-fabricado PressableCylinderButton para o objeto Buttons, em seguida, clique com o botão direito do mouse no PressableCylinderButton e selecione Duplicar para criar uma cópia, repita até 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, em seguida, no painel Inspetor, selecione Adicionar Componente para adicionar o componente Barra de Objetos. 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 em Botões à lista 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, nomeie os botões como Dicas, Explodir e Redefinir. Para cada botão, altere a propriedade SpeechRecognitionKeyword em Advanced StatefulInteractable Settings no componente Pressable Button para corresponder aos nomes dos botões::

    Screenshot showing button text labels configured.

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

    • Atribuir 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 acionado

    Screenshot of Hints button object OnClick event configured.

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

    • Atribuir 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 acionado

    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 ativará e desativará a visualização explodida:

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

    Implementaremos o botão Reset mais tarde no módulo.

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

  1. No painel Projeto, navegue até a pasta Packages>MRTK UX Components>Near Menu, clique e arraste o pré-fabricado NearMenuBase para a janela Hierarquia, defina sua Posição de transformação 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 Head
    • Marque a caixa de seleção ao lado do componente RadialView Solver para que ele seja ativado por padrão

    Screenshot of Unity with newly added near menu prefab selected.

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

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

  3. Renomeie o primeiro botão em Buttons-GridLayout (Botões) para Indicador e, em seguida, na janela Hierarquia, configure o objeto de jogo Indicador 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 ícone de fonte. Você pode encontrar isso na lista de ícones, ou definir Nome do ícone atual como 'Ícone 130'

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

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

    • Desmarque a caixa de seleção ao lado do 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, em seguida, na janela Hierarquia, configure o objeto de jogo TapToPlace 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 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 ícone de fonte. Você pode encontrar isso na lista de ícones, ou definir 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, em seguida, na janela Inspetor, configure o componente Tocar para Colocar (Script) da seguinte maneira:

    • Desmarque a caixa de seleção ao lado de seu nome para torná-la inativa por padrão
    • Na seção Ao colocar o evento interrompido (), selecione o ícone + para adicionar um novo evento:
    • Atribuir o objeto RoverExplorer>RoverAssembly ao campo Nenhum (Objeto)
    • Na lista suspensa Sem função, selecione TapToPlace>bool Enabled para atualizar esse valor de propriedade quando o evento for acionado
    • Verifique se a caixa de seleção argumento está desmarcada

    Screenshot of Unity with TapToPlace component reconfigured.