6. Creación de interfaces de usuario6. Creating user interfaces

En este tutorial, obtendrá información sobre cómo crear una interfaz de usuario sencilla con los elementos prefabricados de botón y menú de MRTK junto con el componente TextMeshPro de Unity.In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. También aprenderá a configurar los botones para desencadenar eventos y agregar elementos dinámicos de información sobre herramientas en la interfaz de usuario para proporcionar a los usuarios información adicional.You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

ObjetivosObjectives

  • Aprender a organizar los botones de una colecciónLearn how to organize buttons in a collection
  • Aprender a usar los elementos prefabricados de menú de MRTKLearn how to use MRTK's menu prefabs
  • Aprender a interactuar con hologramas mediante botones y elementos de la interfaz de usuarioLearn how to interact with holograms using UI menus and buttons
  • Aprender a agregar elementos de textoLearn how to add text elements
  • Aprender a generar información sobre herramientas en objetos dinámicamenteLearn how to spawn tooltips on objects dynamically

Creación de un panel estático de botonesCreating a static panel of buttons

En la ventana Hierarchy (Jerarquía), haga clic con el botón derecho en el objeto RoverExplorer y seleccione Create Empty ( Crear vacío)para agregar un objeto vacío como elemento secundario de RoverExplorer, asigne el nombre Buttons al objeto y configure el componente Transform (Transformación) como se indica a continuación:In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • Posición: X = 0.6, Y = 0.036, Z = 0.5Position: X = -0.6, Y = 0.036, Z = -0.5
  • Rotación: X = 90, Y = 0, Z = 0Rotation: X = 90, Y = 0, Z = 0
  • Escala: X = 1, Y = 1, Z = 1Scale: X = 1, Y = 1, Z = 1

Unity con el objeto Buttons recién creado seleccionado y colocado

En la ventana Project (Proyecto), vaya a la carpeta Assets > MRTK.Tutorials.GettingStarted > Prefabs, haga clic y arrastre el elemento prefabricado PressableRoundButton sobre el objeto Buttons y, a continuación, haga clic con el botón derecho en PressableRoundButton, seleccione Duplicate (Duplicar) para crear una copia y repita el proceso hasta que tenga un total de tres objetos PressableRoundButton:In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

Unity con los objetos prefabricados PressableRoundButton recién agregados

En la ventana Hierarchy (Jerarquía), seleccione el objeto Buttons y, a continuación, en la ventana Inspector, use el botón Add Component (Agregar componente) para agregar el componente GridObjectCollection y configúrelo del modo siguiente:In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • Tipo de orden: Orden secundarioSort Type: Child Order
  • Diseño: HorizontalLayout: Horizontal
  • Ancho de celda: 0.2Cell Width: 0.2
  • Ancla: Centro a la izquierdaAnchor: Middle Left

A continuación, haga clic en el botón Update Collection (Actualizar colección) para actualizar la posición de los objetos secundarios del objeto Buttons:Then click the Update Collection button to update the position of the Buttons object's child objects:

Objeto Buttons de Unity con el componente GridObjectCollection agregado, configurado y aplicado

En la ventana Hierarchy (Jerarquía), asigne el nombre Hints, Explode y Reset a los botones.In the Hierarchy window, name the buttons Hints, Explode, and Reset.

Para cada botón, seleccione el objeto secundario SeeItSayItLabel > TextMeshPro y, a continuación, en la ventana Inspector, cambie el texto del componente TextMeshPro - Text respectivo para que coincida con los nombres de los botones:For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

Unity con etiquetas de texto de botón configuradas

Una vez hecho esto, contraiga los objetos secundarios del objeto Buttons.Once done, collapse the Buttons object's child objects.

En la ventana Hierarchy (Jerarquí)a, seleccione el objeto del botón Hints y, a continuación, en la ventana Inspector, configure el evento Interactable.OnClick () de la siguiente manera:In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Asigne el objeto RoverAssembly al campo None (Object) (Ninguno [objeto]).Assign the RoverAssembly object to the None (Object) field
  • En la lista desplegable No function (Ninguna función), seleccione PlacementHintsController > TogglePlacementHints () para establecer esta función como la acción que se va a ejecutar cuando se desencadene el evento.From the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Unity con el evento OnClick del objeto de botón Hints configurado

