UEFN'de materyaller, Verse'te kullanıma sunulan düzenlenebilir materyal parametreleri sayesinde çok fazla işlevselliğe sahiptir. Parametrelendirilmiş materyaller, bir material_block içeren ve yüksek kaliteli bir görünüme sahip bir kullanıcı arayüzü oluşturmanın anahtarıdır.
Bir material_block, bir kullanıcı arayüzü materyalinin veya materyal örneklerinin parametrelerini kullanarak dinamik görünümlü bir kullanıcı arayüzü oluşturmak üzere parametre değerlerini Verse kodu aracılığıyla değiştirir ve kontrol eder. Örneğin, oyuncu hasar aldığında veya bir düşmana hasar verdiğinde materyal davranışını programlamak için bir kullanıcı arayüzü sayaç materyalinin parametreleri Verse'te değiştirilebilir.
Bir kod satırı yazmadan önce kullanıcı arayüzünde materyalleri nasıl kullanmak istediğini düşün. Kullanıcı arayüzünün nasıl görünmesini ve materyallerin ne yapmasını istediğini belirlemek için şemalar oluştur.
Kullanıcı Arayüzü Materyalleri ve Dokuları
Bir material_block yuvasının kodlanması, kullanıcı arayüzü materyalinin oluşturulmasıyla başlar. Kullanıcı Arayüzleri Özellik Şablonu'nda bulunan materyal fonksiyonlarını ve materyalleri kullanabilir veya sıfırdan kendi özel materyalini oluşturabilirsin.
Kendi özel kullanıcı arayüzü materyallerini oluşturma konusunda daha fazla bilgi edinmek için Kullanıcı Arayüzü Materyalleri bölümüne bakabilirsin.
Materyaller
Yeni ve özel bir materyal oluşturman, kullanıcı arayüzünü, mevcut ve yaygın olarak bulunan kullanıcı arayüzü materyallerinde değişiklik yapan diğer içerik üreticilerinin kullanıcı arayüzlerinden ayırır. Öncelikle kullanıcı arayüzü materyallerini ayarla. Kullanıcı arayüzü materyalleri oluşturmak için aşağıdaki temel kurulum adımlarını ve örnek uygulamaları kullan:
Ana Materyal Düğümü'nde (MMN) Materyal Alanı'nı Kullanıcı Arayüzü olarak Ayarla.
Kök materyalini basit olacak şekilde değiştir.
Ne kadar fazla parametren olursa, materyalinde o kadar fazla özgürlüğe sahip olursun.
Materyal tamamlandığında materyalini bir materyal örneğine dönüştür.
Materyal örnekleri, Verse kodunda bir sınıf türü olarak kullanılır. Verse'te materyal özelliklerinde ve parametrelerinde varsayılan değerler ayarlayabilirsin.
Materyal örneklerini adlandırırken aşağıdaki Fortnite adlandırma kuralını kullan:
MI_UI_MaterialName
Dokular
Dokular, kullanıcı arayüzü tasarımına, yalnızca materyallerle elde edilemeyecek bir görünüm kazandırır. UEFN, Proje klasörü > Fortnite > Dokular altında, kullanıcı arayüzünde kullanabileceğin bir doku klasörü sağlar. İçe aktardığın tüm dokular İkinin Kuvveti kuralına uymalıdır.
Materyal düğümleri, materyaldeki parametreleri kullanır ve bunları Verse kodunda kullanıma sunar. Verse'ü kullanarak, bir maske türü oluşturmak için materyaldeki doku piksellerinin (doku hücresi olarak adlandırılır) değerlerini hedeflemek üzere veya dokuların görünüşünü ve davranışını düzenlemeye ve değiştirmeye yönelik diğer hesaplamalar için materyal parametrelerini kullanabilirsin.
Dokularının kullanıcı arayüzünde kullanım için optimize edildiğinden emin olmak için önizleme resmini aç ve Ayrıntılar panelinde aşağıdaki ayarları kullan:
Mip Oluşturma Ayarları'nı MipMap Yok olarak ayarla.
Doku Grubu'nu Kullanıcı Arayüzü olarak ayarla.
Sıkıştırma Ayarları'nı Kullanıcı Arayüzü 2C (RGBA8) olarak ayarla.
İkinin Kuvveti kuralına uymayan içe aktarılmış dokular, uygun doku gamına uyacak şekilde düzenlenebilir. Bir dokuyu düzenlemek için Dokuları Yeniden Boyutlandırma'daki talimatları izle.
Materyal Bloku Örneği 1
Bir material_block, Verse koduyla oluşturulmuş özel bir widget'ın içindeki yuvalardan biri olarak kullanılır. Oynanış sırasında material_block, kullanıcı arayüzü materyalinin/materyal örneğinin gösterge panelindeki görünüşünü ve davranışını değiştirmek üzere materyal parametrelerini Verse aracılığıyla değiştirmen için bir yol sağlar. Bu, bir image_block'un Verse'te bir dokuyu kullanabilmeni sağlamasına benzerdir.
Özel materyal widget'ı, Verse kodunda çeşitli şekillerde kullanılır:
Materyalin, kullanıcı arayüzündeki boyutunu, davranışını ve görünümünü belirlemek üzere materyal parametrelerinin kullanılması için bir yol sunar.
Verse'teki verileri parametrelere ileterek parametrelerin yalnızca Verse'te mevcut olan dinamik oynanış verileri tarafından yönlendirilmesine olanak tanır.
Aşağıdaki kod, material_block'un, bir çözünen materyal blokunun gösterge panelinde görüntülenmesi için nasıl kullanıldığını göstermektedir. Kod blokunun tamamına aşağıdaki Tam Kod bölümünden ulaşılabilir.
Verse kodu, kullanıcı arayüzü öğelerini yerleştirmek ve görüntülemek için her zaman örnek uygulamalar kullanmalıdır.
Kullanıcı Arayüzü ve Materyaller için Modüller
Aşağıdaki modüller, material_block'u bir kullanıcı arayüzü widget'ı olarak kontrol etmek ve materyalin renklerini, yerleşimini ve diğer özelliklerini belirlemek için kullanılan fonksiyonları içerir.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }Cihaz Sınıfında UMG Widget'larını ve Kullanıcı Arayüzü Materyallerini Hedefleme
Verse cihaz sınıfının altında,MyUI adında ve Yönlendirme ayarı orientation.Vertical şeklinde olan bir yığın kutusu widget değişkeni bildirilir. Bu yönlendirme ayarı StackBox'ın, içeriklerini dikey olarak görüntülemesine neden olur.
Ardından,DissolveMaterial adlı bir UI.MaterialBlock.MI_UI_Dissolve_material parametresi, bir Dissolve parametresiyle bildirilir ve bu parametreye varsayılan olarak 0,2 değeri atanır.
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}
Kullanıcı Arayüzünü ve Materyalleri, Başlangıçta Fonksiyonu ile Kontrol Etme
OnBegin fonksiyonunda, gösterge panelinde oyun başladığında çözülen bir kare oluşturulur.
DissolveMaterialBlock değişkeni material_block türündedir ve DefaultImage'ı kullanıcı arayüzü materyaline (DissolveMaterial) ayarlayarak kullanıcı arayüzü materyaline referans verir. DefaultDesiredSize ise X ve Y koordinatlarını kullanarak bir widget'ta işlendiğinde material_block'un varsayılan boyutunu ayarlar.
Oyun alanındaki her oyuncu için kullanıcı arayüzünün ekranda görüntülenmesi amacıyla bir for ifadesi kullanılır. GetPlayspace(). GetPlayers() fonksiyonu oyundaki tüm oyuncuları içeren bir dizi alır ve ardından do ifadesinde yer alan aşağıdaki talimatları izleyerek material_block'u tutan widget'ı onların gösterge paneline ekler:
MyStackBox adlı bir yığın kutusu oluşturur.
Bunun yönlendirmesini dikey olarak ayarlar.
DissolveMaterialBlock'u MyStackBox'ın ilk yuvasına yerleştirir.
MyUI'ın, bu döngünün dışında oyuncu gösterge paneline eklenebilmesi için onu MyStackBox olarak ayarlar.
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:
Tam Kod
Gösterge panelinde çözünen materyal blokunu görmek için aşağıdaki kod blokunun tamamını kopyalayıp yapıştır.
Bu kod blokunun çalışması için projende çözünen bir materyal olması gerekir.
Kendi Verse cihazını oluşturmana yönelik adımlar için Kendi Verse Cihazını Oluştur kısmına bakabilirsin.
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}
Materyal Bloku Örneği 2
Bu örnek, bir Tetikleyici cihazı ve Girdi Tetikleyici cihazları olmak üzere iki adet ilave kullanıcı arayüzü materyalinin eklenmesiyle yukarıdaki örneği geliştirmektedir. Tetikleyiciler, gösterge panelinde görüntülenen materyali göstermek ve değiştirmek için kullanılır.
Verse kodu, material_block'u kontrol etmek ve kullanıcı arayüzü materyalinin parametrelerini belirlemek için yukarıdaki kod blokunda yer alan modüllerin aynılarıyla başlar. Bu kodun düzenlenebilir özelliklerinin çalışması için bir ek modül gereklidir:
{ /Verse.org/Simulation } kullanma
Verse Cihaz Sınıfını Ayarlama
Bu Verse cihaz sınıfı, önceki cihaz sınıfından daha fazla işlevselliğe sahiptir. "Bu bir Metin Blokudur" mesajını görüntülemek için Text adlı bir mesaj ifadesi kullanılır. Bu ifade OnBegin fonksiyonunda bir text_block tarafından çağrılır.
# 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."
material_block'u ve StackBox'ı kontrol etmek için cihaz sınıfına üç adet düzenlenebilir Tetikleyici ve iki adet düzenlenebilir Girdi Tetikleyici cihazı eklenir. Her tetikleyici, gerçekleştirdiği fonksiyona göre yeniden adlandırılır. Örneğin:
TriggerShow
TriggerChange
TriggerHide
InputTriggerInc (Bir değeri artırır)
InputTriggerDec (Bir değeri azaltır)
@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{}
Yukarıdaki kodda yer alan MyUI değişkeninin aynısı olan MyUI adında bir StackBox widget değişkeni bildirilir.
var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}Üç kullanıcı arayüzü materyali (RadialMaterial, Çizgili Materyal ve DissolveMaterial) cihaz sınıfına eklenir ve bunların materyal efektlerine varsayılan değerler atanır.
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}
Kullanıcı Arayüzünü, Materyalleri ve Tetikleyicileri, Başlangıçta Fonksiyonu ile Kontrol Etme
OnBegin fonksiyonu, farklı Tetikleyici cihazlarının TriggeredEvents'ine farklı fonksiyonlar bağlayarak bu cihazlar için kontroller ayarlar ve Girdi Tetikleyici cihazlarını, bunların PressedEvents'ine fonksiyonlar bağlayarak kontrol eder. Varsayılan değer arttığında veya azaldığında kullanıcı arayüzü materyalleri, Verse'ün aşağıdakileri yapmak üzere material_block'u kullanmasıyla ondan etkilenir:
OnShow: Oyuncunun gösterge panelinde kullanıcı arayüzü materyalini gösterir.OnChange: Kullanıcı arayüzü materyalinin İlerleme parametresini, dolgu materyalinde bir değişiklik gösterecek şekilde değiştirir.OnHide: Kullanıcı arayüzü materyalini oyuncudan gizler.IncreasesValue: Materyalin çözünmesindeki ilerlemeyi ve hızı ve materyaldeki çözünme miktarını artırır.DecreasesValue: Materyalin çözünmesindeki ilerlemeyi ve hızı ve materyaldeki çözünme miktarını azaltır.
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)
Verse cihazına bir text_block eklemek için Etiket adlı bir text_block değişkeni kullanılır. text_block, bir oyuncunun gösterge panelinde bir metin dizesi işlemek için kullanılır. Bir text_block, Varsayılan Metin değişkenine kodlanmış olan mesajı görüntüler ve metnin görünümünü ve yerleşimini aşağıdaki metin bloku ayarlarını kullanarak kontrol eder:
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}}Üç kullanıcı arayüzü materyali ifadelere eklenir ve material_block kullanılarak kontrol edilir.
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}
Kullanıcı arayüzünün ekranda ne zaman görüneceğini ve ekranda hangi kullanıcı arayüzünün görüntüleneceğini belirlemek için bir for ifadesi kullanılır.
Kullanıcı arayüzü, oyun alanındaki her bir oyuncuyu bulmak için GetPlayspace().GetPlayers()'ı kullanarak ekranda görünür, ardından oyuncunun player_ui sınıfını döndürmek için GetPlayerUI[Player]'ı çağırır. Bu, bir oyuncunun gösterge paneline/kullanıcı arayüzüne bir widget eklemek için şarttır.
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]Ardından do ifadesinde, StackBox UMG widget ayarları kullanılarak MyStackBox adında yeni bir stack_box oluşturulur. Widget değerleri MyStackBox'a atandıktan sonra çalışma zamanında tüm MyStackBox değerleri MyUI adlı yeni bir değişkene atanır.
Böylece MyUI, StackBox widget özelliklerini kullanabilir ve aşağıdakileri yapmak üzere material_block'a referans verebilir:
StackBox'ın
Yönlendirmeözelliğini kullanmak.Dizi objelerini düzenlemek üzere
Slots:array ifadesinikullanarak bir dizi içindeki her birmaterial_block'a,text_block'a veEtiket değişkeninebirstack_box_slotatamak.
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 İşlevselliğini Oluşturma
TriggerShow.TriggeredEvent çağrıldıktan sonra OnShow fonksiyonu oyun alanındaki tüm oyuncuları ve onların oyuncu kullanıcı arayüzünü alır, ardından MyUI değerini kullanarak widget'ı oyuncuların kullanıcı arayüzüne ekler.
Son olarak, RadialMaterial'in İlerleme değeri çalışma zamanında 1,0 olarak ayarlanır; böylece oyun başladığında can veya kalkan çubuğu dolu olur.
OnShow(InAgent: ?agent):void=
Print ("Show")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.AddWidget(MyUI)
set RadialMaterial.Progress = 1.0
OnHide İşlevselliğini Oluşturma
OnHide fonksiyonu, can veya kalkan çubuğu hasar aldığında kullanıcı arayüzü materyalini gösterge panelinden gizlemek için bir for ifadesi kullanarak oyun alanındaki oyuncuları ve oyuncu kullanıcı arayüzünü alır, ardından PlayerUI.RemoveWidget'ı (MyUI) kullanarak oyuncu kullanıcı arayüzünü günceller.
OnHide(InAgent: ?agent):void=
Print ("Hide")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.RemoveWidget(MyUI)
OnChange İşlevselliğini Oluşturma
Kullanıcı arayüzü materyalinin görünümü İlerleme parametresi üzerinden iletilen değerlere göre değişir. TriggerChange.TriggeredEvent gerçekleştiğinde, OnChange fonksiyonu çağrılır ve bu fonksiyon, RadialMaterial kullanıcı arayüzü materyalinin İlerleme parametresini IncreaseValue ile DecreaseValue'ya göre günceller.
OnChange(InAgent: ?agent):void=
Print ("Change Material Parameter")
set RadialMaterial.Progress = RadialMaterial.Progress - 0.25IncreaseValue İşlevselliğini Oluşturma
IncreaseValue fonksiyonu, materyal üzerindeki İlerleme parametresi değerlerini İlerleme, Hız ve Çözünme için önceden tanımlanmış miktarlarda artırır:
İlerleme = +1,0
Hız = +0,1
Çözünme = +0,025
Bu değişiklik, oyuncular can veya kalkan aldığında gerçekleşir. Oyuncular bu artışların can ve kalkan materyaline yansıdığını gösterge panelinde görecektir.
Bu kod, oyuna yeni bir düşman yapay zekâ girdiğinde onun can ve kalkanına uygulandığında da çalışır.
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 İşlevselliğini Oluşturma
DecreaseValue fonksiyonu, materyal üzerindeki İlerleme parametresi değerlerini İlerleme, Hız ve Çözünme için önceden tanımlanmış miktarlarda azaltır:
İlerleme = -1,0
Hız = -0,1
Çözünme = -0,025
Bu değişiklik, oyuncuların canları veya kalkanları hasar aldığında gerçekleşir. Oyuncular bu azalışların can ve kalkan materyaline yansıdığını gösterge panelinde görecektir.
Bu kod, oyun sırasında bir düşman yapay zekânın canı veya kalkanları hasar aldığında söz konusu yapay zekâya uygulandığında da çalışır.
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
Kendi Kendine Yapabileceklerin
Bir radyal materyalin, çizgili materyalin veya çözünme materyalin varsa aşağıdaki kodu kopyalayıp kendi projene yapıştırarak materyal_block'un Verse kodunda her bir materyal üzerinde nasıl çalıştığını görebilirsin.
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."