UMG Widget’ları

Kullanıcı Widget’ları, Widget Editörü’nde Unreal Motion Graphics (UMG) Widget’larıyla tasarlanır. 

Kullanıcı widget’ları, bir UMG widget’ıyla cihaz fonksiyonları arasındaki rotanın izlendiği haritalara benzetilebilir. Bir kullanıcı widget’ını okuyabilmek, bir kullanıcı arayüzünün temel yapısını anlamana yardımcı olacaktır. Widget Editörü ile şunları inceleyebilirsin:

• Kullanıcı arayüzü dizilimi ve tasarımı.

• ViewModel fonksiyonları.

• Görünüm bağlamalarındaki widget bağlamaları.

Özellik şablonunda Gösterge Paneli Kontrol Cihazı klasörünü aç ve UW_HCD01 widget’ının nasıl oluşturulduğu ve Gösterge Paneli Kontrol cihazına nasıl bağlandığı hakkında daha fazla bilgi edinmek için UW_HCD01 widget’ına çift tıkla.

Widget Dizilimi

Widget dizilimi, özel bir kullanıcı arayüzü oluşturmanın tasarım aşamasıdır. Widget Editörü’nde, görünümü oluşturmak ve kullanıcı arayüzünün işlevlerini planlamak için Palet panelindeki UMG widget’larını kullanabilirsin. UMG Widget’larını kullanma sıran, kullanıcı arayüzünün görünümünü belirler.

UW_HCD01 widget’ı açıkken Hiyerarşi paneline bak. Hiyerarşi paneli, hangi UMG widget’larının kullanıldığını ve görünüm penceresine eklenme sırasını gösterir.

Tüm widget tasarımları, ekran görevi gören bir kök widget’a sahip olmalıdır. Tasarımın kökünde Kök adlı bir katman widget’ı bulunur ve ekran görevi görür. Görünüm penceresi Ekranı Doldur olarak ayarlanır ve tasarımın Kök olarak belirlenen alanı doldurmasını sağlar.

Can ve Kalkan göstergelerinin tasarımını yerleştirmek için bir Izgara Panel kullanılır. Izgara Paneller, alt widget’ları satırlar ve sütunlar halinde düzenleyen esnek ızgaralardır. 

Izgara panel alt widget’lara satır ve sütun sayısını, satır ve sütunların kapladığı alanı, tasarımda widget’ın kapladığı katmanı ve Kaydırma adı verilen özel bir hareket şeklini kontrol eden seçenekler ekler; bu sayede satır ve sütunları daha fazla özelleştirebilirsin. 

Kaydırma, alt widget’ı X ve Y eksenleri boyunca yer kaplamadan hareket ettirmeyi sağlar. Bu, yalnızca kapsayıcı içindeki içeriğin kaydırıldığı ama kapsayıcının konumunu ve dizilimde kapladığı alanı koruduğu anlamına gelir. 

ShieldBarContainer adlı katman widget’ı, ızgara panelin ilk alt widget’ıdır. Bu widget Satır 1, Sütun 0’da bulunur ve Satır Yayılımı 1, Sütun Yayılımı 0 boyunca görüntülenir. ShieldBarContainer widget’ları, Katman 1 üzerinde görüntülenir. 

Buna göre, ShieldContainer’ın tüm alt widget’ları, Katman 1’de oldukları için tasarımın önünde görünür ancak Satır 1’de durduğu için tasarımın arkasındaki widget’ların sağında yer alır. Kalkan göstergesi 2 satıra (0 ve 1) yayılır, bu da kalkan göstergesinin uzunluğunu belirler. 

Kaydır > Y seçeneğini kullanarak ShieldBarContainerwidget’ını varsayılan konumundan -25,0 Slate Birimi aşağıya, arkasındaki Can Kapsayıcını hafifçe kaplayacak şekilde taşıyabilirsin.

HealthBarContainer adlı katman widget’ı, Izgara Panelin ikinci alt widget’ıdır. Bu widget Satır 1, Sütun 0’da bulunur ve Satır Yayılımı 1, Sütun Yayılımı 0 boyunca görüntülenir. HealthBarContainer widget’ları, Layer0 üzerinde görüntülenir. 

Buna göre,HealthBarContainer’ın tüm alt widget’ları, Katman 0’da oldukları için tasarımın arkasında görünür. Can göstergesi Satır 0’da olduğu için kalkan göstergesinin solunda yer alır. HealthBarContainer ayrıca Satır 0 ve 1’e yayılır, bu da can göstergesinin uzunluğunu belirler. 

