Bloque de material

Los materiales tienen muchas funciones en UEFN debido a los parámetros editables de los materiales que se muestran en Verse.  Los materiales parametrizados son fundamentales para crear una interfaz de usuario (IU) de calidad con un material_block. 

Un material_block utiliza los parámetros de un material de IU o de instancias de material para modificar y controlar los valores de los parámetros mediante código de Verse para crear una IU de aspecto dinámico. Por ejemplo, los parámetros de un material de medidor de la IU se pueden manipular en Verse para programar el comportamiento del material cuando el jugador recibe daño o se lo inflige a un enemigo.

Antes de escribir una línea de código, piensa en cómo quieres utilizar los materiales en tu IU. Crea estructuras alámbricas para determinar el aspecto que quieres que tenga tu IU y qué quieres que hagan los materiales.

Materiales y texturas de la IU

La programación de un espacio de material_block comienza con la creación de tu material de IU. Puedes utilizar las funciones de materiales y los materiales disponibles en la plantilla de funciones de interfaz de usuario, o bien crear tu propio material personalizado desde cero.

Materiales

Crear un nuevo material personalizado diferencia tu IU de otras que modifican materiales de IU existentes y de fácil acceso. Configura primero tus materiales de IU. Sigue los siguientes pasos básicos de configuración y las prácticas recomendadas para crear materiales de IU:

• En el nodo de material principal establece el dominio del material como Interfaz de usuario.

• Modifica tu material raíz para que sea sencillo.

• Cuantos más parámetros tengas, más libertad tendrás con tu material.

• Convierte tu material en una instancia de material cuando el material esté completo.

Las instancias de material se utilizan como un tipo de class en el código de Verse. En Verse puedes establecer valores por defecto en las propiedades y parámetros de tu material.

Texturas

Las texturas añaden un toque de distinción al diseño de la IU que no se puede conseguir solo con los materiales. UEFN contiene una carpeta de texturas que puedes utilizar en tu IU en Carpeta del proyecto > Fortnite > Texturas. Las texturas que importes deben obedecer la regla de la potencia de dos.

Los nodos de material utilizan parámetros del material y los exponen en el código de Verse. Con Verse, puedes utilizar los parámetros del material para seleccionar los valores de los píxeles de la textura (denominados téxeles) dentro del material con el fin de crear un tipo de máscara o realizar otros cálculos para editar y modificar el aspecto y el comportamiento de las texturas.

Para asegurarte de que tus texturas estén optimizadas para su uso en la IU, abre la miniatura y utiliza los siguientes ajustes en el panel Detalles:

• Configura Ajustes de generación de MIP en Sin mapas MIP.

• Establece Grupo de texturas en IU.

• Establece Ajustes de compresión en Interfaz de usuario 2C (RGBA8).

Las texturas importadas que no se ajustan a la regla de la potencia de dos pueden editarse para que se adapten a la escala de textura adecuada. Para editar una textura, sigue las instrucciones de Redimensionamiento de texturas.

Ejemplo de bloque de material 1

Un material_block se utiliza como uno de los espacios dentro de un widget personalizado creado con código de Verse. Durante el juego, el material_block te permite manipular los parámetros del material a través de Verse para cambiar el aspecto y el comportamiento del material de la IU/instancia de material en el HUD. Esto es similar a cómo un image_block te permite utilizar una textura en Verse.

El widget de material personalizado se utiliza de varias maneras en el código de Verse:

• Permite utilizar parámetros de material para determinar el tamaño, el comportamiento y el aspecto del material en la IU.

• Pasa datos de Verse a los parámetros, lo que permite que estos sean controlados por datos dinámicos del juego que solo están disponibles en Verse.

El siguiente código muestra cómo se utiliza material_block para mostrar un bloque de material que se disuelve en el HUD. El bloque de código completo se puede encontrar en la sección Código completo a continuación.

Módulos para IU y materiales

Los siguientes módulos contienen las funciones utilizadas para controlar el material_block como un widget de IU y determinar los colores, la colocación y otras características del material.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }

Cómo orientar los widgets de UMG y los materiales de IU en la clase de dispositivo

En la clase de dispositivo de Verse, se declara una variable del widget StackBox denominada MyUI. con un ajuste de Orientación de orientation.Vertical. Esto hace que la caja apilable muestre su contenido verticalmente.

A continuación, se declara un parámetro UI.MaterialBlock.MI_UI_Dissolve_material denominado DissolveMaterial con un parámetro Dissolve y se le asigna un valor predeterminado de 0.2.

materialblock_test_device := class(creative_device):

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Cómo controlar la IU y los materiales con la función OnBegin

En la función OnBegin, se crea un cuadrado en el HUD que se disuelve cuando comienza el juego. 

La variable DissolveMaterialBlock es de tipo material_block y hace referencia al material de la IU estableciendo DefaultImage en el material de la IU (DissolveMaterial), mientras que DefaultDesiredSize establece el tamaño predeterminado del material_block cuando se renderiza en un widget utilizando coordenadas X e Y.

