Las placas posteriores muestran varios tipos de información, como la imagen del avatar del jugador, la etiqueta de jugador, la vida, los escudos y más, en el HUD.
Las placas posteriores realizan una serie de funciones, desde ayudar a identificar a los compañeros de equipo en juegos cooperativos multijugador hasta identificar estadísticas de escudo y vida baja.
En Unreal Editor para Fortnite (UEFN), las placas posteriores se fabrican con
Sin embargo, las texturas pueden consumir mucha memoria. Esto puede suponer una carga para el presupuesto de memoria y reducir el rendimiento de la isla. Las texturas y los nodos Texture Sample del material ocupan una gran cantidad de memoria.
Los materiales se utilizan mejor para crear diseños planos y pueden añadir efectos animados a la placa posterior. Los materiales consumen menos memoria, ya que dependen de la GPU para ejecutar operaciones matemáticas de álgebra simple. Esto te permite hacer una variedad de cosas, desde crear formas simples hasta animar interacciones complejas en un material.
 |  |
Diseño plano de IU con materiales | Diseño de IU con texturas |
Al optar por utilizar texturas, asegúrate de utilizarlas con moderación; se recomienda evitar cualquier valor por encima de 256 x 256 px para las texturas de la IU.
Los materiales consumen menos memoria porque utilizan la GPU para renderizarse.
El método que utilices para las placas posteriores de tu avatar dependerá de varios factores:
Preferencia personal por el diseño de la IU.
Estilo y diseño de IU que complementan el tipo de experiencia en la isla que crees.
Cuánta memoria deseas ahorrar
Para el diseño de la placa posterior del avatar en este tutorial, se utilizan tres instancias de material para el diseño básico. Los siguientes diseños de placa posterior se crearon con el material M_UI_Shape_Rectangle e incluyen lo siguiente:
Un fondo rosa translúcido.
Un contenedor rosa que rodea el texto del nombre y el fondo translúcido.
Un círculo aguamarina que contendrá el avatar del jugador.
Crea tu propia IU con materiales. Consulta Cómo crear una IU personalizada con instancias de material.
Configura un widget personalizado
Utiliza el flujo de trabajo de widgets de usuario del documento de ventanas emergentes de la IU para lo siguiente:
Crear un widget de usuario.
Cambiar el nombre de la miniatura a Player_Info.
Haz doble clic en la miniatura para abrir el editor de widgets de UMG.
El editor de widgets es donde establecerás la apariencia y la ubicación de la pantalla para el diseño de tu placa posterior. Después, añadirás un modelo de vista para crear una funcionalidad de vinculación a fin de capturar la información existente del jugador y vincularla al diseño de la placa posterior.
En el gráfico de eventos:
Selecciona la configuración Pantalla completa en la esquina superior derecha y establécela en Deseado.
A través de esta configuración, puedes cambiar tus widgets a un tamaño específico para que tu IU pueda aparecer sin problemas durante el juego.
Para crear el diseño de la IU para tu HUD personalizado, comienza agregando paneles al gráfico de eventos.
En el panel Paleta, navega hasta la sección Panel y arrastra un panel Lienzo al evento o directamente al panel Jerarquía. Luego, cambia el nombre del panel a HUD_Canvas.
El panel Lienzo ofrece una forma de anclar diferentes elementos de la IU a lugares específicos de la pantalla. Asegúrate de tener un plan de diseño de la IU antes de añadir más paneles al lienzo para garantizar que tu diseño se refleje en el panel Lienzo.
Utiliza el panel Lienzo solo cuando necesites elementos específicos de la IU como parte de tu diseño. Por ejemplo, utiliza este panel si estás construyendo un HUD y necesitas diseñar diferentes widgets derivados en lugares específicos de la pantalla.
En lugar de cambiar la configuración de pantalla completa a Deseado, puedes cambiar el tamaño del panel Lienzo a 1920 X 1080 o 2560 X 1440, que son las relaciones de aspecto de pantalla más comunes (16:9).
Desde la sección Panel del panel Paleta, anida una caja apilada debajo de HUD_Canvas en el panel Jerarquía y cámbiale el nombre a Backplate_StackBox. Este es el contenedor de la IU de la placa posterior, que anidará los widgets que componen las variables de la IU.
A medida que añadas variables a la caja apilada, se apilarán automáticamente de izquierda a derecha en el panel.
También puedes utilizar la caja apilada para apilar los elementos de la IU de arriba a abajo.
En la sección Común del panel Paleta, anida una imagen en Backplate_StackBox y la jerarquía. Luego, cambia el nombre de la imagen a Avatar_Image, que contendrá el borde del avatar.
Desde la sección Panel del panel Paleta, anida una superposición en Backplate_StackBox y cámbiale el nombre a Nameplate_Overlay. La superposición permite superponer widgets unos encima de otros.
Desde el panel Paleta, arrastra y anida dos imágenes en Nameplate_Overlay.
Cambia el nombre de las imágenes por el de los materiales, Fondo y Borde.
Arrastra y anida un panel de caja de tamaño en Nameplate_Overlay.
Usa la caja de tamaño para establecer las propiedades de sus elementos derivados anidados. Esto evita que todo lo que esté dentro de la caja de tamaño se desborde y, posiblemente, cubra otros elementos de la IU o del juego.
Arrastra y anida una superposición debajo de la caja de tamaño y cámbiale el nombre a Text_Overlay.
Sin una superposición, solo puedes crear un widget derivado en la caja de tamaño.
Desde la sección Común del panel Paleta, arrastra y anida dos bloques de texto en Text_Overlay. Cambia el nombre de los bloques de texto a Activo e Inactivo.
El diseño de la IU está completo. A continuación, establecerás las propiedades del widget a fin de que el tamaño de los elementos de la IU de la placa posterior sea proporcional al tamaño de la pantalla.
Cómo establecer las propiedades de los widgets
El tamaño del panel contenedor se ajusta de forma automática al widget más grande que contiene. El panel base debe contener todos sus elementos derivados antes de que comiences a editar sus propiedades. De lo contrario, las proporciones del elemento base podrían cambiar a medida que se añadan elementos derivados de la IU en la pestaña Jerarquía.
Empieza con la configuración de las propiedades del panel Backplate_StackBox a fin de establecer la ubicación de la pantalla y los límites de la placa posterior.
Se editaron las siguientes propiedades para el diseño de esta placa posterior:
Haz clic en la imagen para ampliarla.
| Configuración | Valor |
|---|---|
Anclajes | Esquina inferior izquierda |
Alineación | Se debe establecer en un par de coordenadas que sirvan de relleno para tu widget desde los bordes de la pantalla. |
Ajustar el tamaño al contenido | True |
Orientación | Horizontal (todos los widgets derivados se mostrarán de izquierda a derecha). |
Cortante X | -20.0 (inclina la caja apilada de forma negativa hacia la derecha). |
Mantén presionado Shift + Control y haz clic en la esquina inferior izquierda para actualizar automáticamente la posición y la alineación de tu widget.
Las piezas básicas del diseño de la placa posterior están en su lugar. Ya puedes añadir los materiales que creaste y editar los bloques de texto de la placa de identificación.
Cómo añadir y editar los recursos de la placa posterior
El editor de widgets posee una configuración para que los widgets seleccionados añadan materiales y texto, así como para que modifiquen las propiedades de los recursos utilizados en la configuración del pincel.
Es importante tener en cuenta el orden de disposición del material en el panel Jerarquía. Cuando añadas tus recursos, asegúrate de que se muestren de forma adecuada. Los recursos de fondo deben superponerse en la parte inferior con los recursos adicionales en la parte superior.
Cómo editar instancias de material
Selecciona tus widgets en el panel Jerarquía para empezar a añadir tus materiales y texto.
Selecciona Imagen de avatar en la caja apilada para resaltar el widget y abrir sus propiedades en el panel de detalles.
En el panel de detalles, añade el material del borde del avatar a la configuración del pincel. Ajusta la configuración de tamaño de la imagen para que el widget de imagen se ajuste al material.
Haz clic en la imagen para ampliarla.
Los materiales son como la pintura. Cuando se añade a la configuración del pincel, el material llena el espacio del widget de imagen.
Si tienes avatares específicos para tu experiencia, haz lo siguiente:
* Crea una superposición para colocar una imagen de avatar debajo de un material de borde.
* Añade tus imágenes de avatar importadas a una capa de fondo de imagen.
* Utiliza el material de borde en la capa superior.
Selecciona la imagen de fondo en el panel Jerarquía para abrir las opciones de superposición en el panel de detalles.
En el panel de detalles, define la configuración de alineación horizontal y vertical en alineación central y añade el material de fondo a la configuración del pincel. Ajusta la configuración de tamaño de la imagen para que el widget de imagen se ajuste al color del material de fondo.
Haz clic en la imagen para ampliarla.
Selecciona la imagen de borde en Nameplate_Overlay para resaltar el widget y abrir sus propiedades en el panel de detalles.
En el panel de detalles, establece la alineación horizontal y vertical en alineación central y añade el material del borde a la configuración del pincel. Ajusta la configuración de tamaño de la imagen para que el borde rodee el color de fondo.
Haz clic en la imagen para ampliarla.
La placa posterior adquiere un aspecto básico, y puedes editar los bloques de texto.
Cómo editar la placa de identificación
La placa de identificación muestra las etiquetas de jugador del jugador. La placa posterior que se diseñó anteriormente contiene tanto la caja de tamaño y los bloques de texto.
Al editar las propiedades de la caja de tamaño, puedes evitar que el texto se extienda fuera de sus límites hacia otros elementos de la IU u obstruya la vista del jugador.
Selecciona la caja de tamaño en la jerarquía para abrir sus propiedades en el panel de detalles.
En el panel de detalles, define la configuración de alineación horizontal y vertical en alineación central. Esto centra automáticamente los bloques de texto en las imágenes de la placa de identificación. Establece las opciones de ancho y anulación de altura de la caja de tamaño en verdadero y define el tamaño deseado de Nameplate_Overlay.
La caja verde muestra el borde de la caja de tamaño.
Haz clic en la imagen para ampliarla.
En el panel Jerarquía, haz clic derecho en Caja de tamaño y selecciona Ajustar con… > Caja de tamaño para los bloques de texto a fin de ajustar el texto del jugador conforme a las propiedades de la caja de tamaño.
Se completó la configuración básica de la IU de la placa de identificación. Todos los elementos derivados adquieren las propiedades de los elementos base, por lo que la cantidad de edición que debes realizar en esos widgets es mínima.
Desde el panel de detalles, editarás los bloques de texto activos e inactivos al establecer la alineación y el tamaño de fuente, el color, el trazo y mucho más.
Asegúrate de que el texto activo sea de un color distinto del texto inactivo. En este ejemplo, la fuente del bloque de texto activo es blanco, de 145 de tamaño y trazo 6; y la fuente inactiva es SlateGrey, de 145 de tamaño y trazo 6.
Establece la configuración de visibilidad del cuadro de texto inactivo en Oculto. Esto evita que el texto se muestre hasta que se active la vinculación al widget en el juego.
Esto une todas las piezas, la placa de identificación y la placa posterior del avatar.
Cómo añadir la vista de vinculaciones
Ahora que terminamos de construir el diseño de la IU, es momento de añadir vinculaciones a los cuadros de texto y Avatar_Image en función de los datos que deben recibir durante una sesión en vivo.
El modelo de vista de información del jugador del controlador del HUD permite reemplazar partes del HUD con un widget personalizado. Para sacar provecho de esta configuración, debes crear un modelo de vista de tu placa posterior.
Texto del nombre del jugador
Para que el nombre de un jugador aparezca en el campo correcto, sigue estos pasos:
Abre la pestaña Vista de vinculaciones haciendo clic en Ventana > Vista de vinculaciones o seleccionando Vista de vinculaciones en la parte inferior de la pantalla y acoplándola.
Para consultar la lista HUDPlayerInfoViewModelBase de vista de vinculaciones:
1. Abre la ventana Modelos de vista seleccionando Ventana > Modelos de vista.
1. Ve a +Modelo de vista y selecciona Base de modelos de vista de la información del equipo o escuadrón del controlador de HUD del jugador.
En la Lista de información del equipo o escuadrón del controlador de HUD del jugador, se ofrece una manera de mostrar la información del jugador controlador sin su escuadrón o equipo.
1. Haz clic en Seleccionar.
Selecciona el bloque de texto de la lista de jerarquía o haciendo clic en el área del nombre del jugador de la pantalla de vista previa de la IU.
En la pestaña Vista de vinculaciones, haz clic en + Añadir widget Active_Name.
Selecciona el campo "PlayerName" activo y selecciona Texto > Seleccionar.
En el campo vacío de la derecha, selecciona HUDPlayerInfoViewModel > Información del jugador controlador > Nombre del jugador > Seleccionar en el menú desplegable.
La vinculación final debería verse de la siguiente manera:
Repite los pasos 2 y 3 para el elemento Inactive_Name.
Para modificar la configuración de visibilidad en el nombre inactivo, añade un nuevo widget a Inactive_Name. Selecciona en el primer campo y selecciona Visibilidad > Seleccionar en el menú desplegable.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > A visibilidad (booleano) > Seleccionar.
Al seleccionar esta opción, aparecen tres nuevos campos. Haz clic en el ícono de enlace que se encuentra al lado de Está visible. En el menú, selecciona HUDPlayerInfoViewModel > Información del jugador controlador > Está eliminado > Seleccionar.
Establece la visibilidad verdadera en No es comprobable (solo para uno mismo) más abajo. Deja la visibilidad falsa en Plegados. Cuando se elimina o se desconecta el jugador, el nombre reemplazará al Active_Name pero, cuando el jugador está vivo, permanecerá plegado.
La vinculación final de Inactive_Name debería verse así:
Haz clic en la imagen para ampliarla.
Haz clic en Compilar para enviar los cambios, ¡y ya terminaste con los nombres de los jugadores!
Ícono del avatar del jugador
Elige Avatar_Image en la jerarquía o haz clic en el área donde está el ícono del jugador en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget Profile_Image.
Ve a Avatar_Image > Pincel y presiona Seleccionar. Esta vinculación se realiza esencialmente en la configuración del pincel seleccionado en el panel de detalles de Avatar_Image.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > Crear el pincel de la imagen a partir del material > Seleccionar.
Establece los campos de tamaño de la imagen vacíos conforme al tamaño del material del borde de tu ícono en el widget. En este ejemplo, el material del borde es X=50 e Y=45.
La vinculación final debería verse de la siguiente manera:
Haz clic en la imagen para ampliarla.
Haz clic en Compilar para guardar tu widget.
A continuación, arrastrarás un dispositivo de controlador del HUD a tu proyecto y añadirás tu widget de UMG al dispositivo en el campo de anulación del widget de información del jugador.
Prueba el aspecto de la placa de identificación personalizada del avatar. Debería verse como la siguiente imagen.
Haz clic en la imagen para ampliarla.
