Unreal Motion Graphics (UMG) es una herramienta poderosa para crear interfaces de usuario (IU). Ya sea que estés creando una ventana emergente simple o sistemas complejos de IU, si comprendes los conceptos básicos de cómo trabajar en UMG, tienes la libertad de experimentar con esta herramienta clave.
A fin de llevar tus diseños de IU del papel a las pruebas de juego, debes comprender cómo UMG se compila en la IU. De hecho, con el objetivo de familiarizarte con los flujos de trabajo correctos relacionados con la compilación de la IU, esta página se divide en las siguientes secciones:
Cómo diseñar sistemas de IU
La planificación del diseño de tu IU es clave para crear sistemas de IU útiles y atractivos. Ten en cuenta lo siguiente:
El tipo de juego que estás creando.
El tipo de IU necesaria para asistir a los jugadores y lograr que la jugabilidad sea divertida y fácil de comprender.
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: desde la información relevante sobre la vida y el escudo, hasta las estadísticas generales de la partida.
Esboza las ideas sobre el diseño de la IU que tengas. Luego, usa esos bocetos con la guía que explica cómo se compila la IU en UMG.
Los enfoques básicos de diseño web pueden ayudarte a planificar el diseño de la IU antes de empezar a compilar widgets de usuario. Estos enfoques se pueden usar con el objetivo de decidir qué partes de la IU deben ser rígidas y cuáles flexibles. Utiliza los siguientes enfoques de diseño web a fin de crear el diseño de la IU:
Diseño absoluto
Los diseños absolutos suelen usar coordenadas y cálculos precisos a fin de especificar dónde colocar los elementos en una pantalla. Esto es útil cuando un elemento de la IU debe permanecer en su lugar con las coordenadas X e Y. En cuanto al elemento de la IU, se debe tener en cuenta en qué parte de la pantalla se coloca el elemento base, que comienza en la esquina superior izquierda del diseño.
Este estilo de diseño es menos flexible y difícil de mantener en función de los distintos tamaños de pantalla.
Un diseño absoluto se usa mejor para los elementos pequeños que forman parte de un diseño más grande. Por ejemplo, usa una posición absoluta para un ícono. En UEFN, esto se puede establecer mediante la configuración de Alineación y Relleno del widget de imagen.
El ícono permanece en el mismo lugar independientemente de la ubicación y el tamaño de los otros elementos de la IU que están a su alrededor.
Diseño relativo
Este tipo de diseño funciona mejor para los juegos que se pueden jugar en varias plataformas, porque adaptará la IU a una pantalla de televisión grande o a una pantalla de teléfono celular pequeña.
Relleno y espaciado
El relleno se puede usar a fin de ajustar los pequeños espacios que quedan entre los elementos de un todo. También puede ser difícil de administrar cuando se trata de widgets individuales en UMG. En su lugar, usa las herramientas de alineación para imágenes y bloques de texto, ya que la alineación ofrece más control sobre el espacio y la colocación que el relleno.
Después de que todas las piezas estén en su lugar, si todavía necesitas un poco de espacio entre los elementos, ajusta la configuración del relleno de los widgets individuales con el objetivo de añadir el espacio necesario.
Para forzar espacios más grandes entre los widgets, usa una imagen vacía o un widget de ranura entre los widgets de contenedor y los widgets de usuario. A continuación, se ve que un widget de imagen se usa a fin de forzar el espacio entre cada widget de usuario, lo que brinda un espacio para que cada widget muestre bien la información.
Descripción de los widgets de UMG
Una IU se debe diseñar en secciones en UMG. Compila la IU mediante la creación de widgets de usuario individuales y el trabajo en capas. Una vez que todos los elementos de una IU estén listos, coloca las secciones individuales en capas en un widget de usuario base. Al compilar la IU en capas, se tiene más control sobre el diseño y la disposición de la IU en general.
Para planificar y crear widgets de usuario individuales, primero debes comprender los widgets disponibles en el panel de la paleta. Existen dos tipos principales de widgets: contenedores y elementos.
Contenedores
Un contenedor cuenta con varios widgets de usuario, elementos y otros contenedores que sirven para crear una parte de la IU. Un elemento puede ser una imagen, un material, un texto y mucho más. El tamaño de un widget de contenedor lo determina el tamaño del elemento derivado más grande.
| Widget de contenedor | Propósito | Imagen |
|---|---|---|
Cuadrícula | Coloca los elementos dentro de un patrón de cuadrícula flexible. Añade algunas opciones a los elementos derivados para lo que aparece a continuación:
|  |
Cuadrícula uniforme | Coloca los elementos derivados en las filas y columnas con el mismo espaciado. Añade algunas opciones a los elementos derivados para lo que aparece a continuación:
|  |
Superposición | Superpone los elementos y otros widgets de contenedor unos encima de los otros. Los contenedores de superposición no añaden opciones ni configuración adicionales a sus elementos derivados. |  |
Cajas apiladas | Coloca los elementos de forma horizontal o vertical (de izquierda a derecha y de arriba a abajo). Este widget de contenedor necesita ayuda para espaciar los elementos. Por eso, usa otros widgets de contenedor o elementos a fin de crear espacio en cajas apiladas. |  |
Caja de tamaño | Introduce parámetros que restringen el tamaño de sus elementos derivados. Los contenedores de caja de tamaño no añaden opciones ni configuración adicionales a sus elementos derivados. |  |
Caja de escala | Especifica cómo escalar la IU al tamaño de la pantalla. |  |
Caja de desplazamiento | Crea una caja de desplazamiento que sirve para contener una colección de elementos. Los contenedores de caja de desplazamiento no añaden opciones ni configuración adicionales a sus elementos derivados. |  |
Conmutador de widgets | Ofrece una forma de "pestaña" a través de los widgets. En este widget de contenedor, se ve un widget a la vez en el conmutador. Los contenedores de widget de conmutador no añaden opciones ni configuración adicionales a sus elementos derivados. |  |
Canvas | Ancla elementos dentro de un espacio definido. Es mejor usarlo al final del proceso de diseño como contenedor base. Añade las siguientes opciones a sus elementos derivados:
|  |
Widgets de elemento
Todos los widgets tienen propiedades de apariencia seguidas de una configuración específica del widget que se seleccionó en el panel de detalles.
El tamaño de los elementos derivados se puede establecer en el panel de detalles y heredar las propiedades del widget de contenedor base.
| Widget de elemento | Propósito | Imágenes |
|---|---|---|
Widget de acción | Ofrece una forma de tomar una entrada de una asignación de tecla para una acción específica mediante Verse. Por sí solo, el widget es puramente estético. |  |
Imagen | Brinda una manera de añadir texturas (pueden ser imágenes importadas o texturas que se encuentran de forma nativa en UEFN) y materiales al fondo o en el 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, etc. |  |
Botón de silencio | Un botón rectangular con fondo transparente. |  |
Botón normal | Un botón rectangular con un 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 la IU que contienen todo lo que diseñaste. Al crear un widget de usuario, se compartimenta el diseño tanto como sea posible. Por ende, solo se usa lo que necesitas en un widget de usuario a fin de lograr el aspecto deseado para tu elemento de la IU.
En la siguiente imagen, se crearon cuatro widgets de usuario para cada componente de la barra de acceso directo de los elementos recolectados. Cada widget de usuario rastrea las estadísticas individuales de los diferentes componentes mientras mantiene el mismo diseño de la IU.
Al compilar un diseño de widgets de usuario separados, se pueden superponer dentro de un widget de usuario base a fin de crear un aspecto más coherente y controlado para la barra de acceso directo de la colección. Además, es más fácil para el dispositivo rastreador realizar un seguimiento de las estadísticas de cada componente individual que tiene la barra de acceso directo de la colección.
Haz clic en la imagen para ampliarla.
El diseño de una IU mediante el uso de esta técnica requiere práctica. Sigue los tutoriales Cómo crear un HUD personalizado y los tutoriales de las Tortugas Ninja para practicar la creación de widgets de usuario individuales a fin de crear un aspecto de escuadrón personalizado para un juego.
Cómo editar un diseño
El uso de widgets de usuario individuales para crear la IU facilita su edición. Además, brinda una forma de editar esa pieza sin afectar otras partes del diseño.
Observa que, en el diseño anterior de la barra de colecciones, todas las etiquetas de los elementos están centradas, excepto una. En este caso, el desarrollador simplemente abre el widget de usuario para ese elemento y edita la etiqueta sin causarles problemas a todos los demás elementos de la barra de acceso directo de la colección.
Si diseñas algo más complejo, como un sistema de inventario, es posible que uses widgets de contenedor que no necesites o que tengas problemas para que los widgets de tus elementos se ajusten al diseño. El UMG cuenta con las siguientes opciones que facilitan la edición de un diseño:
Reemplazar por…
Ajustar con…
Reemplazar widgets
Reemplaza los widgets innecesarios de la jerarquía sin romper el diseño. Haz clic derecho en el widget innecesario; luego, selecciona Reemplazar por… y elige otro widget. Los widgets sustitutos son todos de tipo contenedor.
Las opciones de los widgets derivados cambian según el nuevo contenedor base que se use.
Widgets envolventes
Una forma de modificar el diseño sin que afecte a todos los widgets secundarios es usar la opción Ajustar con... en la jerarquía. Haz clic derecho en el widget derivado y selecciona Ajustar con…. Luego, selecciona un contenedor en el menú desplegable a fin de aprovechar sus propiedades y mantener la configuración de los widgets derivados.
Prueba de juego
Una vez que el diseño esté completo, realiza una prueba de juego. Verifica lo siguiente:
La IU cumple una función. No crees la IU solo para tenerla, sino que debe útil.
La IU es útil y fácil de usar. Los jugadores no deberían tener que adivinar qué hace la UI mientras juegan.
La IU debería integrarse en el juego y complementar la jugabilidad.
Los elementos de la IU no bloquean la jugabilidad.