1. Epic GamesDeveloper
  3. マテリアル ブロック

マテリアル ブロック

動的な外観の UI を作成する際に、Verse コードで material_block を使用してパラメータ化されたマテリアルを制御します。

マテリアル ブロック

Verse に表示されている編集可能マテリアル パラメータにより、UEFN ではマテリアルに多くの機能があります。パラメータ化されたマテリアルは、material_block で高品質な外観の ユーザー インターフェース (UI) を作成するための鍵となります。

material_block は、UI マテリアルまたはマテリアル インスタンスのパラメータを使用して、Verse コードでパラメータ値を変更および制御することで、動的な外観の UI を作成します。 たとえば、Verse で UI メーター マテリアルのパラメータを操作することで、プレイヤーがダメージを受けたときや敵にダメージを与えたときのマテリアルの動作をプログラムできます。

コードを記述する前に、UI でのマテリアルの使用方法を考えてください。 ワイヤーフレームを作成して、UI の外観とマテリアルで実行する内容を決定します。

UI マテリアルとテクスチャ

material_block スロットのコーディングは、UI マテリアルの作成から始まります。 ユーザー インターフェースの機能テンプレートで使用可能なマテリアル関数とマテリアルを使用することも、独自のカスタム マテリアルを最初から作成することもできます。

独自のカスタム UI マテリアルを作成する方法の詳細は、UI マテリアルセクションを参照してください。

素材

新しいカスタム マテリアルを作成することで、利用可能な既存の UI マテリアルを変更する他のユーザーから UI を区別することができます。 最初に UI マテリアルを設定します。 UI マテリアルを作成する場合は、次の基本的な設定手順とベスト プラクティスを使用します。

  • Main Material ノード (MMN) で Material Domain (マテリアル ドメイン) を User Interface (ユーザー インターフェース) に設定します。

  • ルート マテリアルをシンプルに変更します。

  • パラメータが多いほど、マテリアルを自由に使用できるようになります。

  • マテリアルが完了したら、マテリアルをマテリアル インスタンスに変換します。

マテリアル インスタンスは、Verse コードで class 型として使用されます。 Verse では、マテリアルのプロパティとパラメータにデフォルト値を設定できます。

マテリアル インスタンスに名前を付けるときは、次のフォートナイトの命名規則を使用します。

  • MI_UI_MaterialName

テクスチャ

テクスチャは、UI デザインに装飾を加えます。これは、マテリアルだけでは実現できません。 UEFN では、UI で使用できるテクスチャのフォルダが、[Project] > [Fortnite] > [Textures] に用意されています。 インポートするテクスチャは、2 の累乗ルールに従う必要があります。

Material ノードは、マテリアルのパラメータを使用し、それらを Verse コードで表示します。 Verse を使用すると、マテリアル パラメータを使用して、マテリアル内のテクスチャのピクセル (「テクセル」) の値をターゲットにして、マスクの一種を作成したり、その他の計算でテクスチャの外観や動作を編集および変更したりできます。

テクスチャが UI での使用に最適化されていることを確認するには、サムネイルを開き、 [Details (詳細)] パネルで次の設定を使用します。

  • Mip Gen Settings (ミップ全般設定) を No MipMaps (ミップマップなし) に設定します。

  • Texture Group (テクスチャ グループ) を UI に設定します。

  • 圧縮設定をユーザー インターフェース 2C (RGBA8) に設定します。

2 の累乗ルールに準拠していないインポート済みテクスチャは、適切なテクスチャ スケールに合わせて編集することができます。 テクスチャを編集するには、「テクスチャのサイズを変更する」の手順に従います。

マテリアル ブロックの例 1

material_block は、Verse コードで作成されたカスタム ウィジェット内のスロットの 1 つとして使用されます。 ゲームプレイ中、Verse 経由でマテリアル パラメータを操作し、HUD 上での UI マテリアル/マテリアル インスタンスの外観と動作を変更する方法が、material_block から提供されます。 これは、Verse で image_block でテクスチャを使用する方法に似ています。

カスタム マテリアル ウィジェットは、Verse コードでさまざまな方法で使用されます。

  • これは、マテリアル パラメータを使用して、UI でのマテリアルのサイズ、動作、外観を決定する方法を提供します。

  • Verse のデータをパラメータに渡し、Verse からのみ使用可能な動的なゲームプレイ データによってパラメータが動作するようにします。

