Este tutorial en video de Unity proporciona una guía de alto nivel sobre cómo crear interfaces de usuario de World Space utilizando UI Toolkit en Unity 6.2. Algunos de los pasos clave que aprenderás incluyen:
- Los fundamentos para configurar el proyecto y abrir UI Builder
- Guardado de tu primer documento UXML
- Cómo crear una interfaz de usuario flexible y mantenible mediante la creación y aplicación de hojas de estilo (archivos USS) y clases de estilo reutilizables
El tutorial Unity 6.2 de UI Toolkit también cubre un ejemplo práctico para mejorar la interacción del usuario mediante la implementación de efectos de desplazamiento personalizados en los botones mediante pseudoclases.
Por último, muestra el flujo de trabajo completo para integrar la interfaz de usuario (UI) en una escena 3D mediante la configuración de un UI Document y su Panel Settings asociado para el renderizado de World Space. Esto da como resultado un menú que existe físicamente dentro del entorno del juego.
FAQ
¿Cómo puedo empezar a usar UI Builder?
Para comenzar a crear una interfaz de usuario, abre la ventana UI Builder y guarda tu trabajo como asset UXML. Este archivo almacenará la estructura y jerarquía de tus elementos de la interfaz de usuario (UI).
Sigue estos pasos para comenzar:
1. En el menú principal de Unity Editor, ve a UI Builder: Window > UI Toolkit > UI Builder
2. Una vez abierta la ventana UI Builder, guarda tu nuevo UI Document. Ve a File > Save As... en el menú UI Builder.
3. Elige una ubicación en tu proyecto y guarda el archivo. Esto crea el asset .uxml que utilizarás como origen para tu interfaz de usuario en la escena.
Puedes ver este ejemplo en acción yendo directamente a estas secciones en el video:
(1:10) - Abrir la ventana UI Builder
(1:23) - Guardar el archivo UXML
Si quieres obtener más información sobre UI Builder, consulta la página Unity Documentation.
¿Cómo aplico estilos uniformes a varios elementos de la interfaz de usuario?
La forma más eficiente de mantener una apariencia uniforme en toda tu interfaz de usuario es mediante el uso de hojas de estilo, que funcionan de manera muy similar a las CSS en el desarrollo web. Este enfoque separa el estilo de la estructura, lo que facilita la administración de la interfaz de usuario (UI).
El sistema consta de tres partes clave:
- Hoja de estilos (archivo .uss): Crea una nueva hoja de estilos en UI Builder y adjúntala a tu contenedor de interfaz de usuario principal. Este archivo mantendrá todas tus reglas de estilo.
- Clases de estilo: Para crear un estilo reutilizable, selecciona un elemento visual en UI Builder. En el Inspector de la lista de clases de estilo, escriba un nuevo nombre de clase (p. ej., "botón de menú") y añádalo a la lista.
- Reusabilidad: Ahora puedes asignar esta misma clase de estilo a cualquier otro elemento de la interfaz de usuario (UI). Todos los elementos que comparten una clase heredarán automáticamente sus propiedades definidas, lo que garantiza una apariencia uniforme. Cualquier cambio realizado en la clase de estilo actualizará todos los elementos asignados de forma simultánea.
Puedes ver este ejemplo en acción yendo directamente a estas secciones en el video:
(2:18) - Creación de una nueva hoja de estilos
(2:57) - Creación de una nueva clase de estilo
(3:07) - Creación de un nuevo selector USS a partir de la clase
(3:43) - Explicación de cómo los cambios en una clase de estilo afectan todos los elementos asignados
Si quieres obtener más información sobre cómo darle estilo a tu interfaz de usuario con Unity Style Sheet (USS), consulta la página Unity Documentation.
¿Cómo puedo crear efectos Hover personalizados para los botones?
Puedes crear efectos flotantes personalizados y otros estilos interactivos con pseudoclases de USS. La pseudoclase :hover te permite definir un conjunto específico de estilos que se aplican solo cuando el cursor de un usuario está sobre un elemento.
Para implementar un efecto Hover personalizado para un botón estándar Unity, sigue estos pasos:
1. En UI Builder, selecciona un botón para ver sus clases de estilo predeterminadas en el Inspector. La clase de botón estándar es Unity.
2. Haz doble clic en la clase de botones Unity para agregar su selector a tu hoja de estilos. Esto te permite modificar la apariencia predeterminada del botón, por ejemplo, hacerlo parcialmente transparente.
3. Para crear un nuevo selector en tu hoja de estilos, agrega la pseudoclase :hover a la clase original: .Unity:hover
4. Con el nuevo selector :hover activo, define los estilos que deseas para el estado hover, como cambiar el color de fondo para que sea totalmente opaco. La interfaz de usuario (UI) ahora cambiará automáticamente entre estos estilos durante los eventos de mouseover.
Puedes ver este ejemplo en acción yendo directamente a estas secciones en el video:
(6:29) - Introducción a las pseudoclases
(6:54) - Cómo encontrar la clase predeterminada de estilo de botón .Unity
(7:24) - Creación del selector de pseudoclase :hover
(7:39) - Demostración del efecto de vuelo estacionario final
Si quieres obtener más información sobre las pseudoclases, consulta la página Unity Documentation.
¿Cómo agrego un elemento de UI Toolkit a mi escena como objeto de World Space?
Unity 6.2 mejora UI Toolkit con la capacidad de renderizar los elementos de la interfaz de usuario directamente en World Space. Este proceso implica utilizar una UI Document y un GameObject para alojar tu asset UXML en la escena.
Sigue esta secuencia para crear una interfaz de usuario de World Space:
1. En la ventana Hierarchy, haz clic derecho y selecciona UI Toolkit > UI Document. Esto crea un nuevo GameObject en tu escena.
2. Selecciona el nuevo GameObject UI Document. En el Inspector, busca el campo Source Asset y asígnale el archivo .uxml guardado.
3. Haz clic en el asset Panel Settings asociado con UI Document. Esto resaltará el asset en la ventana Project.
4. Selecciona el asset Panel Settings para ver sus propiedades en el Inspector. Cambiar el Render Mode del Screen Space predeterminado al World Space.
5. Después de cambiar a World Space, puedes ajustar el componente RectTransform del UI Document GameObject para posicionar, girar y modificar la escala del plano de la interfaz de usuario dentro de tu escena 3D.
Puedes ver este ejemplo en acción yendo directamente a estas secciones en el video:
(7:49) - Crear una UI Document en la escena
(7:59) - Asignación del asset de origen UXML
(8:08) - Acceder a la configuración del panel
(8:23) - Cambiar al modo de renderizado de World Space
(8:58) - Demostración de la interfaz de usuario final de World Space
Si quieres obtener más información sobre World Space UI, consulta la página Unity Documentation.
