5. Adición de un botón y restablecimiento de la ubicación de las piezas5. Adding a button & resetting piece locations

En el tutorial anterior, agregó actores de interacción manual a los componentes Peón y Manipulador en el tablero de ajedrez para que fueran interactivos.In the previous tutorial, you added Hand Interaction Actors to the Pawn and Manipulator components to the chess board to make them both interactive. En esta sección, seguirá usando el complemento UX Tools de Mixed Reality Toolkit para crear la aplicación de ajedrez con nuevas funciones y referencias de actor en los planos técnicos.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. Al final de esta sección, estará listo para empaquetar e implementar la aplicación de realidad mixta en un dispositivo o 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

  • Adición de un botón interactivoAdding an interactive button
  • Creación de una función para restablecer la ubicación de las piezasCreating a function to reset a pieces' location
  • Enlace del botón para que desencadene la función cuando se presioneHooking the button up to trigger the function when pressed

Creación de una función de restablecimientoCreating a reset function

La primera tarea consiste en crear un plano técnico de función que reestablezca una pieza de ajedrez a su posición original en la escena.Your first task is to create a function blueprint that resets a chess piece to its original position in the scene.

  1. Abra WhiteKing, seleccione el icono + situado junto a la sección Funciones de Mi plano técnico y asígnele el nombre Reset Location.Open WhiteKing, select the + icon next to the Functions section in the My Blueprint and name it Reset Location.

  2. Arrastre la ejecución desde Reset Location y suéltela en la cuadrícula del plano técnico para crear un nodo SetActorRelativeTransform.Drag and release the execution from Reset Location on the Blueprint grid to create a SetActorRelativeTransform node.

    • Esta función define la transformación (ubicación, rotación y escala) de un actor en relación con su elemento principal.This function sets the transform (location, rotation, and scale) of an actor relative to its parent. Usará esta función para restablecer la posición del rey en el tablero, incluso si la posición original del tablero ha cambiado.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. Haga clic con el botón derecho en el gráfico de eventos, seleccione Make Transform (Realizar transformación) y cambie su Location (Ubicación) a X =-26, Y = 4, Z = 0.Right-click inside the Event Graph, select Make Transform, and change its Location to X = -26, Y = 4, Z = 0.

    • Conecte su Return Value (Valor devuelto) a la marca de New Relative Transform (Nueva transformación relativa) en SetActorRelativeTransform.Connect its Return Value to the New Relative Transform pin in SetActorRelativeTransform.

Función Reset Location (Restablecer ubicación)

Compile y guarde el proyecto antes de volver a la ventana principal.Compile and Save the project before returning to the Main window.

Agregar un botónAdding a button

Ahora que la función está configurada correctamente, la siguiente tarea consiste en crear un botón que la desencadene cuando se toque.Now that the function is set up correctly, your next task is to create a button that fires it off when touched.

  1. Haga clic en Agregar nuevo > Clase de plano técnico, expanda la sección Todas las clases y busque UxtPressableButtonActor.Click Add New > Blueprint Class, expand the All Classes section, and search for UxtPressableButtonActor.
    • Asigne a este botón el nombre ResetButton y haga doble clic para abrir el plano técnico.Name it ResetButton and double click to open the Blueprint

Subclase del nuevo plano técnico del botón de estilo HoloLens 2

  1. Asegúrese de que la opción ResetButton(self) está seleccionada en el panel Componentes.Ensure ResetButton(self) is selected in the Components panel. En el panel Detalles, desplácese hasta la sección Botón.In the Details panel, navigate to the Button section. Cambie la opción predeterminada de Etiqueta del botón a "Restablecer", expanda la sección Pincel de icono del botón y presione el botón Abrir editor del pincel de icono.Change the default Button Label to "Reset", expand the Button Icon Brush section, and press the Open Icon Brush Editor button.

Establecimiento de la etiqueta y el icono en el botón

Se abrirá el editor de pincel de icono, que puede usar para seleccionar un nuevo icono para el botón.The Icon Brush Editor will open, which you can use to select a new icon for your button.

Selección de un icono para el botón

