Sayaç materyali, kullanıcı arayüzünde kullanım için mükemmeldir. Canını, avlamalarını veya oyun içi eşya ve para birimi koleksiyonunu takip edebilmek için bir UMG Görseli widget’ında bu materyale referans verebilirsin. Kendi sayaç materyalini oluşturmak ve onu özel bir kullanıcı arayüzü tasarımında kullanmak için bu eğitimden faydalanabilirsin.
Bu materyal, varsayılan Fortnite görünümünü; oyuncu canını, kalkanlarını veya başka tür bir oyuncu odaklı istatistiği takip etmek için oluşturduğun özel materyalle geçersiz kılabilir.
Bu materyal, tasarımında simgeler kullanır. Fortnite İçin Unreal Editor’da (UEFN) yerel olarak çok sayıda simge yer almaktadır. Simgeleri Fortnite klasörlerindeki Dokular > Simgeler altında bulabilirsin.
Bir Materyal Oluştur
Tüm materyaller İçerik Tarayıcısı’nda oluşturulur. Projeni düzenlemek için tüm materyallerini barındıracak bir klasör oluştur.
Bağlam menüsünü açmak için İçerik Tarayıcısı içinde sağ tıkla.
Bağlam menüsünden Materyal’i seç.
Materyalini M_Meter olarak adlandır.
Materyal Editörü’nü açmak için materyal önizleme resmine çift tıkla.
Sayaç materyalini oluşturmak için Fab’den Kullanıcı Arayüzü Materyal Laboratuvarı’nı (UI Material Lab) indirmen gerekir.
Materyal düğümleri ve bunların nasıl çalıştığı konusunda daha fazla bilgi için Materyal Düğümleri ve Ayarları bölümüne bakabilirsin.
Materyal Düğümleri
Aşağıda, bu eğitimde kullanılan materyal düğümlerinin listesi ve bu materyal düğümlerinin nihai üründeki amaçları yer almaktadır. Bu açıklamayı atlamak ve materyali oluşturmaya başlamak için buraya tıkla.
| Materyal Düğümü | Amaç |
|---|---|
Simge ve İlerleme Dolgusu’na bir renk ekler. | |
Simge altına bir arka plan maskesi eklemek için kullanılır. İlerlemeye göre arka planı maskelemek için İlerleme Çubuğu olarak da kullanılır. | |
Kullanıcı arayüzü materyaline doku eklemenin bir yolunu sağlar. | |
Renkli simgeyi bir arka plan renginin üzerine bindirmek ve arka plan üzerinde simge için maske oluşturmak üzere kullanılır. | |
Simgenin UV doku koordinatlarını iki kanallı bir vektör değeri biçiminde yazar. | |
Materyal Fonksiyonu > Kullanıcı Arayüzü Ölçeği | Doku fonksiyonları, Materyal Fonksiyonu düğümünün bir alt kategorisidir. Bu, simgenin UV’lerini ölçeklendirmenin bir yolunu sunar. |
Materyal Fonksiyonu > Kullanıcı Arayüzü SDF Dairesi | Simgenin arkasındaki ilerleme çubuğunu ve dairenin ne kadarının arka plan rengiyle dolacağını maskelemenin bir yolunu sunar. Genellikle bu materyal fonksiyonu, materyalde bir daire çizmek için kullanılır. Farklı bir şekil oluşturmak için Kullanıcı Arayüzü Materyal Laboratuvarı’ndaki diğer SDF Şekil materyal fonksiyonlarıyla (örneğin, Kullanıcı Arayüzü SDF Kutusu) değiştirilebilir. |
Simgenin X ve Y eksenlerini eşit olarak ölçeklendirmek için kullanılır. Burada 2 Skaler Parametre ekleriz. Bunlardan biri, simgenin X eksenini, diğeri ise simgenin Y eksenini ölçeklendirmek içindir. Sonrasında bunları MF_UI_Scale’e bağlarız. | |
Simgenin sarmalanmamasını veya döşenmemesini sağlamak için simgenin UV’leri 0 ile 1 arasında kısıtlanır. | |
Takip cihazındaki İlerleme skaler parametresi için 0-10 aralığı oluşturmak amacıyla kullanılır. ConstantBiasScale, ayarlanan değeri parametreden alıp ondan Dengeleme değerini çıkararak Ölçek değeri ile çarpar. | |
Çarpma düğümü iki girdiyi alıp birbiriyle çarpar ve sonucu yazar. Bu örnekte, bir dokunun RGB kanalları, arka planı renklendirmek için bir Vector3 düğümüyle çarpılır. Ayrıca, simgeyi renklendirmek için LinearGradient, bir Vector3 ile çarpılır. | |
Adım | X ve Y koordinatları için bir eşik oluşturur. Eşik, kullanıcı arayüzündeki arka plan materyali için bir kapsayıcı oluşturur. Adım düğümleri, bir eşiğin üzerindeki değerleri 1’e, eşiğin altındaki değerleri 0’a dönüştürür. Bunun sonucunda, doldurulmuş bir alan ile doldurulmamış bir alan arasında net bir ayrımın olduğu durumlarda bir ilerleme çubuğuna dair maske yazılmış olur. |
Doğrusal Gradyan’ın UGradient değerlerini alıp en yakın üst tamsayıya yuvarlar ve sonucu yazar. Böylece basit bir katı arka planı kolayca oluşturma olanağımız olur. | |
Sabit | Bir materyal özniteliğine bir değer eklemenin bir yolunu sağlar. |
Ana Materyal Düğümünü Hazırla
Herhangi bir materyal düğümü eklemeden önce Ana Materyal Düğümü’ndeki (AMD) ayarları değiştirerek kullanıcı arayüzünde kullanılacak materyali hazırla. AMD’deki ayarlar, AMD’de hangi girdilerin kullanılabilir olduğunu ve materyalin nerede kullanılabileceğini belirler.
AMD düğümünü seç.
Materyal Editörü’nün Ayrıntılar panelinde Materyal Alanı’nı Kullanıcı Arayüzü olarak ayarla.
Karışım Modu’nu Yarı Saydam olarak ayarla.
Büyütmek için resme tıkla.
İlerleme Rengini Ayarla
Sayaç materyaline, UMG’de Görsel (Image) widget’ı aracılığıyla tanımlanabilecek olan İlerleme Rengi’ni ayarlayarak başla. Özel bir kullanıcı arayüzü tasarımı oluşturmak için bu İlerleme Rengi’ni kullanabilirsin.
Materyal Grafiği’nde sağ tıklayarak düğüm menüsünü aç.
Arama çubuğuna Doğrusal Gradyan yaz. Açılır menüden LinearGradient’ı seç. Düğüm grafikte görünür.
Materyal Grafiği’ne aşağıdaki düğümleri eklemek için birinci ve ikinci adımları tekrarla:
Tavan
Çarpma
Constant3vector
Constant3Vector düğümündeki beyaz pini sürükle ve Çarpma düğümündeki A girdisine bağla. Görünüm penceresindeki şeklin rengi değişir.
Materyal Grafiği’ndeki Constant3Vector materyal düğümünü seç. Grafikte düğüm, onu seçtiğini belirtecek şekilde vurgulanmış hale gelir.
Düğümdeki siyah kareye tıklayarak Renk Çarkı’nı aç. Materyal için renk çarkından bir renk seç.
Doğrusal Gradyan düğümündeki UGradient pinini sürükle ve Tavan düğümünde solda yer alan girdiye bağla.
Tavan’da sağda yer alan pini sürükle ve Çarpma düğümündeki B girdisine bağla.
Bu düğüm yapılandırması, kullanıcı arayüzü kapsayıcısının rengini belirtir.
Grafik alanına sağ tıkla ve grafiğe bir LinearInterpolate düğümü ekle.
Çarpma düğümünü sürükle ve birinci LinearInterpolate düğümündeki A girdisine bağla.
Materyalin bu kısmı, bir ölçerdeki ilerlemeyi, bir kapsayıcının arka planını doldurarak takip etmek için kullanılır.
Düğümleri gruplandırmak ve bir birim olarak hareket ettirmek için aşağıdakileri yap:
Sol tıkla ve fareyi bir düğüm grubunun etrafında sürükle. Seçilen tüm düğümler vurgulanır.
Bir düğümü tutup grafikte farklı yönlerde sürükle. Böylece seçilen tüm düğümler tek bir parça halinde hareket edecektir.
Simge Ölçeklendirmesini ve Rengini Ayarla
Materyalin bu bölümünde bir simge seçip ölçeklendirecek ve simge için materyalde ve kullanıcı arayüzünde kullanılacak bir renk seçeceksin. Simgeler Fortnite > Dokular > Simgeler klasöründe bulunabilir.
Grafik alanına sağ tıkla ve grafiğe aşağıdaki düğümleri ekle:
TextureCoordinate
AppendVector
Sıkıştırma
TextureSample
Constant3vector
Çarpma
Sabit
Grafikteki Sabit düğümünü seç, ardından sağ tıkla ve açılır menüden Çoğalt’ı seç. İlk Sabit düğümünün üzerinde bir Sabit düğümü daha görünür. Kopyayı orijinalin altına taşı.
Çarpma düğümünü çoğalt.
LinearInterpolate (Lerp) düğümünü çoğalt.
Grafikteki üstteki Sabit düğümünü seç ve 0,7 varsayılan değerini ekle.
Düğmeye sağ tıkla ve açılır menüden Parametreye Dönüştür’ü seç. Parametreyi IconScaleX olarak adlandır. Bu düğüm, simgenin X koordinatlarının ölçek boyutunu kontrol edecektir.
Grafikte alttaki Sabit düğümünü seç ve 0,7 varsayılan değerini ekle.
Düğüme sağ tıkla ve açılır menüden Parametreye Dönüştür’ü seçi. Parametreyi IconScaleY olarak adlandır. Bu düğüm, simgenin Y koordinatlarının ölçek boyutunu kontrol edecektir.
IconScaleX parametre düğümünü sürükle ve AppendVector düğümündeki A girdisine bağla.
IconScaleY parametre düğümünü sürükle ve AppendVector düğümündeki B girdisine bağla.
Parametre düğümünde ayarlanan IconScale X ve Y değerleri, bir Materyal Örneğine dönüştürüldüğünde materyalin dışında kontrol edilebilir.
Bir sonraki adımda, materyale simgenin UV’lerini ölçeklendiren bir fonksiyon eklemek için bir Materyal Fonksiyonu düğümü oluşturman gerekecektir.
Bir Materyal Fonksiyonu (UI_Scale) Ayarla
Bu adımda bir Materyal Fonksiyonu oluşturmayı ve düğümle birlikte kullanılacak fonksiyonlar aramayı öğreneceksin.
Grafikte sağ tıkla ve arama çubuğuna MaterialFunction yaz. Açılır menüden MaterialFunctionCall’u seç. MaterialFunctionCall düğümü grafikte görünür.
Ayrıntılar panelinde Materyal Fonksiyonu açılır menüsüne tıkla ve arama çubuğuna UI_Scale yaz, ardından açılır menüden MF_UI_Scale’i seç. MaterialFunctionCall düğümü, Kullanıcı Arayüzü Ölçeği düğümüne dönüşür.
UI_Scale fonksiyonu, simgenin UV’lerinin ölçeğinin, Materyal Fonksiyonları kullanılarak artırılmasını veya azaltılmasını sağlar. Materyal Fonksiyonları bir materyalde yalnızca Materyal Fonksiyonu düğümü aracılığıyla kullanılabilir.
Simge Uv’lerini Ayarla
Bu adımda materyale, parametrelerden ve Kullanıcı Arayüzü Ölçeklendirmesi’nden bilgi alırken ölçeklenecek olan bir simge ve simge rengi ekleyeceksin.
TextureCoordinate düğümünü sürükle ve MF_UI_Scale düğümündeki UV’ler (V2) girdisine bağla.
AppendVector düğümünü sürükle ve MF_UI_Scale düğümündeki Ölçek (V2) girdisine bağla.
MF_UI_Scale düğümündeki Sonuç pinini sürükle ve Kısıtlama düğümündeki beyaz girdiye bağla.
Doku Örneği düğümünü seçerek bunun seçeneklerini Ayrıntılar panelinde aç.
Doku açılır menüsünü aç.
Arama çubuğuna “simge” yaz.
Açılır menüden bir simge seç.
Kısıtlama düğümündeki beyaz pini sürükle ve Doku Örneği düğümündeki UV’ler girdisine bağla.
Doku Örneği’ndeki RGB pinini sürükle ve birinci Çarpma düğümündeki A girdisine bağla.
Doku Örneği’ndeki A pinini sürükle ve birinci Çarpma düğümündeki B girdisine bağla.
Doku Örneği’ndeki A pinini tekrar sürükle ve ikinci LinearInterpolate (Lerp) düğümündeki Alfa girdisine bağla.
Birinci Çarpma düğümünü sürükle ve ikinci Çarpma düğümündeki B girdisine bağla.
Constant3Vector düğümünü seçerek bunun seçeneklerini Ayrıntılar panelinde aç.
Sabit alanına tıklayarak Renk Çarkı’nı aç.
Simge için Renk Çarkı’ndan bir renk seç.
Constant3Vector düğümünün beyaz pinini sürükle ve ikinci Çarpma düğümündeki A girdisine bağla.
İkinci Çarpma düğümündeki beyaz pini sürükle ve birinci LinearInterpolate (Lerp) düğümündeki B girdisine bağla.
Birinci Çarpma düğümündeki beyaz pini sürükle ve birinci LinearInterpolate (Lerp) düğümündeki Alfa girdisine bağla.
Birinci Çarpma düğümündeki beyaz pini sürükle ve ikinci LinearInterpolate (Lerp) düğümündeki B girdisine bağla.
Birinci LinearInterpolate (Lerp) düğümündeki beyaz pini Ana Materyal Düğümü’ndeki Nihai Renk girdisine sürükle.
Simge artık materyal önizleme penceresinde görünmektedir.
Bir sonraki adımda ilerleme çubuğu maskesini ayarlayacaksın. İlerleme çubuğu, aşağıdaki gif’te olduğu gibi materyalin yalnızca avlamalardaki artışa karşılık gelen kısmını göstererek çalışır.
Bir İlerleme Çubuğu Maskesi Ayarla
Materyalin son adımı, oyuncu düşmanları avladıkça ilerleme çubuğunun materyal rengiyle dolmasını sağlayacak şekilde kullanıcı arayüzü materyalini animasyonlu hale getirmek için bir widget’ta veya Sequencer’da çağrılabilecek bir ilerleme çubuğu maskesi oluşturmaktır.
Bir sonraki düğüm serisi için alan oluşturman gerekir. O sırada var olan tüm düğümlere sol tıklayıp fareyi bunların etrafında sürükleyerek söz konusu düğümleri seç, ardından bunları tek bir grup halinde sola taşı.
Maske ayarını ikinci LinearInterpolate (Lerp) düğümüne bağlaman gerekecektir. İkinci LinearInterpolate (Lerp) düğümünü seç ve Ana Materyal Düğümü’ne doğru sağa taşı. Bu noktada düğüm yapılandırmasının nasıl olması gerektiği aşağıda verilmiştir.
Büyütmek için resme tıkla.
Materyalin bu bölümünde, materyalin özelliklerini, özelliklerin kapsayıcıdaki X ve Y koordinatlarına göre maskelemen gerekecektir. Bu koordinatlar aynı zamanda oyuncu avlamaları arttıkça materyali göstermek için de kullanılacaktır.
Grafik alanına sağ tıkla ve grafiğe aşağıdaki düğümleri ekle:
Sabit
ConstantBiasScale
LinearGradient
Adım
Çarpma
Sabit düğümünü seç, düğüme sağ tıkla ve açılır menüden Çoğalt’ı seç.
Birinci Sabit düğümünü seç ve buna 5,0 değerini ver.
Düğüme sağ tıkla ve Parametreye Dönüştür’ü seç.
Parametreyi TrackerProgress olarak adlandır.
Bu parametre, UMG ve Sequencer’da oyuncunun avlamalarını takip etmek için kullanılacak ve materyalin kapsayıcıda gösterilmesini sağlayacaktır.
Takip Cihazı İlerlemesi düğümündeki beyaz pini sürükle ve ConstantBiasScale düğümüne bağla.
ConstantBiasScale düğümünü seç ve Ayrıntılar panelinde Dengeleme değerini 0, ölçek değerini ise 0,1 olarak ayarla. Böylece TrackerProgress, takip cihazının 0-10 değerine göre normalleştirilmiş olacaktır.
ConstantBiasScale düğümünü sürükle ve Adım düğümündeki Y girdisine bağla.
LinearGradient düğümündeki VGradient pinini sürükle ve Adım düğümündeki X girdisine bağla.
Adım düğümündeki beyaz pini sürükle ve Çarpma düğümündeki B girdisine bağla.
İkinci Sabit düğümünü seç ve buna 0,9 değerini ver.
Grafikte sağ tıkla ve arama çubuğuna MaterialFunctionCall yaz.
Materyal Fonksiyonu düğümünü seçerek bunun seçeneklerinin Ayrıntılar panelinde açılmasını sağla.
Arama çubuğuna UI_SDF_Circle yaz.
Açılır menüden UI_SDF_Circle’ı seç.
Bu materyal fonksiyonu, Sabit düğümü aracılığıyla kapsayıcının boyutunu kontrol eder ve materyal kapsayıcısının şeklini belirler. Bu durumda kapsayıcı daire şeklindedir.
İkinci Sabit düğümünü sürükle ve MF_UI_SDF_Circle düğümündeki Boyutlar girdisine bağla.
MF_UI_SDF_Circle düğümündeki Dolgu pinini sürükle ve Çarpma düğümündeki A girdisine bağla.
Çarpma düğümündeki beyaz pini sürükle ve ikinci LinearInterpolate (Lerp) düğümündeki A girdisine bağla.
İkinci LinearInterpolate (Lerp) düğümündeki beyaz pini sürükle ve Ana Materyal Düğümü’ndeki Opaklık girdisine bağla.
Materyal tamamlanmış olup nihai düğüm yapılandırması aşağıdaki görselde olduğu gibi görünmelidir.
Büyütmek için resme tıkla.
Bu materyali UMG ile kullanmak için onu bir materyal örneğine dönüştür. Bir materyal örneğinin parametreleri geçersiz kılınabilir, açılabilir veya kapatılabilir ve materyalin birlikte kullanıldığı kullanıcı arayüzünü animasyonlu hale getirmek için UMG ve Sequencer’da çağrılabilir.
Bir materyal örneği oluşturmak için:
İçerik Tarayıcısı’nda materyal önizleme resmine sağ tıkla.
Açılır menüden Materyal Örneği Oluştur’u seç.