Crea una IU personalizada con el material base M_UI_Shape_Rectangle al crear instancias de material a partir del material base para utilizarlo en los widgets de UMG. El material de forma también te permite crear formas planas que se pueden utilizar para crear diseños de IU únicos. El material M_UI_Shape_Rectangle se encuentra en el explorador de contenido, en la carpeta Fortnite, en IU > Materiales.
Las instancias de material se pueden utilizar para rellenar un widget como la pintura. Se prefieren los materiales para añadir textura al widget porque el material utiliza menos memoria que la textura importada. Los materiales también son mejores para diseñar la IU en UEFN y UE, en especial para un diseño plano de IU porque es más fácil de renderizar, sin mencionar que puedes conseguirlo con materiales 3D dinámicos.
Se hace referencia a los widgets de UMG en ajustes especiales de la IU en algunos dispositivos de Unreal Editor para Fortnite (UEFN). Los widgets de UMG reemplazan la IU predeterminada de Fortnite en la pantalla de visualización frontal (HUD).
Para ver más tutoriales sobre el uso de materiales a fin de crear IU, consulta lo siguiente:
Cómo crear formas de IU personalizadas
Antes de crear una forma de IU personalizada, decide cómo quieres que se vea la IU; luego, utiliza el material M_UI_Shape_Rectangle para diseñar el aspecto de tu widget de IU. Puede ser algo tan sencillo como un cuadrado personalizado o algo más complejo, como la forma de una flor. Los diseños pueden requerir varias formas que, luego, se pueden unir al crear el widget.
Para crear formas, primero debes crear una instancia de material del material M_UI_Shape_Rectangle original.
Haz clic derecho en la miniatura de material y selecciona Crear instancia de material.
En la ventana Guardar recurso como, nombra la instancia de material que se guardará en la carpeta de contenido de tu proyecto. Nombra tus recursos de forma que se agrupen. Por ejemplo, las instancias de material en UEFN comienzan con "M_UGC_" y terminan con "_Inst". El nombre de tu instancia de material debería verse de la siguiente manera: M_UGC_Circus_Inst.
Haz doble clic en tu nueva instancia de material para abrir el editor de instancias de material. También puedes acceder al editor al hacer clic derecho en el recurso y seleccionar Editar.
El panel de detalles del editor de instancias de material tiene las herramientas para que personalices por completo las instancias de material. Estas herramientas se encuentran en las siguientes secciones:
[1] Relleno
[2] Trazo
[3] Colores
[4] Estado (emergente/enfocado/presionado/deshabilitado)
Relleno
Las opciones de la sección Relleno afectan la forma de tu material. Para muchas opciones, como Transparencia de relleno, el valor 0.0 sirve para desactivar la configuración, mientras que el valor 1.0 sirve para activarla. Siempre recuerda activar la opción Transparencia de relleno para que tu forma aparezca en el visor.
En la imagen anterior, verás los ajustes que se utilizaron para crear una forma.
Trazo
Las opciones de la sección Trazo se pueden ajustar para crear un borde personalizable. Debido al color de borde azul preestablecido, podrás ver tu diseño a medida que ajustes los valores opcionales del trazo.
En la imagen anterior, se muestra la opción Transparencia de trazo establecida en 1.0 para mostrar un borde azul.
Colores
Las opciones en la pestaña Color se pueden modificar para personalizar aún más las formas creadas. Estas opciones solo se pueden ajustar una vez que actives la opción haciendo clic en la casilla booleana correspondiente.
Incluso puedes crear gradientes tanto para las formas como para los bordes. Puedes previsualizar las gradientes a medida que se modifican en el visor.
En la imagen anterior, los colores se aplican en degradado. Esta opción se activa al ajustar el valor Gradiente activada/desactivada por encima de 0.0.
Estado
Esta opción se encuentra en la sección Color y puede modificarse para establecer los colores de la forma a través de diferentes estados. Puedes establecer colores personalizados para diferentes acciones del jugador, como oscilar, concentrar, presionar o deshabilitar la forma de tu IU.
A menos que establezcas la opción Material físico para un material, tu forma tendrá un límite transparente al importarse al widget que crees. A fin de evitar esto, establece tu material físico a Madera, de manera que pueda renderizarse como un material real.
Cuando hayas terminado de personalizar la forma de tu IU, recuerda guardarla haciendo clic en el ícono del disco de la esquina superior derecha. Tu instancia de material personalizada se guardará en la carpeta de contenido de tu proyecto.
En el ejemplo de este tutorial, se utilizan formas que se combinan para formar un girasol junto con el fondo de un botón.
Cómo crear widgets de IU
Ahora tendrás que crear widgets para que los jugadores interactúen con ellos. Lee el documento Editor de widgets para obtener más información sobre cómo crear widgets y organizar la pestaña Jerarquía.
En este punto, deberías haber creado instancias de material para cada elemento de tu diseño.
El ejemplo de este tutorial consiste en varias instancias de un pétalo de flor y el centro de una flor. El botón consta de una base y dos imágenes que se utilizan como íconos de botón.
Estas instancias de material se organizarán en blueprints de widgets a fin de crear un diseño personalizado. El blueprint de widgets es lo que se importará al dispositivo de diálogo emergente para anular la IU preestablecida.
Crea un nuevo blueprint de widgets que contendrá tanto las instancias de material como los widgets de botón que componen tu IU personalizada. Este es el blueprint de widgets que se añadirá a la configuración del dispositivo.
En este widget, combina todas tus instancias de material personalizadas y crea tu diseño. A medida que crees el widget de tu IU, arrastra los recursos desde Común, IU común, Panel, UIKIT y Usuario creado debajo del nombre de tu widget.
En la imagen anterior, los recursos se organizan en la pestaña Jerarquía y se reubican en el visor para adoptar la forma de una flor en la IU personalizada.
Cuando estés conforme con tu diseño, guarda tu blueprint y regresa al explorador de contenido. Este blueprint se importará al dispositivo de diálogo emergente que se mostrará en la IU preestablecida.
Cómo añadir widgets a los dispositivos
Cuando tu diseño esté listo, coloca un dispositivo de diálogo emergente para mostrar tu widget.
Arrastra tu widget a Detalles > Widget modal > Clase de anulación de plantillas.
Puedes visualizar y probar tu creación a través de un inicio de sesión.