Se utiliza una expresión for para mostrar la IU en pantalla para cada jugador del espacio de juego. La función GetPlayspace(). GetPlayers() obtiene una matriz de todos los jugadores de la partida y, a continuación, añade el widget que contiene el material_block a su HUD en función de las siguientes instrucciones de la expresión do:

• Crea una caja apilable denominada MyStackBox.

• Establece su orientación en vertical.

• Inserta DissolveMaterialBlock en el primer espacio de MyStackBox.

• Establece MyUI en MyStackBox para que pueda añadirse al HUD del jugador fuera de este bucle.

    OnBegin<override>()<suspends>:void=
        DissolveMaterialBlock := material_block:
            DefaultImage := DissolveMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}

        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            MyStackBox:stack_box = stack_box:

Código completo

Copia y pega el bloque de código completo a continuación para ver el bloque de material que se disuelve en el HUD.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }

materialblock_test_device := class(creative_device):

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Ejemplo de bloque de material 2

Este ejemplo se basa en el anterior e incorpora dos materiales de IU adicionales, un dispositivo activador y dispositivos activador de entrada. Los activadores se utilizan para mostrar y cambiar el material que se muestra en el HUD.

El código de Verse comienza con los mismos módulos que el bloque de código anterior para controlar el material_block y determinar los parámetros del material de IU. Se requiere un módulo adicional para que funcionen las propiedades editables de este código:

using { /Verse.org/Simulation }

Cómo configurar la clase de dispositivo de Verse

Esta clase de dispositivo de Verse tiene más funcionalidad que la clase de dispositivo anterior. Se utiliza una expresión message denominada Text para mostrar el mensaje «Esto es un bloque de texto». Esta expresión se llama en la función OnBegin mediante un text_block.

# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):

    Text<localizes><public> : message = "This is a Text Block."

Se añaden tres dispositivos activador editables y dos dispositivos activador de entrada editables a la clase de dispositivo para controlar el material_block y StackBox. Cada activador recibe el nombre de la función que realiza, por ejemplo:

• TriggerShow

• TriggerChange

• TriggerHide

• InputTriggerInc (aumenta un valor)

• InputTriggerDec (disminuye un valor)

   @editable
    TriggerShow:trigger_device = trigger_device{}
    @editable
    TriggerChange:trigger_device = trigger_device{}
    @editable
    TriggerHide:trigger_device = trigger_device{}
    @editable
    InputTriggerInc:input_trigger_device = input_trigger_device{}
    @editable
    InputTriggerDec:input_trigger_device = input_trigger_device{}   

Se declara una variable del widget StackBox denominada MyUI, igual que la variable MyUI del código anterior.

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

Los tres materiales de IU (RadialMaterial, StripeMaterial y DissolveMaterial) se añaden a la clase del dispositivo y se asignan valores predeterminados a sus efectos de material.

    RadialMaterial:UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material = UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material {Progress := 1.0}
    StripeMaterial:UI.MaterialBlock.MI_UI_Stripe_material = UI.MaterialBlock.MI_UI_Stripe_material {Speed := 0.5}
    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Cómo controlar la IU, los materiales y los activadores con la función OnBegin

La función OnBegin configura los controles para los distintos dispositivos activador suscribiéndose a diferentes funciones de sus TriggeredEvents y controla los dispositivos activador de entrada suscribiéndose a funciones de sus PressedEvents. Cuando el valor predeterminado aumenta o disminuye, los materiales de la IU se ven afectados por Verse, que utiliza el material_block para hacer lo siguiente:

• OnShow: muestra el material de IU en el HUD del jugador.

• OnChange: cambia el parámetro Progress del material de IU para mostrar un cambio en el material de relleno.

• OnHide: oculta el material de IU al jugador.

• IncreasesValue: aumenta el progreso y la velocidad a la que se disuelve el material, así como la cantidad de disolución del mismo.

• DecreasesValue: disminuye el progreso y la velocidad a la que se disuelve el material, así como la cantidad de disolución del mismo.

    OnBegin<override>()<suspends>:void=
        Print ("Init")


        TriggerShow.TriggeredEvent.Subscribe(OnShow)
        TriggerChange.TriggeredEvent.Subscribe(OnChange)
        TriggerHide.TriggeredEvent.Subscribe(OnHide)
        InputTriggerInc.PressedEvent.Subscribe(IncreaseValue)
        InputTriggerDec.PressedEvent.Subscribe(DecreaseValue)

Se utiliza una variable text_block denominada Label para añadir un text_block al dispositivo de Verse. El text_block se utiliza para representar una cadena de texto en el HUD de un jugador. Un text_block muestra el mensaje codificado en la variable Default Text y controla el aspecto y la ubicación del texto mediante los siguientes ajustes del bloque de texto:

• DefaultTextColor

• DefaultShadowColor

• DefaultShadowOffset

        var Label:text_block = text_block:
            DefaultText := Text,
            DefaultTextColor := NamedColors.White,
            DefaultShadowColor:= color{R:=0.0, G:=0.0, B:=0.0},
            DefaultShadowOffset := option{vector2{X:=5.0, Y:=2.0}}

