Unreal Motion Graphics’te (UMG) varsayılan Fortnite kullanıcı arayüzünü değiştirmek için kullanıcı arayüzü materyallerini, kullanıcı arayüzü dokularını ve paletteki çeşitli widget’ları kullanarak özel can ve kalkan göstergeleri oluştur. Can ve kalkan çubukları bir isimliğe eklenebilir veya ayrı olarak gösterge paneline yerleştirilebilir.
Can ve kalkan göstergelerinin tasarımı ve yerleşimi her oyun için benzersiz olup bu tasarım ve yerleşimde oyunun türü (dövüş oyunu, çok oyunculu işbirlikçi, rol yapma vs.) dikkate alınır.
Materyalleri Değiştirmeden Materyal Örnekleri Ayarla
Bu örnekte UEFN’de oluşturulmuş çeşitli materyaller kullanacaksın. Bunlardan biri de dikdörtgen (kutu) ve daire şeklinde bir ilerleme çubuğudur. Dikdörtgen ilerleme çubuğunda ilerleme çubuğunu bölümlere dönüştürme seçeneği de mevcuttur.
Materyaller, Kullanıcı Arayüzü Materyal Laboratuvarı’ndaki Materyal Fonksiyonları, Materyal Örneği için kullanıma açılan parametreler ve bunların tamamının çalışmasını sağlayacak bazı matematik işlemlerinin bir bileşimi kullanılarak ayarlanmıştır.
Widget’lar için materyal kullanmak en iyi uygulamadır. Materyaller oynanış verilerine göre dinamik olarak güncellenir bu da kullanıcı arayüzünün iyileştirilmesine yardımcı olur ve özel efektler eklenmesi için bir yol sağlar. Dokular yalnızca, matematik fonksiyonlarıyla kolayca elde edilemeyecek daha karmaşık bir tasarım için kullanılır.
Materyalleri kullanıcı arayüzü tasarımı ve uygulamasının bir parçası olarak kullanma hakkında daha fazla bilgi için Kullanıcı Arayüzü Faydalı Materyalleri bölümüne bakabilirsin. Bu eğitimde UEFN ve UE’de dinamik ilerleme çubuğu materyalleri oluşturmak için İşaretli Mesafe Alanlarının (STF’ler) kullanılması hakkında daha fazla bilgi yer alıyor.
Materyal Örneği, bir materyalin görünümünü yeniden derlemeye gerek kalmadan onu kolayca değiştirebilecek olan parametrelere sahip materyal örnekleri oluşturur. Bir materyal örneği oluşturmak için, bir materyale sağ tıkla ve Materyal Örneği Oluştur’u seç.
Materyal örnekleri hakkında daha fazla bilgi için Unreal Engine dokümantasyonundaki Materyal Örnekleri Oluşturma ve Kullanma bölümüne bakabilirsin.
UEFN’de kullanıma açılmış olan birkaç parametre vardır. Örnek materyalde ilerleme parametresi, çubuğun ne kadar dolduğunu değiştirir. Fortnite CP aralığına uyması için M_CircleProgressBar’daki ConstantBiasScale düğümü kullanılarak aralık 0-100 olacak şekilde normalleştirilir.
Gradyan olan arka plan rengini (BGColor) ve sıvı rengini değiştirebilirsin. Ardından, soldaki önizleme görünüm penceresinde değişikliklerini önizle.
Çeşitli amaçlar için ihtiyaç duyduğun kadar çok materyal örneği oluşturabilirsin. Bu örnekte biri CP, diğeri de kalkan için olmak üzere iki materyal kullanılmıştır.
Örnek Widget Dizilimi Uygulamaları
UMG’de Tuval panelini yalnızca ekranda mutlak bir konuma ihtiyacın varsa veya çeşitli widget’ların yerleştirileceği yerleri ayrıntılı bir şekilde düzenlemen gerekiyorsa kullan.
Daha küçük widget’lar için şunları kullan:
Katman
Yığın Kutuları
Boyut Kutuları (widget’ını belirli bir boyutla sınırlaman gerekiyorsa)
Izgara Paneli (kapsayıcısının boyutunu aynı tutmak ancak alt widget’ların konumunu değiştirmek istiyorsan)
Materyaller hazır olduğunda İçerik Tarayıcısı’nda bir Widget Blueprint oluştur ve ardından UMG Editörü’nü açmak için widget küçük resmine çift tıkla.
Tuval Paneli Kullanma
Bu örnekte, widget’ları ekranın belirli bölümlerine sabitleyerek can ve kalkan çubuklarını gösterge panelinde mutlak bir konuma yerleştirmek için Tuval paneli kullanılır.
Her bir gösterge paneli öğesi için aşağıdaki widget’ların bir bileşimini kullanmak en iyi uygulamadır:
Katman: Bir widget’ı üst üste yerleştirmen gerekiyorsa.
Yığın Kutuları: Widget’larını yatay veya dikey olarak yerleştirmen gerekiyorsa.
Boyut Kutuları: Widget’ını belirli bir boyutla sınırlaman gerekiyorsa.
Izgara Paneli: Kapsayıcının boyutunu korumak ancak panelin içindeki alt widget’ların konumunu değiştirmek istiyorsan.
Bunu aklında bulundurarak can ve kalkan widget’larını yerleştirmeye başla.
Tüm gösterge paneli kullanıcı arayüzünün içinde yaşayacağı bir kapsayıcı oluştur. Bunun için tüm gösterge paneli öğelerini barındıracak bir kapsayıcı olarak Tuval Paneli kullan.
Bu örnekte, can ve kalkanlar ekranın alt orta kısmına sabitlenecektir.
Can ve kalkanlar kapsayıcısını oluşturmak üzere bir yığın kutusunu tuvalin altına yerleştir. Bu tasarımda bu öğeler soldan sağa doğru yığılacaktır.
Widget’larını bir yığın kutusunda dikey olarak dizmek istiyorsan Ayrıntılar panelinde Davranış > Yönlendirme altında yer alan Oryantasyon ayarını değiştir.
Daha iyi bir düzen için widget’larını Hiyerarşi paneline eklerken F2 tuşuna basarak yeniden adlandır.
Hiyerarşi panelinde Yığın Kutusu’nu seçtiğinde Ayrıntılar panelinde bir Sabitleyiciler seçeneğini görmelisin. Shift + Control tuşlarına basarak seçeneği aç. Satır 3, Sütun 2’deki seçeneği belirleyerek yığın kutusunu gösterge panelinin alt merkezine sabitle.
Yığın kutusu artık alta sabitlenmiş olmalıdır. Çiçek simgesi, widget’ın Tuval Paneli’nde nereye sabitlendiğini gösterir.
Ekranın alt kenarına yapışmaması için yığın kutusunu yukarı kaydır. Bunu, Y Konumu seçeneğini düzenleyerek yap.
Pozitif değerler widget’ı aşağıya kaydırırken negatif değerler onu yukarıya kaydırır.
Kapsayıcının her zaman içindeki içeriğe göre yeniden boyutlandırıldığından emin olmak için İçeriğe Göre Boyutlandır onay kutusunu işaretle.
CP Çubuğunu ve Metnini Ayarlama
Artık can ve kalkanlar kapsayıcısı hazır olduğuna göre can ve kalkanlar widget’ını ayarlayabilirsin.
Bir katmanı yığın kutusunun altına yerleştir ve HPOverlay olarak yeniden adlandır. Bu işlem, CP Metninin yuvarlak CP çubuğunun üzerine yerleşmesini sağlar.
Bir görüntüyü HPOverlay altına yerleştir ve HPBar olarak yeniden adlandır. Böylece yukarıda oluşturduğun materyal örneğini widget’ına eklemek için bir yöntem elde etmiş olursun.
Hiyerarşide HPBar’ı seç, Fırça> Görsel altında Ayrıntılar bölümünde özel can çubuğu materyal örneğini seç.
Materyal örneğinin boyutunu değiştirmek için aşağıdaki Görsel Boyutu özelliğini özelleştirebilirsin.
HPOverlay altına bir metin bloğu yerleştir ve HPText olarak yeniden adlandır. Böylece daire şeklindeki can çubuğunun üzerine metin eklemek için bir yöntem elde etmiş olursun.
Metin bloğunu seç ve Ayrıntılar kısmında Yatay ve Dikey hizalamayı Ortaya olarak ayarla. Bu, metnin her zaman HPBar’a göre ortaya hizalanmasını sağlar.
Görseli büyütmek için tıkla.
Görünüm >Yazı Tipi > Boyut altında yazı tipi boyutunu CP çubuğuna sığacak şekilde değiştir.
Görseli büyütmek için tıkla.
Derle’ye tıkla. Artık CP Çubuğu ve CP Metni hazırdır!
Kalkan Çubuğunu ve Metnini Ayarlama
Kalkan çubuğu ve metnini ayarlamak için yukarıdaki adımları tekrarla. Bu kez CP Çubuğu ile Kalkan Çubuğu arasına bir boşluk ekle. HPShieldsContainer bir yığın kutusu olduğundan alt widget’ları otomatik olarak yatay bir şekilde dizer.
Can ve kalkan çubuklarının arasına bir boşluk eklemek için yığın kutusunun içindeki bir görsel widget’ını kullan. Boş görsel widget’ını aşağıdakileri yaparak ayarla:
Yığın kutusunun altına bir görsel yerleştir.
Görselin Fırça özelliklerini Hiçbiri Olarak Çiz olarak ayarla.
Buna göre, widget’ında hiçbir şey görünmeyecek, ancak Görsel widget’ı diziliminde yer kaplamaya devam edecektir! Böylece bir yığın kutusunda yer alan öğeler arasındaki boşlukları, dolguya ihtiyaç duymadan kolayca yönetebilirsin.
Kalkan widget’ını, can çubuğunu ayarladığın işlemi kullanarak ayarla.
Kalkan çubuğunu daha hızlı oluşturmak için Hiyerarşi’de HPOverlay’e sağ tıklayıp Çoğalt’ı seçerek HPOverlay’i çoğalt.
Yığın kutusunun sonunda görünmesi için ShieldOverlay’i aralık oluşturucu görselin altına yerleştir.
İki çubuk türü, widget’ında yan yana görünecektir!
Aşağıdaki widget hiyerarşisi görselinde görüldüğü gibi değişkenlerini ShieldOverlay, ShieldBar ve ShieldText olarak yeniden adlandır.
Artık can ve kalkan ilerleme çubuklarına işlevsellik katan bağlamaları oluşturmaya hazırsın.
Görünüm Bağlamaları
ViewModel Ekleme
Görünüm modeli, bir Widget Blueprint’e cihaz işlevselliği eklemen için bir yol sağlar. Görünüm modeli, blueprint’teki widget’ları belirlemek ve o widget’a grafik yoluyla cihaz işlevselliği kazandırmak için Görünüm Bağlamaları’nı kullanır.
Gösterge Paneli Kontrol Cihazı Oyuncu Bilgileri Görünüm Modeli, gösterge panelinin belirli kısımlarını özel bir widget ile değiştirebilmen için bir yol sağlar.
Bir ViewModel’ı açmak ve widget’ına eklemek için Pencere > ViewModel’lar seçeneğini belirle.
ViewModel penceresinde +ViewModel öğesini seç. Bunun sonucunda o sırada kullanılabilir durumda olan tüm Görünüm Modellerini gösteren bir açılır pencere açılacaktır.
İki tür Gösterge Paneli Denetleyici ViewModel mevcuttur:
HUDPlayerInfoListViewModel seçeneklerinden Cihaz - Gösterge Paneli Denetleyici Takım/Ekip Oyuncusu Bilgileri Listesi ViewModel’ı seç. Yukarıdaki bilgilere göre, yalnızca denetleyici oyuncuya ilişkin bilgileri görüntülemek istediğin anlaşılmaktadır (onun takımına/ekibine dair bilgileri değil).
Denetleyici oyuncu ve onun takımı/ekibi için ayrı widget’lar oluşturmak istiyorsan Cihaz - Gösterge Paneli Denetleyici Oyuncu Bilgileri ViewModel’ı seç. Bu widget’ların her biri için Cihaz - Gösterge Paneli Denetleyici Oyuncu Bilgileri ViewModel’daki özellikleri kullan. Ardından Takım/Ekip Oyuncusu Bilgileri Listesi görünüm modellerini onların görünüm modellerine bağlayan bir ekip yığın widget’ı oluşturman gerekecektir.
Takım/Ekip Oyuncusu Bilgileri Listesi Görünüm Modeli, Gösterge Paneli Kontrol Cihazı Oyuncu Bilgileri Görünüm Modeli ile aynı bilgilere sahiptir ancak senaryoya göre farklı şekilde kullanılır.
HUDPlayerInfoListViewModel seçeneklerinden Takım/Ekip Oyuncusu Bilgileri Listesi ViewModel’ı seç. Yukarıdaki bilgilere göre, yalnızca denetleyici oyuncuya ilişkin bilgileri görüntülemek istediğin anlaşılmaktadır (onun takımına/ekibine dair bilgileri değil).
Şimdi sıra, görünüm modelinden widget’ına verileri bağlayan bağlamaları ayarlamaya geldi!
ToText Görünüm Bağlamalarını Ayarla
Pencere > Görünüm Bağlamaları’nı seçerek Görünüm Bağlamaları penceresini aç.
Hiyerarşi’nde HPText’i seç ve HPText’i mevcut Can sayını gösterecek şekilde bağlamak için Görünüm Bağlamaları’nda Widget Ekle’yi seç. Boş bir bağlama görünecektir.
Soldaki kutu Widget özelliği, sağdaki kutu ise Widget özelliğine bağlamak istediğin verilerdir. Sol kutuya tıkladığında HPText Metin Bloku için bir özellik listesi görünür. CP sayılarını bu özelliğe iletmek için Metin özelliğini seç.
Sağdaki kutu, seçili widget özelliğine iletmek istediğin verilerdir. Ancak Metin özelliği yalnızca Metin türündeki verileri kabul eder. Fortnite CP sayısı kayan sayı (yani Çift duyarlıklı) türünde olduğundan bunu uygun Metin türüne dönüştürmen gerekir. Sağdaki kutuyu tıkla ve Dönüştürme Fonksiyonları > Metne (Çift Duyarlıklı) seçeneğini belirle.
Geniş bir seçenekler listesi açılacaktır. En önemli ayarlar genellikle en üstte bulunurken diğer ayarlar, Metin özelliğine iletilen son değeri biçimlendirebilmen için sana bir yol sunar.
Büyütmek için resme tıkla.
Değer’in yanındaki Bağlantı simgesini seç ardından Gösterge Paneli Kontrol Cihazı ViewModel’dan Can değerini seç.
Boş alana tıkla ve sol sütundaki HUDPlayerInfoListViewmodel’ı seç, sağdaki Denetleyici Oyuncu Bilgileri’ni genişlet ve Can’ı seç.
Bunun sonucunda kayan sayı (yani Çift duyarlıklı) türündeki Can özelliği Metne (Çift duyarlıklı) dönüştürme fonksiyonundan geçirilmiş olur. Metne (Çift duyarlıklı), Can’ı widget’ta görüntülenecek şekilde Metin türüne dönüştürür. Dönüştürülen Can daha sonra HPText widget’ının Metin özelliğine iletilir.
ShieldText widget’ını ayarlamak için yukarıdaki adımları tekrarla. Aynı bağlamalar Kalkan sayılarını da gösterecektir.
Materyal Parametresini Ayarla
Materyal Parametresini Ayarla seçeneğinin nasıl çalıştığına dair daha ayrıntılı bilgi için Unreal Engine dokümantasyonunda yer alan Materyal Parametresini Ayarla bölümüne bakabilirsin.
Şimdi sıra daire şeklindeki ilerleme çubuğunu ayarlamaya geldi. İlerleme, oyuncunun can ve kalkan seviyelerine göre değişir.
Daire şeklindeki HPBar’ın için boş bir bağlama ayarla.
Sol kutuda HPBar > Fırça’yı seç. Fırça, daire şeklindeki CP çubuğunun materyal örneğini içerir.
Sağdaki kutuda Dönüştürme Fonksiyonları > Skaler Parametreyi Ayarla’yı seç.
Parametre Adı alanına, ilerleme çubuğunun ilerlemesini değiştiren parametre adını gir.
Bu parametre adını aramak için CP çubuğunun materyal örneğini aç ve sağdaki parametre değerlerine bak.
İlerleme çubuğunu kontrol eden parametreye İlerleme adı verilir. Bu adı Parametre Adı alanına gir.
Parametre Adı’nın materyal örneğindeki parametreyle aynı olması önemlidir; aksi takdirde materyal oyun içinde çalışmayacaktır.
Değer’in yanındaki bağlantı simgesini seç. ToText’te olduğu gibi oyuncunun Can’ını Değer’e bağla.
Bu, görünüm modelinde Can ve Kalkan istatistiklerinin bağlanmasının nihai sonucudur. Artık oyuncunun canı her değiştiğinde, Can özelliği CP çubuğu materyal örneğine iletilecek ve İlerleme skaler parametresi güncellenecektir.
ShieldBar’ın için de aynı adımları tekrarla. Can özelliği yerine Kalkan özelliğine bağlanmalıdır.
Artık CP ve Kalkan bağlamaların hazır! Şimdi sıra widget’ını gösterge panelinde görüntülemeye geldi.
Gösterge Paneli Kontrol Cihazı Kurulumu
Bölümüne bir gösterge paneli kontrol cihazı yerleştir.
Cihazın Ayrıntılar panelinde şundan emin ol:
Gösterge Panelini Göster = Evet
Oyuncu Bilgileri Widget Geçersiz Kılma alanında, özel can ve kalkanları içeren widget’ı kullan.
Büyütmek için resme tıkla.
Oturumu Başlat’ı seç. Ardından gösterge panelinde can ve kalkanlar widget’ını göreceksin! Hasar alıp bunun gösterge panelindeki istatistiklerini güncellediğini teyit ederek kullanıcı arayüzünü test et.
Diğer İlerleme Çubuğu Örnekleri
Dikdörtgen materyali, Fortnite > Kullanıcı Arayüzü > Materyal altında bulunabilir. Temel kutuyu her widget için birçok biçimde arka plan olarak kullanmak üzere özelleştirebilirsin!
Bundan bir materyal örneği oluştur ve onu UMG (Unreal Motion Graphics) ile kullanmaya başla!
Buradaki bilgiler ile sana sağladığımız materyalleri kullanarak şu ilerleme çubuklarını yapmayı dene:
Oyuncu Avatarın, Görünen Adın ve CP Çubuğunu çerçeveleyecek şekilde arka plan olarak bir doku kullanma.
Temel ilerleme çubuklarına stil katmak için Fortnite > Kullanıcı Arayüzü > Materyal altındaki dokular, simgeler, ilerleme çubuğu materyalleri ve dikdörtgen materyalinin bileşimini kullanma.
Oyuncu Avatarı ve Görünen Ad ile birlikte bölümlere ayrılmış CP ve Kalkan çubuğu.