Sugerencia

El componente Interactable es un contenedor todo en uno que hace que se puede interactuar fácilmente con cualquier objeto y que este tenga capacidad de respuesta a las entradas.The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Interactable actúa como una instrucción comodín para todos los tipos de entradas como, por ejemplo, entradas táctiles, haces de mano, voz, etc., y canaliza estas interacciones en eventos y respuestas de tema visual.Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. Para aprender a configurarlo para diferentes tipos de entrada y personalizar su tema visual, puede consultar la guía sobre Interactable en el Portal de documentación de MRTK.To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

En la ventana Hierarchy (Jerarquía), seleccione el objeto del botón Explode y, a continuación, en la ventana Inspector, configure el evento OnClick () de la siguiente manera:In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Asigne el objeto RoverAssembly al campo None (Object) (Ninguno [objeto]).Assign the RoverAssembly object to the None (Object) field
  • En la lista desplegable No function (Ninguna función), seleccione ExplodedViewController > ToggleExplodedView () para establecer esta función como la acción que se va a ejecutar cuando se desencadene el evento.From the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Unity con el evento OnClick del objeto de botón Explode configurado

Presione el botón Play (Reproducir) para entrar en el modo de juego y, a continuación, mantenga presionada la barra espaciadora para activar la mano y use el mouse para presionar el botón Hints para activar y desactivar la visibilidad de los objetos de sugerencia de colocación:Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

Vista dividida del modo de reproducción de Unity con el botón Hints presionado

y el botón Explode para activar y desactivar la vista seccionada:and the Explode button to toggle the exploded view on and off:

Vista dividida del modo de reproducción de Unity con el botón Explode presionado

Creación de un menú dinámico que sigue al usuarioCreating a dynamic menu that follows the user

En la ventana Proyecto, vaya a la carpeta Recursos > MRTK > SDK > Características > Experiencia del usuario > Prefabs (Elementos prefabricados) > Menús, haga clic y arrastre el elemento prefabricado NearMenu4x1 en la ventana Jerarquía, establezca su posición de transformación en X = 0, Y = -0.4, Z = 0 y configúrelo de la forma siguiente:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • Compruebe que el Tracked Target Type (Tipo de objetivo de seguimiento) del componente SolverHandler esté establecido en Head (Cabeza).Verify that the SolverHandler component's Tracked Target Type is set to Head
  • Marque la casilla junto al componente RadialView del solucionador para que esté habilitado de forma predeterminadaCheck the checkbox next to the RadialView Solver component so it is enabled by default

Unity con el objeto prefabricado Menu recién agregado seleccionado

En la ventana Hierarchy (Jerarquía), cambie el nombre del objeto a Menu y, a continuación, expanda el objeto secundario ButtonCollection para mostrar los cuatro botones:In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Unity con el objeto Menu seleccionado y el objeto ButtonCollection expandido

Cambie el nombre del primer botón por Indicator y, a continuación, en la ventana Inspector, configure el componente Button Config Helper (Script) (Asistente de configuración del botón [script]) de la siguiente manera:Rename the first button to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Cambie el texto de la etiqueta principal para que coincida con el nombre del botón.Change the Main Label Text to match the name of the button
  • Asigne el objeto Indicator al campo None (Object) (Ninguno [objeto]).Assign the Indicator object to the None (Object) field
  • En la lista desplegable No Function (Ninguna función), seleccione GameObject > SetActive (bool) para establecer esta función como la acción que se va a ejecutar cuando se desencadene el evento.From the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • Compruebe que la casilla del argumento esté activada.Verify that the argument checkbox is checked
  • Cambie el icono al icono de "búsqueda".Change the Icon to the 'search' icon

