Cómo crear placas traseras personalizadas

Las placas traseras muestran diversa información, como la imagen del avatar del jugador, la «etiqueta del jugador», la salud, los escudos y mucho más en la visualización frontal (HUD). Las placas traseras realizan una serie de funciones diferentes, desde ayudar a identificar a los compañeros de equipo en juegos cooperativos multijugador hasta identificar estadísticas de escudo y poca salud.

En Unreal Editor para Fortnite (UEFN), las placas traseras se fabrican con materiales o una mezcla de texturas -engine/textures-in-unreal-engine?application_version=5.4) y materiales. Las texturas se utilizan como contenedores que añaden un toque decorativo a la placa trasera, para añadir detalles que un material no puede.

Sin embargo, las texturas pueden consumir mucha memoria. Esto puede suponer una carga para tu presupuesto de memoria y reducir el rendimiento de tu isla. Las texturas y los nodos Texture Sample de tu material consumen una gran cantidad de memoria en la isla.

Los materiales funcionan mejor para crear diseños planos y pueden añadir efectos animados a la placa trasera. Los materiales consumen menos memoria, ya que dependen de la GPU para ejecutar álgebra matemática sencilla. Esto te permite hacer cosas sencillas, como crear formas simples o animar interacciones complejas en un material.

Cuando optes por utilizar texturas, asegúrate de hacerlo con moderación: se recomienda evitar cualquier valor por encima de 256 × 256 píxeles para las texturas de la interfaz de usuario.

Los materiales, por otro lado, consumen menos memoria porque utilizan la GPU para el renderizado.

El método que utilices para las placas traseras de tu avatar dependerá de una serie de factores:

• Preferencia personal por el diseño de la interfaz de usuario.

• Estilo y diseño de interfaz de usuario que complementan el tipo de experiencia en la isla que creas.

• Cuánta memoria quieres ahorrar.

El diseño de la placa trasera del avatar de este tutorial utiliza tres instancias de material para el diseño básico. Los siguientes diseños de placas traseras se crearon utilizando el material M_UI_Shape_Rectangle para incluir:

• 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 interfaz de usuario con materiales! Consulta Cómo crear una interfaz de usuario personalizada a partir de materiales.

Configura un widget personalizado

Utiliza el proceso de trabajo del widget de usuario del documento Ventanas emergentes de la IU para:

1. Crear un widget de usuario.

2. Cambiar el nombre de la miniatura a Player_Info.

3. Haz doble clic en la miniatura para abrir el editor de widgets de UMG.

   

El editor de widgets es donde dispondrás el aspecto y la colocación de la pantalla para el diseño de tu placa trasera. Después, añadirás un modelo de vista para crear una funcionalidad de vinculación que capture la información existente del jugador y la vincule al diseño de la placa trasera.

En el grafo de eventos:

1. Selecciona el ajuste Rellenar pantalla en la esquina superior derecha y configúralo en Deseado.

   Con este ajuste, puedes cambiar tus widgets a un tamaño especificado para que tu IU pueda aparecer sin problemas durante el juego.

   

   Para disponer el diseño de interfaz de usuario de tu HUD personalizado, primero debes añadir paneles al grafo de eventos.

2. En el panel Paleta, ve hasta la sección Panel y arrastra un panel Lienzo al evento o directamente al panel Jerarquía. A continuación, cambia el nombre del panel por HUD_Canvas.

   El panel Lienzo permite anclar distintos elementos de la IU a lugares concretos de la pantalla. Asegúrate de tener un plan de diseño de interfaz de usuario antes de añadir más paneles al lienzo para asegurarte de que tu disposición se refleja en el panel Lienzo.

   Utiliza el panel Lienzo solo cuando necesites elementos específicos de la interfaz de usuario como parte de tu diseño. Por ejemplo, utiliza este panel si estás construyendo un HUD y necesitas disponer diferentes widgets hijos en lugares específicos de la pantalla.

   

   En lugar de cambiar el ajuste Rellenar pantalla a Deseado, puedes cambiar el tamaño del panel Lienzo a 1920 × 1080 o 2560 × 1440, que son las relaciones de aspecto de pantalla más habituales (16:9).

   

3. En la sección Panel del panel Paleta, anida una caja apilable bajo 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 trasera que anidará los widgets que componen las variables de tu IU.

   A medida que añadas variables a la caja apilable, se apilarán automáticamente de izquierda a derecha en el panel.

   

   También puedes utilizar la caja apilable para apilar los elementos de la IU de arriba abajo.

4. En la sección Común del panel Paleta, anida una imagen debajo de Backplate_StackBox y Jerarquía. A continuación, cambia el nombre de la imagen a Avatar_Image, que contendrá el borde del avatar.

   

