4. Creación de escenas interactivas4. Making your scene interactive

En el tutorial anterior, agregó ARSession, un peón y un modo de juego para completar la configuración de la realidad mixta de la aplicación de ajedrez.In the previous tutorial, you added an ARSession, Pawn, and Game Mode to complete the mixed reality setup for the chess app. Esta sección se centra en el uso del complemento de código abierto UX Tools de Mixed Reality Toolkit, que proporciona herramientas para hacer que la escena sea interactiva.This section focuses on using the open source Mixed Reality Toolkit UX Tools plugin, which provides tools to make the scene interactive. Al final de esta sección, las piezas de ajedrez se moverán según la entrada del usuario.By the end of this section, your chess pieces will be moving by user input.

ObjetivosObjectives

  • Instalación del complemento UX Tools de Mixed Reality desde GitHubInstalling the Mixed Reality UX Tools plugin from GitHub
  • Adición de actores de interacción con la mano a las puntas de los dedosAdding Hand Interaction Actors to your fingertips
  • Creación y adición de manipuladores a objetos de la escenaCreating and adding Manipulators to objects in the scene
  • Uso de la simulación de entrada para validar el proyectoUsing input simulation to validate the project

Descarga del complemento UX Tools de Mixed RealityDownloading the Mixed Reality UX Tools plugin

Antes de empezar a trabajar con la entrada del usuario, debe agregar el complemento al proyecto.Before you start working with user input, you'll need to add the plugin to the project.

  1. En la página de versiones de UX Tools de Mixed Reality en GitHub, vaya a la versión v0.10.0 de UX Tools for Unreal y descargue 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. Descomprima el archivo.Unzip the file.

  2. Cree una nueva carpeta denominada Plugins en la carpeta del proyecto.Create a new folder called Plugins in the root folder of the project. Copie el complemento UXTools descomprimido en esta carpeta y reinicie el editor de Unreal.Copy the unzipped UXTools plugin into this folder and restart the Unreal editor.

Crear una carpeta de complementos del proyecto

  1. El complemento UXTools incluye una carpeta de contenido con subcarpetas para los componentes, como botones, la simulación de entrada y punteros, así como una carpeta de clases en C++ con 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.

Nota

Si no ve la sección UXTools Content (Contenido de UXTools) en Content Browser (Explorador de contenido), haga clic en View Options > Show Plugin Content (Opciones de vista > Mostrar contenido del complemento).If you don’t see the UXTools Content section in the Content Browser, click View Options > Show Plugin Content.

Mostrar el contenido del complemento

Puede encontrar documentación adicional sobre los complementos en el repositorio de GitHub de UX Tools de Mixed Reality.Additional plugin documentation can be found on the Mixed Reality UX Tools GitHub repository.

Una vez que el complemento esté instalado, estará listo para empezar a usar las herramientas que ofrece, comenzando por los actores de interacción con la mano.With the plugin installed, you're ready to start using the tools it has to offer, starting with hand interaction actors.

Generar actores de interacción con la manoSpawning Hand Interaction Actors

La interacción con la mano con elementos de la experiencia de usuario se realiza mediante actores de interacción con la mano, que crean y controlan los punteros y los objetos visuales para las interacciones cercanas y lejanas.Hand interaction with UX elements is done with Hand Interaction Actors, which create and drive the pointers and visuals for near and far interactions.

  • Las interacciones cercanas se llevan a cabo reduciendo los elementos entre los dedos índice y pulgar o bien tocándolos con la punta del dedo.Near interactions - pinching elements between index finger and thumb or by poking them with a fingertip.
  • Las interacciones lejanas se realizan apuntando un haz desde la mano virtual en un elemento y presionando los dedos índice y pulgar.Far interactions - pointing a ray from the virtual hand at an element and pressing index and thumb together.

En nuestro caso, la adición de un actor de interacción con la mano a MRPawn hará lo siguiente:In our case, adding a Hand Interaction Actor to MRPawn will:

  • Agregar un cursor a las puntas de los dedos índice del peón.Add a cursor to the tips of the Pawn’s index fingers.
  • Proporcionar eventos de entrada con la mano articulada que se pueden manipular a través del peón.Provide articulated hand input events that can be manipulated through the Pawn.
  • Permitir eventos de entrada de interacción lejana a través de haces de mano que se extienden desde las palmas de las manos virtuales.Allow far interaction input events through hand rays extending from the palms of the virtual hands.

