4. Como tornar sua cena interativa4. Making your scene interactive

Visão geralOverview

No tutorial anterior, você adicionou um ARSession, peão e modo de jogo para concluir a configuração de realidade misturada para o aplicativo de xadrez.In the previous tutorial you added an ARSession, Pawn, and Game Mode to complete the mixed reality setup for the chess app. Esta seção concentra-se no plug-in de software livre Ferramentas de UX do Kit de Ferramentas de Realidade Misturada, que oferece ferramentas para tornar sua cena interativa.This section focuses on using the open source Mixed Reality Toolkit UX Tools plugin, which provides tools to make the scene interactive. Ao final desta seção, você poderá mover as peças de xadrez com base na entrada do usuário.By the end of this section you'll be able to move the chess pieces with user input.

ObjetivosObjectives

  • Como baixar o plug-in Ferramentas de UX do Kit de Ferramentas de Realidade MisturadaDownloading the Mixed Reality Toolkit UX Tools plugin
  • Como adicionar Atores de Interação à Mão às pontas dos seus dedosAdding Hand Interaction Actors to your fingertips
  • Como criar e adicionar manipuladores a objetos na cenaCreating and adding Manipulators to objects in the scene
  • Como usar simulação de entrada para validar o projetoUsing input simulation to validate the project

Como baixar o plug-in de Ferramentas de UX do MRTKDownloading the MRTK UX Tools plugin

Antes de começar a trabalhar com a entrada do usuário, você precisará adicionar o plug-in ao projeto.Before you start working with user input, you'll need to add the plugin to the project.

  1. Clone ou baixe a versão mais recente do plug-in Ferramentas de UX do MRTK do Repositório de ferramentas de UX do GitHub e descompacte o arquivo.Clone or download the latest MRTK UX Tools plugin from the GitHub repository and unzip the file.

  2. Na pasta raiz do projeto, crie uma pasta chamada Plugins.Create a new folder called Plugins in the root folder of the project. Copie o plug-in UXTools descompactado para essa pasta e reinicie o editor Unreal.Copy the unzipped UXTools plugin into this folder and restart the Unreal editor.

Criar uma pasta de plug-ins do projeto

  1. O plug-in UXTools fornece uma pasta Conteúdo com subpastas para Ponteiros, Simulação de Entrada e um Botão Simples, bem como uma pasta de Classes de C++ separadas por função.The UXTools plugin has a Content folder with subfolders for Pointers, Input Simulation, and Simple Button, as well as a C++ Classes folder separated by function.

Observação

Se você não vir a seção Conteúdo do UXTools no Navegador de Conteúdo, clique em Exibir Opções > Mostrar Conteúdo do Plug-in.If you don’t see the UXTools Content section in the Content Browser, click View Options > Show Plugin Content.

Mostrar conteúdo do plug-in

Com o plug-in instalado com segurança, você está pronto para começar a usar as ferramentas que ele tem a oferecer, começando com os atores de interação à mão.With the plugin safely installed, you're ready to start using the tools it has to offer, starting with hand interaction actors.

Como gerar Atores de Interação à MãoSpawning Hand Interaction Actors

A interação à mão com elementos de UX é executada com Atores de Interação à Mão, que criam e orientam os ponteiros e visuais para interações próximas e distantes.Hand interaction with UX elements is performed with Hand Interaction Actors, which create and drive the pointers and visuals for near and far interactions.

  • As interações próximas são executadas apertando os elementos entre o dedo indicador e o polegar ou tocando nesses elementos com a ponta de um dedo.Near interactions are performed by pinching elements between index finger and thumb or by poking them with a fingertip.
  • As interações distantes são executadas apontando um raio da mão virtual a um elemento e pressionando o indicador e o polegar juntos.Far interactions are performed by pointing a ray from the virtual hand at an element and pressing index and thumb together.

Em nosso caso, adicionar um Ator de Interação Manual a MRPawn vai:In our case, adding a Hand Interaction Actor to MRPawn will:

  • Adicionar um cursor às pontas dos dedos indicadores do peão.Add a cursor to the tips of the Pawn’s index fingers.
  • Fornecer eventos de entrada com a mão articulada, que podem ser manipulados por meio do peão.Provide articulated hand input events that can be manipulated through the Pawn.
  • Permita eventos de entrada de interação distante por meio de raios de mão, que se estendem das palmas das mãos virtuais.Allow far interaction input events through hand rays extending from the palms of the virtual hands.

