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

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á 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.In this section, you'll continue to use the Mixed Reality Toolkit UX Tools plugin to build out your chess app with new functions and Actor references in Blueprints. 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, selecione o ícone + ao lado da seção Funções no Meu Blueprint e nomeie-o Redefinir Localização.Open WhiteKing, select 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 set up 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 UxtPressableButtonActor.Click Add New > Blueprint Class, expand the All Classes section, and search for UxtPressableButtonActor.
    • Nomeie-o como ResetButton e clique duas vezes para abrir o BlueprintName it ResetButton and double click to open the Blueprint

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

  1. No painel Componentes, selecione ResetButton(self) .Ensure ResetButton(self) is selected in the Components panel. No painel Detalhes, navegue até a seção Botão.In the Details panel, navigate to the Button section. 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.Change the default Button Label to "Reset", expand the Button Icon Brush section, and press the Open Icon Brush Editor button.

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.The Icon Brush Editor will open, which you can use to select a new icon for your button.

Selecionar um ícone para o botão

Há várias outras configurações que você pode ajustar para configurar seu botão.There are plenty of other settings you can adjust to configure your button. Para saber mais sobre o componente UXT Pressable Button, confira a documentação.To learn more about the UXT Pressable Button component, check out the documentation.

  1. Clique em ButtonComponent (Herdado) no painel Componentes e role o painel Detalhes para baixo até a seção Eventos.Click ButtonComponent (Inherited) in 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, que permite que a variável seja definida por meio do Nível Principal.Check the box next to Instance Editable, which allows 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. Defina a rotação como Z = 180.Set its rotation to Z = 180. 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 de estilo do HoloLens 2 para ver a lógica de redefinição em ação!Run the app, move the chess piece to a new location, and press your HoloLens 2-style 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 e um botão totalmente funcional que redefine a localização da peça.You now have a mixed reality app with an interactable chess piece and board, and a fully functioning button that resets 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 você clicar no botão Redefinir.Feel free to go beyond this tutorial and set up the rest of the chess pieces so that the entire board is reset when you press the reset button.

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.You're ready to move on to the final section of this tutorial where you'll learn how to package and deploy the app to a device or emulator.

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.At this point, you should update your project with the recommended Unreal performance settings before deploying your application 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