Unity con el objeto de botón Indicator con Button Config Helper configurado

En la ventana Jerarquía, seleccione el objeto Indicador y, a continuación, en la ventana del Inspector:In the Hierarchy window, select the Indicator object, then in the Inspector window:

  • Desactive la casilla situada junto a su nombre para que esté inactivo de forma predeterminada.Uncheck the checkbox next to its name to make it inactive by default
  • Use el botón Agregar componente para agregar el componente Controlador del indicador de dirección (Script) .Use the Add Component button to add the Directional Indicator Controller (Script) component

Unity con el objeto Indicator seleccionado, deshabilitado, y el componente DirectionalIndicatorController agregado

Nota

Ahora, cuando se inicia la aplicación, el objeto Indicator está deshabilitado de forma predeterminada y se puede habilitar presionando el botón Indicator.Now, when the app starts, the Indicator is disabled by default and can be enabled by pressing the Indicator button.

Cambie el nombre del segundo botón por TapToPlace y, a continuación, en la ventana Inspector, configure el componente Button Config Helper (Script) (Asistente de configuración del botón [script]) de la siguiente manera:Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Cambie el texto de la etiqueta principal para que coincida con el nombre del botón.Change the Main Label Text to match the name of the button
  • Asigne el objeto RoverExplorer > RoverAssembly al campo None (Object) (Ninguno [objeto]).Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • En la lista desplegable No Function (Ninguna función), seleccione TapToPlace > bool Enabled para actualizar el valor de esta propiedad cuando se desencadene el evento.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Compruebe que la casilla del argumento esté activada.Verify that the argument checkbox is checked
  • Cambie el icono al icono de "mano con rayo".Change the Icon to the 'hand with ray' icon

Unity con el objeto de botón TapToPlace con Button Config Helper configurado

En la ventana Jerarquía, seleccione el objeto RoverAssembly y, a continuación, en la ventana Inspector, configure el componente Tap To Place (Script) (Pulsar para colocar [Script]) del modo siguiente:In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • Desactive la casilla situada junto a su nombre para que esté inactivo de forma predeterminada.Uncheck the checkbox next to its name to make it inactive by default
  • En la sección del evento On Placing Stopped () , haga clic en el icono + para agregar un nuevo evento:In the On Placing Stopped () event section, click the + icon to add a new event:
  • Asigne el objeto RoverExplorer > RoverAssembly al campo None (Object) (Ninguno [objeto]).Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • En la lista desplegable No Function (Ninguna función), seleccione TapToPlace > bool Enabled para actualizar el valor de esta propiedad cuando se desencadene el evento.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Compruebe que la casilla del argumento esté desactivada.Verify that the argument checkbox is unchecked

Unity con el componente TapToPlace reconfigurado

Nota

Ahora, cuando se inicia la aplicación, la funcionalidad Tap to Place (Tocar para colocar) está deshabilitada de forma predeterminada y se puede habilitar presionando el botón Tap to Place.Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. Además, cuando se complete la acción de tocar para colocar, se deshabilitará.Additionally, when the tap to place is completed, it will disable itself.

Agregación de texto a la escenaAdding text to the scene

En la ventana Hierarchy (Jerarquía), haga clic con el botón derecho en el objeto Table (Tabla) y seleccione 3D Object > Text - TextMeshPro (Objeto 3D > Texto - TextMeshPro) para agregar un objeto de texto como elemento secundario del objeto Table y, a continuación, en la ventana Inspector, configure el componente Rect Transform (Transformación rectangular) como se indica a continuación:In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • Cambie Pos Y (Posición Y) a 1.Change Pos Y to 1
  • Cambie Width (Ancho) a 1.Change Width to 1
  • Cambie Height (Altura) a 1.Change Height to 1
  • Cambie Rotation X (Rotación X) a 90.Change Rotation X to 90

Unity con el objeto TextMeshPro recién creado seleccionado