Para impulsionar esses conceitos, você é incentivado a ler a documentação sobre as interações de mão antes de continuar.In order to drive these concepts home, you're encouraged to read through the documentation on hand interactions before continuing.

Quando você estiver pronto, abra o Blueprint MRPawn e navegue até o Grafo de Eventos.Once you're ready, open the MRPawn Blueprint and go to the Event Graph.

  1. Arraste o marcador de execução do Evento BeginPlay e solte-o para criar um nó no local desejado.Drag and release the execution pin from Event BeginPlay to place a new node.

    • Selecione Gerar Ator Com Base em Classe, clique na lista suspensa próxima ao marcador Classe e pesquise por Ator de Interação à Mão Uxt.Select Spawn Actor from Class, click the dropdown next to the Class pin and search for Uxt Hand Interaction Actor.
  2. Arraste o marcador de execução do nó Ator de Interação à Mão Uxt do SpawnActor, solte-o e procure a função Definir Mão na classe Ator de Interação à Mão Uxt.Drag and release the execution pin from the SpawnActor Uxt Hand Interaction node and search for the Set Hand function in the Uxt Hand Interaction Actor class.

    • Conecte o Valor Retornado do nó SpawnActor ao marcador Destino do nó Definir Mão.Connect the SpawnActor node’s Return Value to the Target pin of the Set Hand node. Isso configura a mão do Ator de Interação à Mão como Esquerda.This sets the hand of the Hand Interaction Actor to Left.
  3. Gera um segundo Ator de Interação à Mão Uxt, desta vez definindo a mão como Direita.Spawn a second Uxt Hand Interaction Actor, this time setting the hand to Right. Quando o evento for iniciado, um Ator de Interação à Mão Uxt será gerado em cada mão.When the event begins, a Uxt Hand Interaction Actor will be spawned on each hand.

Seu Grafo do Eventos deve corresponder à seguinte captura de tela:Your Event Graph should match the following screenshot:

Gerar Atores de Interação à Mão UXT

Ambos os Atores de Interação à Mão Uxt precisam de proprietários e locais de transformação inicial.Both Uxt Hand Interaction Actors need owners and initial transform locations. A transformação inicial não importa, pois os Atores de Interação à Mão passarão às mãos virtuais assim que estiverem visíveis (esse comportamento está incluído no plug-in de Ferramentas de UX).The initial transform doesn’t matter since the Hand Interaction Actors will jump to the virtual hands as soon as they're visible (this behavior is included in the UX Tools plugin). No entanto, a função SpawnActor requer uma entrada de Transformação para evitar um erro de compilador, então você usará os valores padrão.However, the SpawnActor function requires a Transform input to avoid a compiler error, so you'll use the default values.

  1. Arraste o marcador de um dos marcadores Gerar Transformação e solte-o para criar um nó no local desejado.Drag and release the pin off one of the Spawn Transform pins to place a new node.

    • Procure o nó Efetuar Transformação e, em seguida, arraste o Valor Retornado para o pino Gerar Transformação da outra mão para que ambos os nós SpawnActor sejam conectados.Search for the Make Transform node, then drag the Return Value to the other hand’s Spawn Transform so that both SpawnActor nodes are connected.
  2. Clique na seta para baixo na parte inferior de ambos os nós SpawnActor para revelar o marcador Proprietário.Click the down arrow at the bottom of both SpawnActor nodes to reveal the Owner pin.

    • Arraste o pino de um dos pinos Proprietário e solte-o para posicionar um novo nó.Drag the pin off one of the Owner pins and release to place a new node.
    • Pesquise por próprio e selecione a variável obter uma referência a si próprio e, em seguida, crie um link entre o nó de referência do objeto Próprio e o marcador Proprietário do outro Ator de Interação à Mão.Search for self and select the Get a reference to self variable, then create a link between the Self object reference node and the other Hand Interaction Actor’s Owner pin.
    • Compile, salve e retorne para a Janela principal.Compile, save, and return to the Main window.

Verifique se as conexões correspondem à captura de tela a seguir, mas fique à vontade para arrastar os nós para tornar seu Blueprint mais legívelMake sure the connections match the following screenshot, but feel free to drag around nodes to make your Blueprint more readable

Configuração de Ator de Interação à Mão UXT completa

Você pode encontrar mais informações sobre o Ator de Interação à Mão fornecido no plug-in Ferramentas de UX do MRTK na documentação.You can find more information about the Hand Interaction Actor provided in the MRTK UX Tools plugin in the documentation.

