Los widgets de usuario se diseñan en el editor de widgets con widgets de UMG.
Los widgets de usuario son como mapas, ya que trazan la ruta entre un widget de UMG y las funciones del dispositivo. Ser capaz de leer un widget de usuario te ayudará a comprender la composición de una interfaz de usuario. Desde el editor de widgets, puedes examinar:
La disposición y el diseño de la interfaz de usuario.
Las vinculaciones de los widgets en Vinculaciones de vistas.
En la plantilla de funciones, abre la carpeta Controlador del HUD y haz doble clic en el widget UW_HCD01 para obtener más información sobre cómo se creó es widget y se vinculó al dispositivo Controlador del HUD.
Diseño de widgets
La disposición de los widgets es la fase de diseño en la creación de una interfaz de usuario personalizada. En el editor de widgets, puedes utilizar widgets de UMG del panel Paleta para crear el aspecto y planificar las funciones de tu IU. El orden en que utilices los widgets de UMG determina el aspecto de la IU.
Para obtener más información sobre lo que hacen los widgets de UMG, consulta la sección Paleta del documento Editor de widgets.
Con el widget UW_HCD01 abierto, observa el panel Jerarquía. El panel Jerarquía te muestra qué widgets de UMG se han utilizado y el orden en que se han añadido al visor.
Se puede cambiar el nombre de los widgets de UMG en el panel Jerarquía una vez que se hayan añadido al visor.
Todos los diseños de widgets deben tener un widget raíz que actúe como pantalla. Un widget de superposición denominado Raíz se sitúa en la raíz del diseño y actúa como pantalla. El visor está establecido en Rellenar pantalla, lo que hace que el diseño rellene el área designada como raíz.
Se utiliza un panel de cuadrícula para alojar el diseño de las barras de salud y escudo. Los paneles de cuadrícula son cuadrículas flexibles que organizan sus widgets hijos en filas y columnas.
Puedes personalizar aún más filas y columnas porque el panel de cuadrícula añade opciones a sus widgets hijos que controlan el número de filas y columnas, el espacio que ocupan las filas y columnas, la capa que ocupa el widget en el diseño y una opción especial de movimiento llamada Empujón.
La opción `Empujón` proporciona una forma de mover el widget hijo a través de los ejes X e Y sin ocupar espacio. Esto significa que solo se desplaza el contenido del interior del contenedor, pero el contenedor mantiene su posición y el espacio que ocupa en la disposición.
El widgets Superposición, denominado ShieldBarContainer, es el primer widget hijo del panel de cuadrícula. Este widget se encuentra en la fila 1, columna 0 y se muestra a través de Rango de filas 1, Rango de columnas 0. Los widgets ShieldBarContainer se muestran en la capa 1.
Esto significa que todos los widgets hijos de ShieldContainer se muestran en la parte delantera del diseño porque están en la capa 1, pero quedan a la derecha de los widgets detrás porque se encuentran en la fila 1. La barra de escudo ocupa 2 filas (0 y 1), lo que determina su longitud.
Con la opción Empujar > Y, puedes mover el widget ShieldBarContainer -25.0 unidades de Slate hacia abajo desde su posición predeterminada para que cubra ligeramente el contenedor de salud que tiene detrás.
El widget de superposición denominado HealthBarContainer es el segundo widget hijo del panel de cuadrícula. Este widget se encuentra en la fila 1, columna 0 y se muestra a través de Rango de filas 1, Rango de columnas 0. Los widgets HealthBarContainer se muestran en la capa 0.
Esto significa que todos los widgets hijos de HealthBarContainer se muestran en la parte posterior del diseño porque están en la capa 0. La barra de salud se encuentra en la fila 0, por lo que se muestra a la izquierda de la barra de escudo. HealthBarContainer también abarca las filas 0 y 1, lo que determina la longitud de la barra de salud.
A continuación se muestra el desglose de los widgets de UMG que componen las barras de salud y de escudo, así como su finalidad en el diseño general.
ShieldBarContainer
ShieldBarContainer aloja todos los widgets de UMG que componen el diseño de la barra de escudo. La barra de escudo está formada por lo siguiente:
| Widget de UMG | Nombre del widget | Propósito |
|---|---|---|
Imagen | ShieldBar_backing | Se utiliza como contenedor para rodear todo el diseño de la barra de escudo. Se trata de una instancia de material nombrada MI_HCD01_Backplate. |
Caja apilable | ShieldContent | Organiza sus widgets hijos (icono de la barra de escudo y material de la barra de escudo) de izquierda a derecha dentro del material ShieldBar_Backing y ShieldBarContainer. |
Imagen | ShieldIcon | El material del icono del escudo utilizado como capa frontal. |
Superposición | ShieldBarContainer | Se usa para superponer sus widgets hijos en la segunda columna de la caja apilable de ShieldContent. Estos widgets componen el material de la barra de escudo. |
Imagen | ShieldBarStroke | Se utiliza como contenedor para rodear la barra de escudo. Se trata de una instancia de material nombrada MI_HCD01_BarStroke. |
Imagen | ShieldBar | El material M_ProgressBar_Basic es un material dinámico de dos tonos que utiliza una función de material para moverse a izquierda y derecha por la barra de escudo, según la información que el widget reciba del dispositivo Controlador del HUD. |
HealthBarContainer
HealthContainer aloja todos los widgets de UMG que componen el diseño de la barra de salud. La barra de salud está formada por lo siguiente:
| Widget de UMG | Nombre del widget | Propósito |
|---|---|---|
Caja apilable | Contenido de salud | Organiza sus widgets hijos (diseño del icono de la barra de salud y material de la barra de salud) de izquierda a derecha dentro de HealthContainer. Esta caja apilable se estira alrededor del widget Superposición de ShieldContainer y centra la barra de escudo en el diseño general de la interfaz de usuario. Esto se debe a que la caja apilable de HealthContent tiene una dimensión en el eje X mayor que la caja apilable de ShieldContent. |
Imagen | HPIcon | El material del icono de salud utilizado como capa frontal. |
Superposición | HPBarContainer | Se usa para superponer sus widgets hijos en la segunda columna de la caja apilable de HealthContent. Estos widgets componen el material de la barra de salud. |
Imagen | HPBarStroke | Se utiliza como contenedor para rodear la barra de salud. Se trata de una instancia de material nombrada MI_HCD01_BarStroke. |
Imagen | HPBar | Un material dinámico de dos tonos que utiliza una función de material para moverse a izquierda y derecha por la barra de salud, según la información que el widget reciba del dispositivo Controlador del HUD. |
A continuación, aprenderás a seleccionar un Viewmodel para actualizar los materiales de la interfaz de usuario y mostrar el estado actual de salud y escudo del jugador en el juego.
Viewmodel
Un Viewmodel controla la información del jugador a través de una lista de funciones. Sus funciones permiten controlar la información del jugador a través del widget de UMG y la funcionalidad del dispositivo. Los Viewmodels proporcionan una forma específica de vincular widgets de UMG a dispositivos del modo Creativo.
Los Viewmodels escuchan las funciones que se ejecutan en el dispositivo utilizando el widget de usuario para sustituir a la interfaz de usuario predeterminada. A continuación, el Viewmodel utiliza las funciones del dispositivo para actualizar la IU mediante Vinculaciones de vistas.
Por ejemplo, los Viewmodels de la barra de salud y de escudo escuchan las funciones de salud y escudo del controlador del HUD. Cuando la función del controlador del HUD se ejecuta en los escudos y la salud del jugador, el Viewmodel escucha estas funciones y pasa la información a través de Vinculaciones de vistas para actualizar la IU.
Hay varios Viewmodels diferentes para elegir. En la lista de Viewmodels que aparece a continuación, observa que hay algunos específicos de dispositivos. Contienen las funciones específicas de ese dispositivo.
Los siguientes Viewmodels controlan más de una parte de la IU a través de las funciones del dispositivo en las listas de funciones.
Dispositivo Controlador del HUD - Lista de información de jugador de equipo/escuadrón se utiliza con el widget UW_HCD01. Utiliza la información del jugador controlador para ingerir tu información del controlador del HUD, ya que esta plantilla está pensada para que la juegue un jugador: ¡tú!
Para esta muestra de IU, tu salud y escudo se controlan a través de este Viewmodel escuchando las funciones del controlador del HUD.
A continuación, aprenderás a vincular materiales de interfaz de usuario de salud y escudo a la función del controlador del HUD en Vinculaciones de vistas.
Vinculaciones de vistas
Las vinculaciones de vistas asignan la funcionalidad de widgets de UMG con las funciones del dispositivo vinculado y actualiza la IU en el HUD. En el widget UW_HCD01, los materiales ShieldBar y HPBar están vinculados a las funciones Escudo y Salud del controlador del HUD. Estas funciones supervisan tus escudos y tu salud en el juego y actualizan el material de la barra en función de cuánto escudo y salud tengas.
Para que la IU de escudo y salud funcione, primero debes seleccionar un widget de UMG y realizar la vinculación de las propiedades del widget a una función específica del dispositivo. Las vinculaciones deben crearse en el panel Vinculaciones de vistas.
Cómo añadir un widget de UMG
Los widgets de imagen (ShieldBar y HPBar) se seleccionan primero en el panel Jerarquía y, a continuación, en el panel Vinculaciones de vistas. Puedes hacer clic en el botón +Añadir widget para abrir la lista de funciones del Viewmodel. Se añade una función al widget para controlar la información de la propiedad del widget. En este caso, es la función Pincel para controlar los materiales ShieldBar y HPBar.
Cómo añadir una vinculación de dispositivo
Después de determinar qué widget vincular, se selecciona el tipo de vinculación del dispositivo. Hay un campo vacío junto al campo del widget. Al hacer clic en el campo vacío, se abre una lista de vinculaciones de dispositivo disponibles. Las opciones de vinculación de dispositivo aparecen automáticamente bajo los campos de widget y vinculación de dispositivo. Las opciones determinan cómo se actualiza el widget en función de la información que recibe del dispositivo.
El widget UW_HCD01 utiliza un campo Establecer parámetro escalar para actualizar las propiedades del pincel.
Vinculaciones de vistas
| Propiedad de pincel ShieldBar | Propiedad de pincel HealthBar |
|---|---|
 |  |
