Los widgets de usuario se diseñan en el editor de widgets con widgets de UMG.
Los widgets de usuario son como mapas en el sentido de 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 IU. Desde el editor de widgets, puedes examinar lo siguiente:
Las vinculaciones de widgets en Vista de vinculaciones.
En la plantilla de función, 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ó ese widget y cómo se vinculó al dispositivo de control del HUD.
Diseño de widget
El diseño de widget es la fase de diseño al crear una IU personalizada. En el editor de widgets, puedes utilizar widgets de UMG desde el panel de paleta para crear el aspecto y planificar la funcionalidad de la IU. El orden en el que usas los widgets de UMG determina el aspecto de la IU.
Para obtener más información acerca de lo que hacen los widgets de UMG, consulta la sección Paleta del documento del editor de widgets.
Con el widget UW_HCD01 abierto, observa el panel Jerarquía. El panel Jerarquía muestra qué widgets de UMG se utilizaron y el orden en el que se añadieron 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 llamado Raíz se asienta en la raíz del diseño y actúa como pantalla. El visor se define en Pantalla completa, lo que hace que el diseño llene el área Raíz designada.
Se utiliza un panel de cuadrícula para alojar el diseño de las barras de vida y escudo. Los paneles de cuadrícula son cuadrículas flexibles que organizan sus widgets derivados en filas y columnas.
Puedes personalizar aún más las filas y las columnas porque el panel de cuadrícula añade opciones a sus widgets derivados que controlan la cantidad de filas y columnas, el espacio que ocupan las filas y las columnas, la capa que ocupa el widget en el diseño y una opción de movimiento especial llamada Empuje suave.
Empuje suave ofrece una forma de mover el widget derivado a través de los ejes X e Y sin ocupar espacio. Esto significa que solo se desplaza el contenido dentro del contenedor, pero el contenedor mantiene su posición y el espacio que ocupa en el diseño.
El widget de superposición, denominado ShieldBarContainer, es el primer widget derivado del panel de cuadrícula. Este widget se encuentra en la Fila 1, Columna 0, y se muestra en Extensión de fila 1, Extensión de columna 0. Los widgets de ShieldBarContainer se muestran en la Capa 1.
Esto significa que todos los widgets derivados de ShieldContainer se muestran al frente del diseño porque están en la Capa 1, pero se sitúan a la derecha de los widgets que están detrás porque se encuentran en la Fila 1. La barra de escudo abarca 2 filas (0 y 1); esto determina la longitud de la barra de escudo.
Al utilizar la opción Empuje suave > Y, puedes mover el widget ShieldBarContainer -25.0 en las unidades de Slate hacia abajo desde su posición predeterminada para que cubra ligeramente el contenedor de vida detrás de él.
El widget de superposición denominado HealthBarContainer es el segundo widget derivado del panel de cuadrícula. Este widget se encuentra en la Fila 1, Columna 0, y se muestra en Extensión de fila 1, Extensión de columna 0. Los widgets de HealthBarContainer se muestran en la Capa 0.
Esto significa que todos los widgets derivados de HealthBarContainer se muestran en la parte posterior del diseño porque están en la Capa 0. La barra de vida se encuentra en la Fila 0, por lo que se muestra a la izquierda de la barra de escudo. El HealthBarContainer también abarca las Filas 0 y 1, lo que determina la longitud de la barra de vida.
A continuación se muestra el desglose de los widgets de UMG que componen las barras de escudo y vida, y su propósito en el diseño general.
ShieldBarContainer
El ShieldBarContainer contiene todos los widgets de UMG que componen el diseño de la barra de escudo. La barra de escudo se compone de 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. Esta es una instancia de material denominada MI_HCD01_Backplate. |
### Cajas apiladas | ShieldContent | Organiza sus widgets derivados (ícono de barra de escudo y material de barra de escudo) de izquierda a derecha dentro del material ShieldBar_Backing y de ShieldBarContainer. |
Imagen | ShieldIcon | El material del ícono de escudo utilizado como capa frontal. |
Superposición | ShieldBarContainer | Se utiliza para superponer sus widgets derivados en la segunda columna de la caja apilada de ShieldContent. Estos widgets conforman el material de la barra de escudo. |
Imagen | ShieldBarStroke | Se utiliza como contenedor para rodear la barra de escudo. Esta es una instancia de material denominada 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 hacia la izquierda y hacia la derecha a través de la barra de escudo, según la información que el widget recibe del dispositivo de control del HUD. |
HealthBarContainer
El HealthContainer contiene todos los widgets de UMG que componen el diseño de la barra de vida. La barra de vida se compone de lo siguiente:
| Widget de UMG | Nombre del widget | Propósito |
|---|---|---|
### Cajas apiladas | Contenido de vida | Organiza sus widgets derivados (diseño del ícono de la barra de vida y material de la barra de vida) de izquierda a derecha dentro de HealthContainer. Esta caja apilada se extiende alrededor del widget de superposición de ShieldContainer y centra la barra de escudo en el diseño general de la IU. Esto se debe a que la caja apilada de HealthContent tiene una dimensión de eje X más grande que la caja apilada de ShieldContent. |
Imagen | HPIcon | El material del ícono de vida utilizado como capa frontal. |
Superposición | HPBarContainer | Se utiliza para superponer sus widgets derivados en la segunda columna de la caja apilada de HealthContent. Estos widgets conforman el material de la barra de vida. |
Imagen | HPBarStroke | Se utiliza como contenedor para rodear la barra de vida. Esta es una instancia de material denominada MI_HCD01_BarStroke. |
Imagen | HPBar | Un material dinámico de dos tonos que utiliza una función de material para moverse hacia la izquierda y hacia la derecha por la barra de vida, según la información que el widget recibe del dispositivo de control del HUD. |
A continuación, aprenderás a seleccionar un modelo de vista para actualizar los materiales de la IU a fin de mostrar la vida y el estado del escudo actuales del jugador en el juego.
Modelo de vista
Un modelo de vista controla la información del jugador a través de una lista de funciones. Las funciones proporcionan una forma de controlar la información del jugador a través del widget de UMG y la funcionalidad del dispositivo. Los modelos de vista ofrecen una forma específica de vincular widgets de UMG con dispositivos del modo Creativo.
Los modelos de vista escuchan las funciones que se ejecutan en el dispositivo mediante el widget de usuario para reemplazar la interfaz de usuario predeterminada. El modelo de vista luego usa las funciones del dispositivo para actualizar la IU a través de las vinculaciones de vista.
Por ejemplo, los modelos de vista de la barra de vida y escudo escuchan las funciones de vida y escudo del control del HUD. Cuando la función de control del HUD se ejecuta en los escudos y la vida del jugador, el modelo de vista escucha estas funciones y pasa la información por medio de las vinculaciones de vista para actualizar la IU.
Hay varios modelos de vista diferentes para elegir. En la lista de modelos de vista que aparece a continuación, observa que hay modelos de vista específicos del dispositivo. Estos contienen las funciones específicas de ese dispositivo.
Los siguientes modelos de vista controlan más de una parte de la IU a través de las funciones del dispositivo en las listas de funciones.
La opción Dispositivo: lista de información de jugadores de equipo/escuadrón del control del HUD se usa con el widget UW_HCD01. Utiliza la información del jugador controlador para ingresar tu información del control del HUD, porque esta plantilla está pensada para que la juegue un jugador: ¡tú!
Para esta muestra de IU, tu vida y escudo se controlan con este modelo de vista tras escuchar las funciones del controlador del HUD.
A continuación, aprenderás a vincular los materiales de IU de vida y escudo a la funcionalidad de control del HUD en Vinculaciones de vista.
Vinculaciones de vista
La función Vinculaciones de vista mapea la funcionalidad del widget de UMG a las funciones del dispositivo vinculado y actualiza la IU en el HUD. En el widget UW_HCD01, los materiales de ShieldBar y HPBar están vinculados a las funciones de escudo y vida del control del HUD. Estas funciones permiten monitorear tus escudos y tu vida en el juego y actualizar el material de la barra en función de cuántos escudos y cuánta vida tengas.
Para que la IU de escudo y vida sean funcionales, debes seleccionar un widget de UMG y vincular las propiedades del widget a una función específica del dispositivo. Las vinculaciones deben crearse en el panel Vinculaciones de vista.
Cómo agregar 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 vista. Puedes hacer clic en el botón +Añadir widget para abrir la lista de funciones del modelo de vista. Se añade una función al widget para controlar la información de propiedad del widget. En este caso, es la función de pincel para controlar los materiales de 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 de 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 en los campos de widgets 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 la opción Establecer parámetro escalar para actualizar las propiedades del pincel.
Vinculaciones de vista
| Propiedad de pincel de ShieldBar | Propiedad de pincel de HealthBar |
|---|---|
 |  |