5. En la sección Panel del panel Paleta, anida una superposición debajo de Backplate_StackBox y cámbiale el nombre a Nameplate_Overlay. La superposición permite superponer widgets unos encima de otros.

   

6. 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.

7. Arrastra y anida un panel Caja de tamaño debajo de Nameplate_Overlay.

   Utiliza la caja de tamaño para establecer las propiedades de sus hijos anidados. Esto evita que todo lo que esté dentro de la caja de tamaño se desborde y pueda cubrir otros elementos de la interfaz de usuario o del juego.

   

8. 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 tener un widget hijo debajo de la caja de tamaño.

   

9. Desde la sección Común del panel Paleta, arrastra y anida dos bloques de texto debajo de Text_Overlay. Cambia el nombre de los bloques de texto a Activo e Inactivo.

   

La disposición de la interfaz de usuario ha finalizado. A continuación, establecerás las propiedades del widget para que el tamaño de los elementos de la IU de la placa trasera sea relativo al tamaño de la pantalla.

Cómo establecer las propiedades del widget

Un panel contenedor ajusta automáticamente su tamaño al widget más grande que contenga. El panel padre debe contener todos sus hijos antes de que empieces a editar sus propiedades. De lo contrario, las proporciones del elemento padre podrían cambiar a medida que se añaden elementos hijos de la IU en el panel Jerarquía.

Empieza a configurar las propiedades del panel Backplate_StackBox para decidir la colocación de la pantalla y los límites de la placa trasera.

Se han editado las siguientes propiedades para el diseño de esta placa trasera:

Haz clic en la imagen para ampliarla.

Mantén pulsada la tecla Mayús + 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 de la disposición básica de la placa trasera están en su sitio. Ahora ya puedes añadir los materiales que has creado y editar los bloques de texto de la placa identificativa.

Cómo añadir y editar recursos de placa trasera

El editor de widgets tiene ajustes para que los widgets seleccionados añadan materiales y texto, así como para modificar las propiedades de los recursos utilizados en el ajuste Pincel.

Es importante tener en cuenta el orden de disposición del material en el panel Jerarquía. Cuando añadas recursos, asegúrate de que se muestren correctamente. Los recursos de fondo deben superponerse en la parte inferior con los recursos adicionales encima.

Cómo editar instancias de material

Selecciona tus widgets en el panel Jerarquía para empezar a añadir tus materiales y texto.

1. Selecciona Imagen de avatar en la caja apilable para resaltar el widget y abrir sus propiedades en el panel Detalles.

   

2. En el panel Detalles, añade el material del borde del avatar al ajuste Pincel. Ajusta la configuración de Tamaño de imagen para que el widget Imagen se ajuste al material.

   Haz clic en la imagen para ampliarla.

   Los materiales son como la pintura. Cuando se añade al ajuste Pincel, el material rellena el espacio del widget de imagen.

   Si tienes avatares específicos para tu experiencia, haz lo siguiente:

   • Crea una superposición para superponer una imagen de avatar bajo un material de borde.

   • Añade las imágenes de avatar importadas a una capa de fondo de Imagen.

   • Utiliza el material del borde en la capa superior.

3. Selecciona Imagen de fondo en el panel Jerarquía para abrir las opciones de Superposición en el panel Detalles.

   

4. En el panel Detalles, establece los ajustes de alineación horizontal y vertical en Alineación centrada y añade el Material de fondo al ajuste Pincel. Ajusta la configuración de Tamaño de imagen para ajustar el widget Imagen al color del material de fondo.

   Haz clic en la imagen para ampliarla.

5. Selecciona Imagen de borde en Nameplate_Overlay para resaltar el widget y abrir sus propiedades en el panel Detalles.

   

6. En el panel Detalles, establece la alineación horizontal y vertical en Alineación centrada y añade el Material de fondo al ajuste 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 trasera adquiere un aspecto básico y ya está todo listo para editar los bloques de texto.

Cómo editar la placa identificativa

La placa identificativa muestra las etiquetas de jugador del jugador. La placa trasera diseñada anteriormente contiene cajas de tamaño y bloques de texto.

Al editar las propiedades de Caja de tamaño puedes evitar que el texto se extienda más allá de sus límites hacia otros elementos de la IU u obstruya la visión del jugador.

1. Selecciona la caja de tamaño en el panel Jerarquía para abrir sus propiedades en el panel Detalles.

   

2. En el panel Detalles, establece los ajustes de alineación horizontal y vertical en Alineación centrada. Esto centra automáticamente los bloques de texto en las imágenes de la placa identificativa. Activa las opciones de anulación de anchura y altura de las cajas de tamaño y establece 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.

3. En el panel Jerarquía, haz clic con el botón derecho en Caja de tamaño y selecciona Envolver con… > Caja de tamaño de los bloques de texto para ajustar el texto del jugador según las propiedades de la caja de tamaño.

   