Los tres materiales de IU se añaden a las expresiones y se controlan mediante material_block.

        RadialMaterialBlock := material_block:
            DefaultImage := RadialMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}


        StripeMaterialBlock := material_block:
            DefaultImage := StripeMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}

Se utiliza una expresión for para determinar cuándo aparece la IU en pantalla y qué IU se muestra. 

La IU aparece en pantalla al encontrar a cada jugador en el espacio de juego mediante GetPlayspace().GetPlayers() y, a continuación, llama a GetPlayerUI[Player] para devolver la clase player_ui del jugador.  Esto es esencial para añadir un widget al HUD/IU de un jugador.

        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]

A continuación, en la expresión do, se crea una nueva stack_box denominada MyStackBox utilizando la configuración del widget StackBox de UMG. Una vez asignados los valores de los widgets a MyStackBox, se asignan todos los valores MyStackBox a una nueva variable denominada MyUI en tiempo de ejecución. 

Esto permite que MyUI utilice las propiedades del widget StackBox y haga referencia al material_block para hacer lo siguiente:

• Utiliza la propiedad Orientation de StackBox.

• Asigna un stack_box_slot a cada variable material_block, text_block y Label dentro de una matriz utilizando la expresión Slots:array para organizar los objetos de la matriz.

        do:
            MyStackBox:stack_box = stack_box:
                Orientation := orientation.Vertical
                Slots := array:
                    stack_box_slot:
                        Widget := stack_box:
                            Orientation := orientation.Horizontal
                            Slots := array:
                                stack_box_slot:
                                    Widget := RadialMaterialBlock

Cómo crear la funcionalidad de OnShow

Una vez que se llama a TriggerShow.TriggeredEvent, la función OnShow toma todos los jugadores del espacio de juego y su IU de jugador, y añade el widget a esta IU de jugador utilizando el valor MyUI. 

Por último, el valor Progress de RadialMaterial se establece en 1.0 en tiempo de ejecución, lo que significa que la barra de salud o escudo está llena cuando comienza el juego.

    OnShow(InAgent: ?agent):void=
        Print ("Show")
        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            PlayerUI.AddWidget(MyUI)


        set RadialMaterial.Progress = 1.0    

Cómo crear la funcionalidad de OnHide

Para ocultar el material de la IU del HUD cuando la barra de salud o escudo recibe daño, la función OnHide utiliza una expresión for para capturar a los jugadores del espacio de juego y la IU del jugador, y luego actualiza la IU del jugador mediante PlayerUI.RemoveWidget (MyUI). 

    OnHide(InAgent: ?agent):void=
        Print ("Hide")
        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            PlayerUI.RemoveWidget(MyUI)

Cómo crear la funcionalidad de OnChange

El material de IU cambia de aspecto en función de los valores pasados a través del parámetro Progress.  Cuando se produce el TriggerChange.TriggeredEvent, se llama a la función OnChange y se actualiza el parámetro Progress del material de IU de RadialMaterial en función de IncreaseValue y DecreaseValue. 

    OnChange(InAgent: ?agent):void=
        Print ("Change Material Parameter")
        set RadialMaterial.Progress =  RadialMaterial.Progress - 0.25

Cómo crear la funcionalidad de IncreaseValue

La función IncreaseValue aumenta los valores del parámetro Progress en el material en las cantidades predefinidas para Progress, Speed y Dissolve: 

• Progress = +1.0

• Speed = +0.1

• Dissolve = +0.025

Este cambio se produce cuando los jugadores reciben salud o escudo. Verán estos aumentos reflejados en su material de salud y escudo en el HUD. 

Este código también funciona cuando se aplica a la salud y al escudo de una IA enemiga cuando aparece una nueva IA en el juego.

    IncreaseValue(InAgent: agent):void=
        Print ("Increase Value of Material Parameter")
        set RadialMaterial.Progress +=  1.0
        set StripeMaterial.Speed +=  0.1
        set DissolveMaterial.Dissolve +=  0.025

Cómo crear la funcionalidad de DecreaseValue

La función DecreaseValue disminuye los valores del parámetro Progress en el material en las cantidades predefinidas para Progress, Speed y Dissolve:

• Progress = -1.0

• Speed = -0.1

• Dissolve = -0.025

Este cambio se produce cuando los jugadores reciben daño en su salud o escudo. Verán estas disminuciones reflejadas en su salud y material de escudo en el HUD.

Este código también funciona cuando se aplica a una IA enemiga al recibir esta daño a la salud o escudos durante el juego.

    DecreaseValue(InAgent: agent):void=
        Print ("Decrease Value of Material Parameter")
        set RadialMaterial.Progress -=  1.0
        set StripeMaterial.Speed -=  0.1
        set DissolveMaterial.Dissolve -=  0.025

Por tu cuenta

Si tienes un material radial, rayado o que se disuelve, puedes copiar y pegar el siguiente código en tu propio proyecto para ver cómo funciona el material_block en cada material del código de Verse. 

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }

# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):

    Text<localizes><public> : message = "This is a Text Block."