Bloque de material

Los materiales tienen muchas funcionalidades en UEFN gracias a los parámetros de materiales editables expuestos en Verse.  Los materiales parametrizados son clave para crear una interfaz de usuario (IU) de alta calidad con un material_block. 

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

Antes de escribir una línea de código, considera cómo te gustaría usar los materiales en tu IU. Crea cuadros de conector para definir cómo quieres que se vea tu IU y qué función cumplirán los materiales.

Materiales y texturas de la IU

La codificación de una ranura de material_block comienza con la creación de tu material de IU. Puedes usar las funciones materiales y los materiales disponibles en la plantilla de funciones de las interfaces de usuario, o puedes crear tu propio material personalizado desde cero.

Materiales

La creación de un nuevo material personalizado define tu IU de otras que modifican materiales de IU existentes y ampliamente disponibles. Primero, configura tus materiales de IU. Sigue estos pasos de configuración esenciales y las prácticas recomendadas para crear materiales de la IU:

• Configura el dominio de material a interfaz de usuario en el nodo Main Material (MMN).

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

• 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 usan como un tipo de clase de código Verse. En Verse, puedes definir valores predeterminados en las propiedades y en los parámetros de tus materiales.

Texturas

Las texturas le añaden un toque especial al diseño de la IU que no se puede lograr solo con materiales. UEFN ofrece una carpeta de texturas que puedes usar en tu IU, dentro de Carpeta del proyecto > Fortnite > Texturas. Cualquier textura que importes debe obedecer la regla de la potencia de dos.

Los nodos de material usan parámetros del material y los exponen en el código Verse. Con Verse, puedes usar los parámetros del material para determinar los valores de los píxeles de la textura (llamados texeles) dentro del material para crear un tipo de máscara o para otros cálculos a fin de editar y cambiar 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 la siguiente configuración en el panel de detalles:

• Establece la configuración de la generación de mip en Sin mapa de mip.

• Establece el grupo de textura en IU.

• Establece la configuración de compresión a Interfaz de usuario 2C (RGBA8).

Las texturas importadas que no cumplan la regla de la potencia de dos pueden editarse para que se ajusten a la escala de textura adecuada. Para editar una textura, sigue las instrucciones en Cómo cambiar el tamaño de las texturas.

Primer ejemplo de bloque de material

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

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

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

• Envía datos desde Verse a los parámetros, lo que permite que estos respondan a datos dinámicos del juego disponibles solo desde Verse.

El siguiente código muestra cómo se usa material_block para mostrar un bloque de material en disolución en el HUD. Puedes encontrar el bloque de código completo en la sección Código completo a continuación.

Módulos para la IU y materiales

Los siguientes módulos contienen las funciones que se usan para controlar el material_block como un widget de la IU y determinar los colores, la ubicación y otros parámetros.

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

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

En la clase de dispositivo de Verse, se declara una variable de tipo widget una pila llamada MyUI. Con un ajuste de orientación de orientation.Vertical. Esto hace que StackBox muestre su contenido de forma vertical.

A continuación, se declara un parámetro llamado DissolveMaterial en UI.MaterialBlock.MI_UI_Dissolve_material, con un parámetro disolver 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 al establecer DefaultImage en el material de la IU (DissolveMaterial), mientras que DefaultDesiredSize establece el tamaño predeterminado al renderizar el material_block en un widget mediante coordenadas X e Y.

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

• Crea una pila llamada MyStackBox.

• Establece su orientación como vertical.

• Inserta DissolveMaterialBlock en la primera ranura de MyStackBox.

• Configura MyUI como 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 en disolución 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}

Segundo ejemplo de bloque de material

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

El código 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 la IU. Se requiere un módulo adicional para que funcionen las propiedades editables de este código:

using { /Verse.org/Simulation }

Configuración de la clase de dispositivo de Verse

Esta clase de dispositivo de Verse tiene más funcionalidades que la clase de dispositivo anterior. Se usa una expresión de mensaje denominada Texto 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 activadores editables y dos dispositivos activadores de entrada editables a la clase de dispositivo para controlar el material_block y StackBox. Cada activador cambia de nombre según 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 de widget de StackBox llamada MyUI, igual que la variable MyUI del código anterior.

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

Los tres materiales de la IU (RadialMaterial, StripeMaterial y DissolveMaterial) se añaden a la clase del dispositivo y se les asignan valores predeterminados para 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 establece controles para los diferentes dispositivos activadores al suscribir diferentes funciones a sus TriggeredEvents y controla los dispositivos activadores de entrada al suscribir las funciones a sus PressedEvents. Cuando el valor predeterminado aumenta o disminuye, los materiales de la IU se ven afectados por Verse que usa material_block para hacer lo siguiente:

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

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

• OnHide: oculta el material de la IU al jugador.

• IncreasesValue: aumenta el progreso y la velocidad de disolución del material, así como la cantidad de disolución en el material.

• DecreasesValue: reduce el progreso y la velocidad de disolución del material, así como la cantidad de disolución en el material.

    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 usa una variable text_block denominada Label para añadir un text_block al dispositivo de Verse. El text_block se usa para renderizar una cadena de texto en el HUD de un jugador. Un text_block muestra el mensaje codificado en la variable de texto predeterminada y controla el aspecto y la posición del texto mediante la siguiente configuración de 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 la IU se añaden a 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 usa una expresión for para determinar cuándo la IU aparece en pantalla y qué IU se muestra en pantalla. 

La IU aparece en pantalla al identificar a cada jugador en el espacio de juego mediante GetPlayspace().GetPlayers() y, luego, 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]

Luego, en la expresión do, se crea una nueva stack_box denominada MyStackBox mediante la configuración del widget StackBox de UMG. Una vez que se asignan los valores del widget a MyStackBox, una nueva variable llamada MyUI se asigna a todos los valores de MyStackBox durante el tiempo de ejecución. 

Esto permite que MyUI use las propiedades del widget de StackBox y haga referencia a material_block para hacer lo siguiente:

• Usa la propiedad orientación de StackBox.

• Asigna un stack_box_slot a cada variable material_block, text_block y Label dentro de una matriz mediante la expresión Slots:array a fin de 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 OnShow

Una vez que se llama a TriggerShow.TriggeredEvent, la función OnShow captura a todos los jugadores en el espacio de juego y su IU de jugador y, luego, añade el widget a su IU de jugador usando el valor MyUI. 

Por último, el valor de progreso de RadialMaterial se establece en 1.0 en el tiempo de ejecución, lo que significa que la barra de vida o de 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 OnHide

Para ocultar el material de la IU del HUD cuando la barra de vida o de escudo recibe daño, la función OnHide usa una expresión for para capturar a los jugadores en el espacio de juego y la IU del jugador; luego, actualiza la IU del jugador con 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 OnChange

El material de la IU cambia su apariencia según los valores pasados a través del parámetro de progreso.  Cuando ocurre TriggerChange.TriggeredEvent, se llama a la función OnChange y se actualiza el parámetro de progreso del material de la 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 IncreaseValue

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

• Progress = +1.0

• Speed = +0.1

• Dissolve = +0.025

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

Este código también funciona cuando se aplica a la vida 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 DecreaseValue

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

• Progress = -1.0

• Speed = -0.1

• Dissolve = -0.025

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

Este código también funciona cuando se aplica a una IA enemiga cuando la IA recibe daño en su vida 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

Hazlo por tu cuenta

Si tienes un material radial, rayado o de disolución, puedes copiar y pegar el siguiente código en tu propio proyecto para ver cómo funciona material_block en cada material en el código 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."