1. Epic GamesDeveloper
  3. Blok materiału

Blok materiału

Użyj material_block w kodzie Verse, aby kontrolować sparametryzowane materiały, tworząc dynamicznie wyglądające UI.

Blok materiału

Materiały w UEFN są bardzo funkcjonalne ze względu na edytowalne parametry materiału w Verse.  Sparametryzowane materiały są kluczem do utworzenia wysokiej jakości interfejsu użytkownika (UI) z material_block. 

material_block wykorzystuje parametry materiału UI lub instancji materiału, aby modyfikować i kontrolować wartości parametrów za pomocą kodu Verse, żeby utworzyć dynamicznie wyglądający UI. Na przykład parametrami materiału paska w UI można manipulować używając Verse, aby zaprogramować zachowanie materiału, gdy gracz odnosi obrażenia lub rani przeciwnik.

Zanim napiszesz linijkę kodu, zastanów się, w jaki sposób chcesz wykorzystać materiały w swoim UI. Utwórz krawędzie, aby określić zamierzony wygląd UI i to, co materiały mają robić.

Materiały i tekstury UI

Kodowanie slotu material_block rozpoczyna się w momencie utworzenia materiału UI. Możesz korzystać z funkcji materiału i materiałów dostępnych w szablonie funkcji interfejsów użytkownika. Możesz też utworzyć od podstaw własny materiał niestandardowy.

Zapoznaj się z sekcją Materiały UI, aby dowiedzieć się więcej o tworzeniu własnych materiałów niestandardowych UI.

Materiały

Utworzenie nowego materiału niestandardowego odróżnia twój interfejs użytkownika od innych, które są zbudowane ze zmodyfikowanych, lecz istniejących i powszechnie dostępnych materiałów. Najpierw skonfiguruj materiały dla swojego UI. Wykorzystaj poniższe kroki konfiguracji i dobre praktyki tworzenia materiałów UI:

  • Ustaw domenę materiału na interfejs użytkownika w węźle głównym materiału (MMN).

  • Zmodyfikuj główny materiał tak, aby był nieskomplikowany.

  • Im więcej parametrów, tym więcej swobody w posługiwaniu się materiałem.

  • Po ukończeniu konfigurowania materiału zamień go w instancję materiału.

Instancje materiału są używane jako typ klasy w kodzie Verse. W Verse możesz ustawić wartości domyślne dla właściwości i parametrów materiału.

Nazywając instancje materiałów, stosuj następującą konwencję nazewnictwa Fortnite:

  • MI_UI_MaterialName

Jakość tekstur

Tekstury nadają projektowi UI finezji, której nie można osiągnąć za pomocą samych materiałów. UEFN zapewnia folder z teksturami, których możesz używać w UI, znajdują się w folder projektu > Fortnite > Tekstury. Wszelkie importowane tekstury muszą być zgodne z zasadą potęgi dwójki.

Węzły materiału używają parametrów pobranych z materiału i uwidaczniają je w kodzie Verse. Korzystając z Verse, możesz użyć parametrów materiału do ukierunkowania wartości pikseli tekstury (zwanych tekselami) w materiale tak, aby utworzyć typ maski lub do innych obliczeń używanych przy edycji i zmianach wyglądu oraz zachowania tekstur.

Aby upewnić się, że tekstury są zoptymalizowane do użycia w UI, otwórz miniaturę i użyj następujących ustawień w Panelu szczegółów:

  • Ustaw generowanie mipmap na „brak mipmap”.

  • Ustaw grupę tekstur na UI.

  • Ustaw ustawienia kompresji na interfejs użytkownika 2C (RBGA8).

Importowane tekstury, które nie są zgodne z zasadą potęgi dwójki, można edytować, aby dopasować je do poprawnej skali tekstury. Aby edytować teksturę, postępuj zgodnie ze wskazówkami w Zmiana wielkości tekstur.

Przykład bloku materiału 1

material_block jest używany jako jeden ze slotów wewnątrz niestandardowego widżetu utworzonego za pomocą kodu Verse. Podczas rozgrywki parametr material_block umożliwia manipulowanie parametrami materiału używając Verse, aby zmienić wygląd i zachowanie materiału w UI/instancji materiału w HUD. To podobne do sposobu, w jaki image_block umożliwia używanie tekstury w Verse.

Niestandardowy widżet materiału jest wykorzystywany w kodzie Verse na różne sposoby:

  • Umożliwia użycie parametrów materiału do określenia rozmiaru, zachowania i wyglądu materiału w UI.

  • Przekazuje dane w Verse do parametrów, umożliwiając kontrolowanie parametrów przez dynamiczne dane rozgrywki dostępne tylko przy używaniu Verse.

Poniższy kod pokazuje sposób wykorzystania material_block do wyświetlenia bloku zanikającego materiału w HUD. Kompletny blok kodu można znaleźć w sekcji Ukończony kod poniżej.