Panel Detalles
| Material ShieldBar | Material HealthBar |
|---|---|
 |  |
En el widget UW_HCD01, los widgets de imagen (ShieldBar y HPBar) tienen materiales dinámicos en sus propiedades de pincel (que se encuentran en el panel Detalles).
Ajuste de los parámetros del dispositivo
Para que el material refleje el estado actual del escudo y la salud del jugador, las vinculaciones de dispositivo tienen parámetros que deben establecerse para enviar la información del dispositivo a los widgets de UMG.
En esta muestra, el widget Imagen y su función Pincel se añaden automáticamente al parámetro Pincel del controlador del HUD. Esta vinculación determina qué propiedad Pincel del widget Imagen se debe actualizar.
A continuación, el nombre del parámetro especifica qué parámetro actualizar en el material Pincel. Aquí, el progreso se escribe en el campo.
Por último, el Viewmodel determina el valor de la vinculación. En el campo Valor de la vinculación, se establecen las funciones HUDPlayerInfoListViewmodel > Información del jugador controlador > Escudo y Salud.
La función del controlador del HUD ahora actualiza la propiedad Pincel del widget Imagen a través de la función de conversión Parámetro escalar, examinando la propiedad Progreso y pasándole los valores de salud y escudo.
El progreso es el valor que mueve la barra hacia adelante y hacia atrás entre los valores Inicio del progreso y Fin del progreso. Esto significa que el valor de Progreso está vinculado entre 0 y 1.
| Grupos de parámetros del material ShieldBar | Grupos de parámetros del material HealthBar |
|---|---|
 |  |
