머티리얼 블록

Verse에 노출된 편집 가능한 머티리얼 파라미터 덕분에 UEFN의 머티리얼에는 많은 함수 기능이 있습니다.  파라미터화된 머티리얼은 material_block으로 고퀄리티의 유저 인터페이스(UI)를 만들기 위한 핵심 요소입니다. 

동적인 느낌의 UI를 만들기 위해 material_block은 UI 머티리얼 또는 머티리얼 인스턴스의 파라미터를 사용하여 Verse 코드를 통해 파라미터 값을 수정 및 제어합니다. 예를 들어, UI 미터 머티리얼의 파라미터를 Verse에서 조작하여 플레이어가 피해를 받거나 적에게 피해를 줄 때의 머티리얼 동작을 프로그래밍할 수 있습니다.

코드 줄을 작성하기 전에 UI에서 머티리얼을 어떻게 사용할지 고려하세요. 와이어프레임을 만들어 UI의 외형과 머티리얼의 동작을 결정하세요.

UI 머티리얼 및 텍스처

material_block 슬롯의 코딩은 UI 머티리얼 생성과 함께 시작됩니다. 유저 인터페이스 기능 템플릿에서 사용할 수 있는 머티리얼 함수 및 머티리얼을 사용하거나 처음부터 나만의 커스텀 머티리얼을 만들 수 있습니다.

머티리얼

새로운 커스텀 머티리얼을 만들면 기존의 보편화된 UI 머티리얼을 수정해서 사용하는 다른 크리에이터의 UI와 차별화됩니다. 먼저 UI 머티리얼을 구성합니다. UI 머티리얼 제작에 다음과 같은 필수 구성 단계와 모범 사례를 활용하세요.

• 메인 머티리얼 노드(Main Material Node, MMN)에서 머티리얼 도메인(Material Domain)을 유저 인터페이스(User Interface)로 설정합니다.

• 루트 머티리얼은 단순해지도록 수정합니다.

• 파라미터가 많을수록 머티리얼을 보다 자유롭게 사용할 수 있습니다.

• 머티리얼이 완성되면 해당 머티리얼을 머티리얼 인스턴스로 전환합니다.

머티리얼 인스턴스는 Verse 코드에서 클래스 타입으로 사용됩니다. Verse에서 머티리얼 프로퍼티 및 파라미터에 기본값을 설정할 수 있습니다.

텍스처

텍스처는 UI 디자인을 풍성하게 하며, 이는 머티리얼만으로는 구현할 수 없습니다. UEFN은 프로젝트 폴더 > Fortnite > Textures에서 UI에 사용할 수 있는 텍스처 폴더를 제공합니다. 임포트하는 모든 텍스처는 2의 거듭제곱 규칙을 따라야 합니다.

머티리얼 노드는 머티리얼의 파라미터를 사용하고 이를 Verse 코드에 노출합니다. Verse에서 머티리얼 파라미터를 사용하여 머티리얼 내 텍스처 픽셀(텍셀)의 값을 타기팅해 마스크 타입을 만들거나 다른 계산에서 텍스처의 외형과 동작을 편집 및 변경하도록 할 수 있습니다.

텍스처가 UI에서 사용하는 용도에 맞게 최적화되도록 섬네일을 열고 디테일 패널에서 다음과 같은 세팅을 사용합니다.

• '밉 생성 세팅'을 '밉맵 없음'으로 설정합니다.

• '텍스처 그룹'을 'UI'로 설정합니다.

• '압축 세팅'을 '유저 인터페이스 2C(RGBA8)'로 설정합니다.

2의 거듭제곱 규칙을 따르지 않는 임포트된 텍스처를 편집하여 적절한 텍스처 스케일에 맞출 수 있습니다. 텍스처를 편집하려면 텍스처 크기 조절하기에 나와 있는 안내를 따릅니다.

머티리얼 블록 예시 1

material_block은 Verse 코드로 제작된 커스텀 위젯 내에서 슬롯 중 하나로 사용됩니다. 게임플레이 중에 material_block은 Verse를 통해 머티리얼 파라미터를 조작할 수 있도록 해 주어 UI 머티리얼/머티리얼 인스턴스가 HUD에서 표시되고 작동하는 방식을 변경할 수 있습니다. 이는 image_block을 통해 Verse에서 텍스처를 사용하는 방식과 유사합니다.

커스텀 머티리얼 위젯은 Verse 코드에서 다음과 같은 다양한 방식으로 사용됩니다.

• 머티리얼 파라미터를 사용하여 UI에서 머티리얼의 크기, 동작, 외형을 설정할 수 있습니다.

• Verse 내 데이터를 파라미터로 전달하여 파라미터가 Verse에서만 사용할 수 있는 동적 게임플레이 데이터에 의해 구동되도록 합니다.

