5. Como adicionar um botão e redefinir locais de peças

No tutorial anterior, você adicionou Atores de Interação à Mão aos componentes Peão e Manipulador para o tabuleiro de xadrez, a fim de torná-los interativos. Nesta seção, você continuará usando o plug-in de Ferramentas de Experiência de Usuário do Kit de Ferramentas de Realidade Misturada para desenvolver seu aplicativo de xadrez com novas funções e referências de Ator em Blueprints. Ao final desta seção, você estará pronto para empacotar e implantar o aplicativo de realidade misturada em um dispositivo ou emulador.

Objetivos

  • Adicionar um botão interativo
  • Criar uma função para redefinir a localização de uma peça
  • Vincular o botão para disparar a função quando pressionado

Criar uma função de redefinição

Sua primeira tarefa é criar um blueprint de função que redefina uma peça de xadrez para a posição original dela na cena.

  1. Abra WhiteKing, selecione o ícone + ao lado da seção Funções no Meu Blueprint e nomeie-o Redefinir Localização.

  2. Arraste e solte a execução de Redefinir Localização na grade do Blueprint para criar um nó SetActorRelativeTransform.

    • Essa função define a transformação (localização, rotação e escala) de um ator em relação ao seu pai. Você usará essa função para redefinir a posição do rei no tabuleiro, mesmo que o tabuleiro tenha sido movido de sua posição original.
  3. Clique com o botão direito do mouse no Grafo de Eventos, selecione Transformar e altere a Localização dele para X = -26, Y = 4 e Z = 0.

    • Conecte o Valor Retornado dele ao marcador Nova Transformação Relativa em SetActorRelativeTransform.

Função Reset Location

Escolha Compilar e Salvar o projeto antes de voltar à Janela principal.

Adicionar um botão

Agora que a função está configurada corretamente, a próxima tarefa é criar um botão que a dispare quando tocado.

  1. Clique em Adicionar Novo > Classe de Blueprint, expanda a seção Todas as Classes e pesquise UxtPressableButtonActor.
    • Nomeie-o como ResetButton e clique duas vezes para abrir o Blueprint

Subclasse do novo Blueprint do botão de estilo do HoloLens 2

  1. No painel Componentes, selecione ResetButton(self) . No painel Detalhes, navegue até a seção Botão. Altere o Rótulo do Botão padrão para "Redefinir", expanda a seção Pincel do Ícone do Botão e clique no botão Abrir o Icon Brush Editor.

Definir o rótulo e o ícone no botão

O Icon Brush Editor será aberto, que você poderá usar para selecionar um novo ícone para o botão.

Selecionar um ícone para o botão

Há várias outras configurações que você pode ajustar para configurar seu botão. Para saber mais sobre o componente UXT Pressable Button, confira a documentação.

  1. Clique em ButtonComponent (Herdado) no painel Componentes e role o painel Detalhes para baixo até a seção Eventos.
    • Clique no botão + verde próximo de On Button Pressed para adicionar um evento Grafo de Eventos, que será chamado quando o botão for pressionado.

Deste ponto em diante, será conveniente que você chame a função Redefinir Localização do WhiteKing, que precisa de uma referência para o Ator WhiteKing no Nível.

  1. No painel Meu Blueprint, navegue até a seção Variáveis, clique no botão + e nomeie a variável WhiteKing.
    • No painel Detalhes, selecione a lista suspensa ao lado de Tipo de Variável, pesquise WhiteKing e selecione Referência de Objeto.
    • Marque a caixa ao lado de Instância Editável, que permite que a variável seja definida por meio do Nível Principal.

Criar uma variável

  1. Arraste a variável WhiteKing de Meu Blueprint > Variáveis até o Grafo de Eventos do Botão Redefinir e escolha Obter WhiteKing.

Como disparar a função

Tudo o que resta fazer é disparar oficialmente a função de redefinição quando o botão for pressionado.

  1. Arraste o pino da saída WhiteKing e solte para posicionar um novo nó. Selecione a função Reset Location. Por fim, arraste o pino de execução de saída de On Button Pressed até o pino de execução de entrada em Reset Location. Compile e Salve o Blueprint ResetButton e, em seguida, retorne à Janela principal.

Chamar função Reset Location de On Button Pressed

  1. Arraste ResetButton até o visor e defina a localização dele como X = 50, Y = -25 e Z = 10. Defina a rotação como Z = 180. Em Padrão, defina o valor da variável WhiteKing como WhiteKing.

Definir a variável

Execute o aplicativo, mova a peça de xadrez para um novo local e pressione o botão de estilo do HoloLens 2 para ver a lógica de redefinição em ação!

Agora você tem um aplicativo de realidade misturada com uma peça e um tabuleiro de xadrez com os quais você pode interagir e um botão totalmente funcional que redefine a localização da peça. Você pode encontrar o aplicativo concluído até esse ponto no respectivo repositório do GitHub. Você pode ir além deste tutorial e configurar o restante das peças de xadrez, para que todo o tabuleiro seja redefinido quando você clicar no botão Redefinir.

Encerrar cena no visor

Você está pronto para prosseguir para a seção final deste tutorial, em que aprenderá a empacotar e implantar o aplicativo em um dispositivo ou um emulador.

Importante

Neste ponto, atualize seu projeto com as Configurações de desempenho do Unreal recomendadas antes de implantar o aplicativo em um dispositivo ou emulador.

Próxima seção: 6. Como empacotar e implantar no dispositivo ou emulador