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

No tutorial anterior, você adicionou um ARSession, um Peão e um 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, as peças de xadrez serão movidas pela entrada do usuário.By the end of this section, your chess pieces will be moving by user input.

ObjetivosObjectives

  • Instalar o plug-in de Ferramentas de Experiência de Usuário de Realidade Misturada do GitHubInstalling the Mixed Reality UX Tools plugin from GitHub
  • 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

Baixar o plug-in das Ferramentas de Experiência de Usuário do Kit de Ferramentas de Realidade MisturadaDownloading the Mixed Reality 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. Na página de versões das Ferramentas de Experiência de Usuário de Realidade Misturada no GitHub, navegue até a versão v0.10.0 das Ferramentas de Experiência de Usuário para Unreal e baixe o UXTools.0.10.0.zip.On the Mixed Reality UX Tools releases page on GitHub, navigate to the UX Tools for Unreal v0.10.0 release and download UXTools.0.10.0.zip. Descompacte o arquivo.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 de UXTools fornece uma pasta Conteúdo com subpastas para componentes, incluindo Botões, Simulação de Entrada e Ponteiros, bem como uma pasta Classes C++ com um código adicional.The UXTools plugin has a Content folder with subfolders for components, including Buttons, Input Simulation, and Pointers, and a C++ Classes folder with additional code.

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

Encontre a documentação adicional do plug-in no repositório GitHub das Ferramentas de Experiência de Usuário de Realidade Misturada.Additional plugin documentation can be found on the Mixed Reality UX Tools GitHub repository.

Com o plug-in instalado, 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 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 da mão com elementos de Experiência de Usuário é feita com Atores de Interação da Mão, que criam e orientam os ponteiros e os visuais para interações próximas e distantes.Hand interaction with UX elements is done with Hand Interaction Actors, which create and drive the pointers and visuals for near and far interactions.

  • Interações próximas: pinçar os elementos entre o dedo indicador e o polegar ou cutucá-los com a ponta do dedo.Near interactions - pinching elements between index finger and thumb or by poking them with a fingertip.
  • Interações distantes: apontar um raio da mão virtual para um elemento e pressionar o indicador e o polegar juntos.Far interactions - 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.

Recomendamos ler a documentação sobre interações das mãos antes de prosseguir.We recommend reading 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. Gere 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 nesse caso, pois as Ferramentas de Experiência de Usuário farão com que os Atores de Interação da Mão passem para as mãos virtuais assim que elas estiverem visíveis.The initial transform doesn’t matter in this case because UX Tools will have the Hand Interaction Actors will jump to the virtual hands as soon as they're visible. 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. Selecione a seta para baixo na parte inferior de ambos os nós SpawnActor para revelar o marcador Proprietário.Select 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 self e selecione a variável Obter uma referência a self.Search for self and select the Get a reference to self variable.
    • Crie um vínculo entre o nó de referência do objeto Self e o outro marcador Proprietário do Ator de Interação da Mão.Create a link between the Self object reference node and the other Hand Interaction Actor’s Owner pin.
  3. Por fim, marque a caixa Mostrar o Cursor Próximo aos Destinos de Captura para os Atores de Interação da Mão.Lastly, check the Show Near Cursor on Grab Targets box for both Hand Interaction Actors. Um cursor será exibido no destino de captura, à medida que o seu dedo indicador se aproximar, de modo que você possa ver em que local o dedo é relativo ao destino.A cursor should appear on the grab target as your index finger gets close, so you can see where your finger is relative to the target.

    • 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 a fim de tornar o Blueprint mais legível.Make 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

Encontre mais informações sobre os Atores de Interação da Mão na documentação das Ferramentas de Experiência de Usuário.You can find more information about Hand Interaction Actors in the UX Tools 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.

Encontre mais informações sobre os Componentes do Manipulador fornecidos no plug-in das Ferramentas de Experiência de Usuário de Realidade Misturada na documentação.You can find more information about the Manipulator Components provided in the Mixed Reality 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. Clique em Jogar na Janela principal e você verá duas mãos de malha com raios se estendendo da palma de cada mão.Press Play in the Main Window and you'll see two mesh hands with 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.
  • Use o botão esquerdo do mouse para pinçar e o botão do meio do mouse para cutucar.Use the left mouse button to pinch and the middle mouse button to poke.

Observação

A simulação de entrada poderá não funcionar se você tiver vários headsets conectados a seu PC.Input simulation may not work if you have multiple headsets plugged into your PC. Se você estiver com problemas, experimente desconectar os outros headsets.If you're having issues, try unplugging your other headsets.

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! Faça experimentos com a interação próxima e distante. Observe que, quando as mãos ficam próximas o suficiente para pegar o tabuleiro e o rei diretamente, um cursor na ponta do dedo indicador substitui o raio de mão.Experiment with both near and far interaction - notice that when your hands get close enough to grab the board and king directly, a finger cursor at the tip of the index finger replaces the hand ray.

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