Unreal Motion Graphics (UMG) es una potente herramienta para construir 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 construyendo.
-
El tipo de IU necesaria 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 para guiarte en el proceso de construcción de la interfaz de usuario en UMG.
Los enfoques básicos del diseño web pueden ayudarte a planificar la disposición de tu IU 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 mantener para distintos tamaños de pantalla.
Un diseño de disposición absoluta funciona mejor con elementos pequeños que forman parte de un diseño mayor. Por ejemplo, utiliza una posición absoluta para un icono. En UEFN, esto puede configurarse utilizando los ajustes Alineación y Relleno del widget Imagen.
El icono permanece en el mismo lugar independientemente de la colocació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 de 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. Hay 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 | Finalidad | 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 interfaz de usuario 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. |
 |
| Alternador de widgets | 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. Es mejor 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 | Finalidad | Imágenes |
|---|---|---|
| Imagen | Permite añadir texturas (pueden ser imágenes importadas o texturas nativas de 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 silencioso | Botón rectangular con fondo transparente. |  |
| Botón normal | Botón rectangular con fondo opaco. |  |
| Botón sonoro | Botón rectangular con fondo amarillo. |  |
| Control deslizante | 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 para crear un HUD personalizado y los tutoriales de 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 creador 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…
Cómo reempalzar widgets
Reemplaza los widgets innecesarios de la jerarquía sin romper la disposición. Haz clic con el botón derecho en el widget que ya no necesites, selecciona Reemplazar por… y elige otro widget por el que 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.
Cómo envolver widgets
Una forma de modificar la disposición sin que afecte a todos los widgets hijos es utilizando el ajuste Envolver con... en la jerarquía. Haz clic con el botón derecho del ratón en el widget hijo y selecciona Envolver con.... A continuación, selecciona un contenedor en el menú desplegable para aprovechar sus propiedades y mantener la configuración de los widgets hijos.
Prueba de juego
Una vez finalizado el diseño, pruébalo. Deberías comprobar que:
-
La IU tiene una finalidad. No crees una interfaz de usuario solo por tenerla, debe ser útil.
-
La IU es útil y fácil de usar, por lo que los jugadores no tienen que adivinar lo que hace la IU mientras juegan.
-
La IU se integra en el juego y complementa la jugabilidad.
-
Los elementos de tu interfaz de usuario no bloquean el juego.