Projen için özel bir kullanıcı arayüzü materyali oluşturmanın iki yolu vardır:
Materyal Koleksiyonu: Tüm kullanıcı arayüzü işlevlerine yerleşik olarak sahip olan materyallerden oluşan bir koleksiyon.
Özel Üst Materyal: Materyal fonksiyonları kullanılarak sıfırdan yapılmış bir materyal.
Materyal Koleksiyonu
Materyal koleksiyonu, son derece özelleştirilebilir bir dizi ölçer materyali ve dokudur. Materyal koleksiyonunu İçerik Tarayıcısı’nda, Fortnite > Kullanıcı Arayüzü > Materyaller altında bulabilirsin. Materyaller iki türe ayrılır:
Ölçer Materyalleri: Genellikle İlerleme Çubukları olarak kullanılırlar.
Dokular: Genellikle ikonografi ve oyuncu portreleri için kullanılırlar.
material_collection_device, materyal koleksiyonunun, dokuları ve materyalleri görüntülemenin yanı sıra oyun içinde hasar olayları gerçekleştiğinde kullanıcı arayüzü materyallerini dinamik olarak değiştirmek için materyal örneklerinin parametrelerini de kullanmak amacıyla Verse ile nasıl kullanılabileceğine dair bir örnek içerir.
Özel Üst Materyal
Bir UMG Görüntüsü widget’ına yönelik özel bir üst materyal oluşturmak için Materyal Alanını Ana Materyal Düğümü Kullanıcı Arayüzü olarak ayarlaman gerekir. Bu üst materyal, materyali daha dinamik hale getiren Materyal Fonksiyonlarının kullanımını kullanır.
Materyaller, üst Materyalin verimli bir şekilde yeniden kullanılmasını ve Materyal parametrelerini özelleştirmene olanak tanıyan daha kullanıcı dostu bir arayüz sağlamak için Materyal Örneklerine dönüştürülür. Materyal parametreleri daha sonra kullanıcı arayüzünde bağlı UMG widget özelliklerini kullanarak güncellenir.
Dönüştürmeden sonra üst materyalde yapılan herhangi bir değişiklik, tüm materyal örneklerine yayılacaktır.
İçerik Tarayıcısından, Kullanıcı Arayüzü > Cihazlar > Gösterge Paneli Denetleyici > MaterialInstances klasörlerini aç. Küçük resme çift tıklayarak MI_HCD01_ShieldBar adlı Kalkan Çubuğu Materyalini bulup aç. Materyal Örnek Editörü’nde Materyal Örneği açılır.
Bir önceki Cihaz Parametrelerini Ayarlama bölümünde, bir oyuncu kalkan hasarı aldığında veya kalkanını onardığında gösterge panelindeki kalkan çubuğunu güncellemek için Materyal Örneğinin İlerleme özelliğinin nasıl kullanıldığı açıklanıyordu. Bu değişiklikler, Materyal Örneğine, oyuncunun bilgilerine göre çubukta hangi yöne kaydıracağını söylemek için Gösterge Paneli Kontrol Cihazının oyuncu bilgileri kullanılarak gerçekleştirilir.
Materyaller
Bir Materyal Örneğinin bir cihazın fonksiyonunu dinleyebilmesinin nedeni, üst Materyalinde ayarlanmış parametrelere sahip olmasıdır. Kullanıcı Arayüzü materyalleri, gösterge panelindeki oyuncu bilgilerini güncellemek için Materyal Örnekleri aracılığıyla yararlanılabilecek, materyalde zamanlı ritimler veya desenler oluşturmak için Materyal Fonksiyonlarını kullanır.
Bu şablon, Kullanıcı Arayüzü Materyal Laboratuvarı projesiyle aynı Materyal Fonksiyonlarını kullanır. Farklı Materyal Fonksiyonu türlerini ve bunların nasıl kullanıldığını daha iyi anlamak için Kullanıcı Arayüzü Materyal Fonksiyonu projesinin Materyal Fonksiyonları Dağılımı sayfasına bakabilirsin.
Aşağıda, proje için oluşturulan farklı Materyallerin ve bunların nasıl kullanılacağının özetlendiği bir tablo yer alıyor.
| Proje Materyal Listesi | Kullanım |
|---|---|
M_DropShadow | Bir şeklin altında görüntülenecek bir alt gölge oluşturur. Kare, daire, altıgen veya özel bir şekle (doku kullanarak) olanak tanır. Özel şekiller, gölgenin yumuşatılmasına izin vermez. |
M_IconWithbackground | Arka planı ve anahattı olan bir simge oluşturur. |
M_Meter | Nitelikli Etkileşim cihazı için basit bir ölçü birimi oluşturur. |
M_Notshes | Eşit aralıklarla yerleştirilmiş dekoratif çentikler oluşturur. Nitelikli Etkileşim cihazı için çentikli bir ölçüt oluşturmak için M_Meter ile birlikte kullanılır. |
M_ProgressBar_Basic | Gradyan dolgu ve dış hattıyla, kavisli veya keskin köşelere sahip bir ilerleme çubuğu oluşturur. |
M_ProgressBar_Orb | İlerledikçe doldurulan, küre şeklinde bir ilerleme çubuğu oluşturur. Kürenin ortasında bir simge dokusu bulunur. |
M_Texture_Complex | Özel bir Doku'nun ölçeklendirilmesine ve/veya çarpıtılmasına olanak tanır. Örneğin, bir pırıltı veya su altı efekti oluşturmak için kullanılabilir. |
M_Texture_SImple | Basit dokuların renklendirilmesine olanak tanır. Basit bir siyah beyaz doku veya kanal dolu bir doku (RGB kanalları kullanılarak) ile kullanılabilir. |
M_Wave | Yukarıya çıkan baloncukların olduğu bir dalga oluşturur. |
Parametre Grupları
Parametre Gruplarında listelenen farklı parametreleri görmek için şablondan farklı Materyal Örneklerini aç. Bunlar, cihazlara bağlanabilen ve Gösterge Panelinde güncellenebilen Materyal Fonksiyonu parametreleridir.
Parametre Grupları yalnızca onay işaretliyse Materyal Örneği Editörü içinde düzenlenebilir.
Materyal Örneği Editörü’ndeki parametreleri düzenlemek için, İçerik Tarayıcısını ve Kullanıcı Arayüzü > Cihazlar > SkilledInteraction > MaterialInstances klasörlerini aç, ardından MI_SID03_Water Materyal Örneği’ni bulup aç.
Önce suyun rengini değiştir, ardından Sıvı Renk 1 ve Sıvı Renk 2 parametrelerine çift tıkla. Bu, renk tekerleğini açar. Suyu farklı bir renkle değiştir. Aşağıdaki örnekte suyun rengi maviden yeşile değişmiştir.
Baloncuklara yakından bak. Materyal Örneği Editörü penceresini seçtiyseniz, materyaldeki balonların yukarı doğru yükseldiğini görmelisiniz. BubblesStartSize ve BubblesMiddleSize boyut parametrelerini etkinleştirerek balon boyutunu değiştirebilir, sonra da parametrelerini düzenleyebilirsin. Parametre boyutu çok büyükse baloncuklar bir duvarın arkasında kayboluyormuş gibi görünür.
Bu gibi parametreler Görünüm Bağlamaları içinde Ayarla ve oyuncu bilgilerini güncellemek için cihaz fonksiyonları tarafından kullanılabilir.
Kendi projelerinde kullanmak için Materyal Örnekleri ve Doku öğelerinin geçişini yap.
Dokular
Dokular, yalnızca Materyallerle mümkün olmayan ayrıntılar eklemek ve geliştirmek için kullanıcı arayüzünde kullanılır. Kullanıcı Arayüzü tasarımlarında doku kullanmaya karar verirseniz, dokuların bellek açısından yoğun olduğunu unutmayın.
Yetkin Etkileşim Dokusu’nu ve birleştirilmiş Doku ve Materyal örneklerini kullanarak kullanıcı arayüzünün ne kadarının dokularla yapıldığını görebilirsin. Doku örneğinde Arka plaka widget’ını kapattığında sadece kullanıcı arayüzünün mesaj, can çubuğu ve avlama sayacı görünür parçaları kalır.
Arka plakada stilize edilmiş kutuların görünümünü oluşturmak için tercih edilen yöntem, bir doku kullanmaktır. Bu karmaşık tasarım ve şeklin UMG’de yeniden üretilmesi zordur. Kullanıcı Arayüzü Materyalleri yalnızca temel ilkel şekiller oluşturmak, materyal şeklinin etrafına bir kontur eklemek ve materyal şekli ile kontura gradyanlar eklemek için kullanılabilir.
Materyal ve Doku içeren Kullanıcı Arayüzü örneği, doku ve materyalleri harmanlamanın kullanıcı arayüzü için nasıl zarif bir görünüm oluşturduğunu gösterir. Kullanıcı arayüzü, arka plaka tasarımını ve yaratık görselini oluşturan üç Dokudan oluşur.
Yaratık resmi, bir Görsel widget’ının üzerine katman halinde eklenir. Görsel widget’ı bir Materyal Örneği kullanmaz. Fırça seçeneği, Yaratık görselinin altındaki katmanda beyaz bir dikdörtgen oluşturur. Dikdörtgenin boyutu ve boyutları,**Details paneli**ndeki **Görüntü Boyutu** seçenekleri kullanılarak kontrol edilir.
Hiyerarşi panelinde, listedeki diğer widget’lardan önce gelen widget’lar arka plan katmanında yer alır ve ilave her widget listedeki bir önceki widget’ın üstünde bulunur.
Materyal Örneği, tasarımda yaratık fotoğrafı için alt gölge olarak kullanılır.
SDF Dokuları
İşaretli Mesafe Alanı (SDF), konumu girdi olarak kullanan ve çıktı olarak o konuma olan mesafeyi veren bir fonksiyondur. Örneğin, görselin altındaki yarıçapın merkezi 1 olup tamamen beyaz anlamına gelir, ancak kenara doğru ilerledikçe tamamen siyah olan 0 konumuna geçer. SDF'ler, bu konsepti kullanarak bir efekti uygulamak için 0 ile 1 arasında bir değer aralığı belirtmenin bir yolunu oluşturur.
Bu sayede şunları yapabilirsin:
0,5 ile 1,0 arasında değerler al ve düz bir renk uygula.
0,49 ile 0,0 arasında değerler al ve ışıma taklit eden bir soluklaşma renk uygula.
Normal dokular bunu yapmaz çünkü normal dokular ya 1 (beyaz) ya da 0 (siyah) dır. SDG’ler tüm bu verilerin hepsini 0 ile 1 arasında verir.
Bu kavramlar fotoğrafçılıkta da kullanılabilir. Bir fotoğraf .png olarak kaydedilmişse dosyasında yer alır ve buna uygulanmış efektlere sahiptir, ancak görüntüde tam bir renk ve ışıklandırma ayrıntıları yelpazesi yoktur. Bu durumda görüntü ile yapılabilecek daha az özelleştirme vardır çünkü görüntüyü daha parlak veya daha karanlık yapmak düzenlemek görüntünün ayrıntılarını kaybetmesine veya dağıtmasına neden olabilir.
Aynı görüntü bir dslr kamera ile çekildiyse tüm renk ve aydınlatma bilgilerine sahip ham dosyası, bu karanlık alanlar içindeki ayrıntıları kaybetmeden koyu kısımları daha parlak yapmak ve öğesine bakabilirsin.
Kendi benzersiz görünümlü kullanıcı arayüzünü oluşturmak için Doku> SDF klasörlerindeki GBF dokularının tam önizlemesini görmek için Kullanıcı Arayüzü > Doku > SDF klasörlerine bakabilirsin.
SDG simgeleriyle dolu Simgeler adında bir klasör bulunur.
Materyallerde SDF Dokuları
Çoğu kullanıcı arayüzü Materyali, materyalin dışını ve ortasını tanımlamak için 0 ve 1 ikili değerlerini kullanan düz 2D Materyallerdir. 2D Materyallerde. SDF dokuları bir Doku Örneği düğümünde kullanıldığında ve bir Materyal Fonksiyonu ile eşleştirildiğinde, kullanıcı arayüzü materyaldeki bazı değerler değiştirilerek ince ayar yapılabilir.
SDF dokuları ve Materyal düğümleri kullanılarak bir Kullanıcı Arayüzü Materyalindeki farklı değerleri değiştirmek, aşağıdakiler gibi birkaç farklı efekt oluşturur:
Gölgeler
Bulanıklık
Parıltı
Parlaklık
Anahatlar
Animasyonlar
Ölçeklendirme
SDF dokuları, kaliteden ödün vermeden ölçeği kolayca artırmaya olanak tanıdığı için kullanıcı arayüzü Materyallerinin daha dinamik ve benzersiz görünmesini sağlar. Normal öğeler ise ölçek küçültüldüğünde kalitelerini kaybeder. SDF Dokuları, daha temiz bir Materyal Grafiği oluşturarak tüm efektleri yalnızca 1 Doku kullanarak kolayca uygulamak için daha iyi bir optimizasyona sahiptir.
Öte yandan, normal siyah beyaz Dokular, Materyal Grafiğinde kolayca işlenmez ve birden fazla Doku kullanmaya başvurur. Yukarıdaki görselde, Dokulara ışıma eklemenin en basit yolu, benzer bir sonuç elde etmek için ayrıntılı bir Materyal Grafiği oluşturmak yerine Dokuyu radial bir gradyanın üzerine katman koymaktır.
Pürüzsüz Adım Materyal Düğümü
Adım türü materyal düğümleri genellikle materyallerde doğrudan 0 ila 0.25 gibi bir sert geçiş oluşturur. Yumuşak Adım düğümü ise kullanıcı arayüzü Materyallerinde yumuşak bir geçiş oluşturmak için SDF fonksiyonlarını kullanır. Şablonda bulunan ve SDG dokularını kullanan Kullanıcı Arayüzü Materyalleri, Materyalin ortasından dış kenarına yumuşak bir geçiş oluşturmak için Yumuşak Adım Materyal düğümünü kullanır.
Çıkarımlar
Aşağıda, kullanıcı arayüzü öğelerinde materyal ve dokuların kullanımına ilişkin birkaç önemli çıkarım yer almaktadır:
Materyal Fonksiyonlarını kullanmak, canındaki fonksiyonlara referans veren önceden tanımlanmış materyal düğümleri, kalkan çubuğu materyalleri ve oyun içindeki olaylara tepki vermelerine neden olan arka plaka Kullanıcı Arayüzü materyalleriyle zaman kazandırır.
SDF Materyaller ve Dokular daha dinamik görünen bir kullanıcı arayüzü oluşturur.
Görsel widget’larının katmanlarını nasıl oluşturacağını anlamak, basit görünen bir kullanıcı arayüzü ile görsel açıdan daha ilgi çekici bir kullanıcı arayüzü arasındaki farkı ayırt etmek anlamına gelir.
Bir tasarımın görsel olarak karmaşık olan ve Materyallerle üretilemeyen öğeleri için Dokular kullanılmalıdır.