Hay muchas otras opciones de configuración que puede ajustar para configurar el botón.There are plenty of other settings you can adjust to configure your button. Para obtener más información acerca del componente UXT Pressable Button, consulte la documentación.To learn more about the UXT Pressable Button component, check out the documentation.

  1. Haga clic en ButtonComponent (heredado) en el panel Componentes y desplácese hacia abajo en el panel Detalles hasta la sección Eventos.Click ButtonComponent (Inherited) in the Components panel and scroll down the Details panel to the Events section.
    • Haga clic en el botón verde + situado junto a On Button Pressed (Al presionar un botón) para agregar un evento al gráfico de eventos, que se llamará cuando se presione el botón.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.

Desde aquí, llamará a la función Reset Location de WhiteKing, que necesita una referencia al actor WhiteKing en el nivel.From here, you’ll want to call WhiteKing’s Reset Location function, which needs a reference to the WhiteKing Actor in the Level.

  1. En el panel Mi plano técnico, vaya a la sección Variables, haga clic en el botón + y asigne a la variable el nombre WhiteKing.In the My Blueprint panel, navigate to the Variables section, click the + button, and name the variable WhiteKing.
    • En el panel Details (Detalles), seleccione la lista desplegable situada junto a Variable Type (Tipo de variable), busque WhiteKing y seleccione Object Reference (Referencia de objetos).In the Details panel, select the dropdown next to Variable Type, search for WhiteKing, and select the Object Reference.
    • Active la casilla situada junto a instancia editable, que permite establecer la variable desde el nivel principal.Check the box next to Instance Editable, which allows the variable to be set from the Main Level.

Crear una variable

  1. Arrastre la variable de WhiteKing desde My Blueprint > Variables (Mi plano técnico > Variables) hasta el gráfico de eventos del botón de restablecimiento y elija Get WhiteKing (Obtener WhiteKing).Drag the WhiteKing variable from My Blueprint > Variables onto the Reset Button Event Graph and choose Get WhiteKing.

Activación de la funciónFiring the function

Lo único que queda es activar oficialmente la función de restablecimiento cuando se presiona el botón.All that's left is to officially fire off the reset function when the button is pressed.

  1. Arrastra la marca de salida de WhiteKing y suéltala para colocar un nodo nuevo.Drag the WhiteKing output pin and release to place a new node. Selecciona la función Reset Location (Restaurar ubicación).Select the Reset Location function. Por último, arrastra la marca de ejecución de salida de On Button Pressed (Al presionar un botón) a la marca de ejecución de entrada de Reset Location (Restablecer ubicación).Finally, drag the outgoing execution pin from On Button Pressed to the incoming execution pin on Reset Location. Compila y guarda el plano técnico ResetButton y, a continuación, vuelve a la ventana principal.Compile and Save the ResetButton Blueprint, then return to the Main window.

Llamar a la función Reset Location (Restablecer ubicación) desde On Button Pressed (Al presionar un botón)

  1. Arrastre ResetButton a la ventanilla y establezca su ubicación en X = 50, Y =-25 y Z = 10.Drag ResetButton into the viewport and set its location to X = 50, Y = -25, and Z = 10. Establezca su rotación en Z = 180.Set its rotation to Z = 180. En Default (Valor predeterminado), establezca el valor de la variable WhiteKing en WhiteKing.Under Default, set the value of the WhiteKing variable to WhiteKing.

Definir la variable

Ejecute la aplicación, mueva la pieza de ajedrez a una nueva ubicación y presione el botón de estilo HoloLens 2 para ver la lógica de restablecimiento en acción.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!

Ahora tiene una aplicación de realidad mixta con un tablero y una pieza de ajedrez interactivos, así como un botón totalmente funcional que restablece la ubicación de la pieza.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. Puede encontrar la aplicación completada hasta este momento en su repositorio de GitHub.You can find the completed app up to this point in its GitHub repo. No dude en profundizar más allá de este tutorial y configurar el resto de las piezas de ajedrez de modo que se restablezca todo el tablero cuando se presione el botón de restablecimiento.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.

Escena final en la ventanilla

Está listo para pasar a la sección final de este tutorial, donde aprenderá a empaquetar e implementar la aplicación en un dispositivo o 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

En este punto, debe actualizar el proyecto con la configuración de rendimiento de Unreal recomendada antes de implementar la aplicación en un dispositivo o emulador.At this point, you should update your project with the recommended Unreal performance settings before deploying your application to a device or emulator.

Sección siguiente: 6. Empaquetado y implementación en el dispositivo o emuladorNext Section: 6. Packaging & deploying to device or emulator