5. Como adicionar um botão e redefinir locais de peças5. Adding a button & resetting piece locations

Visão geralOverview

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.In the previous tutorial, you added Hand Interaction Actors to the Pawn and Manipulator components to the chess board to make them both interactive. Nesta seção, você continuará trabalhando com as Ferramentas de UX do Kit de Ferramentas de Realidade Misturada ao criar os recursos do seu aplicativo de xadrez.In this section, you'll continue working with the Mixed Reality Toolkit UX Tools plugin by building out the features of your chess app. Isso inclui a criação de uma função e o aprendizado de como obter referências a Atores em um Blueprint.This includes creating a new function and learning how to get references to Actors in a Blueprint. Ao final desta seção, você estará pronto para empacotar e implantar o aplicativo de realidade misturada em um dispositivo ou emulador.By the end of this section, you'll be ready to package and deploy the mixed reality app on a device or emulator.

ObjetivosObjectives

  • Adicionar um botão interativoAdding an interactive button
  • Criar uma função para redefinir a localização de uma peçaCreating a function to reset a pieces' location
  • Vincular o botão para disparar a função quando pressionadoHooking the button up to trigger the function when pressed

Criar uma função de redefiniçãoCreating a reset function

Sua primeira tarefa é criar um blueprint de função que redefina uma peça de xadrez para a posição original dela na cena.Your first task is to create a function blueprint that resets a chess piece to its original position in the scene.

  1. Abra WhiteKing, clique no ícone + ao lado da seção Funções no Meu Blueprint e nomeie-o como Redefinir Localização.Open WhiteKing, click the + icon next to the Functions section in the My Blueprint and name it Reset Location.

  2. Arraste e solte a execução de Redefinir Localização na grade do Blueprint para criar um nó SetActorRelativeTransform.Drag and release the execution from Reset Location on the Blueprint grid to create a SetActorRelativeTransform node.

    • Essa função define a transformação (localização, rotação e escala) de um ator em relação ao seu pai.This function sets the transform (location, rotation, and scale) of an actor relative to its parent. 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.You’ll use this function to reset the king’s position on the board, even if the board has been moved from its original position.
  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.Right-click inside the Event Graph, select Make Transform, and change its Location to X = -26, Y = 4, Z = 0.

    • Conecte o Valor Retornado dele ao marcador Nova Transformação Relativa em SetActorRelativeTransform.Connect its Return Value to the New Relative Transform pin in SetActorRelativeTransform.

Função Reset Location

Escolha Compilar e Salvar o projeto antes de voltar à Janela principal.Compile and Save the project before returning to the Main window.

Adicionar um botãoAdding a button

Agora que a função está configurada corretamente, a próxima tarefa é criar um botão que a dispare quando tocado.Now that the function is setup correctly, your next task is to create a button that fires it off when touched.

  1. Clique em Adicionar Novo > Classe de Blueprint, expanda a seção Todas as Classes e pesquise por SimpleButton.Click Add New > Blueprint Class, expand the All Classes section, and search for SimpleButton.
    • Nomeie-o como ResetButton e clique duas vezes para abrir o BlueprintName it ResetButton and double click to open the Blueprint

Observação

O SimpleButton é um Ator de Blueprint de botão 3D que é parte do plug-in Ferramentas de UX.SimpleButton is a 3D button Blueprint Actor that's part of the UX Tools plugin. ..

Subclasse do novo Blueprint de SimpleButton

  1. Clique em Botão de Pressão (Herdado) no painel Componentes e role o conteúdo do painel Detalhes para baixo até a seção Eventos.Click Pressable Button (Inherited) from the Components panel and scroll down the Details panel to the Events section.
    • 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.Click the green + button next to On Button Pressed to add an event to the Event Graph, which will be called when the button is pressed.

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.From here, you’ll want to call WhiteKing’s Reset Location function, which needs a reference to the WhiteKing Actor in the Level.

  1. No painel Meu Blueprint, navegue até a seção Variáveis, clique no botão + e nomeie a variável WhiteKing.In the My Blueprint panel, navigate to the Variables section , click the + button and name the variable WhiteKing.
    • No painel Detalhes, selecione a lista suspensa ao lado de Tipo de Variável, pesquise WhiteKing e selecione Referência de Objeto.In the Details panel, select the dropdown next to Variable Type, search for WhiteKing, and select the Object Reference.
    • Marque a caixa ao lado de Instância Editável.Check the box next to Instance Editable. Isso permitirá que a variável seja definida no Nível Principal.This will allow the variable to be set from the Main Level.

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.Drag the WhiteKing variable from My Blueprint > Variables onto the Reset Button Event Graph and choose Get WhiteKing.

Como disparar a funçãoFiring the function

Tudo o que resta fazer é disparar oficialmente a função de redefinição quando o botão for pressionado.All that's left is to officially fire off the reset function when the button is pressed.

  1. Arraste o pino da saída WhiteKing e solte para posicionar um novo nó.Drag the WhiteKing output pin and release to place a new node. Selecione a função Reset Location.Select the Reset Location function. 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.Finally, drag the outgoing execution pin from On Button Pressed to the incoming execution pin on Reset Location. Compile e Salve o Blueprint ResetButton e, em seguida, retorne à Janela principal.Compile and Save the ResetButton Blueprint, then return to the Main window.

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.Drag ResetButton into the viewport and set its location to X = 50, Y = -25, and Z = 10. Em Padrão, defina o valor da variável WhiteKing como WhiteKing.Under Default, set the value of the WhiteKing variable to WhiteKing.

Definir a variável

Execute o aplicativo, mova a peça de xadrez para um novo local e pressione o botão cor-de-rosa grande para ver a lógica de redefinição em ação!Run the app, move the chess piece to a new location, and press the big pink button to see the reset logic in action!

Agora você tem um aplicativo de realidade misturada com uma peça e um tabuleiro de xadrez com os quais você pode interagir, bem como um botão totalmente funcional que redefinirá a localização da peça.You now have a mixed reality app with a chess piece and board that you can interact with, as well as a fully functioning button that will reset the piece’s location. Você pode encontrar o aplicativo concluído até esse ponto no respectivo repositório do GitHub.You can find the completed app up to this point in its GitHub repo. Você pode ir além deste tutorial e configurar o restante das peças de xadrez, para que todo o tabuleiro seja redefinido quando o botão for pressionado.Feel free to go beyond this tutorial and set up the remainder of the chess pieces so that the entire board is reset when the button is pressed.

Encerrar cena no visor

Você está pronto para prosseguir para a seção final deste tutorial, em que você aprenderá a empacotar e implantar corretamente o aplicativo em um dispositivo ou emulador.You're ready to move on to the final section of this tutorial where you'll learn how to correctly package and deploy the app to a device or emulator.

Próxima seção: 6. Como empacotar e implantar no dispositivo ou emuladorNext Section: 6. Packaging & deploying to device or emulator