W kodzie Verse do rozmieszczania i wyświetlania elementów UI należy zawsze stosować dobre praktyki.

Moduły dla UI i materiałów

Poniższe moduły zawierają funkcje używane do sterowania material_block jako widżetem UI oraz określania kolorów materiału, jego rozmieszczenia i innych elementów.

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

Docelowe użycie widżetów UMG i materiałów UI w klasie urządzenia.

W klasie urządzenia Verse zadeklarowana jest zmienna widżetu pola stosu o nazwie MyUI. z ustawieniem parametru Orientation o wartości orientation.Vertical. Powoduje to, że pole stosu wyświetla swoją zawartość pionowo.

Następnie, parametr UI.MaterialBlock.MI_UI_Dissolve_material o nazwie DissolveMaterial jest zadeklarowany z użytym parametrem Dissolve i przypisaną do niego wartością domyślną 0.2.

Verse 
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}

Kontrolowanie UI i materiałów za pomocą funkcji On Begin

W funkcji OnBegin na HUD tworzony jest kwadrat, który zanika się po rozpoczęciu gry. 

Zmienna DissolveMaterialBlock jest zmienną typu material_block i odwołuje się do materiału UI ustawiając DefaultImage jako materiał UI (DissolveMaterial), a DefaultDesiredSize ustawia domyślny rozmiar material_block w momencie, gdy renderuje się on w widżecie przy użyciu współrzędnych X i Y.

Wyrażenie for służy do wyświetlenia UI na ekranie dla każdego gracza w przestrzeni gry. GetPlayspace(). Funkcja GetPlayers() pobiera tablicę ze wszystkimi graczami w grze, a następnie dodaje widżet utrzymujący material_block w ich interfejsach HUD w oparciu o następujące instrukcje zawarte w wyrażeniu do:

  • Tworzy pole stosu o nazwie MyStackBox.

  • Ustawia jego orientację na pionową.

  • Wstawia DissolveMaterialBlock do pierwszego slotu MyStackBox.

  • Ustawia MyUI jako MyStackBox, aby można było to dodać do HUD gracza, który jest poza tą pętlą.

Verse 
    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:

Complete Code

Skopiuj i wklej poniższy cały blok kodu, aby zobaczyć zanikający blok materiału w HUD.

Aby ten blok kodu działał, musisz mieć w swoim projekcie zanikający materiał. 

Patrz Tworzenie własnego urządzenia Verse, aby dowiedzieć się, jak utworzyć własne urządzenie Verse.  

 

Verse 
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}

Przykład bloku materiału 2

Ten przykład został oparty na powyższym przykładzie: wprowadzono dwa dodatkowe materiały UI, urządzenie aktywatora i urządzenia aktywatora sterowania. Aktywatory służą do pokazywania i zmieniania materiału wyświetlanego na HUD.

Kod Verse zaczyna się od tych samych modułów, co powyższy blok kodu, aby kontrolować `material_block` i określać parametry materiału UI. Do działania edytowalnych właściwości tego kodu niezbędny jest dodatkowy moduł:

using { /Verse.org/Simulation }

Konfiguracja klasy urządzenia Verse

Ta klasa urządzenia Verse ma więcej funkcjonalności niż poprzednia klasa urządzeń. Wyrażenie komunikatu o nazwie Text służy do wyświetlania komunikatu „To blok tekstu”. To wyrażenie jest wywoływane w funkcji OnBegin przez text_block.

Verse 
# 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."

Do klasy urządzenia dodano trzy edytowalne urządzenia aktywatora i dwa edytowalne urządzenia aktywatora sterowania, aby kontrolowały one material_block i pole stosu. Nazwa każdego aktywatora jest zmieniana zgodnie z jego funkcją, którą na przykład:

  • TriggerShow

  • TriggerChange

  • TriggerHide

  • InputTriggerInc (zwiększa wartość)

  • InputTriggerDec (zmniejsza wartość)

Verse 
   @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{}

Zmienna widżetu pola stosu o nazwie MyUI jest zadeklarowana , tak jak zmienna MyUI w powyższym kodzie.

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

Trzy materiały UI (RadialMaterial, materiał Stripe i DissolveMaterial) są dodawane do klasy urządzenia i przypisane im zostają domyślne wartości do ich efektów materiałów.

Verse 
    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}

Sterowanie UI, materiałami i aktywatorami za pomocą funkcji On Begin

Funkcja OnBegin ustawia sterowanie różnymi urządzeniami aktywatora, subskrybując różne funkcje do ich parametru TriggeredEvents, oraz steruje urządzeniami aktywatora sterowania poprzez subskrybowanie funkcji do ich parametru PressedEvents. Gdy wartość domyślna zwiększa się lub obniża, Verse wpływa na materiały UI wykorzystując material_block do wykonania następujących czynności:

  • OnShow – wyświetla materiał UI na HUD gracza.

  • OnChange – zmienia parametr Postępu na materiale UI, aby pokazać zmianę w materiale wypełnienia.

  • OnHide – ukrywa materiał UI przed graczem.

  • IncreasesValue – zwiększa postęp i szybkość zanikania materiału, a także wartość zaniku w materiale.

  • DecreasesValue – zmniejsza postęp i szybkość zanikania materiału, a także wartość zanikania w materiale.

    

