Materialien haben in UEFN viele Funktionen, weil die Materialparameter in Verse bearbeitet werden können. Parametrisierte Materialien sind der Schlüssel, um eine qualitativ hochwertige Benutzeroberfläche (UI) mit einem material_block zu erstellen.
Ein material_block verwendet die Parameter eines UI-Materials oder einer Material-Instanz, um die Parameterwerte durch Verse-Code zu ändern und zu steuern, wodurch eine dynamisch aussehende Benutzeroberfläche entsteht. Zum Beispiel kannst du die Parameter eines UI-Meter-Materials in Verse bearbeiten, um das Verhalten des Materials zu programmieren, wenn der Spieler Schaden nimmt oder einen Feind beschädigt.
Bevor du eine Zeile Code schreibst, überlege dir, wie du Materialien in deiner Benutzeroberfläche verwenden möchtest. Erstelle Wireframes, um zu bestimmen, wie deine Benutzeroberfläche aussehen soll und was die Materialien tun sollen.
UI-Materialien und -Texturen
Das Erstellen eines material_block Slots beginnt mit der Erstellung deines UI-Materials. Du kannst die Materialfunktionen und Materialien aus der Benutzeroberflächen-Funktionsvorlage verwenden oder dein eigenes benutzerdefiniertes Material von Grund auf erstellen.
Siehe die UI-Materialien sektion erfährst du mehr darüber, wie du deine eigenen benutzerdefinierten UI-Materialien erstellst.
Materialien
Wenn du ein neues, benutzerdefiniertes Material erstellst, hebst du deine Benutzeroberfläche von anderen ab, die vorhandene und allgemein verfügbare Benutzeroberflächenmaterialien ändern. Richte zuerst deine UI-Materialien ein. Verwende die folgenden grundlegenden Einrichtungsschritte und bewährten Methoden, um UI-Materialien zu erstellen:
Stelle die Materialdomäne im Hauptmaterialknoten (MMN) auf Benutzeroberfläche ein.
Ändere dein Root-Material, damit es einfach ist.
Je mehr Parameter du hast, desto mehr Freiheit hast du mit deinem Material.
Verwandle dein Material in eine Materialinstanz, wenn das Material fertig ist.
Materialinstanzen werden als Typ von Klassen im Verse-Code verwendet. In Verse kannst du Standardwerte für deine Materialeigenschaften und -parameter festlegen.
Wenn du deine Materialinstanzen benennst, verwende die folgende Fortnite-Namenskonvention:
MI_UI_MaterialName
Texturen
Texturen verleihen einem UI-Design eine besondere Note, die mit Materialien allein nicht erreicht werden kann. UEFN stellt einen Ordner mit Texturen zur Verfügung, die du in deinem UI verwenden kannst : > Fortnite > Textures. Jede Texturierung, die du importierst, muss sich an die Macht der Zwei regel folgen.
Die Materialknoten verwenden Parameter aus dem Material und legen sie im Verse-Code offen. Mit Verse kannst du die Materialparameter verwenden, um die Werte der Texturpixel (Texel genannt) innerhalb des Materials anzusteuern, um eine Art Maske zu erstellen oder für andere Berechnungen, um das Aussehen und Verhalten der Texturen zu bearbeiten und zu ändern.
Um sicherzustellen, dass deine Texturen für die Verwendung in der Benutzeroberfläche optimiert sind, öffne die Miniaturansicht und verwende die folgenden Einstellungen im Detailbereich:
Setze die Mip-Gen-Einstellungen auf „Keine MipMaps“.
Setze die Textur-Gruppe auf UI.
Stelle die Komprimierungseinstellungen auf Benutzeroberfläche 2C (RGBA8) ein.
Importierte Texturen, die nicht der Power-of-Two-Regel entsprechen, können bearbeitet werden, um der richtigen Textur-Skala zu entsprechen. Um eine Textur zu bearbeiten, befolge die Anweisungen in Texturen in der Größe ändern.
Materialblock Beispiel 1
Ein material_block wird als einer der Slots innerhalb eines benutzerdefinierten Widgets verwendet, das mit Verse-Code erstellt wurde. Während des Gameplays kannst du mit dem material_block die Parameter des Materials über Verse manipulieren, um zu ändern, wie die Instanzierung des UI-Materials/Materials auf dem HUD aussieht und sich verhält. Das ist ähnlich wie bei einem image_block, mit dem du eine Textur in Verse verwenden kannst.
Das benutzerdefinierte Material-Widget wird auf verschiedene Arten im Verse-Code verwendet:
Es bietet eine Möglichkeit, Materialparameter zu verwenden, um die Größe, das Verhalten und das Aussehen des Materials in der Benutzeroberfläche zu bestimmen.
Überträgt Daten in Verse an Parameter, sodass Parameter von dynamischen Gameplay-Daten gesteuert werden können, die nur von Verse verfügbar sind.
Der folgende Code zeigt, wie material_block verwendet wird, um einen Block von sich auflösendem Material in der HUD anzuzeigen. Den gesamten Codeblock findest du in der Sektion Abgeschlossener Code weiter unten.
Verse-Code sollte immer die besten Praktiken verwenden, um UI-Elemente zu platzieren und anzuzeigen.
Module für die Benutzeroberfläche und Materialien
Die folgenden Module enthalten die Funktionen, mit denen du den material_block als UI-Widget steuern und die Farben, die Platzierung und mehr des Materials festlegen kannst.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }Zielen auf UMG-Widgets und UI-Materialien in der Geräteklasse
Unter der Klasse Verse-Gerät wird eine Stackbox-Widget-Variable mit dem Namen MyUI deklariert. mit einer Ausrichtungs-Einstellung von orientation.Vertical. Dadurch zeigt die StackBox ihren Inhalt vertikal an.
Als Nächstes wird ein UI.MaterialBlock.MI_UI_Dissolve_material Parameter namens DissolveMaterial mit einem Dissolve-Parameter deklariert und ihm wird ein Standardwert von 0,2 zugewiesen.
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}
Steuerung von UI und Materialien mit der Funktion „On Begin“
In der OnBegin-Funktion wird ein Quadrat auf dem HUD erstellt, das sich beim Spielstart auflöst.
Die DissolveMaterialBlock Variable istvom Typ material_block und verweist auf das UI-Material, indem das DefaultImage auf das UI-Material (DissolveMaterial) gesetzt wird, während DefaultDesiredSize die Standard-Größe des material_block festlegt, wenn es in einem Widget mit X- und Y-Koordinaten gerendert wird.
Ein for-Ausdruck wird verwendet, um die Benutzeroberfläche für jeden Spieler im Spielbereich auf dem Bildschirm anzuzeigen. Der GetPlayspace(). Die GetPlayers()-Funktion ruft ein Array aller Spieler im Spiel ab und fügt dann das Widget, das den material_block enthält, zu ihrem HUD hinzu, basierend auf den folgenden Anweisungen im do-Ausdruck:
Erstellt eine Stapelbox mit dem Namen MyStackBox.
Setzt die Ausrichtung auf vertikal.
Fügt den DissolveMaterialBlock in den ersten Slot von MyStackBox ein.
Setzt MyUI auf MyStackBox, damit es außerhalb dieser Schleife zum HUD des Spielers hinzugefügt werden kann.
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:
Vollständiger Code
Kopiere den kompletten Codeblock unten und füge ihn ein, um den sich auflösenden Materialblock in der HUD zu sehen.
Du musst ein sich auflösendes Material in deinem Projekt haben, damit dieser Codeblock funktioniert.
Siehe Erstelle dein eigenes Verse-Gerät für Schritte zum Erstellen deines eigenen Verse-Geräts.
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}
Materialblock-Beispiel 2
Dieses Beispiel baut auf dem obigen Beispiel auf, indem es zwei zusätzliche UI-Materialien, ein Auslöser-Gerät und Input Auslöser-Geräte einführt. Die Trigger werden verwendet, um das auf dem HUD angezeigte Material anzuzeigen und zu ändern.
Der Verse-Code beginnt mit denselben Modulen wie der Code-Block oben, um den material_block zu steuern und die Parameter des UI-Materials zu bestimmen. Ein zusätzliches Modul ist erforderlich, damit die bearbeitbaren Eigenschaften dieses Codes funktionieren:
verwendet { /Verse.org/Simulation }
Einrichten der Verse-Geräteklasse
Diese Verse-Geräteklasse hat mehr Funktionen als die vorherige Geräteklasse. Ein Nachrichtenausdruck mit dem Namen Text wird verwendet, um die Nachricht „Dies ist ein Textblock“ anzuzeigen. Dieser Ausdruck wird in der OnBegin Funktion von einem text_block aufgerufen.
# 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."
Drei bearbeitbare Auslöser und zwei bearbeitbare Input-Auslöser werden der Klasse des Geräts hinzugefügt, um den material_block und die StackBox zu steuern. Jeder Trigger wird nach der Funktion benannt, die er ausführt, zum Beispiel:
TriggerShow
TriggerChange
TriggerHide
InputTriggerInc (Erhöht einen Wert)
InputTriggerDec (Verringert einen Wert)
@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{}
Eine StackBox Widget Variable namens MyUI wird deklariert, genau wie die MyUI Variable im obigen Code.
var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}Die drei UI-Materialien (RadialMaterial, Stripe Material und DissolveMaterial) werden der Geräteklasse hinzugefügt und ihre Materialeffekte erhalten Standardwerte.
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}
Steuern der Benutzeroberfläche, Materialien und Trigger mit der On Begin-Funktion
Die Funktion OnBegin richtet Steuerelemente für die verschiedenen Auslöser-Geräte ein, indem sie verschiedene Funktionen auf deren TriggeredEvents abonniert werden, und steuert die Input-Trigger-Geräte, indem sie Funktionen für ihre PressedEvents. Wenn sich der Default-Wert erhöht oder verringert, werden die UI-Materialien von Verse verwendet den material_block, um Folgendes zu tun
OnShow– Zeigt das UI-Material auf dem HUD des Spielers an.OnChange– Ändert den Parameter Fortschritt des UI-Materials, um eine Änderung des Füllmaterials anzuzeigen.OnHide– Versteckt das UI-Material vor dem Spieler.IncreasesValue– Erhöht den Fortschritt und die Geschwindigkeit, mit der sich das Material auflöst, sowie die Menge, die sich im Material auflöst.DecreasesValue– Verringert den Fortschritt und die Geschwindigkeit, mit der sich das Material auflöst, sowie die Menge, die sich im Material auflöst.
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)
Eine text_block Variable mit dem Namen Label wird verwendet, um einen text_block zum Verse-Gerät hinzuzufügen. Der text_block wird verwendet, um einen String mit Text auf dem HUD eines Spielers zu rendern. Ein text_block zeigt die in der Variable Standardtext kodierte Nachricht an und steuert das Aussehen und die Platzierung des Textes mit den folgenden Einstellungen des Textblocks:
DefaultTextColorDefaultShadowColorDefaultShadowOffset
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}}Die drei UI-Materialien werden zu Ausdrücken hinzugefügt und mit material_block gesteuert.
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}
Ein for-Ausdruck wird verwendet, um festzulegen, wann das UI auf dem Bildschirm erscheint und welches UI auf dem Bildschirm angezeigt werden soll.
Das UI erscheint auf dem Bildschirm, indem jeder Spieler im Playspace mit GetPlayspace().GetPlayers() gefunden wird und dann GetPlayerUI[Player] aufgerufen wird, um die player_ui Klasse des Spielers zurückzugeben. Das ist wichtig, um ein Widget zur HUD/UI eines Spielers hinzuzufügen.
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]Dann wird in der do-Expression eine neue stack_box mit dem Namen MyStackBox erstellt, indem die Einstellungen des StackBox UMG (Unreal Motion Graphics) Widgets verwendet werden. Sobald die Werte der Widgets der MyStackBox zugewiesen sind, werden alle Werte der MyStackBox zur Laufzeit einer neuen Variable namens MyUI zugewiesen.
Das aktiviert MyUI, die Eigenschaften des Widgets StackBox zu verwenden und den material_block zu referenzieren, um Folgendes zu tun:
Verwende die Eigenschaft
Ausrichtungder StackBox.Weise jeder
material_block-,text_block- undLabel-Variable innerhalb eines Arrays einenstack_box_slotzu, indem du denAusdruck Slots:arrayverwendest, um die Objekte des Arrays zu organisieren.
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
Erstellen der OnShow-Funktionalität
Sobald das TriggerShow.TriggeredEvent aufgerufen wird, erfasst die Funktion OnShow alle Spieler im Playspace und ihre Spieler UI und fügt das Widget unter Verwendung des Werts MyUI zu ihrer Spieler UI hinzu.
Schließlich wird der Fortschrittswert desRadialMaterials zur Laufzeit auf 1,0 gesetzt, was bedeutet, dass der Gesundheits- oder Schildbalken zu Beginn des Spiels voll ist.
OnShow(InAgent: ?agent):void=
Print ("Show")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.AddWidget(MyUI)
set RadialMaterial.Progress = 1.0
Erstellen der OnHide-Funktionalität
Um das UI-Material aus dem HUD auszublenden, wenn die Gesundheits- oder Schildleiste Schaden nimmt, verwendet die Funktion OnHide einen for-Ausdruck, um Spieler im Playspace und das Spieler-UI zu erfassen und dann das Spieler-UI mit PlayerUI.RemoveWidget (MyUI) zu aktualisieren.
OnHide(InAgent: ?agent):void=
Print ("Hide")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.RemoveWidget(MyUI)
Erstellen der OnChange-Funktionalität
Das UI-Material ändert sein Aussehen basierend auf den Werten, die über den Fortschritt-Parameter übergeben werden. Wenn das TriggerChange.TriggeredEvent eintritt, wird die Funktion OnChange aufgerufen und aktualisiert den Parameter Fortschritt des UI-Materials RadialMaterial anhand von IncreaseValue und DecreaseValue.
OnChange(InAgent: ?agent):void=
Print ("Change Material Parameter")
set RadialMaterial.Progress = RadialMaterial.Progress - 0.25Erstellen der „IncreaseValue“-Funktionalität
Die Funktion IncreaseValue erhöht die Werte der Parameter für Fortschritt, Geschwindigkeit und Auflösen auf dem Material um die vordefinierten Werte:
Fortschritt = +1,0
Geschwindigkeit = +0,1
Auflösen = +0,025
Diese Änderung tritt auf, wenn Spieler Gesundheit oder Schild erhalten. Sie sehen diese Erhöhungen in ihrem Gesundheits- und Schildmaterial auf dem HUD.
Dieser Code funktioniert auch, wenn er auf die Gesundheit und den Schild einer feindlichen KI angewendet wird, wenn eine neue KI ins Spiel kommt.
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
Erstellen der DecreaseValue-Funktionalität
Die Funktion DecreaseValue verringert die Werte der Parameter für Fortschritt, Geschwindigkeit und Auflösen auf dem Material um die vordefinierten Werte:
Fortschritt = -1,0
Geschwindigkeit = -0,1
Auflösen = -0,025
Diese Änderung tritt auf, wenn Spieler Schaden an ihrer Gesundheit oder ihrem Schild erleiden. Sie sehen diese Abnahmen in ihrem Gesundheits- und Schildmaterial auf dem HUD.
Dieser Code funktioniert auch, wenn er auf eine feindliche KI angewendet wird, wenn die KI während des Spiels Schaden an ihrer Gesundheit oder ihren Schilden erleidet.
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
Du bist am Zug
Wenn du ein radiales Material, ein gestreiftes Material oder ein Auflösungsmaterial hast, kannst du den folgenden Code kopieren und in dein eigenes Projekt einfügen, um zu sehen, wie der material_block auf jedem Material im Verse-Code arbeitet.
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."