A continuación, configure el componente TextMeshPro - Text como se indica a continuación:Then configure the TextMeshPro - Text component as follows::

  • Cambie Text (Texto) a Rover Explorer.Change Text to Rover Explorer
  • Cambie Font Style (Estilo de fuente) a Bold (Negrita).Change Font Style to Bold
  • Cambie Font Size (Tamaño de fuente) a 1.Change Font Size to 1
  • Cambie Extra Settings > Margins (Configuración adicional > Márgenes) a 0.03.Change Extra Settings > Margins to 0.03

Unity con el componente TextMeshPro configurado

Agregación de información sobre herramientasAdding tooltips

En la ventana Project (Proyecto), vaya a la carpeta Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip para buscar los objetos prefabricados de información sobre herramientas:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

Ventana Project (Proyecto) de Unity con la carpeta ToolTips seleccionada

En la ventana Hierarchy (Jerarquía), expanda el objeto RoverExplorer > RoverParts y seleccione todos los objetos secundarios de partes, y, a continuación, en la ventana Inspector, use el botón Add Component (Agregar componente) para agregar el componente ToolTipSpawner y configúrelo de la forma siguiente:In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • Asegúrese de que la casilla de verificación Focus enabled (Enfoque habilitado) está activada para requerir que el usuario mire la parte para que aparezca la información sobre herramientas.Ensure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • Asigne el elemento prefabricado Simple Line ToolTip (Información sobre herramientas de línea simple) desde la ventana Project (Proyecto) al campo Tool Tip Prefab (Elemento prefabricado de información de herramientas).Assign the Simple Line ToolTip prefab from the Project window to the Tool Tip Prefab field
  • Cambie ToolTip Override Settings > Settings Mode (Configuración de invalidación de información sobre herramientas > Modo de configuración) a Override (Invalidar).Change the ToolTip Override Settings > Settings Mode to Override
  • Cambie ToolTip Override Settings > Manual Pivot Local Position Y (Configuración de invalidación de información sobre herramientas > Posición Y local del pivote manual) a 1.5.Change the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

Unity con todos los objetos de partes del róver seleccionados y el componente ToolTipSpawner agregado y configurado

En la ventana Hierarchy (Jerarquía), seleccione la primera parte del rover, RoverParts > Camera_Part y configure el componente ToolTipSpawner como se indica a continuación:In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • Cambie Tool Tip Text para reflejar el nombre de la parte; por ejemplo, Camera.Change Tool Tip Text to reflect the name of the part, i.e., Camera

Unity con ToolTipText Camera configurado

Repita este paso para cada uno de los objetos de parte del rover para configurar el componente ToolTipSpawner como se indica a continuación:Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Para Generator_Part, cambie Tool Tip Text a Generator.For the Generator_Part, change the Tool Tip Text to Generator
  • Para Lights_Part, cambie Tool Tip Text a Lights.For the Lights_Part, change the Tool Tip Text to Lights
  • Para UHFAntenna_Part, cambie Tool Tip Text a UHF Antenna.For the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Para Spectrometer_Part, cambie Tool Tip Text a Spectrometer.For the Spectrometer_Part, change the Tool Tip Text to Spectrometer

Presione el botón Play (Reproducir) para entrar en el modo de juego y, a continuación, mantenga presionado el botón derecho del mouse mientras mueve el mouse hasta que la mirada entre en contacto con una de las partes y la información sobre herramientas de la parte se mostrará:Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

Vista dividida del modo de reproducción de Unity con información sobre herramientas desencadenada por la mirada

EnhorabuenaCongratulations

En este tutorial, aprendió a crear una interfaz de usuario sencilla con los elementos prefabricados de botón y menú proporcionados por MRTK junto con el componente TextMeshPro de Unity y a configurar los botones para desencadenar eventos cuando se presionan.In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. También ha aprendido a agregar elementos dinámicos de información sobre herramientas en la interfaz de usuario para proporcionar información adicional al usuario.You also learned how to add dynamic tooltip UI elements to provide the user with additional information.

Tutorial siguiente: 7. Interacción con objetos 3DNext Tutorial: 7. Interacting with 3D objects