Kalkan ve can göstergelerini oluşturan UMG Widget’larının dökümü ve genel tasarımdaki amaçları aşağıda verilmiştir.

ShieldBarContainer

ShieldBarContainer, kalkan göstergesi tasarımını oluşturan tüm UMG Widget’larını barındırır. Kalkan göstergesi aşağıdakilerden oluşur:

HealthBarContainer

HealthContainer, can göstergesi tasarımını oluşturan tüm UMG Widget’larını içerir. Can göstergesi aşağıdakilerden oluşur:

Bundan sonra, kullanıcı arayüzü materyallerini oyun içinde oyuncunun mevcut can ve kalkan durumunu gösterecek şekilde güncellemek için bir ViewModel seçmeyi öğreneceksin.

ViewModel

ViewModel, oyuncu bilgilerini bir fonksiyon listesi aracılığıyla kontrol eder. Fonksiyonlar, UMG widget’ı ve cihaz işlevleri aracılığıyla oyuncu bilgilerinin kontrol edilmesine olanak sağlar. ViewModel’lar, UMG widget’larını kreatif cihazlarına bağlamak için özel bir yol sunar. 

ViewModel’lar, varsayılan kullanıcı arayüzünü değiştirmek için kullanıcı widget’ını kullanarak cihazda yürütülen fonksiyonları dinler. Ardından ViewModel, görünüm bağlamaları aracılığıyla kullanıcı arayüzünü güncellemek için cihaz fonksiyonlarını kullanır.

Örneğin, Kalkan ve Can göstergesi ViewModel’ları, Gösterge Paneli Kontrol cihazının Kalkan ve Can fonksiyonlarını dinler. Oyuncu kalkanları ve canı üzerinde Gösterge Paneli Kontrol cihazı fonksiyonu yürütüldüğünde ViewModel bu fonksiyonları dinler ve kullanıcı arayüzünü güncellemek için bilgileri görünüm bağlamaları aracılığıyla iletir.

Seçilebilecek bir dizi farklı ViewModel vardır. Aşağıdaki ViewModel listesinde cihaza özgü ViewModel’lar olduğuna dikkat et. Bunlar o cihaza özgü fonksiyonları içerir.

Aşağıdaki ViewModel’lar, fonksiyon listelerindeki cihaz fonksiyonları aracılığıyla kullanıcı arayüzünün birden fazla parçasını kontrol eder. 

Cihaz - Gösterge Paneli Kontrol Cihazı Takım/Ekip Oyuncusu Bilgileri Listesi, UW_HCD01 widget’ıyla birlikte kullanılır. Bu şablon tek bir oyuncu, yani senin tarafından oynanmaya yönelik olduğundan, Kontrol Eden Oyuncu Bilgilerini kullanarak senin bilgilerini Gösterge Paneli Kontrol cihazından alır. 

Bu kullanıcı arayüzü örneğinde Can ve Kalkan miktarın, Gösterge Paneli Kontrol cihazının fonksiyonlarını dinleyerek bu ViewModel aracılığıyla kontrol edilir.

Bundan sonra, Can ve Kalkan kullanıcı arayüzü materyallerini görünüm bağlamalarında Gösterge Paneli Kontrol cihazı fonksiyonlarına nasıl bağlayacağını öğreneceksin.

Görünüm Bağlamaları

GörünümUMG Görünüm Bağlamaları, widget işlevselliğini bağlı cihazın fonksiyonlarıyla eşleştirir ve Gösterge Panelinde kullanıcı arayüzünü günceller. UW_HCD01 widget’ında ShieldBar ve HPBar materyalleri, Gösterge Paneli Kontrol cihazının Kalkan ve Can fonksiyonlarına bağlıdır. Bu fonksiyonlar, oyun içinde kalkanlarını ve canını takip eder ve gösterge materyalini sahip olduğun kalkan ve can miktarına göre günceller.

Kalkan ve can UMG widget’ını işlevsel hale getirmenin ilk adımı, bir UMG widget’ı seçip widget özelliklerini belirli bir cihaz fonksiyonuna bağlamaktır. Bağlamalar, Görünüm Bağlamaları panelinde oluşturulmalıdır.

UMG Widget’ı Ekleme

Görüntü widget’ları (ShieldBar ve HPBar) önce Hiyerarşi panelinden, ardından Görünüm Bağlamaları panelinden seçilir. ViewModel fonksiyonları listesini açmak için +Widget Ekle düğmesine tıklayabilirsin. Widget’ın özellik bilgilerini kontrol etmek için widget’a bir fonksiyon eklenir. Örneğimizde bu, ShieldBar ve HPBar materyallerini kontrol eden Fırça fonksiyonudur.