Antes de continuar, se recomienda leer la documentación sobre las interacciones con la mano.We recommend reading through the documentation on hand interactions before continuing.

Cuando esté listo, abra el plano técnico MRPawn y vaya a Event Graph (Gráfico de eventos).Once you're ready, open the MRPawn Blueprint and go to the Event Graph.

  1. Arrastre la marca de ejecución de Event BeginPlay (Evento BeginPlay) y suéltela para colocar un nuevo nodo.Drag and release the execution pin from Event BeginPlay to place a new node.

    • Seleccione Spawn Actor from Class (Generar actor a partir de clase), haga clic en el menú desplegable situado junto a la marca de Class (Clase) y busque Uxt Hand Interaction Actor (Actor de interacción con la mano de UXT).Select Spawn Actor from Class, click the dropdown next to the Class pin and search for Uxt Hand Interaction Actor.
  2. Genere un segundo valor de Uxt Hand Interaction Actor (Actor de interacción con la mano de UXT), pero esta vez establezca la mano en Derecha.Spawn a second Uxt Hand Interaction Actor, this time setting the Hand to Right. Cuando se inicia el evento, se generará un actor de interacción con la mano de UXT en cada mano.When the event begins, a Uxt Hand Interaction Actor will be spawned on each hand.

Event Graph (Gráfico de eventos) debe coincidir con la captura de pantalla siguiente:Your Event Graph should match the following screenshot:

Generar actores de interacción con la mano de UXT

Ambos actores de interacción con la mano de UXT necesitan propietarios y ubicaciones de transformación inicial.Both Uxt Hand Interaction Actors need owners and initial transform locations. La transformación inicial no importa en este caso, ya que UX Tools hará que los actores de interacción con la mano salten a las manos virtuales en cuanto estén visibles.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. Sin embargo, la función SpawnActor requiere una entrada de transformación para evitar un error del compilador, por lo que se usarán los valores predeterminados.However, the SpawnActor function requires a Transform input to avoid a compiler error, so you'll use the default values.

  1. Arrastre una de las marcas de Spawn Transform (Generar transformación) y suéltela para colocar un nuevo nodo.Drag and release the pin off one of the Spawn Transform pins to place a new node.

    • Busque el nodo Make Transform (Realizar transformación) y, a continuación, arrastre Return Value (Valor devuelto) a Spawn Transform (Generar transformación) de la otra mano para que ambos nodos SpawnActor estén 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. Seleccione la flecha hacia abajo en la parte inferior de los nodos SpawnActor para revelar la marca Propietario.Select the down arrow at the bottom of both SpawnActor nodes to reveal the Owner pin.

    • Arrastra la marca de las marcas de Owner (Propietario) y suéltala para colocar un nuevo nodo.Drag the pin off one of the Owner pins and release to place a new node.
    • Busque propio y seleccione la variable Obtener una referencia a un elemento propio.Search for self and select the Get a reference to self variable.
    • Cree un vínculo entre el nodo de referencia de objetos propios y la marca del propietario del actor de interacción con la mano.Create a link between the Self object reference node and the other Hand Interaction Actor’s Owner pin.
  3. Por último, active el cuadro Mostrar el cursor cercano en los destinos de agarre de ambos actores de interacción con la mano.Lastly, check the Show Near Cursor on Grab Targets box for both Hand Interaction Actors. Al acercar el dedo índice, debería aparecer un cursor en el destino de agarre para poder ver dónde se encuentra el dedo en relación con el 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.

    • Compila, guarda y vuelve a la ventana principal.Compile, save, and return to the Main window.

Asegúrese de que las conexiones coinciden con la siguiente captura de pantalla, pero no dude en arrastrar los nodos para que el plano técnico sea más legible.Make sure the connections match the following screenshot, but feel free to drag around nodes to make your Blueprint more readable.

Completar la configuración del actor de interacción con la mano de UXT

Puede encontrar más información sobre los actores de interacción con la mano en la documentación de UX Tools.You can find more information about Hand Interaction Actors in the UX Tools documentation.