次のコードは、material_block を使用して、HUD に溶解中のマテリアルのブロックを表示する方法を示しています。 コード ブロック全体は、以下の「完全なコード」セクションに記載されています。

Verse コードでは、常にベスト プラクティスを使用して UI 要素を配置および表示する必要があります。

UI とマテリアルのモジュール

次のモジュールには、material_block を UI ウィジェットとして制御し、マテリアルの色や配置などを決定するための関数が含まれています。

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

仕掛けクラスの UMG ウィジェットと UI マテリアルをターゲティングする

Verse 仕掛けクラスでは、「MyUI」というスタックボックス ウィジェット変数が宣言されています。 orientation.Vertical に設定された Orientation 付き これにより、StackBox のコンテンツは垂直方向に表示されます。

次に、「DissolveMaterial」 という UI.MaterialBlock.MI_UI_Dissolve_material パラメータが Dissolve パラメータで宣言され、それにデフォルト値 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}

On Begin 関数で UI とマテリアルを制御する

OnBegin 関数では、HUD 上に正方形が作成され、ゲームを開始すると溶解します。

DissolveMaterialBlock 変数は material_block 型であり、DefaultImage を UI マテリアル (DissolveMaterial) に設定することで UI マテリアルを参照しますが、DefaultDesiredSize は、X 座標と Y 座標を使用してウィジェットにレンダリングする際の material_block のデフォルト サイズを設定します。

for 式 は、プレイ空間内の各プレイヤーの画面に UI を表示するために使用されます。 GetPlayspace()。 GetPlayers() 関数は、ゲーム内のすべてのプレイヤーの配列を取得し、次に do 式内の以下の指示に従って、material_block を保持するウィジェットを各プレイヤーの HUD に追加します。

  • 「MyStackBox」 というスタック ボックスを作成します。

  • 向きを Vertical (垂直) に設定します。

  • DissolveMaterialBlock を MyStackBox の先頭スロットに挿入します。

  • このループの外でプレイヤー HUD に追加できるように、MyUI を MyStackBox に設定します。

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:

完全なコード

HUD で溶解されるマテリアル ブロックを確認するには、以下の完全なコード ブロックをコピーして貼り付けます。

このコード ブロックを動作させるには、プロジェクトに溶解マテリアルが必要です。

「独自の 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}

マテリアル ブロックの例 2

この例では、トリガー仕掛けと入力トリガー仕掛けという 2 つの追加 UI マテリアルを導入して、上記の例に基づいて作成します。 トリガーは、HUD に表示されるマテリアルを表示、変更するために使用されます。

Verse コードは、material_block を制御して UI マテリアルのパラメータを決定するため、上記のコード ブロックと同じモジュールから始めます。 このコードの編集可能なプロパティを機能させるには、以下の追加のモジュールが 1 つ必要です。

using{ /Verse.org/Simulation }

Verse 仕掛けクラスを設定する

この Verse 仕掛けクラスには、直前の仕掛けクラスよりも多くの機能があります。 「Text」 という message 式が使用され、「これは Text Block です」というメッセージが表示されます。 この式は、OnBegin 関数内で 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."

3 つの編集可能な Trigger 仕掛けと 2 つの編集可能な入力トリガー仕掛けが、material_block と StackBox を制御するための仕掛けクラスに追加されます。 各トリガーは、実行する機能に基づいて名前が変更されます。たとえば、

  • TriggerShow

  • TriggerChange

  • TriggerHide

  • InputTriggerInc (値を増加)

  • InputTriggerDec (値を減少)

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

「MyUI」という StackBox ウィジェット変数が宣言されます。これは、上記のコードの MyUI 変数と同じものです。

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

3 つの UI マテリアル (RadialMaterial、StripeMaterial、DissolveMaterial) が仕掛けクラスに追加され、それぞれのマテリアル効果にデフォルト値が割り当てられます。

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}

On Begin 関数で UI、マテリアル、トリガーを制御する

