Cómo crear una vista personalizada del escuadrón

La creación de una vista personalizada del escuadrón se compila en el diseño del widget de la placa de identificación de un jugador a fin de crear una vista del escuadrón. El widget de cajas apiladas transforma la vista del jugador de un solo jugador a un escuadrón mediante la reproducción del widget de información de un jugador usando el modelo de vista.

La caja apilada es un contenedor que organiza las copias del widget de un solo jugador de forma lineal, ya sea de izquierda a derecha o de arriba a abajo. De este modo, se creará un aspecto coherente para el escuadrón.

Para este ejemplo, la vista del escuadrón se apila hacia arriba y abajo.

Widget de información del jugador

A fin de utilizar la información del jugador de los miembros del equipo durante una partida, el widget Player_Info se debe configurar mediante el uso de Dispositivo: modelo de vista de información del jugador del controlador del HUD. Esta configuración crea widgets separados para el jugador que controla y su escuadrón o equipo mediante el uso de las propiedades en Dispositivo: modelo de vista de la información del jugador del controlador del HUD para cada widget.

Puedes seguir usando la configuración a fin de establecer las vinculaciones desde los tutoriales de Placa posterior y Vida y escudo con el objetivo de vincular la información necesaria del jugador.

Si no cuentas con la configuración adecuada del widget Player_Info, recibirás mensajes de error en el compilador.

A continuación, se detallan los pasos para crear un widget de pila de escuadrón que vincule los modelos de vista que aparecen en la lista de información de los jugadores del equipo o escuadrón al ícono del jugador, su nombre, vida y escudos.

Cómo crear un widget de usuario

1. Sigue los pasos que aparecen en Textos emergentes de la IU a fin de crear un widget de usuario.

2. Asigna el nombre Squad_View al widget de usuario.

   

3. Haz doble clic en la miniatura del widget de usuario a fin de abrir el editor de eventos en Unreal Motion Graphics (UMG).

El editor de widgets es donde planificas y creas el diseño de tu IU para la vista del escuadrón. Una vez que hayas decidido un diseño, puedes añadirle materiales a fin de personalizar tu IU.

Ahora debes tener dos widgets de usuario en el explorador de contenido: uno llamado Player_Info y el otro, Squad_View.

Cómo crear el diseño del escuadrón

Se recomienda llevar un widget Player_Info único y completamente funcional a un widget Squad_View mediante el uso de una caja apilada como contenedor. Esto ofrecerá un diseño coherente cuando se reproduzca el diseño de un solo jugador dentro de la caja apilada y se repetirá de arriba a abajo o de izquierda a derecha.

Añadirás el widget de un solo jugador al modelo de vista y, luego, organizarás el diseño en el gráfico de eventos por medio de la caja apilada.

Haz lo siguiente:

1. Arrastra una superposición debajo de Squad_Info y asígnale el nombre Container_Overlay.

2. Cambia el tamaño de Container_Overlay a 2560 x 1440. Este es el tamaño óptimo para todas las pantallas.

   

3. Anida una caja apilada en Container_Overlay.

4. En el panel de detalles, cambia la siguiente configuración de la caja apilada:

   1. Relleno = 25

   2. Orientación = Vertical

   

   La caja apilada tiene 25 px de relleno desde el borde de la pantalla.

5. En la barra de menús principal, selecciona Ventana > Modelos de vista a fin de abrir el panel de modelo de vista.

   

6. Haz clic en +Modelo de vista y, luego, selecciona Dispositivo: lista de información de jugadores de equipo/escuadrón de controlador del HUD > Seleccionar. Esto creará un modelo de vista para el dispositivo del controlador del HUD.

7. En el panel de detalles, haz clic en +Añadir extensión del modelo de vista. Esto abrirá las opciones que brindan una forma de generar de manera dinámica el widget del escuadrón que está dentro del widget Squad_View en función de la cantidad de jugadores que haya en tu equipo o escuadrón.

   

   

   Antes de +Añadir extensión del modelo de vista

   Después de +Añadir extensión del modelo de vista

8. Desde la configuración de clase de widget de entrada, selecciona tu widget Player_Info del menú desplegable y establece el ViewModel de entrada en HUDPlayerInfoListViewModel.

9. Despliega la opción Plantilla de ranuras y ajusta el espacio entre cada widget de jugador. Añade o elimina widgets, y cambia la alineación. Utiliza estas opciones a fin de visualizar el aspecto que tendrán los widgets en el juego.

   Si los elementos de tu IU son demasiado grandes para el espacio disponible, regresa al widget Player_Info y ajusta el tamaño de tus widgets de imagen a fin de que entren en Squad_View.

Luego, añadirás vinculaciones con el objetivo de que toda la IU funcione para los escuadrones.

Vinculaciones de los escuadrones

Con el objetivo de vincular la información de un escuadrón al widget de Squad_View, debes hacer referencia a la información del miembro del escuadrón mediante las vistas de vinculaciones. Las vinculaciones le indican al widget qué información necesita obtener de los dispositivos vinculados y para qué jugador. Luego, la información de cada jugador se introduce en la IU a través del dispositivo controlador del HUD.

1. Selecciona la caja apilada en el panel de jerarquía; luego, abre Vista de vinculaciones y selecciona +Añadir widget. Se añadirá la caja apilada como un widget al panel de vista de vinculaciones.

2. Selecciona Squad_View > Seleccionar en el menú desplegable del widget. Se seleccionará el widget de escuadrón y todos sus widgets internos a fin de vincularlos.

   

3. En el campo Squad_View de la izquierda, selecciona Squad_View > StackBox > Modelo de vista de StackBox > Establecer elementos > Seleccionar. Esto pasará la matriz de modelos de vista de información del jugador a la extensión recién configurada con una función que se llama Establecer elementos.

   Si no ves la función Establecer elementos en este paso, compila el widget y vuelve a comprobarlo.

   

   Si PlayerInfoStack_Viewmodel_Extension no aparece en la lista, presiona Compilar para que aparezca.

4. En el campo vacío de la derecha, selecciona Squad_View > HUDPlayerInfoListViewModel > Matriz de información de jugadores de equipo/escuadrón > Seleccionar. Esto pasará la matriz de modelos de vista de información del jugador a la extensión recién configurada con una función que se llama Establecer elementos.

   

5. Haz clic en Compilar. Tu widget está listo para añadirse al dispositivo de controlador del HUD.

Añade tu widget al controlador del HUD y realiza una prueba de juego de tu proyecto.

Configuración del dispositivo de controlador del HUD

Existen algunas configuraciones esenciales del controlador del HUD que se deben cambiar. Reemplazarás estos elementos predeterminados del HUD de Fortnite con tu propio diseño de widget.

1. Arrastra un dispositivo de controlador del HUD a tu proyecto y deja el dispositivo seleccionado para completar su configuración en el panel de detalles.

2. En el panel de detalles, establece las siguientes opciones:

   1. Mostrar HUD = Sí

   2. Anular widget de información del jugador = Nombre de tu widget

3. Haz clic en el ícono Guardar para guardar tus cambios.

   

4. Selecciona Comenzar sesión a fin de realizar una prueba de juego de tu IU personalizada.

   

Realiza una prueba de juego con dos o más jugadores con el objetivo de asegurarte de que el diseño funcione y se vea bien para la isla que creaste.