Ahora, las manos virtuales del proyecto tienen una forma de seleccionar objetos, pero todavía no pueden manipularlos.Now the virtual hands in the project have a way of selecting objects, but they still can't manipulate them. La última tarea antes de probar la aplicación es agregar componentes de manipulador a los actores de la escena.Your last task before testing the app is to add Manipulator components to the actors in the scene.

Asociación de manipuladoresAttaching Manipulators

Un manipulador es un componente que responde a la entrada con la mano articulada y se puede capturar, girar y trasladar.A Manipulator is a component that responds to articulated hand input and can be grabbed, rotated, and translated. Aplicar la transformación del manipulador a una transformación de actor permite la manipulación directa del actor.Applying the Manipulator’s transform to an Actors transform allows direct Actor manipulation.

  1. Abra el panel técnico Board (Tablero), haga clic en Add Component (Agregar componente) y busque Uxt Generic Manipulator (Manipulador genérico de UXT) en el panel Components (Componentes).Open the Board blueprint, click Add Component and search for Uxt Generic Manipulator in the Components panel.

Agregar un manipulador genérico

  1. Expanda la sección Generic Manipulator (Manipulador genérico) en el panel Details (Detalles).Expand the Generic Manipulator section in the Details panel. Puede establecer una manipulación con una o dos manos, el modo de rotación y el suavizado desde aquí.You can set one-handed or two-handed manipulation, rotation mode, and smoothing from here. No dudes en seleccionar los modos que quieras y, a continuación, compila y guarda el tablero.Feel free to select whichever modes you wish, then Compile and Save Board.

Establecer el modo

  1. Repita los pasos anteriores para el actor WhiteKing.Repeat the steps above for the WhiteKing Actor.

Puede encontrar más información sobre los componentes del manipulador proporcionados con el complemento UX Tools de Mixed Reality en la documentación.You can find more information about the Manipulator Components provided in the Mixed Reality UX Tools plugin in the documentation.

Prueba de la escenaTesting the scene

Buenas noticias para todos.Good news everyone! Está listo para probar la aplicación con sus nuevas manos virtuales y la entrada del usuario.You're ready to test out the app with its new virtual hands and user input. Presione Jugar en la ventana principal y verá dos manos de malla con haces que se extienden desde la palma de cada mano.Press Play in the Main Window and you'll see two mesh hands with rays extending from each hand’s palm. Puede controlar las manos y sus interacciones de la manera siguiente:You can control the hands and their interactions as follows:

  • Mantenga presionada la tecla Alt izquierda para controlar la mano izquierda y la tecla Mayús izquierda para controlar la mano derecha.Hold down the left Alt key to control the left hand and the left Shift key to control the right hand.
  • Mueva el ratón para mover la mano y desplácese con la rueda del mouse para mover la mano hacia adelante o hacia atrás.Move your mouse to move the hand and scroll with your mouse wheel to move the hand forwards or backwards.
  • Use el botón primario del mouse para reducir y el botón central del ratón para tocar.Use the left mouse button to pinch and the middle mouse button to poke.

Nota

Es posible que la simulación de entrada no funcione si tiene varios cascos conectados al equipo.Input simulation may not work if you have multiple headsets plugged into your PC. Si tiene problemas, pruebe a desconectar los otros casos.If you're having issues, try unplugging your other headsets.

Manos simuladas en la ventanilla

Pruebe a usar las manos simuladas para seleccionar, mover y colocar el rey blanco del ajedrez y manipular el tablero.Try using the simulated hands to pick up, move, and set down the white chess king and manipulate the board! Experimente con la interacción cercana y lejana: observe que, cuando las manos se acercan lo suficiente como para agarrar el tablero y el rey directamente, el haz de mano se reemplaza con un cursor en forma de dedo en la punta del índice.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.

Puede encontrar más información sobre la característica de manos simuladas que ofrece el complemento UX Tools de MRTK en la documentación.You can find more information about the simulated hands feature provided by the MRTK UX Tools plugin in the documentation.

Ahora que las manos virtuales pueden interactuar con objetos, está listo para pasar al siguiente tutorial y agregar interfaces de usuario y 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.

Sección siguiente: 5. Adición de un botón y restablecimiento de las ubicaciones de las piezasNext Section: 5. Adding a button & resetting piece locations