다음 코드는 HUD에서 사라지는 머티리얼의 블록을 표시하기 위해 material_block이 사용되는 방식을 보여줍니다. 전체 코드 블록은 아래의 완성된 코드 섹션에서 확인할 수 있습니다.

UI 및 머티리얼의 모듈

다음 모듈에는 UI 위젯으로 material_block을 제어하고 머티리얼의 컬러, 배치 등을 설정하는 데 사용되는 함수가 포함되어 있습니다.

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

장치 클래스에서 UMG 위젯 및 UI 머티리얼 타기팅하기

Verse 장치 클래스에서 MyUI로 명명된 스택 박스 위젯 variable이 선언되며 방향(Orientation)은 orientation.Vertical로 설정됩니다. 이에 따라 스택 박스의 콘텐츠가 세로로 표시됩니다.

다음으로, DissolveMaterial로 명명된 UI.MaterialBlock.MI_UI_Dissolve_material 파라미터가 Dissolve 파라미터로 선언되며 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}

OnBegin 함수에서 UI와 머티리얼 제어하기

OnBegin 함수에서는 HUD에 게임이 시작되면 사라지는 사각형이 생성됩니다. 

DissolveMaterialBlock 변수는 material_block 타입으로 DefaultImage를 UI 머티리얼(DissolveMaterial)로 설정하여 UI 머티리얼을 레퍼런스하는 한편, DefaultDesiredSize는 X와 Y 좌표를 사용하여 위젯에서 렌더링할 때 material_block의 기본 크기를 설정합니다.

for expression은 플레이 공간에 있는 각 플레이어의 화면에 UI를 표시하는 데 사용됩니다. GetPlayspace(). GetPlayers() function은 게임 내 모든 플레이어의 배열을 얻은 후 do expression의 다음과 같은 안내에 따라 material_block을 보유한 위젯을 HUD에 추가합니다.

• MyStackBox로 명명된 스택 박스를 생성합니다.

• 방향을 세로(vertical)로 설정합니다.

• DissolveMaterialBlock을 MyStackBox의 첫 번째 슬롯에 삽입합니다.

• 이 루프 외부에서 플레이어 HUD에 추가할 수 있도록 MyUI를 MyStackBox로 설정합니다.

    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:

완성된 코드

아래의 완성된 코드 블록을 복사하여 붙여넣어 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}

머티리얼 블록 예시 2

이 예시는 위의 예시를 기반으로 하며, 두 개의 UI 머티리얼, 트리거 장치, 입력 트리거 장치를 추가로 사용합니다. 트리거는 HUD에 머티리얼을 표시하고 변경하는 데 사용됩니다.

Verse 코드는 위의 코드 블록과 동일한 모듈로 시작하여 material_block을 제어하고 UI 머티리얼의 파라미터를 설정합니다. 이 코드의 편집 가능 프로퍼티가 작동하려면 다음과 같은 하나의 추가 모듈이 필요합니다.

using { /Verse.org/Simulation }

Verse 장치 클래스 구성하기

이 Verse 장치 클래스에는 앞서 나온 장치 클래스보다 더 많은 함수 기능이 있습니다. Text로 명명된 message expression은 "This is a Text Block"이라는 메시지를 표시하는 데 사용됩니다. 이 표현식은 text_block에 의해 OnBegin 함수에서 호출됩니다.

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

세 개의 editable 트리거 및 두 개의 editable 입력 트리거 장치가 장치 클래스에 추가되어 material_block 및 스택 박스를 제어합니다. 각 트리거의 이름은 다음과 같이 수행하는 기능에서 따온 이름으로 변경됩니다.

• TriggerShow

• TriggerChange

• TriggerHide

• InputTriggerInc(값 증가)

• InputTriggerDec(값 감소)

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

위 코드의 MyUI 변수와 동일하게 MyUI로 명명된 스택 박스 위젯 variable이 선언됩니다.

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

세 개의 UI 머티리얼(RadialMaterial, StripeMaterial, DissolveMaterial)이 장치 클래스에 추가되고 머티리얼 이펙트에 기본값이 할당됩니다.

    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}

OnBegin 함수에서 UI, 머티리얼, 트리거 제어하기

OnBegin function은 서로 다른 함수를 TriggeredEvents에 등록하여 서로 다른 트리거 장치에 대한 컨트롤을 구성하고 PressedEvents에 함수를 등록하여 입력 트리거 장치를 제어합니다. 기본값이 증가하거나 감소하면 UI 머티리얼은 material_block을 사용하는 Verse의 영향을 받아 다음을 수행합니다.

• OnShow - 플레이어의 HUD에 UI 머티리얼을 표시합니다.

• OnChange - UI 머티리얼의 Progress 파라미터를 변경하여 머티리얼 채우기의 변화를 표시합니다.

• OnHide - 플레이어에게서 UI 머티리얼을 숨깁니다.

• IncreasesValue - 머티리얼이 사라지는 진행률 및 속도, 머티리얼이 사라지는 양을 늘립니다.