Panel de detalles
| Material de ShieldBar | Material de 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 de detalles).
Configuración de los parámetros del dispositivo
Para que el material refleje el estado actual del escudo y de la vida del jugador, las vinculaciones del dispositivo tienen parámetros que deben definirse para enviar la información del dispositivo a los widgets de UMG.
En esta muestra, el widget de imagen y su función Pincel se añaden automáticamente a los parámetros de pincel del control del HUD. Esta vinculación determina qué propiedad de pincel del widget de imagen se actualizará.
A continuación, el nombre del parámetro especifica qué parámetro actualizar en el material del pincel. Aquí, se escribe Progreso en el campo.
Por último, el modelo de vista determina el valor de la vinculación. En el campo Valor de la vinculación, se definen las funciones HUDPlayerInfoListViewmodel> Información del jugador controlador > Escudo y Vida.
Con la funcionalidad de control del HUD, ahora se actualiza la propiedad de pincel en el widget de imagen a través de la función de conversión de parámetros escalares cuando se observa la propiedad de progreso y se pasa a dicha propiedad el valor de vida y escudo.
El progreso es el valor que mueve la barra hacia adelante y hacia atrás entre los valores de inicio de progreso y fin de progreso. Esto significa que el valor de progreso está vinculado entre 0 y 1.
| Grupos de parámetros de material de ShieldBar | Grupos de parámetros de material de HealthBar |
|---|---|
 |  |
Si comienzas el juego con la vida y el escudo al máximo, el daño hace que la barra se mueva hacia la izquierda según las propiedades de progreso y normalización del 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 la vida y los escudos se restablezcan al mismo ritmo que se deterioran utilizando las propiedades de progreso y normalización del 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 modelo de vista 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 vista.
Modelo de vista del objeto equipado
Este modelo de vista se puede utilizar con el dispositivo de control del HUD para realizar un seguimiento de las estadísticas de un objeto equipado mediante la ranura para widgets Anular widget de información del objeto equipado. Todas las muestras de IU usan el rifle de asalto WID_Assault_AutoHigh_Athena_C_Ore_T03 como objeto equipado.
Abre la carpeta Dispositivos > Control del HUD > Widgets y haz doble clic en el widget UW_HCD03_SelectedItem. Desde este modelo de vista, puedes rastrear una cantidad de información y estadísticas de armas en la IU:
Ícono de elemento
Nombre de elemento
Ícono de munición
Recuento de munición
Munición excedente
Es un arma con cargador
