Cómo crear una vista de escuadrón personalizada

Social-image:squad-social.png

La creación de una vista de escuadrón personalizada se basa en el diseño del widget de placa identificativa para un solo jugador para crear una vista de escuadrón. El widget de la caja apilable transforma la vista del jugador de un solo jugador a la de un escuadrón reproduciendo el widget de información de un solo jugador mediante el modelo de vista.

La caja apilable es un contenedor que organiza las copias del widget de un jugador de forma lineal, de izquierda a derecha o de arriba abajo. Esto crea un aspecto coherente para el escuadrón.

En este ejemplo, la vista de escuadrón se apila hacia arriba y hacia abajo.

Para ver un ejemplo de apilamiento de un escuadrón de izquierda a derecha, consulta IU personalizada: Información del jugador en la documentación del juego de las Tortugas Ninja.

Widget Información del jugador

Para utilizar la información del jugador de los miembros del equipo durante una partida, el widget Player_Info debe configurarse mediante Modelo de vista - Dispositivo - Controlador del HUD - Información del jugador. Esta configuración crea widgets separados para el jugador que controla y su escuadrón/equipo utilizando las propiedades del modelo de vista Dispositivo - Controlador del HUD - Información del jugador para cada widget.

Puedes seguir utilizando los ajustes para establecer las vinculaciones de los tutoriales Placa trasera y la Salud y escudo para vincular los datos necesarios sobre el jugador.

Sin la configuración adecuada del widget Player_Info, obtendrás mensajes de error en el compilador.

A continuación se detallan los pasos para crear un widget de la pila de escuadrones que vincule los modelos de vista de información de jugadores de escuadrón/equipo con el icono del jugador, el nombre del jugador, la salud y los escudos.

Cómo crear un widget de usuario

1. Sigue los pasos de Ventanas emergentes de interfaz de usuario para crear un widget de usuario.

2. Nombra el widget de usuario Squad_View.

   

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

El editor de widgets es donde se planifica y se dispone el diseño de la IU para la vista de escuadrón. Una vez que te hayas decidido por una disposición, puedes añadir materiales para dar a tu IU un aspecto personalizado.

Ahora deberías tener dos widgets de usuario en el explorador de contenido: uno llamado Player_Info y el otro llamado Squad_View.

(w:400)

Cómo crear la disposición del escuadrón

Se recomienda incorporar un único widget Player_Info totalmente funcional en un widget Squad_View utilizando una caja apilable como contenedor. Esto proporciona un diseño coherente al reproducir el diseño de un solo jugador dentro de la caja apilable y repetir el diseño de arriba abajo o de izquierda a derecha.

Debes añadir el widget de un solo jugador al modelo de vista y, a continuación, ordenar la disposición en el grafo de eventos a través de la caja apilable.

Haz lo siguiente:

1. Arrastra una superposición debajo de Squad_Info y nómbrala Container_Overlay.

   

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

   

3. Anida una caja apilable debajo de Container_Overlay.

   

4. En el panel Detalles, cambia la siguiente configuración de la caja apilable:

   1. Relleno = 25

   2. Orientación = Vertical

   

   La caja apilable tiene 25 píxeles de relleno desde el borde de la pantalla.

5. En la barra de menús principal, selecciona Ventana > Modelos de vista para abrir el panel Modelo de vista.

   

6. Haz clic en +Ver modelo y, a continuación, selecciona Dispositivo - Controlador del HUD - Lista de información de jugadores de equipo/escuadrón > Seleccionar. Esto crea un modelo de vista para el dispositivo Controlador del HUD.

   

7. En el panel Detalles, haz clic en +Añadir extensión del modelo de vista. Esto abre opciones que permiten generar dinámicamente el widget de escuadrón dentro del widget Squad_View en función del número de jugadores de tu equipo o escuadrón.

1. En el ajuste Clase de widget de entrada, selecciona tu widget Player_Info en el desplegable y establece Modelo de vista de entrada en HUDPlayerInfoListViewModel.

   

2. Expande la opción Plantilla de ranuras y ajusta el espacio entre los widgets de cada jugador. Añade o elimina widgets y cambia la alineación. Utiliza estas opciones para visualizar el aspecto que tendrán los widgets en el juego.

   

   Si los elementos de tu IU son demasiado grandes para el espacio disponible, vuelve al widget Player_Info y ajusta el tamaño de tus widgets Imagen para que quepan en el widget Squad_View.

A continuación, añadirás vinculaciones para que toda la IU sea funcional para los escuadrones.

Vinculaciones de escuadrones

Para vincular la información de un escuadrón al widget Squad_View, tienes que hacer referencia a la información de los miembros del escuadrón mediante vinculaciones de vistas. Las vinculaciones indican al widget qué información necesita obtener de los dispositivos vinculados y para qué jugador. A continuación, la información de cada jugador se introduce en la interfaz de usuario mediante el dispositivo Controlador del HUD.

1. Selecciona la caja apilable en el panel Jerarquía, luego abre Vinculaciones de vistas y selecciona +Añadir widget. Esto añade la caja apilable como widget al panel Vinculaciones de vistas.

   

2. Selecciona Squad_View > Seleccionar en el menú desplegable Widget. Esto selecciona el widget de escuadrón y todos sus widgets internos para vincularlos.

   

3. En el campo Squad_View de la izquierda, selecciona Squad_View > StackBox > Modelo de vista StackBox > Establecer objetos > Seleccionar. 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.

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

   

   Si PlayerInfoStack_Viewmodel_Extension no figura en tu lista, haz clic en 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 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.

   

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

Añade tu widget al controlador del HUD y prueba tu proyecto.

Configuración del dispositivo Controlador del HUD

Hay algunos ajustes esenciales del controlador del HUD que debes cambiar. Ahora tendrás que sustituir estos elementos predeterminados del HUD de Fortnite por tu propio diseño de widget.

1. Arrastra un dispositivo Controlador del HUD a tu proyecto y deja el dispositivo seleccionado para rellenar su configuración en el panel Detalles.

   

2. En el panel 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 icono Guardar para guardar los cambios.

   

4. Selecciona Abrir sesión para probar tu IU personalizada.

   

Haz una prueba con dos o más jugadores para asegurarte de que la disposición funciona y se ve bien para la isla que has creado.