OnBegin 関数では、さまざまなトリガー仕掛けに対して異なる関数を TriggeredEvents に登録することで制御を設定し、Input トリガー仕掛けについては PressedEvents に関数を登録することで制御します。 デフォルト値が増減すると、Verse は material_block を使用して、次のように UI マテリアルに影響を与えます。

  • OnShow - プレイヤーの HUD に UI マテリアル を表示します。

  • OnChange - 塗りつぶしマテリアルの変更を表示するために、UI マテリアルの Progress パラメータ を変更します。

  • OnHide - プレイヤーからUI マテリアルを隠します。

  • IncreasesValue - マテリアルの進行状況と溶解する速度、および溶解の度合いを増加させます。

  • DecreasesValue - マテリアルの進行状況と溶解する速度、および溶解の度合いを減少させます。

    

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)

「Label」という text_block 変数が使用され、text_block が Verse 仕掛けに追加されます。 text_block は、プレイヤーの HUD にテキストの文字列をレンダリングするために使用されます。 text_block は、デフォルトの Text 変数に設定されたメッセージを表示し、次のの text_block の設定を使用してテキストの外観や配置を制御します。

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

3 つの UI マテリアルは式に追加され、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}

for 式は、UI が画面に表示されるタイミングと画面に表示する UI を決定するために使用されます。

UI は画面上に表示されます。これは、GetPlayspace().GetPlayers() を使用してプレイ空間内の各プレイヤーを見つけ、その後 GetPlayerUI[Player] を呼び出して、そのプレイヤーの player_ui クラスを返すことで行われます。プレイヤーの HUD/UI にウィジェットを追加するために不可欠です。

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

次に、do 式の中で、StackBox UMG ウィジェットの設定を使用して、「MyStackBox」という新しい stack_box が作成されます。 ウィジェット値が MyStackBox に割り当てられると、ランタイム時に「MyUI」という新しい変数にすべての MyStackBox 値が割り当てられます。

これにより、MyUI で StackBox ウィジェット プロパティを使用し、material_block を参照して以下を実行できるようになります。

  • StackBox の Orientation プロパティを使用します。

  • Slots:array 式を使用して配列内の各 material_block、text_block、Label 変数に stack_box_slot を割り当てて、配列オブジェクトを整理します。

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

OnShow 機能を作成する

TriggerShow.TriggeredEvent が呼び出されると、OnShow 関数 はプレイ空間内のすべてのプレイヤーとそのプレイヤー UI を取得し、MyUI 値を使用してプレイヤー UI にウィジェットを追加します。

最後に、ランタイム時に RadialMaterial の Progress 値が 1.0 に設定されます。これは、ゲーム開始時に体力やシールドバーが満タンであることを意味します。

Verse 
    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 関数では for 式を使用して、プレイ空間内のプレイヤーとそのプレイヤー UI を取得し、PlayerUI.RemoveWidget (MyUI) を使用してプレイヤー UI を更新します。

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

OnChange 機能を作成する

UI マテリアルは、Progress パラメータを介して渡される値に基づいて、外観を変更します。TriggerChange.TriggeredEvent が発生すると、OnChange 関数が呼び出され、IncreaseValue と DecreaseValue に基づいて RadialMaterial UI マテリアルの Progress パラメータを更新します。

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

IncreaseValue 関数を作成する

IncreaseValue 関数は、事前に定義された Progress (進行状況)、Speed (速度)、Dissolve (溶解)の量だけ、マテリアルのProgress パラメータの値を増やします。

  • Progress = +1.0

  • Speed = +0.1

  • Dissolve = +0.025

この変更は、プレイヤーが体力またはシールドを受け取ったときに発生し、その増加が HUD 上の体力およびシールドのマテリアルに反映されて表示されます。

このコードは、新しい敵 AI がゲーム内にスポーンしたときにも、その AI の体力やシールドに適用され、機能します。

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

DecreaseValue 関数を作成する

DecreaseValue 関数は、事前に定義された Progress (進行状況)、Speed (速度)、Dissolve (溶解)の量だけ、マテリアルの Progress パラメータの値を減らします。

  • Progress = -1.0

  • Speed = -0.1

  • Dissolve = -0.025

この変更は、プレイヤーが体力またはシールドにダメージを受けたときに発生し、その減少が HUD 上の体力やシールドのマテリアルに反映されて表示されます。

このコードは、ゲーム中に敵 のAI が体力やシールドにダメージを受けた場合にも適用され、同様に機能します。

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

応用編

Radial Material、Stripe Material、または Dissolve Material を持っている場合は、次のコードをプロジェクトにコピー＆ペーストして、Verse コード内で material_block がそれぞれのマテリアルにどのように作用するかを確認できます。

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