Unreal Motion Graphics (UMG) es una potente herramienta para crear interfaces de usuario (IU). Tanto si estás creando una simple ventana emergente como si quieres diseñar sistemas complejos de interfaz de usuario, comprender los conceptos básicos del trabajo en UMG te da la libertad de experimentar con esta potente herramienta.
Para llevar tus diseños de interfaz de usuario del papel al juego, debes comprender cómo construye UMG la interfaz de usuario. Para familiarizarte con los procesos de trabajo de creación de interfaces de usuario correctas, esta página se divide en las siguientes secciones:
Cómo diseñar sistemas de interfaz de usuario
Planificar el diseño de tu interfaz de usuario es clave para crear sistemas de interfaz de usuario atractivos y útiles. Piensa en:
El tipo de juego que estás creando.
El tipo de IU que se necesita para ayudar a los jugadores y hacer que el juego sea divertido y fácil de entender.
Cómo se verá la IU final.
Por ejemplo, en el HUD de Fortnite se muestra en la pantalla todo lo que el jugador debe entender sobre el juego, como la información relevante sobre salud y escudos para las estadísticas generales del juego.
Esboza las ideas de diseño de interfaz de usuario que tengas. Utiliza estos bocetos como guía para crear la interfaz de usuario en UMG.
Los enfoques básicos de diseño web pueden ayudarte a planificar la disposición de tu interfaz de usuario antes de empezar a crear widgets de usuario. Estos enfoques pueden utilizarse para decidir qué partes de la IU deben ser rígidas y cuáles flexibles. Utiliza los siguientes enfoques de diseño web para la disposición de la interfaz de usuario:
Disposición absoluta
Las disposiciones absolutas suelen utilizar cálculos y coordenadas precisos para especificar dónde colocar los elementos en una pantalla. Esto es útil cuando un elemento de la IU debe permanecer en su lugar utilizando las coordenadas X e Y. El elemento de la IU debe tener en cuenta dónde se coloca el elemento padre en la pantalla; el elemento padre comienza en la esquina superior izquierda de la disposición.
Este estilo de disposición es menos flexible y difícil de adaptar a distintos tamaños de pantalla.
El diseño de disposición absoluta es el más adecuado para elementos pequeños que forman parte de un diseño más grande. Por ejemplo, utiliza una posición absoluta para un icono. En UEFN, esto se puede establecer mediante los ajustes Alineación y Relleno del widget Imagen.
El icono permanece en el mismo sitio independientemente de la ubicación y el tamaño de los demás elementos de la IU que lo rodean.
Disposición relativa
Este tipo de disposición funciona mejor para juegos que pueden ejecutarse en varias plataformas, ya que adaptará la IU a una gran pantalla de televisor o a una pequeña pantalla de teléfono móvil.
Relleno y espaciado
El relleno se puede utilizar para ajustar pequeños espacios entre elementos de un todo. El relleno puede ser difícil de gestionar para widgets individuales en UMG. En su lugar, utiliza las herramientas de alineación para las imágenes y los bloques de texto, ya que la alineación proporciona más control sobre el espacio y la colocación que el relleno.
Esto significa que, una vez colocadas todas las piezas, si sigues necesitando un poco de espacio entre los elementos, ajustar la configuración de relleno de los widgets individuales añadirá el espacio necesario.
Para forzar espacios más grandes entre los widgets, utiliza una imagen vacía o un widget de ranuras entre los widgets de contenedor y los widgets de usuario. A continuación puedes ver que se utiliza un widget de imagen para forzar el espacio entre cada widget de usuario, proporcionando espacio para que cada widget muestre claramente la información.
Conceptos básicos sobre los widgets de UMG
Una interfaz de usuario debe diseñarse por secciones en UMG. Construye la interfaz de usuario creando widgets de usuario individuales y trabajando por capas. Una vez que todos los elementos de una IU estén listos, superpón las secciones individuales bajo un widget de usuario principal. Compilar interfaces de usuario en capas significa tener un mayor control sobre el diseño y la disposición de toda la interfaz de usuario.
Para planificar y crear widgets de usuario individuales, primero debes comprender los widgets disponibles en el panel Paleta. Existen dos tipos principales de widgets: contenedores y elementos.
Contenedores
Un contenedor contiene varios widgets de usuario, elementos y otros contenedores para crear una parte de la interfaz de usuario. Un elemento puede ser una imagen, un material, texto o muchos más. El tamaño de un widget contenedor viene determinado por el tamaño del elemento hijo más grande.
| Widget contenedor | Propósito | Imagen |
|---|---|---|
Cuadrícula | Dispone los elementos dentro de un patrón de cuadrícula flexible. Añade opciones a los elementos hijos en:
|  |
Cuadrícula uniforme | Dispone los elementos hijos en filas y columnas con el mismo espaciado. Añade opciones a los elementos hijos en:
|  |
Superposición | Superpone elementos y otros widgets contenedores unos encima de otros. Los contenedores de superposición no añaden opciones ni ajustes adicionales a sus elementos hijos. |  |
Cajas apilables | Dispone los elementos horizontal o verticalmente (de izquierda a derecha y de arriba abajo). Este widget contenedor no espacia bien los elementos por sí solo. Utiliza otros widgets de contenedor o elemento para crear espacio en una caja apilable. |  |
Caja de tamaño | Introduce parámetros que restringen el tamaño de sus elementos hijos. Los contenedores de caja de tamaño no añaden opciones ni ajustes adicionales a sus elementos hijos. |  |
Caja de escala | Especifica cómo escalar la IU al tamaño de la pantalla. |  |
Caja de desplazamiento | Crea una caja de desplazamiento para contener una colección de elementos. Los contenedores de la caja de desplazamiento no añaden opciones ni ajustes adicionales a sus elementos hijos. |  |
Interruptor del widget | Permite recorrer los widgets pulsando la tecla Tabulador. En este widget contenedor, es visible un widget cada vez en el alternador. Los contenedores de alternador de widgets no añaden opciones ni ajustes adicionales a sus elementos hijos. |  |
Lienzo | Ancla elementos dentro de un espacio definido. Se recomienda utilizarlo al final del proceso de diseño como contenedor principal. Añade las siguientes opciones a sus elementos hijos:
|  |
Widgets de elemento
Todos los widgets tienen propiedades de apariencia seguidas de ajustes específicos del widget seleccionado en el panel Detalles.
El tamaño de los elementos hijos puede establecerse en el panel Detalles y heredar las propiedades del widget contenedor principal.
| Widget de elemento | Propósito | Imágenes |
|---|---|---|
Widget de acción | Permite tomar una entrada de un atajo de teclado para una acción específica utilizando Verse. Por sí solo, el widgets es puramente cosmético. |  |
Imagen | Ofrece una forma de añadir texturas (pueden ser imágenes importadas o texturas que se encuentran de forma nativa en UEFN) y materiales al fondo o al primer plano de un widget de usuario. |  |
Bloque de texto | Añade texto al widget de usuario. Puedes controlar el tamaño, la fuente, el espaciado y mucho más. |  |
Botón de silencio | Un botón rectangular con fondo transparente. |  |
Botón normal | Un botón rectangular con fondo opaco. |  |
Botón alto | Un botón rectangular con fondo amarillo. |  |
Control deslizante | Un control deslizante de valor que aumenta o disminuye dentro de un rango especificado. |  |
Para obtener más información sobre los widgets en Verse, consulta Tipos de widgets.
Cómo crear y superponer widgets de usuario
Los widgets de usuario son archivos de interfaz de usuario que contienen todo lo que has diseñado. Al crear un widget de usuario, compartimenta tu diseño tanto como sea posible. Esto significa utilizar solo lo que necesitas en un widget de usuario para conseguir el aspecto deseado para tu elemento de la interfaz de usuario.
En la imagen siguiente, se crearon cuatro widgets de usuario para cada componente de la barra de acceso rápido de objetos recogidos. Cada widget de usuario realiza un seguimiento de las estadísticas individuales de los distintos componentes manteniendo el mismo diseño de interfaz de usuario.
Diseñar widgets de usuario independientes significa que pueden superponerse dentro de un widget de usuario padre para crear un aspecto más coherente y controlado de la barra de acceso rápido de recolección. También es más fácil para el dispositivo Rastreador rastrear las estadísticas de cada componente individual de la barra de acceso rápido de recolección.
Haz clic en la imagen para ampliarla.
Diseñar una interfaz de usuario de este modo requiere práctica. Sigue los tutoriales Cómo crear un HUD personalizado y Las Tortugas Ninja para practicar la creación de widgets de usuario individuales y crear un aspecto de escuadrón personalizado para un juego.
Cómo editar una disposición
El uso de widgets de usuario individuales para crear la interfaz de usuario facilita su edición. Proporciona una forma de editar esa pieza sin afectar a otras partes del diseño de la interfaz de usuario.
Observa que en el diseño de la barra de acceso rápido de recolección todas las etiquetas de los elementos están centradas excepto una. En este caso, el desarrollador simplemente abre el widget de usuario de ese elemento y edita la etiqueta sin causar problemas para todos los demás elementos de la barra de acceso rápido.
Si estás diseñando algo más complejo, como un sistema de inventario, es posible que estés utilizando widgets de contenedor que no necesitas o que tengas problemas para que los widgets de tus elementos se ajusten al diseño. UMG tiene opciones que facilitan la edición de una disposición:
Reemplazar por…
Envolver con…
Sustituir widgets
Reemplaza los widgets innecesarios de la jerarquía sin romper la disposición. Haz clic con el botón derecho sobre el widget que no necesitas, selecciona Reemplazar por... y elige otro widget para sustituirlo. Todos los widgets de sustitución son de tipo contenedor.
Las opciones de los widgets hijos cambian según el nuevo contenedor padre utilizado.
Envolver widgets
Una forma de modificar la disposición sin que afecte a todos los widgets hijo es utilizando el ajuste Envolver con... en la jerarquía. Haz clic con el botón derecho sobre el widget hijo y selecciona Envolver con.... A continuación, selecciona un contenedor del menú desplegable para aprovechar sus propiedades y mantener la configuración de los widgets hijo.
Prueba de juego
Una vez finalizado el diseño, pruébalo. Deberías comprobar que:
La interfaz de usuario tiene una finalidad. No crees una interfaz de usuario solo por tenerla, debe ser útil.
La interfaz de usuario es práctica y fácil de utilizar y los jugadores no deberían tener que adivinar qué hace la interfaz de usuario mientras juegan.
La interfaz de usuario debería integrarse en el juego y complementar la jugabilidad.
Los elementos de la interfaz de usuario no obstaculizan el juego.