En esta sección, aprenderás a crear superposiciones de IU totalmente personalizadas para tus juegos siguiendo los pasos para recrear la IU del jugador de la plantilla Arcade de las Tortugas Ninja.
El desglose básico de los pasos es el siguiente:
Crea una pila de información del jugador para varios jugadores simultáneos.
Configura el dispositivo Controlador del HUD para mostrar la IU personalizada.
Descarga el paquete de texturas UI Material Lab gratis y experimenta con tus propias configuraciones de IU.
Haz clic en la imagen para ampliarla.
¡Vamos a ello!
Configuración de widgets personalizados
En el explorador de contenido, ve a Todo > [nombre de tu proyecto] > IU > Widgets y abre el blueprint de widget UW_HUD_PlayerInfoBlock.
A la izquierda verás la pestaña Jerarquía, que funciona solo como el esquematizador de la ventana principal del editor y muestra los distintos componentes del widget terminado.
Coraza trasera
La parte superior está formada por tres imágenes de fondo que definen el aspecto en capas de la IU. Esto incluye:
Backplate1_Image: la capa de fondo de color gris
Backplate2_Image: la capa de contorno naranja
Backplate3_Image: la capa de contorno blanco
Juntas, estas imágenes crean el estilo enmarcado del panel de información del jugador.
Cuando importes imágenes para utilizarlas en tu interfaz de usuario, asegúrate de elegir IU en Grupo de texturas y UserInterface2D(RGBA8) en Configuración de compresión.
Nombre del jugador
Este componente está formado por dos elementos, un Nombre del jugador activo y un Nombre del jugador inactivo. Se mostrarán cuando el jugador esté vivo, eliminado o desconectado en el juego.
Elige dos colores distintos que informarán a los jugadores de quién de su equipo está actualmente activo y quién está eliminado.
Para el nombre del jugador activo, establece Visibilidad en Visible; para el inactivo, en Oculto. Solo se mostrará en determinadas condiciones.
Establece Anulación de la anchura en 220.0 para que los nombres de los jugadores más largos no se solapen con el icono del avatar del jugador.
Icono del avatar del jugador
Este componente muestra el retrato del personaje del jugador en función de su aspecto elegido en el juego.
Este componente está vinculado a una instancia de material denominada MI_UI_PlayerCard, que se encuentra en la carpeta IU > Instancias de material.
Puedes personalizar esta instancia de material a tu gusto cambiando la configuración en el panel Detalles. Prueba a importar tu propia imagen y añadirle algunos colores de contorno.
En este ejemplo, la imagen elegida es una imagen transparente vacía que se conectará más tarde al aspecto del personaje.
Salud
Este componente contiene las regiones que mostrarán los niveles de salud y escudo del jugador.
En el nivel padre, puedes ver el cuadro de tamaño que determina lo grande que puede ser la región global.
Lo siguiente es la imagen de la coraza trasera de salud, denominada MI_UI_Health_Backplate. Este material de IU también está disponible en Fortnite > IU > Materiales. Se puede personalizar y ofrece muchas opciones para mostrar la barra de salud del jugador desde el primer momento.
Encima de la coraza trasera hay una caja apilable formada por dos componentes: una barra de salud y una sombra denominada Health_Image y Health_Shadow, respectivamente.
Health_Image es un material de interfaz de usuario de barra de progreso personalizable. Si abres la instancia de material, puedes ampliarla cambiando el tamaño de vista previa.
Prueba a cambiar algunas de las configuraciones del panel Detalles para ver cómo afectan al material existente.
Como los valores de los parámetros escalares (el estado de relleno de la barra de progreso) van de 0 a 1 y los valores de salud y escudo de Fortnite suelen ir de 0 a 100, es importante establecer el multiplicador en 0.01 para que los valores de salud y escudo se muestren correctamente a los jugadores.
La barra Health_Shadow es una simple superposición sombreada añadida con fines estéticos.
Escudo
El componente de escudo está formado por un fondo Shields_Container que muestra el área vacía del escudo en gris oscuro y una imagen Shields_Image que contiene el material de la interfaz de usuario de la barra de progreso.
Shield_Image utiliza una instancia de material de barra de progreso básico, que es una versión simplificada del material Health_Image.
Cómo añadir vistas de vinculaciones
Ahora que ya has creado los componentes principales de la interfaz de usuario de tu juego, vamos a practicar cómo añadir vistas de vinculaciones que permitirán que cada uno de los componentes se actualice en función de los datos que reciba de una sesión en tiempo real.
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 ver la lista HUDPlayerInfoViewModel de vinculaciones de vistas:
1. Abre la ventana Modelos de vista desde Ventana > Modelos de vista.
1. Ve a +Modelo de vista y selecciona HUD - Base del modelo de vista de información de jugador.
1. Haz clic en Dispositivo - Controlador del HUD: modelo de vista de información del jugador y luego elige Seleccionar.
Selecciona NameActive_Text en la lista Jerarquía o haciendo clic en la zona del nombre del jugador en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget NameActive_Text y selecciona Texto en el menú desplegable.
En el campo vacío de la derecha, selecciona HUDPlayerInfoViewmodel y Nombre del jugador en el desplegable subsiguiente.
La vinculación final debe tener este aspecto:
Repite los pasos 1 a 3 para el elemento NameInactive_Text.
Para modificar la configuración de visibilidad del nombre inactivo, añade un nuevo widget a NameInactive_Text y selecciona Visibilidad en el desplegable.
Haz clic en el campo vacío de la derecha y selecciona Funciones de conversión > A visibilidad (booleano).
Al seleccionar esta opción aparecen tres nuevos campos. Haz clic en el icono del enlace situado junto a Es visible. En el menú, selecciona HUDPlayerInfoViewModel y Está eliminado.
Establece Visibilidad verdadera en No admite prueba de posicionamiento (solo a sí mismo) debajo. Deja Visibilidad falsa como Contraído. Cuando el jugador sea eliminado o se desconecte, el nombre sustituirá a NameActive_Text, pero cuando el jugador esté vivo, permanecerá contraído.
La vinculación final de NameInactive_Text debe tener este aspecto:
Haz clic en Compilar para enviar los cambios: habrás terminado con los nombres de los jugadores.
Icono del avatar del jugador
Elige Profile_Image en el panel Jerarquía o haz clic en el área del icono del jugador en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget Profile_Image.
Ve a Profile_Image > Pincel y pulsa Seleccionar. Esta vinculación busca básicamente la configuración de pincel seleccionada en el panel de detalles de Profile_Image.
Haz clic dentro del campo vacío de la derecha y selecciona Funciones de conversión > Establecer parámetro de textura.
Escribe Textura en el campo Nombre del parámetro. Para encontrar el nombre de este campo, abre la instancia de material del avatar del jugador.
En las funciones Establecer parámetro vectorial/escalar/textura, asegúrate de que los nombres de los parámetros de la instancia de material coinciden exactamente con el campo Nombre del parámetro.
Haz clic en el icono de enlace situado junto al campo Valor y selecciona HUDPlayerInfoViewModel > Icono del avatar del jugador.
La vinculación finalizada debe tener este aspecto:
Salud y escudo
Elige Health_Image en Jerarquía o haz clic en el área de la barra de salud en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget Health_Image.
Ve a Profile_Image > Pincel y pulsa Seleccionar.
Haz clic dentro del campo vacío de la derecha y selecciona Funciones de conversión > Establecer parámetro escalar.
Escribe Progreso en el campo Nombre del parámetro. Para encontrar el nombre de este campo, abre la instancia de material del avatar del jugador.
Haz clic en el icono de enlace situado junto a Valor y selecciona HUDPlayerInfoViewModel > Salud.
El progreso da un porcentaje de la salud restante del jugador, y como el multiplicador se ha ajustado a 0.1, cada punto porcentual moverá la barra de progreso una centésima. Puedes comprobarlo cambiando arbitrariamente el valor del porcentaje en la instancia de material para ver cómo se mueve la barra de progreso.
Porcentaje de salud Haz clic en la imagen para ampliarla.
La vinculación finalizada debe tener este aspecto:
Para la barra del escudo, repite los pasos del 1 al 6, pero elige Escudo en lugar de Salud.
La vinculación finalizada para el escudo debe tener este aspecto:
Haz clic en Compilar para enviar los cambios.
Widget completo
Esta vinculación garantiza que todo el widget se muestre solo después de que un jugador se conecte al juego.
Elige PlayerInfoBlock_Overlay en Jerarquía.
Selecciona + Añadir widget PlayerInfoBlock_Overlay y luego elige Visibilidad en el menú desplegable.
Haz clic en el campo vacío de la derecha y selecciona Funciones de conversión > A visibilidad (booleano). Al seleccionar esta opción aparecen tres nuevos campos.
Haz clic en el icono del enlace situado junto a Es visible. En el menú, selecciona HUDPlayerInfoViewModel y Está desconectado.
Establece Visibilidad verdadera en Contraído y Visibilidad falsa en No admite prueba de posicionamiento (solo a sí mismo).
La vinculación final debe tener este aspecto. Pulsa en Compilar para guardar los cambios.
Eso es todo, ¡ahora tienes un widget de interfaz de usuario totalmente configurado que mostrará información del juego!
Creación de una pila de jugadores
Esta sección te mostrará cómo crear un widget de usuario que muestre jugadores adicionales de escuadrón junto con el jugador controlador.
Para empezar, crea un nuevo blueprint de widget haciendo clic con el botón derecho del ratón en el explorador de contenido y seleccionando Interfaz de usuario > Blueprint de widget.
Selecciona Widget de usuario en el cuadro de diálogo y cámbiale el nombre a HUDInfoStack.
Haz doble clic en el widget de usuario para abrir una nueva ventana del editor.
Desde el panel Paleta, arrastra un elemento de superposición al panel Jerarquía para empezar.
Arrastra una caja apilable al nivel inferior a la superposición y cámbiale el nombre a PlayerInfoStack.
En el panel Modelos de vista, haz clic en +Modelo de vista y selecciona Dispositivo - Controlador del HUD: lista de información del jugador del equipo/escuadrón.
Dirígete al panel Detalles y selecciona +Añadir extensión del modelo de vista. Esto permite que PlayerInfoStack acepte una clase de widget de entrada.
Si no ves estas opciones, intenta compilar el widget de nuevo.
Para la clase de widget de entrada, selecciona el PlayerInfoBlock que creaste previamente. A continuación, selecciona HUDPlayerInfoViewmodel como Modelo de vista de entrada.
En la sección Plantilla de ranura, puedes ajustar el espaciado entre cada widget y la alineación, y previsualizar cómo quedaría un determinado número de widgets en el juego.
Espaciado entre widgetsHaz clic en el gif para ampliarlo.
En el panel Vista de vinculaciones, haz clic en +Añadir widget y elige HUDInfoStack. Ve a PlayerInfoStack_Viewmodel_Extension y amplíalo para ver Establecer elementos y seleccionar la opción. Si PlayerInfoStack_Viewmodel_Extension no figura en tu lista, haz clic en Compilar para que aparezca.
En el campo vacío de la derecha, selecciona HUDPlayerInfoListViewModel > Matriz de información de los jugadores del equipo/escuadrón. Esto pasa la matriz de modelos de vista de información del jugador a la extensión recién configurada con una función denominada Establecer elementos.
Pulsa en Compilar para guardar los cambios. Ahora ya puedes añadirlos a tu juego utilizando el dispositivo Controlador del HUD.
Si quieres hacer un widget para el jugador controlador que esté separado del resto de la plantilla:
Crea un nuevo widget para el jugador controlador y configura la vista de vinculaciones como lo hiciste anteriormente mediante Dispositivo Controlador del HUD - Modelo de vista de información del jugador.
Coloca este widget debajo del widget padre que contiene la caja apilable.
Crea una vinculación para ese widget. En el campo de la izquierda, selecciona Dispositivo Controlador del HUD - Modelo de vista de información del jugador. En el campo de la derecha, selecciona Dispositivo Controlador del HUD - Lista de información de jugador de equipo/escuadrón > Información del jugador controlador.
Cómo configurar el dispositivo controlador del HUD
Busca el dispositivo Controlador del HUD en el explorador de contenido y arrástralo a tu escena.
En las opciones de usuario, elige lo que quieres que vea el jugador y asegúrate de que Mostrar HUD esté activado y Mostrar información del equipo esté desactivado.
Desplázate hasta Anulación del widget de información del jugador y arrastra el widget HUDInfoStack al campo vacío. Asegúrate de que sea el widget de la pila recién creado, no el widget original que creaste.
Haz clic en Guardar.
¡Y ya está! Ahora debería aparecer tu nueva interfaz cuando pruebes el juego.
A continuación
A continuación, aprenderás a configurar las cámaras y los dispositivos de control para tu juego de desplazamiento lateral.