Verse 
    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)

Zmienna text_block o nazwie Label służy do dodawania text_block do urządzenia Verse. text_block służy do renderowania ciągu tekstowego w HUD. text_block wyświetla zakodowany komunikat do domyślnej zmiennej tekstu i kontroluje wygląd oraz położenie tekstu używając następujących ustawień bloku tekstu:

  • DefaultTextColor

  • DefaultShadowColor

  • DefaultShadowOffset

 

Verse 
        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}}

Trzy materiały UI są dodawane do wyrażeń i kontrolowane za pomocą material_block.

        

Verse 
        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}

A wyrażenie for służy do określenia, kiedy UI pojawia się na ekranie i który UI wyświetlić na ekranie. 

UI pojawia się na ekranie poprzez znalezienie każdego gracza w przestrzeni gry za pomocą GetPlayspace().GetPlayers(), a następnie wywołaniu GetPlayerUI[Player] w celu zwrócenia klasy player_ui gracza.  Jest to niezbędne, aby dodać widżet do HUD/UI gracza.

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

Następnie w wyrażeniu do tworzone jest nowe stack_box o nazwie MyStackBox, używając ustawień widżetu pola stosu UMG. Po przypisaniu wartości widżetu do MyStackBox, nowej zmiennej o nazwie MyUI zostają przypisane wszystkie wartości MyStackBox w czasie uruchomienia. 

Umożliwia to MyUI używanie właściwości widżetu pola stosu i odwoływać się do material_block, aby wykonywać następujące czynności:

  • Użyj właściwości Orientation pola stosu.

  • Przypisz stack_box_slot do poszczególnych zmiennych material_block , text_block i Label w tablicy za pomocą wyrażenia Slots:array, aby uporządkować obiekty tablicy.

Verse 
        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

Tworzenie funkcjonalności OnShow

Po wywołaniu TriggerShow.TriggeredEvent funkcja OnShow przechwytuje wszystkich graczy i ich UI gracza w przestrzeni gry, a następnie używając wartości MyUI dodaje widżet do UI gracza. 

Na koniec wartość postępu RadialMaterial zostaje ustawiona na 1.0 w czasie wykonywania, co oznacza, że w chwili rozpoczęcia gry pasek zdrowia lub osłony jest pełny.

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


        set RadialMaterial.Progress = 1.0

Tworzenie funkcjonalności OnHide

Aby ukryć materiał UI z HUD, gdy pasek zdrowia lub osłony obrazuje odniesienie obrażeń, funkcja OnHide wykorzystuje wyrażenie for do przechwycenia graczy i ich UI gracza w przestrzeni gry, a następnie aktualizuje UI gracza za pomocą PlayerUI.RemoveWidget (MyUI). 

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

Tworzenie funkcjonalności OnChange

Materiał UI zmienia swój wygląd na podstawie wartości przekazanych przez parametr Progress.  Gdy występuje TriggerChange.TriggeredEvent wywoływana jest funkcja OnChange i aktualizuje parametr Progress materiału UI RadialMaterial na podstawie IncreaseValue i DecreaseValue. 

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

Tworzenie funkcjonalności IncreaseValue

Funkcja IncreaseValue zwiększa wartości parametru Progress na materiale o wstępnie zdefiniowaną wielkość dla parametrów Progress, Speed i Dissolve: 

  • Progress = +1.0

  • Speed = +0.1

  • Dissolve = +0.025

Ta zmiana następuje, gdy gracze zyskują zdrowie lub osłonę, gracze zauważą te wzrosty w materiale swojego zdrowia i osłony w HUD. 

Ten kod działa również po zastosowaniu do zdrowia i osłony wrogiej SI, gdy w grze spawnuje się nowa SI.

Verse 
    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

Tworzenie funkcjonalności DecreaseValue

Funkcja DecreaseValue zmniejsza wartości parametru Progress na materiale o wstępnie zdefiniowaną wielkość dla parametrów Progress, Speed i Dissolve:

  • Progress = -1.0

  • Speed = -0.1

  • Dissolve = -0.025

Ta zmiana następuje, gdy gracze otrzymują obrażenia swojego zdrowia lub osłony, gracze zauważą te spadki w materiale swojego zdrowia i osłony w HUD.

Kod ten działa również po zastosowaniu do wrogiej SI: gdy SI odnosi obrażenia zdrowia lub osłon w trakcie gry.

Verse 
    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

Praca własna

Jeśli masz materiał promieniowy, materiał w paski lub materiał zanikający, możesz skopiować i wkleić poniższy kod do swojego projektu, aby zobaczyć, jak material_block zadziała na każdym materiale w kodzie Verse. 

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."

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page