La configuración básica de la interfaz de usuario de la placa identificativa ha finalizado. Todos los elementos hijos adquieren las propiedades de sus elementos padres, por lo que la cantidad de edición que tienes que hacer en esos widgets es mínima.

Desde el panel Detalles editarás los bloques de texto activos e inactivos configurando 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 tiene un tamaño de 145 en blanco con trazo 6, y la fuente inactiva tiene un tamaño de 145 en gris pizarra con trazo 6.

Establece la opción Visibilidad del cuadro de texto inactivo en Oculto. Esto evita que el texto se muestre hasta que se active la vinculación con el widget en el juego.

Esto une todas las piezas, la placa identificativa y la placa trasera del avatar.

Cómo añadir vistas de vinculaciones

Ahora que el diseño de la interfaz de usuario está construido, es hora de añadir vinculaciones a los cuadros de texto y Avatar_Image en función de los datos que necesitan recibir durante una sesión en tiempo real.

El modelo de vista Controlador del HUD - Información del jugador permite sustituir partes del HUD por un widget personalizado. Para aprovechar este ajuste, tienes que crear un modelo de vista de tu placa trasera.

Texto del nombre del jugador

Para que el nombre de un jugador aparezca en el campo correcto, sigue estos pasos:

1. 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 HUDPlayerInfoViewModelBase de vinculaciones de vistas:

   1. Abre la ventana Modelos de vista desde Ventana > Modelos de vista.

   2. Ve a +Viewmodel y selecciona HUD Controller Team/Squad Player Info Viewmodel Base.

      La lista de información de jugadores de equipo/escuadrón del controlador del HUD permite mostrar la información del jugador con el control sin su plantilla o equipo.

   3. Haz clic en Seleccionar.

   

2. Selecciona el Bloque de texto de la lista Jerarquía o haciendo clic en el área Nombre del jugador de la pantalla de vista previa de la IU.

3. En la pestaña Vinculaciones de vistas, haz clic en + Añadir widget Active_Name.

   

4. Selecciona el campo "PlayerName" activo y selecciona Texto > Seleccionar.

   

5. En el campo vacío de la derecha, selecciona HUDPlayerInfoViewModel > Información del jugador controlador > Nombre del jugador > Seleccionar en el desplegable.

   

6. La vinculación final debe tener este aspecto:

   

7. Repite los pasos 2 a 3 para el elemento Inactive_Name.

8. Para modificar la configuración de visibilidad del nombre inactivo, añade un nuevo widget a Inactive_Name. Selecciona en el primer campo y elige Visibilidad > Seleccionar en el desplegable.

   

9. Haz clic en el campo vacío de la derecha y selecciona Funciones de conversión > A visibilidad (booleano) > Seleccionar.

   

10. Al seleccionar esta opción aparecen tres nuevos campos. Haz clic en el icono Vínculo situado junto a Es visible. En el menú, selecciona HUDPlayerInfoViewModel > Información del jugador controlador > Está eliminado > Seleccionar.

    

11. Establece Visibilidad verdadera como No admite prueba de posicionamiento (solo a sí mismo) a continuación. Deja Visibilidad falsa como Contraído. Cuando el jugador sea eliminado o se desconecte, el nombre sustituirá a Active_Name, pero cuando el jugador esté vivo, permanecerá contraído.

    

12. La vinculación final de Inactive_Name debe tener este aspecto:

    Haz clic en la imagen para ampliarla.

13. Haz clic en Compilar para enviar los cambios: habrás terminado con los nombres de los jugadores.

Icono del avatar del jugador

1. Elige Avatar_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.

2. Haz clic en + Añadir widget Profile_Image.

3. Ve a Avatar_Image > Pincel y pulsa Seleccionar. Esta vinculación observa esencialmente el ajuste Pincel seleccionado en el panel Detalles de Avatar_Image.

   

4. Haz clic dentro del campo vacío de la derecha y selecciona Funciones de conversión > Crear pincel de imagen a partir de material > Seleccionar.

   

5. Establece los campos vacíos de Tamaño de la imagen en el tamaño del material del borde de tu icono en el widget. En este ejemplo, el material del borde es X=50 e Y=45.

6. La vinculación finalizada debe tener este aspecto:

   Haz clic en la imagen para ampliarla.

7. Haz clic en Compilar para guardar el widget.

A continuación, arrastrarás un dispositivo Controlador del HUD a tu proyecto y añadirás tu widget de UMG al dispositivo en el campo Anular widget de información del jugador.

Juega a probar el aspecto de la placa identificativa personalizada del avatar. Debería parecerse a la siguiente imagen.

Haz clic en la imagen para ampliarla.