Bloco de material

Os materiais têm muitas funcionalidades no UEFN devido aos parâmetros de material editáveis expostos em Verse.  Materiais parametrizados são a chave para criar uma interface de usuário (IU) de alta qualidade com um material_block. 

Um material_block usa parâmetros de material de IU ou instâncias de material para modificar e controlar os valores de parâmetros por meio do código Verse para criar uma IU dinâmica. Por exemplo, os parâmetros de um material de medidor de IU podem ser programados em Verse para definir o comportamento do material quando o jogador sofre dano ou causa dano a um inimigo.

Antes de começar a escrever as linhas de código, considere como você deseja usar os materiais na IU. Crie wireframes para determinar a aparência que você deseja que sua IU tenha e o que você deseja que os materiais façam.

Materiais e texturas da IU

A codificação de um espaço material_block começa com a criação do material de IU. Você pode usar as funções de material e os materiais disponíveis no Modelo de funcionalidade de interfaces de usuário ou pode criar seu próprio material personalizado do zero.

Materiais

Criar um novo material personalizado diferencia sua IU de outras que modificam materiais de IU existentes e amplamente disponíveis. Configure seus materiais de IU primeiro. Use as seguintes etapas de configuração essenciais e práticas recomendadas para criar materiais de IU:

• Defina o domínio do material como interface de usuário no nó de material principal (MMN).

• Modifique seu material raiz para ser simples.

• Quanto mais parâmetros você tiver, mais liberdade terá com o material.

• Transforme seu material em uma instância de material quando o material estiver concluído.

Instâncias de material são usadas como um tipo de classe no código Verse. Em Verse, você pode definir valores padrão nas propriedades e parâmetros do material.

Texturas

Texturas adicionam um toque extra a um design de IU que não pode ser obtido apenas com materiais. O UEFN fornece uma pasta de texturas que você pode usar na IU na pasta Projeto > Fortnite > Texturas. Quaisquer texturas importadas devem obedecer à regra da potência de dois.

Os nós de material usam parâmetros do material e os expõem no código Verse. Usando Verse, você pode usar os parâmetros do material para direcionar os valores dos pixels da textura (chamados texels) dentro do material para criar uma máscara ou para outros cálculos para editar e alterar como as texturas se parecem e se comportam.

Para garantir que as texturas estejam otimizadas para uso na IU, abra a miniatura e use as seguintes configurações no Painel Detalhes:

• Defina as configurações de geração de mip como Nenhum mipmapa.

• Defina o grupo de texturas para IU.

• Defina as configurações de compressão para a interface do usuário 2C (RGBA8).

As texturas importadas que não aderem à regra da potência de dois podem ser editadas para caber na escala de textura adequada. Para editar uma textura, siga as instruções em Como redimensionar texturas.

Exemplo de bloco de material 1

Um material_block é usado como um dos espaços dentro de um widget personalizado criado com código Verse. Durante o jogo, o material_block fornece uma maneira de manipular os parâmetros do material por meio de Verse para alterar a aparência e o comportamento do material/instância de material da IU no HUD. Isso é semelhante a como um image_block permite que você use uma textura em Verse.

O widget de material personalizado é usado de várias maneiras no código Verse:

• Ele fornece uma maneira de usar parâmetros de material para determinar o tamanho, o comportamento e a aparência do material na IU.

• Passa dados em Verse para parâmetros, permitindo que os parâmetros sejam orientados por dados de jogabilidade dinâmica disponíveis apenas em Verse.

O código a seguir demonstra como material_block é usado para exibir um bloco de material em dissolução no HUD. O bloco de código completo pode ser encontrado na seção Código completo abaixo.

Módulos para IU e materiais

Os módulos a seguir contêm as funções usadas para controlar o material_block como um widget de IU e determinar as cores, o posicionamento do material e muito mais.

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

Como direcionar widgets UMG e materiais de IU na classe de dispositivo