Cihaz Bağlaması Ekleme

Hangi widget’a bağlanacağı belirlendikten sonra cihaz bağlama türü seçilir. Widget alanının yanında boş bir alan vardır. Bu boş alana tıkladığında kullanılabilir cihaz bağlamalarının listesi açılır. Cihaz bağlama seçenekleri, widget ve cihaz bağlama alanlarının altında otomatik olarak görünür. Seçenekler, widget’ın cihazdan aldığı bilgilere göre nasıl güncelleneceğini belirler. 

UW_HCD01 widget’ı, Fırça özelliklerini güncellemek için bir Skaler Parametre Ayarlama kullanır.

Görünüm Bağlamaları

ShieldBar Fırça Özelliği	HealthBar Fırça Özellik

Ayrıntılar paneli

Kalkan Bariyeri Materyali	HealthBar Materyal

Cihaz Parametrelerini Ayarlama

Materyalin oyuncunun kalkanının ve canının mevcut durumunu yansıtmasını sağlamak için cihaz bağlamaları, cihaz bilgilerini UMG Widget’larına göndermek üzere ayarlanması gereken parametrelere sahiptir. 

Bu örnekte Görsel widget’ı ve Fırça işlevi, Gösterge Paneli Kontrol cihazının Fırça parametresine otomatik olarak eklenir. Bu bağlama, hangi Görsel widget’ının Fırça özelliğinin güncelleneceğini belirler.

Ardından,**Parametre Adı** sekmesi, Fırça **Materyal**inde hangi parametre güncelleneceğini belirler. Burada alana İlerleme ifadesi yazılır.

Son olarak, bağlamanın değeri viewmodel tarafından belirlenir. Bağlamanın Değer alanında HUDPlayerInfoListViewmodel > Kontrol Eden Oyuncu Bilgileri > Kalkan ve Can fonksiyonları ayarlanır.

Gösterge Paneli Kontrol Fonksiyonu artık Görüntü widget’ındaki **Fırça** özelliğini, **İlerleme** özelliğine bakıp Can ve Kalkan değerini geçirerek **Skaler Parametre** dönüştürme fonksiyonu aracılığıyla güncelliyor. 

İlerleme, çubuğu İlerleme Başlangıcı ve AşamaEnd değerleri arasında ileri geri hareket ettiren değerdir. Buna göre , İlerleme değeri 0 ile 1 arasında sınırlanır.

Kalkan Çubuğu Materyal Parametre Grupları	HealthBar Materyal Parametre Grupları

Oyuna tam Can ve Kalkanla başlarsan, aldığın hasar, çubuğun İlerleme ve İlerlemeyi Normalleştir özelliklerine göre sola hareket etmesine neden olur. Bu özellikler, oyuncu hasar aldığında malzemenin ne kadar sola hareket edeceğini belirler.

Sağlık ve Kalkanlar, İlerleme ve İlerlemeyi Normalleştir özelliklerini kullanarak bozundukları oranda yenilendiğinde Materyal çizgi boyunca sağa doğru hareket eder.

Diğer Kullanıcı Widget’larını aç ve bunları okuyup UMG Widget’larının Hiyerarşiye eklendiği sırayı, Kullanıcı Widget’ı için seçilen görünüm modelinin türünü ve UMG Widget parametreleri ile cihaz işlevlerinin Görünüm Bağlamalarında nasıl bağlandığını anlayıp anlayamayacağına bak.

Kuşanılmış Eşya Görünüm Modeli

Bu görünüm modeli, Gösterge Paneli Kontrol cihazı ile, Kuşanılan Eşya Bilgisi Widget Geçersiz Kılma widget yuvasını kullanarak kuşanılan bir eşyanın istatistiklerini takip etmek için kullanılabilir. Tüm kullanıcı arayüzü örnekleri, kuşanılan eşya olarak WID_Assault_AutoHigh_Athena_C_Ore_T03 Taarruz Tüfeği'ni kullanır. 

Cihazlar > Gösterge Paneli Denetleyici > Widget’lar klasörünü aç ve UW_HCD03_SelectedItem widget’ına çift tıkla. Bu görünüm modelinden kullanıcı arayüzündeki bir dizi silah bilgisini ve istatistiğini takip edebilirsin:

1. Eşya Simgesi

2. Item Name

3. Cephane Simgesi

4. Cephane Sayısı

5. Cephane Fazlası

6. Is Şarjör Türü Silah