Crea una interfaz de usuario personalizada con el material base M_UI_Shape_Rectangle haciendo que el material sea una instancia de material base para utilizarlo en el widget de UMG. El material de forma también te permite crear formas planas que pueden utilizarse para crear diseños de interfaz de usuario únicos. El material M_UI_Shape_Rectangle se encuentra en el explorador de contenido, en la carpeta Fortnite, en IU > materiales.
Instancias de material que pueden utilizarse para rellenar un widget como la pintura. Materiales que son preferibles a añadir textura al widget porque el material utiliza menos memoria que la textura importada. Los material también son una forma mejor de diseñar una interfaz de usuario en UEFN y UE, especialmente para un diseño de interfaz de usuario plano porque es más fácil de renderizar, sin mencionar que puedes conseguir un aspecto sofisticado con material 3D y dinámico.
El widget UMG son referencias en la configuración especial de la IU de un dispositivo en Unreal Editor para Fortnite (UEFN). El widget de UMG sustituye a la IU predeterminada de Fortnite en la visualización frontal (HUD).
Para ver más tutoriales sobre el uso de materiales para crear interfaces de usuario, consulta lo siguiente:
Cómo crear formas personalizadas de interfaz de usuario
Antes de crear una forma de interfaz de usuario personalizada, decide cómo quieres que se vea y, a continuación, utiliza el material M_UI_Shape_Rectangle para diseñar el aspecto de tu widget de interfaz de usuario. Puede ser algo tan sencillo como un cuadrado personalizado o algo más complejo como una forma de flor. Los diseños pueden requerir varias formas que luego pueden colocarse juntas cuando crees el widget.
Para crear formas, primero debes crear una instancia de material del material original M_UI_Shape_Rectangle.
-
Haz clic con el botón derecho en la miniatura del material y selecciona Crear instancia de material.
-
En la ventana Guardar recurso como, asigna un nombre a tu instancia de material, que se guardará en la carpeta de contenido del proyecto. Nombra tus recursos de forma que se agrupen. Por ejemplo, en UEFN las instancias de material estándar empiezan por «M_UGC_» y terminan por «_Inst». El nombre de tu instancia de material debe ser algo parecido a M_UGC_Circus_Inst.
-
Haciendo doble clic en tu nueva instancia de material para que aparezca el editor de instancias de Mmaterial. También puedes acceder al editor haciendo clic con el botón derecho en el recurso y seleccionando Editar.
El panel Detalles del editor de instancias de material tiene las herramientas que necesitarás para personalizar completamente las instancias de material. Estas herramientas se encuentran en las secciones:
-
[1] Relleno
-
[2] Trazo
-
[3] Colores
-
[4] Estado(Con el cursor encima/Enfocado/Presionado/Deshabilitado)
Relleno
Las opciones de la sección Relleno afectan a la forma del material. Para muchas opciones como Transparencia de relleno, un valor 0.0 desactivará la configuración mientras que un valor 1.0 la activará. Recuerda siempre activar la opción Transparencia de relleno para que la forma se muestre en el visor.
En la imagen anterior, verás la configuración ajustada que se utilizó para crear una forma.
Trazo
Las opciones de la sección Trazo se pueden ajustar para crear un borde personalizable. Gracias al color azul preestablecido del borde, podrás ver tu diseño mientras ajustas los valores de las opciones de Trazo.
La imagen de arriba muestra la opción Transparencia de trazo ajustada en 1.0 para mostrar un borde azul.
Colores
Las opciones de la pestaña Color pueden modificarse para personalizar aún más las formas que crees. Estas opciones solo se pueden ajustar una vez que las hayas activado haciendo clic en su cuadro booleano correspondiente.
Incluso puedes crear degradados tanto para las formas como para los bordes. Puedes previsualizar los degradados a medida que se modifican en el visor.
En la imagen anterior los colores se aplican en degradado. Esta opción se activa ajustando el valor Degradado activado/desactivado 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 varios estados. Puedes establecer colores personalizados para diferentes acciones del jugador, como pasar el ratón por encima, enfocar, presionar o desactivar la forma de la interfaz de usuario.
A menos que establezcas un material para la opción Material físico, tu forma tendrá un límite transparente cuando se importe al widget que crees. Para evitarlo, establece tu material físico como Madera para que pueda renderizarse como un material real.
Cuando hayas terminado de personalizar la forma de tu interfaz de usuario, recuerda guardarlo todo haciendo clic en el icono del disquete de la esquina superior derecha. Tu instancia de material personalizada se guardará en la carpeta de contenido de tu proyecto.
El ejemplo de este tutorial utiliza formas que se combinan para formar un girasol junto con un fondo de botón.
Cómo crear widgets de interfaz de usuario
Ahora tendrás que crear widgets para que los jugadores interactúen con ellos. Consulta el documento Editor de widgets de interfaz de usuario para obtener más información sobre la creación de widgets y la organización de la pestaña Jerarquía.
Llegados a este punto, deberías haber creado instancias de material para cada elemento de tu diseño.
El ejemplo de este tutorial contiene varias instancias de un pétalo y un disco de flores. El botón consta de una base y dos imágenes que se utilizan como iconos del botón.
Estas instancias de material se dispondrán en blueprints de widget para crear un diseño personalizado. El blueprint de widget es lo que se importará en el dispositivo Diálogo emergente para anular la interfaz de usuario preexistente.
Crea un nuevo blueprint de widget que contenga tanto las instancias de material, como los widgets de botones que componen tu interfaz de usuario personalizada. Este será el blueprint del widget que se añadirá a la configuración del dispositivo.
En este widget, combina todas las instancias de material personalizado para crear tu diseño. Cuando crees tu widget de interfaz de usuario, arrastra recursos desde Común, IU Común, Panel, UIKIT y Creado por el usuario debajo del nombre de tu widget.
En la foto de arriba, los recursos se organizan en la pestaña Jerarquía y se reposicionan en el visor para dar forma de flor a la interfaz de usuario personalizada.
Cuando te guste el diseño, guarda el blueprint y vuelve al explorador de contenido. Este blueprint se importará ahora en un dispositivo Diálogo emergente que mostrará la interfaz de usuario personalizada.
Cómo añadir widgets a dispositivos
Cuando el diseño esté listo, coloca un dispositivo Diálogo emergente para mostrar tu widget.
Arrastra el widget a Detalles > Widget modal > Clase de anulación de plantilla.
Puedes ver y probar tu creación a través de una sesión iniciada.