Na classe de dispositivo Verse, uma variável de widget de stackbox chamada MyUI é declarada. com uma configuração de Orientation de orientation.Vertical. Isso faz com que a stackbox exiba seu conteúdo verticalmente.

Em seguida, um parâmetro UI.MaterialBlock.MI_UI_Dissolve_material chamado DissolveMaterial é declarado com um parâmetro Dissolve e atribuindo um valor padrão de 0,2 a ele.

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}

Como controlar a IU e os materiais com a função "On Begin"

Na função OnBegin, é criado um quadrado no HUD que se dissolve quando o jogo começa. 

A variável DissolveMaterialBlock é do tipo material_block e faz referência ao material de IU definindo o DefaultImage para o material de IU (DissolveMaterial), enquanto o DefaultDesiredSize define o tamanho padrão do material_block quando ele é renderizado em um widget usando as coordenadas X e Y.

Uma expressão for é usada para exibir a IU na tela para cada jogador no playspace. O GetPlayspace(). A função GetPlayers() obtém uma matriz de todos os jogadores no jogo e adiciona o widget que contém o material_block ao HUD com base nas seguintes instruções na expressão do:

• Cria uma stackbox chamada MyStackBox.

• Define sua orientação como vertical.

• Insere o DissolveMaterialBlock no primeiro espaço da MyStackBox.

• Define MyUI como MyStackBox para que possa ser adicionada ao HUD do jogador fora desse loop.

    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

Copie e cole o bloco de código completo abaixo para ver o bloco de material que se dissolve no 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}

Exemplo de bloco de material 2

Este exemplo compila o exemplo acima introduzindo dois materiais de IU adicionais, um dispositivo Gatilho e dispositivos Comando de gatilho. Os gatilhos são usados para mostrar e alterar o material exibido no HUD.

O código Verse começa com os mesmos módulos que o bloco de código acima para controlar o material_block e determinar os parâmetros do material de IU. Um módulo adicional é necessário para que as propriedades editáveis deste código funcionem:

usando { /Verse.org/Simulation }

Como configurar a classe de dispositivo Verse

Essa classe de dispositivo Verse tem mais funcionalidades do que a classe de dispositivo anterior. Uma expressão message chamada Text é usada para exibir a mensagem "Este é um bloco de texto". Essa expressão é chamada na função OnBegin por um 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."

Três dispositivos Gatilho editáveis e dois dispositivos Comando de gatilho editáveis são adicionados à classe de dispositivo para controlar o material_block e a stackbox. Cada gatilho é renomeado após a função que executa, por exemplo:

• TriggerShow

• TriggerChange

• TriggerHide

• InputTriggerInc (aumenta um valor)

• InputTriggerDec (diminui um 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{}   

Uma variável de widget de stackbox chamada MyUI é declarada, o mesmo que a variável MyUI no código acima.

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

Os três materiais de IU (RadialMaterial, StripeMaterial e DissolveMaterial) são adicionados à classe de dispositivo e são atribuídos valores padrão aos seus efeitos 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}

Como controlar a IU, os materiais e os gatilhos com a função "On Begin"

A função OnBegin define controles para os diferentes dispositivos Gatilho assinando diferentes funções a seus TriggeredEvents e controla os dispositivos Comando de gatilho assinando funções a seus PressedEvents. Quando o valor padrão aumenta ou diminui, os materiais de IU são afetados por Verse usando o material_block para fazer o seguinte:

• OnShow: mostra o material da IU no HUD do jogador.

• OnChange: altera o parâmetro de Progresso do material da IU para mostrar uma alteração no material de preenchimento.

• OnHide: oculta o material da IU do jogador.

• IncreasesValue: aumenta o progresso e a velocidade com que o material está se dissolvendo e a quantidade de dissolução no material.

• DecreasesValue: diminui o progresso e a velocidade com que o material está se dissolvendo e a quantidade de dissolução no 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)

