Oynanış olaylarına ve verilerine göre güncellenen değişen materyallerle dinamik bir kullanıcı arayüzü oluştur. Kullanıcı arayüzünü dinamik hale getirmek için kullanıcı arayüzü materyalleri, Görünüm Bağlamaları ve Materyal Parametresini Ayarla dönüştürme fonksiyonlarından üçünün (Doku, Skaler ve Vektör Parametresi Ayarla) bir bileşimini kullanman gerekir.
Fortnite İçin Unreal Editor’de (UEFN) sana, birkaç parametreye sahip temel bir materyal verilmektedir. Avlamaları, düşmanları avlamadaki ilerlemene göre dinamik olarak güncellenen bir materyal örneği olarak ilerleme çubuğu tarzındaki bir widget ile takip etmek için Takip cihazını kullan.
Bir Materyal Örneği Oluştur
Materyal örnekleri hakkında daha fazla bilgi için Unreal Engine dokümantasyonunda yer alan Materyal Örnekleri Oluşturma ve Kullanma kısmına bakabilirsin.
Bu materyal örneklerini oluşturmak için kullanılan tüm öğeler UEFN’de yerel olarak bulunabilir. Bu örnekteki materyalin nasıl yapılacağını öğrenmek için Materyal eğitimleri bölümündeki Ölçer Materyali’ne bakabilirsin.
M_Tracker’ın materyal örneğini oluştur ve materyal örneğini MI_TrackerExample olarak adlandır.
Yeni materyal örneğinde, IconScaleX ve IconScaleY’ı tercihlerine göre değiştir. Bu örnekteki materyallerin her biri 0,7 olarak ayarlanmıştır.
İlerlemene göre widget’ı dolduran avlama ProgressColor’ını özelleştirebilirsin. TrackerProgress, Simge ve IconColor’ı işaretlenmemiş halde bırak. Bunlar daha sonra takip cihazı ile birlikte kullanılacaktır.
Simgeler, Fortnite klasöründe Dokular > Simgeler altında bulunabilir.
Takip Cihazı Widget’ını Ayarlama
UMG’de, takip cihazında referans verebileceğin özel bir takip cihazı widget’ı oluşturacak ve oyuncunun avlamalarını özel kullanıcı arayüzünde takip edebileceksin.
İçerik Tarayıcısı’nda sağ tıkla ve Kullanıcı Arayüzü > Widget Blueprint > Kullanıcı Widget’ı seçeneğini seç.
Aşağıdaki örnekte olduğu gibi Takip cihazı materyalini ve Takip cihazı başlığını gösteren basit bir Takip cihazı widget’ı yap.
Widget grafiğine bir Katman sürükle. Böylece widget’ı oluşturan tüm parçalar katmanlandırılımış olur. Bu işlem aynı zamanda bu widget’ın ekranın neresinde görüneceğini belirlemen için sana bir yol da sağlar.
Takip cihazı materyali ile başlığı soldan sağa olacak şekilde yerleştirmek için Katman içine bir Yığın Kutusu yerleştir.
Yığın Kutusu içine bir Katman yerleştir. Böylece Yığın Kutusu’nu basit bir koyu arka planla kaplamak üzere bir Takip cihazı materyali oluşturabilirsin.
Katman içine iki Görsel widget’ı yerleştir. F2 tuşuna basarak bunları TrackerBackground ve TrackerMaterial olarak yeniden adlandır.
TrackMaterial’ı seçerek bunun seçeneklerini Ayrıntılar panelinde aç. Ayrıntılar panelinde Fırça > Görsel’i seç ve oluşturduğun MI_TrackerExample materyalini bul.
Aşağıdaki Görsel Boyutu’nu X=96,0, Y=96,0 olacak şekilde ayarla. Görsel, oyun içinde görülebilecek kadar büyük olmalıdır.
Artık takip cihazı materyali ayarlandığına göre, takip materyalinin daha okunaklı olması için materyalin arka planını oluşturman gerekir.
Hiyerarşi’de TrackerBacking’i seç, ardından Ayrıntılar panelinden Fırça > Farklı Çiz > Yuvarlanmış Kutu’yu seç.
Daha iyi okunabilirlik için yukarıdaki Renk Tonu seçeneğini nötr bir renk olarak ayarla. Bu örnekte, renk tonu Hex sRGB alanında 3A3A3AFF olarak ayarlanmıştır.
Yatay Hizalama ve Dikey Hizalama seçeneklerini Doldur olarak ayarla. Böylece TrackerBacking’in TrackerMaterial’i tutan kapsayıcıyı doldurması sağlanmış olur.
Artık TrackerMaterial’ın için herhangi bir oyun içi sahnede kolayca okunabilir şekilde görünen bir arka planın var!
Takip Cihazı Metnini Ayarlama
Takip cihazı materyaline takip widget’ında referans verildikten sonra oyuncuya, kullanıcı arayüzünde nelerin takip edildiğini bildiren metni ayarlayacaksın.
Katmanı tutan Yığın Kutusu’nun altına bir Metin Bloku yerleştir. Metin Bloku’nu TrackerTitle olarak yeniden adlandır.
Hiyerarşi’de TrackerTitle’ı seç ve Ayrıntılar panelinde Dikey Hizalama’yı Ortaya Dikey Hizala şeklinde ayarla. Böylece metin her zaman TrackerMaterial’a göre ortaya hizalanmış olacaktır.
Yazı tipinde, temana uyacak bazı stil değişiklikleri yap. Örneğin, boyutu azaltabilir, ana hat ekleyebilir veya yazı biçimini değiştirebilirsin.
Bu örnekte aşağıdaki değişiklikler yapılmıştır: Yazı Tipi Boyutu = 24 Yazı biçimi = Kalın Ana hat = Koyu Kırmızı
Yazı Tipi’yle ilgili tüm ayarları Görünüm kategorisi altında özelleştirebilirsin.
Son tasarım rötuşları da tamamlandıktan sonra TrackerMaterial ve TrackerTitle ayarlanmış olacaktır.
İki öğe arasına biraz boşluk eklemek için TrackerMaterial’i içeren Katman’ın sağına dolgu ekle:
Katman’ı seç.
Ayrıntılar panelinde Dolgu’yu genişlet.
Sağ Dolgu değerini 16 piksel olarak değiştir.
Böylece görsel ile metin arasına boşluk eklenir.
Birden fazla obje arasındaki boşluğu kolayca değiştirmek istiyorsan bu objeleri tutan Yığın Kutusu’na bir Görsel widget’ı ekleyebilir, Görsel Boyutu X’i istediğin alan kadar olacak şekilde ayarlayabilir ve bunu Yok Olarak Çiz şeklinde ayarlayabilirsin. Bu durumda Görsel görünmez, ancak yine de Yığın Kutu’nda yer kaplamaya devam eder!
Bu seçenek, her widget’ta Dolgular ile uğraşma zorunluluğunu ortadan kaldırarak objeler arasındaki boşlukları yönetmeyi kolaylaştırır.
##Materyal Parametrelerini Ayarla’yı Ayarlama
Bu adımda, takip cihazının değerlerini takip cihazı widget’ındaki materyal parametrelerine bağlayacaksın.
ViewModel Ekleme
Ana menüden Pencere > ViewModel’ı seçerek Takip cihazı ViewModel’ını widget’a ekle.
ViewModel pencerende +ViewModel’ı seç.
Açılır pencerede Cihaz - Takip Cihazı ViewModel’ı seçeneğini seç.
Menü çubuğunda Pencere > Görünüm Bağlamaları’nı seçerek Görünüm Bağlamaları panelini aç.
Widget’ını değiştirmek için takip cihazındaki verileri bağlamaya hazırsın.
Skaler Parametreyi Ayarla
Bir skaler parametre bir tamsayı veya kayan sayı değeri alır. Örneğin, ilerleme çubuğu, takip cihazında kaç avlaman olduğuna bağlı olarak TrackerMaterial ile dolar.
Materyal, TrackerMaterial’ı doldurmak için Takip cihazından gelen avlama sayısını dönüştürecek şekilde ayarlanmıştır. Tek yapman gereken bu verileri MI_TrackerExample içindeki ilerleme materyal parametresine bağlamaktır.
MI_TrackerExample’da 3,0’a karşı 8,0 değerinde bir ilerleme. Bu çok kullanışlı!
TrackerMaterial widget’ını seç, ardından Görünüm Bağlamaları penceresinde +Widget Ekle’ye tıkla.
Soldaki alanda TrackerMaterial > Fırça’yı seç.
Sağdaki alanda (TrackerMaterial’ın fırçasına bağlamak istediğin verileri içerir), Dönüştürme Fonksiyonları > Skaler Parametreyi Ayarla’yı seç.
Bunun sonucunda, Fırça ayarında Skaler Parametreyi Ayarla adlı fonksiyon çalışır. Fırçanda şu anda MI_TrackerExample olduğundan MI_TrackerExample, belirttiğin bir skaler parametreyi arayacak ve ona bir değer iletecektir.
Parametre Adı alanına TrackerProgress yaz. Böylece materyal, Takip cihazının ilerlemesine göre dolacaktır.
Parametrede hata yapmaman önemlidir, çünkü hata durumunda parametre, materyalinde doğru parametreyi bulamayacaktır. Parametrenin adını unutursan Materyal Örneği’ni aç ve sağda parametreleri ara.
Değer’in yanındaki bağlantı simgesini seç, ardından açılır menüden MVVM_UEFN_Tracker > Değer’i seç. Böylece takip cihazının mevcut ilerlemesi bağlanmış olur.
Artık Takip cihazındaki geçerli ilerleme doğrudan materyali beslemektedir! Takip cihazı materyali, takip cihazına atanmış olan oyuncu bir avlama yaptığında yavaşça dolacaktır!
Vektör Parametresini Ayarla
Bir vektör parametresi, bir Vector4 değeri alır. Vektörler genellikle renkler [RGBA (dört vektör)] için kullanılır. Simge rengini cihazda ayarlanan değere göre değiştirmek için bir Vector4 kullanacaksın.
Vektörler hakkında daha fazla bilgi için Unreal Engine dokümantasyonunda yer alan Vektör Materyal İfadeleri kısmına bakabilirsin.
Hiyerarşi’de TrackerMaterial’ı seç, ardından Görünüm Bağlamaları penceresini aç ve +Widget Ekle’yi seç.
Soldaki boş alanda TrackerMaterial > Fırça özelliklerini seç.
Sağdaki boş alanda Dönüştürme Fonksiyonları > Vektör Parametresini Ayarla’yı seç.
Yukarıda açıklandığı gibi, bu bağlama, Fırça’yı TrackerMaterial’dan (bu örnekte MI_TrackerExample’dır) alır ve söz konusu materyal örneğinde belirttiğin bir vektör parametresini ayarlar. Simge rengini, takip cihazında ayarlanmış olan seçenekler hangileriyse onlara uyacak şekilde ayarlayabilirsin.
Parametre Adı alanına IconColor yaz.
Değer’in yanındaki bağlantı simgesini seç, ardından MVVM_UEFN_Tracker > Renk’i seç. Böylece Değer, takip cihazı görünüm modelindeki Simge Rengi özelliğine ayarlanmış olur.
Takip cihazında hangi simge rengi ayarlanmışsa o simge rengi, materyaline iletilir. Turuncu bir simge istiyorsan bu rengi cihazda ayarlaman yeterlidir; sonrasında cihaz simgeyi senin için renklendirecektir! Bu örnekte kullanılan materyal zaten bunun için ayarlanmıştır.
Doku Parametresini Ayarla
Bir doku parametresi bir Texture2D değeri alır. Dokular genellikle görseller veya simgeler için kullanılır, bu yüzden dokumuzu cihazda ayarlanmış olan özelliklere göre simgemizi değiştirmek için kullanacağız!
Dokular hakkında daha fazla bilgi için Unreal Engine dokümantasyonunda yer alan Dokular kısmına bakabilirsin.
Hiyerarşi’de TrackerMaterial’ı seç, ardından Görünüm Bağlamaları penceresinde +Widget Ekle’yi seç.
Soldaki boş alanda MVVM_UEFN_Tracker > Fırça’yı seç.
Sağdaki boş alanda Dönüştürme Fonksiyonları > Doku Parametresini Ayarla’yı seç.
Parametre Adı alanına Simge yaz.
Parametrenin adını yazarken hata yapmaktan kaçın! Parametrenin adını unutursan ayarlanabilecek kullanılabilir parametreler listesi için MI_TrackerExample’a bakabilirsin.
Değer alanının yanındaki bağlantı simgesini seç, ardından açılır menüden MVVM_UEFN_Tracker > Simge’yi seç. Böylece değer, takip cihazı görünüm modelindeki Simge özelliğine bağlanmış olur.
Doku parametresi ayarlanmıştır. Artık takip cihazında hangi simge ayarlanmışsa o simge widget’a iletilecektir!
Takip Cihazı Metnini Takip Cihazı Adına Bağla
Bu adımda, oluşturduğun takip cihazı başlığını takip cihazındaki ayarın aynısına bağlayacaksın.
Hiyerarşi’de TrackerTitle’ı seç, ardından Görünüm Bağlamaları penceresini aç ve +Widget Ekle’yi seç.
Soldaki boş alanda açılır menüden TrackerTitle > Metin’i seç.
Sağdaki boş alanda açılır menüden MVVM_UEFN_Tracker > Ad’ı seç.
Bu bağlama, takip cihazının başlığını Metin Bloku’na iletir.
Takip Cihazını Kurma
Bu adımda, UMG’de oluşturduğun widget’a Takip cihazında referans vereceksin. Böylece, avlama kullanıcı arayüzü, gösterge panelinde görüntülenecektir.
Projene bir Takip cihazı ekle.
Takip Cihazı Başlığı’na bir ad ver. Bu ad, widget’ındaki TrackerTitle metninde görünür.
Widget’ını Gösterge Paneli Widget’ı alanına ekle.
Görev Simgesi alanlarını, Takip cihazında hangi simgeyi görüntülemek istiyorsan o simgeyle değiştir. Böylece MI_TrackerExample’daki varsayılan Uzaylı simgesi geçersiz kılınacaktır.
Simge Rengi’nde bir renk seç. Yukarıda ayarladığın simge seçilen rengi alır.
Takip cihazını oyuncuna eklemek için diğer ayarları kurmaya devam et.
Sonuç
İşte oldu! Özel Takip cihazı widget’ı artık ekranın sol üst köşesinde görünmektedir. İster zombileri ister diğer oyuncuları avlıyor ol, widget yavaşça dolar! Materyal Parametrelerini Ayarla’yı kullanarak oynanış verilerini kendi özel widget’larına bu şekilde bağlarsın.