Agora, as mãos virtuais no projeto têm uma forma de selecionar objetos, mas ainda não podem manipulá-los.Now the virtual hands in the project have a way of selecting objects, but they still can't manipulate them. Sua última tarefa antes de testar o aplicativo é adicionar componentes de Manipulador aos atores na cena.Your last task before testing the app is to add Manipulator components to the actors in the scene.

Como anexar manipuladoresAttaching Manipulators

Um manipulador é um componente que responde à entrada de mão articulada e pode ser pego, girado e traduzido.A Manipulator is a component that responds to articulated hand input and can be grabbed, rotated, and translated. Aplicar a transformação do Manipulador a uma transformação de Atores permite a manipulação direta do Ator.Applying the Manipulator’s transform to an Actors transform allows direct Actor manipulation.

  1. Abra o blueprint Tabuleiro, clique em Adicionar Componente e pesquise por Manipulador Genérico Uxt no painel Componentes.Open the Board blueprint, click Add Component and search for Uxt Generic Manipulator in the Components panel.

Adicionar manipulador genérico

  1. Expanda a seção Manipulador Genérico no painel Detalhes.Expand the Generic Manipulator section in the Details panel. Nela, você pode definir a manipulação de uma ou duas mãos, o modo de rotação e a suavização.You can set one-handed or two-handed manipulation, rotation mode, and smoothing from here. Selecione os modos que quiser e, em seguida, Compile e Salve o Board.Feel free to select whichever modes you wish, then Compile and Save Board.

Definir o modo

  1. Repita as etapas acima para o Ator WhiteKing.Repeat the steps above for the WhiteKing Actor.

É possível encontrar mais informações sobre os Componentes do Manipulador fornecidos no plug-in Ferramentas de UX do MRTK na documentação.You can find more information about the Manipulator Components provided in the MRTK UX Tools plugin in the documentation.

Como testar a cenaTesting the scene

Boa notícia para todos!Good news everyone! Você está pronto para testar o aplicativo com as novas mãos virtuais e entrada do usuário dele.You're ready to test out the app with its new virtual hands and user input. Pressione Jogar na Janela Principal e você verá duas mãos de malha fornecidas pelo plug-in Ferramentas de UX do MRTK, com raios de mão que se estendem da palma de cada uma das mãos.Press Play in the Main Window and you'll see two mesh hands provided by the MRTK UX Tools plugin with hand rays extending from each hand’s palm. Você pode controlar as mãos e as respectivas interações da seguinte maneira:You can control the hands and their interactions as follows:

  • Mantenha pressionada a tecla Alt esquerda para controlar a mão esquerda e a tecla Shift esquerda para controlar a mão direita.Hold down the left Alt key to control the left hand and the left Shift key to control the right hand.
  • Mova o cursor do mouse para mover a mão e use o botão de rolagem do mouse para mover a mão para frente ou para trás.Move your mouse to move the hand and scroll with your mouse wheel to move the hand forwards or backwards.
  • Clique com o botão esquerdo do mouse para pinçar, clique no botão do meio do mouse para cutucar.Click the left mouse button to pinch, click the middle mouse button to poke.

Mãos simuladas no visor

Tente usar as mãos simuladas para pegar, mover e posicionar o rei branco do xadrez e manipular o tabuleiro!Try using the simulated hands to pick up, move, and set down the white chess king and manipulate the board! Experimente com a interação próxima e à distância. Observe que, quando as mãos ficam próximas o suficiente para pegar o quadro e o rei diretamente, o raio de mão desaparece e é substituído por um cursor na ponta do dedo indicador.Experiment with both near and far interaction - notice that when your hands get close enough to grab the board and king directly, the hand ray disappears and is replaced with a finger cursor at the tip of the index finger.

Você pode obter mais informações sobre o recurso de mãos simuladas fornecido pelo plug-in Ferramentas de UX do MRTK na documentação.You can find more information about the simulated hands feature provided by the MRTK UX Tools plugin in the documentation.

Agora que suas mãos virtuais podem interagir com objetos, você está pronto para passar para o próximo tutorial e adicionar interfaces do usuário e eventos.Now that your virtual hands can interact with objects, you're ready to move on to the next tutorial and add user interfaces and events.

Próxima seção: 5. Como adicionar um botão e redefinir locais de peçasNext Section: 5. Adding a button & resetting piece locations