Uma variável text_block chamada Label é usada para adicionar um text_block ao dispositivo Verse. O text_block é usado para renderizar uma string de texto no HUD de um jogador. Um text_block exibe a mensagem codificada para a variável de texto padrão e controla a aparência e o posicionamento do texto usando as seguintes configurações de bloco 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}}

Os três materiais de IU são adicionados a expressões e controlados usando 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}

Uma expressão for é usada para determinar quando a IU aparece na tela e qual IU exibir na tela. 

A IU aparece na tela encontrando cada jogador no playspace usando GetPlayspace().GetPlayers() e, em seguida, chama GetPlayerUI[Player] para retornar a classe player_ui do jogador.  Isso é essencial para adicionar um widget ao HUD/IU de um jogador.

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

Em seguida, na expressão do, uma nova stack_box chamada MyStackBox é criada usando as configurações do widget UMG de stackbox. Depois que os valores do widget são atribuídos à MyStackBox, uma nova variável chamada MyUI recebe todos os valores de MyStackBox em tempo de execução. 

Isso permite que MyUI use as propriedades do widget de stackbox e faça referência ao material_block para fazer o seguinte:

• Use a propriedade Orientation da stackbox.

• Atribua um stack_box_slot a cada material_block, text_block e variável Label dentro de uma matriz usando a expressão Slots:array para organizar os objetos da 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

Como criar a funcionalidade OnShow

Quando TriggerShow.TriggeredEvent é chamado, a função OnShow obtém todos os jogadores no playspace e sua IU de jogador, depois adiciona o widget a essa IU usando o valor MyUI. 

Por último, o valor de Progresso de RadialMaterial é definido como 1,0 no tempo de execução, o que significa que a barra de vida ou escudo está cheia quando o jogo começa.

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


        set RadialMaterial.Progress = 1.0    

Como criar a funcionalidade OnHide

Para ocultar o material da interface do usuário (IU) do HUD quando a barra de vida ou escudo sofrer dano, a função OnHide usa uma expressão for para obter os jogadores no playspace e na IU do jogador. Em seguida, atualize a IU do jogador usando PlayerUI.RemoveWidget (MyUI). 

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

Como criar a funcionalidade OnChange

O material da IU altera sua aparência com base nos valores transmitidos pelo parâmetro Progresso.  Quando o TriggerChange.TriggeredEvent ocorre, a função OnChange é chamada e atualiza o parâmetro Progresso do material da IU RadialMaterial com base em IncreaseValue e DecreaseValue. 

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

Como criar a funcionalidade IncreaseValue

A função IncreaseValue aumenta os valores do parâmetro Progresso no material pelas quantidades predefinidas para Progresso, Velocidade e Dissolução: 

• Progresso = +1,0

• Velocidade = +0,1

• Dissolução = +0,025

Essa mudança acontece quando os jogadores recebem vida ou escudo. Eles verão esses aumentos refletidos na vida e no material de escudo no HUD. 

Esse código também funciona quando aplicado à vida e ao escudo de uma IA inimiga quando uma nova IA surge no jogo.

    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

Como criar a funcionalidade DecreaseValue

A função DecreaseValue diminui os valores do parâmetro Progresso no material pelas quantidades predefinidas para Progresso, Velocidade e Dissolução:

• Progresso = -1,0

• Velocidade = -0,1

• Dissolução = -0,025

Essa mudança acontece quando os jogadores sofrem danos à vida ou ao escudo. Eles verão essas diminuições refletidas na vida e no material de escudo no HUD.

Esse código também funciona quando aplicado a uma IA inimiga quando essa IA sofre dano à vida ou a escudos durante o jogo.

    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 si só

Se você tiver um material radial, material listrado ou material de dissolução, poderá copiar e colar o código a seguir em seu próprio projeto para ver como o material_block funciona em cada material no 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."