• DecreasesValue - 머티리얼이 사라지는 진행률 및 속도, 머티리얼이 사라지는 양을 줄입니다.

    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)

Label로 명명된 text_block variable은 text_block을 Verse 장치에 추가하는 데 사용됩니다. text_block은 플레이어의 HUD에서 텍스트 스트링을 렌더링하는 데 사용됩니다. text_block은 기본 텍스트 변수로 인코딩된 메시지를 표시하고, 다음과 같은 텍스트 블록 세팅을 사용하는 텍스트의 외형과 배치를 제어합니다.

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

세 개의 UI 머티리얼이 expressions에 추가되고 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}

for expression은 화면에 UI가 표시되는 시점과 화면에 표시할 UI를 설정하는 데 사용됩니다. 

GetPlayspace().GetPlayers()를 사용하여 플레이 공간에 있는 각 플레이어를 찾아 UI를 화면에 표시한 후 GetPlayerUI[Player]를 호출하여 플레이어의 player_ui 클래스를 반환합니다.  이는 위젯을 플레이어의 HUD/UI에 추가하는 데 필수적입니다.

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

그런 다음, do expression에서 스택 박스 UMG 위젯 세팅을 사용하여 MyStackBox로 명명된 새로운 stack_box가 생성됩니다. 위젯 값이 MyStackBox에 할당되면 런타임 시 MyUI로 명명된 새 변수에 모든 MyStackBox 값이 할당됩니다. 

이를 통해 MyUI가 스택 박스 위젯 프로퍼티를 사용하고 material_block을 레퍼런스하도록 하여 다음 작업을 수행할 수 있습니다.

• 스택 박스의 Orientation 프로퍼티를 사용합니다.

• Slots:array expression을 사용하는 배열 내에서 stack_box_slot을 각 material_block, text_block, Label variable에 할당하여 배열 오브젝트를 정리합니다.

        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

OnShow 함수 기능 생성하기

TriggerShow.TriggeredEvent가 호출되면 OnShow function이 플레이 공간에 있는 모든 플레이어와 해당 플레이어 UI를 그랩한 후 MyUI 값을 사용하는 플레이어 UI에 위젯을 추가합니다. 

마지막으로, 런타임 시 RadialMaterial’s Progress 값이 1.0으로 설정됩니다. 즉, 게임 시작 시 체력 또는 보호막 바가 가득 채워집니다.

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


        set RadialMaterial.Progress = 1.0    

OnHide 함수 기능 생성하기

체력 또는 보호막 바가 피해를 받았을 때 HUD에서 UI 머티리얼을 숨기기 위해 OnHide function은 for expression을 사용하여 플레이 공간에 있는 플레이어와 플레이어 UI를 그랩한 후 PlayerUI.RemoveWidget (MyUI)를 사용하여 플레이어 UI를 업데이트합니다. 

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

OnChange 함수 기능 생성하기

UI 머티리얼은 Progress 파라미터를 통해 전달된 값에 따라 외형이 바뀝니다.  TriggerChange.TriggeredEvent가 발생하면 OnChange function이 호출되고 IncreaseValue 및 DecreaseValue에 따라 RadialMaterial UI 머티리얼의 Progress 파라미터를 업데이트합니다. 

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

IncreaseValue 함수 기능 생성하기

IncreaseValue function은 Progress, Speed,Dissolve에 대해 사전 정의된 값으로 머티리얼의 Progress 파라미터 값을 늘립니다. 

• Progress = +1.0

• Speed = +0.1

• Dissolve = +0.025

이 변화는 플레이어가 체력 또는 보호막을 얻으면 발생하며, HUD에서 체력 및 보호막 머티리얼에 값 증가가 반영된 것을 확인할 수 있습니다. 

이 코드는 새 AI가 게임에 생성될 때 적 AI의 체력 및 보호막에 적용되는 경우에도 작동합니다.

    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

DecreaseValue 함수 기능 생성하기

DecreaseValue function은 Progress, Speed, Dissolve에 대해 사전 정의된 값으로 머티리얼의 Progress 파라미터 값을 줄입니다.

• Progress = -1.0

• Speed = -0.1

• Dissolve = -0.025

이 변화는 플레이어가 체력 또는 보호막에 피해를 받으면 발생하며, HUD에서 체력 및 보호막 머티리얼에 값 감소가 반영된 것을 확인할 수 있습니다.

이 코드는 게임 중에 적 AI가 체력 또는 보호막 피해를 받을 때 해당 AI에 적용되는 경우에도 작동합니다.

    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

직접 해보기

방사상 머티리얼, 줄무늬 머티리얼 또는 사라지는 머티리얼이 있는 경우, 다음 코드를 복사해 자신의 프로젝트에 붙여넣으면 Verse 코드에서 material_block이 각 머티리얼에 작동하는 방식을 확인할 수 있습니다. 

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