Si comienzas la partida con salud y escudo al máximo, el daño hace que la barra se desplace hacia la izquierda en función de las propiedades Progreso y Normalizar progreso. Estas propiedades determinan cuánto se mueve el material hacia la izquierda cuando el jugador recibe daño.
El material se moverá por la barra hacia la derecha cuando se restablezcan la salud y los escudos al mismo ritmo que se deterioran utilizando las propiedades Progreso y Normalizar progreso.
Abre otros widgets de usuario y comprueba si puedes leerlos y comprender el orden en que se añadieron los widgets de UMG a la jerarquía, el tipo de Viewmodel seleccionado para el widget de usuario y cómo se vinculan los parámetros del widget de UMG y las funciones del dispositivo en Vinculaciones de vistas.
Viewmodel de objeto equipado
Este Viewmodel puede utilizarse con el dispositivo Controlador del HUD para hacer un seguimiento de las estadísticas de un objeto equipado utilizando la ranura del widget Anular widget de información del objeto equipado. Todas las muestras de IU utilizan el fusil de asalto WID_Assault_AutoHigh_Athena_C_Ore_T03 como objeto equipado.
Abre la carpeta Dispositivos > Controlador del HUD > Widgets y haz doble clic en el widget UW_HCD03_SelectedItem. Desde este Viewmodel, puedes rastrear una serie de información y estadísticas de armas en la IU:
Icono de objeto
Nombre del objeto
Icono de munición
Recuento de munición
Munición extra
Es un arma de tipo cargador
