Özel Sırt Kalkanları Oluşturma

Sırt kalkanları, oyuncunun avatar resmi, oyuncu etiketi, can ve kalkanlar gibi çeşitli birçok bilgi türünü gösterge panelinde gösterir.

Sırt kalkanları, çok oyunculu işbirlikçi oyunlarda takım arkadaşlarının tanımlanmasına yardımcı olmaktan düşük can ve kalkan istatistiklerinin tanımlanmasına kadar birçok işlevi yerine getirir.

Fortnite İçin Unreal Editor’da (UEFN) sırt kalkanları, materyaller veya bir doku ve materyal karışımı kullanılarak yapılır. Dokular, sırt kalkanına bir materyalin ekleyemeyeceği ayrıntılar eklemek için sırt kalkanına dekoratif bir görünüm katan kapsayıcılar olarak kullanılır.

Ancak dokular yoğun bellek kullanımı gerektirebilir. Bu durum, bellek bütçene bir yük getirebilir ve adanın performansını düşürebilir. Materyalindeki dokular ve Doku Örneği düğümleri, büyük miktarda bellek harcar.

Materyallerin düz tasarımlar oluşturmak için kullanılması en doğrusu olacaktır. Materyaller sırt kalkanına animasyonlu efektler ekleyebilir. Materyaller, basit cebir hesaplamalarını yürütmek için GPU’dan faydalandıklarından daha az bellek kullanırlar. Böylece bir materyalde basit şekiller oluşturmaktan karmaşık etkileşimleri animasyonlu hale getirmeye kadar çeşitli işlemler yapabilmen mümkün olacaktır.

Materyaller İçeren Düz Kullanıcı Arayüzü Tasarımı	Dokular İçeren Kullanıcı Arayüzü Tasarımı

Materyaller işleme için GPU’yu kullandıklarından bunların bellek kullanım yoğunluğu daha düşüktür.

Avatar sırt kalkanların için kullanacağın yöntem bir dizi faktöre bağlı olacaktır:

• Kullanıcı arayüzü tasarımı için kişisel tercih.

• Oluşturduğun ada deneyimini tamamlayan kullanıcı arayüzü stili ve tasarımı.

• Bellekten ne kadar tasarruf etmek istediğin.

Bu eğitimdeki avatar sırt kalkanı tasarımında temel tasarım için üç Materyal Örneği kullanılır. Aşağıdaki sırt kalkanı tasarımları, aşağıdakileri içeren M_UI_Shape_Rectangle materyali kullanılarak oluşturulmuştur:

• Yarı saydam pembe bir arka plan.

• Ad metnini ve yarı saydam arka planı çevreleyen pembe bir kapsayıcı.

• Oyuncunun avatarını içerecek olan bir su dairesi.

  

  Materyallerle kendi kullanıcı arayüzünü oluştur! Materyal Örnekleri ile Özel Kullanıcı Arayüzü Oluşturma bölümüne bakın.

Özel Widget Ayarlama

Aşağıdaki işlemleri gerçekleştirmek için Kullanıcı Arayüzü Açılır Pencereleri belgesinin Kullanıcı Widget’ı iş akışını kullan:

1. Bir kullanıcı widget’ı oluştur.

2. Küçük resmi Player_Info olarak yeniden adlandır.

3. UMG Widget Editörü’nü açmak için küçük resme çift tıkla. 

   

Widget Editörü, sırt kalkanı tasarımın için görünümü ve ekran yerleşimini düzenleyeceğin yerdir. Ardından mevcut oyuncu bilgilerini yakalamak ve sırt kalkanı tasarımına bağlamak üzere bağlama işlevselliği oluşturmak için bir ViewModel ekleyeceksin.

Olay Grafiğinde:

1. Sağ üst köşedeki Ekranı Doldur ayarını seç ve bunun yerine İstenen olarak ayarla.

   Bu ayar aracılığıyla, kullanıcı arayüzünün oynanış sırasında sorunsuz görünebilmesi için widget’larını belirtilen bir boyutla değiştirebilirsin.

   Özel gösterge paneline dair kullanıcı arayüzü tasarımının yerleşimini oluşturmak için öncelikle Olay Grafiği’ne paneller eklemen gerekir.

2. Palet panelinde Panel bölümüne git ve bir Tuval panelini olaya veya doğrudan Hiyerarşi paneline sürükle. Ardından paneli HUD_Canvas olarak yeniden adlandır.

   Tuval paneli, farklı kullanıcı arayüzü öğelerini ekrandaki belirli yerlere sabitlemenin bir yolunu sunar. Tasarım düzeninin Tuval paneline yansıtıldığından emin olmak için, tuvale daha fazla panel eklemeden önce bir kullanıcı arayüzü tasarım planın olduğundan emin ol.

   Tuval panelini yalnızca tasarımının bir parçası olarak belirli kullanıcı arayüzü öğeleri kullanman gerektiğinde kullan. Örneğin, bir gösterge paneli oluşturuyorsan ve ekrandaki belirli yerlere farklı alt widget’lar yerleştirmen gerekiyorsa bu paneli kullan.

   Ekranı Doldur ayarını İstenen olarak değiştirmek yerine, Tuval panelini en yaygın ekran en boy oranları (16:9) olan 1920 X 1080 veya 2560 X 1440 olarak yeniden boyutlandırabilirsin.

3. Palet panelinin Panel bölümünde, Hiyerarşi panelindeki HUD_Canvas öğesinin altına bir yığın kutusunu yerleştir ve Backplate_StackBox olarak yeniden adlandır. Bu, kullanıcı arayüzü değişkenlerini oluşturan widget’ları iç içe yerleştirecek olan sırt kalkanı kullanıcı arayüzü kapsayıcısıdır.

   Yığın kutusuna değişken ekledikçe, bunlar panelde soldan sağa otomatik olarak yığılır.

   Yığın kutusunu kullanarak kullanıcı arayüzü öğelerini yukarıdan aşağıya doğru da yığabilirsin.

4. Palet panelinin Yaygın bölümünde, bir görseli Backplate_StackBox ve Hiyerarşi altına yerleştir. Ardından avatarın kenarlığını içerecek görseli, Avatar_Image olarak yeniden adlandır.

5. Palet panelinin Panel bölümünde, Backplate_StackBox altına bir katman yerleştir ve Nameplate_Overlay olarak yeniden adlandır. Katman, widget’ları birbirinin üzerine yerleştirebilmen için bir yol sağlar.

   

6. Palet panelinde, iki görseli Nameplate_Overlay altına sürükle ve yerleştir.

   

   Görselleri, materyallere göre Arka Plan ve Kenarlık olarak yeniden adlandır.

7. Nameplate_Overlay altına bir Boyut Kutusu paneli sürükle ve yerleştir.

   İç içe yerleştirilmiş alt öğelerinin özelliklerini ayarlamak için boyut kutusunu kullan. Bu işlem, boyut kutusunun içindeki herhangi bir şeyin dışarıya taşarak diğer kullanıcı arayüzü öğelerinin ya da oynanışın üzerini kapatmasını engeller.

   

8. Bir katmanı sürükleyip boyut kutusu altına yerleştir ve Text_Overlay olarak yeniden adlandır.

   Katman olmadan, boyut kutusunun altında yalnızca bir widget alt öğesi oluşturabilirsin.

   

9. Palet panelinin Yaygın bölümünden iki metin bloğunu sürükleyip Text_Overlay altına yerleştir. Metin bloklarını Aktif ve Devre Dışı olarak yeniden adlandır.

   

Kullanıcı arayüzü dizilimi tamamlanmıştır. Ardından, sırt kalkanı kullanıcı arayüzü öğelerinin boyutunu ekran boyutuna göre ayarlamak için widget özelliklerini ayarlayacaksın.

Widget Özelliklerini Ayarlama

Bir kapsayıcı paneli, boyutunu, içindeki en büyük widget’a göre otomatik olarak ayarlar. Üst panelin özelliklerini düzenlemeye başlamadan önce onun tüm alt öğelerini içerdiğinden emin olmalısın. Aksi takdirde Hiyerarşi sekmesine alt kullanıcı arayüzü öğeleri eklendikçe üst öğenin oranları değişebilir.

Ekran yerleşimine ve sırt kalkanının sınırlarına karar vermek için Backplate_StackBox paneli özelliklerini ayarlamaya başla.

Bu sırt kalkanının tasarımı için aşağıdaki özellikler düzenlenmiştir:

Büyütmek için resme tıkla.

Temel sırt kalkanı dizilimi parçaları yerlerindedir. Artık oluşturduğun materyalleri eklemeye ve isimlikteki metin bloklarını düzenlemeye hazırsın.

Sırt Kalkanı Öğelerini Ekleme ve Düzenleme

Widget Editörü, materyal ve metin eklemenin yanı sıra fırça ayarında kullanılan widget özelliklerini değiştirmeye yarayan belirli widget’lara yönelik ayarlara sahiptir.

Materyal Örneklerini Düzenleme

Materyallerini ve metnini eklemeye başlamak için Hiyerarşi panelinde widget’larını seç.

1. Widget’ı vurgulamak ve özelliklerini Ayrıntılar panelinde açmak için yığın kutusunun altında Avatar Görseli’ni seç.

   

2. Ayrıntılar panelinde Avatar Kenarlık Materyalini Fırça ayarına ekle. Görsel Boyutu ayarlarını Görsel widget’ı materyale uyacak şekilde ayarla.

   

   Büyütmek için resme tıkla.

   Materyaller boya gibidir. Materyal, Fırça ayarına eklendiğinde görsel widget’ının alanını doldurur.

   Deneyimin için belirli avatarların varsa aşağıdakileri yap:

   * Bir avatar görselini bir kenarlık materyali altına katman halinde yerleştirmek için bir katman oluştur.

   * İçe aktardığın avatar görüntülerini bir Görüntü arka plan katmanına ekle.

   * Kenarlık materyalini üst katmanda kullan.

3. Hiyerarşi panelinde Arka Plan Görseli’ni seçerek Ayrıntılar panelindeki Katman seçeneklerini aç.

   

4. Ayrıntılar panelinde Yatay ve Dikey Hizalama ayarlarını Ortaya Hizalama olarak ayarla ve Arka Plan Materyalini Fırça ayarına ekle. Görsel Boyutu ayarlarını arka plan materyal rengini içeren Görsel widget’ına uyacak şekilde ayarla.

   

   Büyütmek için resme tıkla.

5. Widget’ı vurgulamak için Nameplate_Overlay altındaki Kenarlık Görseli’ni seç ve Ayrıntılar panelinde özelliklerini aç.

   

6. Ayrıntılar panelinde Yatay ve Dikey Hizalama’yı Ortaya Hizalama olarak ayarla ve Kenarlık Materyalini Fırça ayarına ekle. Kenarlığın, arka plan rengine yakın olmasını sağlamak için Görüntü Boyutu ayarlarını düzenle.

   

   Büyütmek için resme tıkla.

Böylece sırt kalkanı basit bir görünüm alır. Artık Metin Bloklarını düzenlemeye hazırsın.

İsimliği Düzenleme

İsimlik, oyuncunun oyuncu etiketlerini görüntüler. Yukarıda tasarlanan sırt kalkanı, boyut kutusu ve metin blokları içerir.

Boyut kutusu özelliklerini düzenleyerek, metnin sınırları dışında diğer kullanıcı arayüzü öğelerinin üzerini kapatmasını veya oyuncunun görüş açısını engellemesini önleyebilirsin.

1. Hiyerarşi panelinden boyut kutusunu seçerek özelliklerini Ayrıntılar panelinde aç.

   

2. Ayrıntılar panelinde Yatay ve Dikey Hizalama ayarlarını Ortaya Hizalama olarak ayarla. Bu işlem, metin bloklarını isimlik görsellerinde otomatik olarak ortalar. Boyut kutusunun Genişlik ve Yükseklik Geçersiz Kılma seçeneklerini True olarak ayarla ve Nameplate_Overlay için istenen boyutu belirle.

   Yeşil kutu, Boyut Kutusu’nun kenarlığını gösterir.

   

   Büyütmek için resme tıkla.

3. Hiyerarşi panelinde boyut kutusuna sağ tıkla ve metin bloklarının oyuncu metnini boyut kutusunun özelliklerine göre sarmalaması için Şununla Sarmala… > Boyut Kutusu’nu seç.

   

İsimlik kullanıcı arayüzünün temel kurulumu tamamlanmıştır. Tüm alt öğeler, üst öğelerinin özelliklerini alırlar, bu nedenle bu widget’lar üzerinde minimum düzeyde düzenleme yapman gerekir.

Ayrıntılar panelinde, hizalama ve yazı tipi boyutu, renk, vuruş ve benzeri birçok özelliği ayarlayarak Aktif ve Aktif Olmayan Metin Blokları’nı düzenleyeceksin.

Aktif metnin renginin, Aktif Olmayan metninkinden farklı bir renk olduğundan emin ol. Bu örnekte, Aktif Metin Bloku yazı tipi 145 boyutunda, beyaz ve 6 değerinde bir Vuruş’a sahip iken Aktif Olmayan yazı tipi ise 145 boyutunda, SlateGrey renginde ve 6 değerinde bir Vuruş’a sahiptir.

Aktif oyuncu adı.

Aktif olmayan oyuncu adı.

Aktif Değil metin kutusunun Görünürlük ayarını Gizli olarak ayarla. Böylece metnin, widget bağlaması oyun içinde tetiklenene kadar görüntülenmesi önlenmiş olur.

Bunun sonucunda isimlik ve avatar sırt kalkanı parçaları bir araya gelmiş olur.

Görünüm Bağlamaları Ekleme

Artık kullanıcı arayüzü tasarımı oluşturduğumuza göre şimdi sıra metin kutularına ve Avatar_Image’a canlı oturum sırasında almaları gereken verilere göre bağlamalar eklemeye geldi.

Gösterge Paneli Denetleyici Oyuncu Bilgi ViewModel, gösterge panelinin bazı kısımlarını özel bir widget ile değiştirmek için bir yol sağlar. Bu ayardan yararlanmak için sırt kalkanının görünüm modelini oluşturman gerekir.

Oyuncu Adı Metni

Bir oyuncunun adının doğru alanda görünmesini sağlamak için şu adımları takip et:

1. Pencere > Görünüm Bağlamaları’na tıklayarak veya ekranın alt kısmında Görünüm Bağlamaları’nı seçip yerleştirerek Görünüm Bağlamaları sekmesini aç.

   

   Görünüm bağlamalarının HUDPlayerInfoViewModelBase listesini görmek için:

   1. Pencere > ViewModel’lar öğesini seçerek ViewModel’lar penceresini aç.

   1. +Viewmodel’a git ve Gösterge Paneli Denetleyici Takım/Ekip Oyuncusu Bilgileri ViewModel Temeli öğesini seç.

   Gösterge Paneli Denetleyici Takım/Ekip Oyuncusu Bilgileri Listesi, denetleyici oyuncunun bilgilerini, bu oyuncunun takımı veya ekibi olmadan göstermenin bir yolunu sağlar.

   1. Seç’e tıkla.

   

2. Hiyerarşi listesinden veya Kullanıcı Arayüzü Önizleme ekranının Oyuncu Adı alanına tıklayarak Metin Bloku’nu seç.

3. Görünüm Bağlamaları sekmesinden + Active_Name Widget’ını Ekle’ye tıkla.

   

4. Aktif “PlayerName” alanını ve ardından Metin > Seç’i seç.

   

5. Sağdaki boş alanda, açılır menüden HUDPlayerInfoViewModel > Denetleyici Oyuncu Bilgileri > Oyuncu Adı > Seç’i seç.

   

6. Elde edilen bağlama şu şekilde görünmelidir:

   

7. Inactive_Name öğesi için 2 ile 3 arasındaki adımları yinele.

8. Aktif olmayan ada ilişkin görünürlük ayarlarını değiştirmek için Inactive_Name’a yeni bir widget ekle. İlk alanda seç ve açılır menüden Görünürlük > Seç’i seç.

   

9. Sağdaki boş alana tıkla ve Dönüştürme Fonksiyonları > Görünürlüğe (Boole) > Seç’i seç.

   

10. Bu seçeneğin seçilmesi, üç yeni alanın açılmasına yol açar. Görünür seçeneğinin yanındaki Bağlantı simgesine tıkla. Menüden, HUDPlayerInfoViewModel > Denetleyici Oyuncu Bilgileri > Avlandı > Seç’i seç.

    

11. Aşağıda Gerçek Görünürlük değerini İsabet Testi Yapılamaz (Yalnızca Kendisi) olarak ayarla. Sahte Görünürlük değerini Daraltılmış olarak bırak. Oyuncu avlandığında veya bağlantısı kesildiğinde ad, Active_Name’in yerini alır, ancak oyuncu canlıyken daraltılmış olarak kalır.

12. Son Inactive_Name bağlaması şöyle görünmelidir:

    

    Büyütmek için resme tıkla.

13. Değişiklikleri göndermek için Derle’ye tıkla. Bu işlemi yaptığında oyuncu adları hazır olur!

Oyuncu Avatarı Simgesi

1. Hiyerarşi panelinden Avatar_Image’ı seç veya kullanıcı arayüzü önizleme ekranında oyuncu simgesi alanına tıkla.

2. + Profile_Image Widget’ı Ekle’ye tıkla.

3. Avatar_Image > Fırça’ya git ve Seç’e bas. Bu bağlama, temel olarak, seçilen Fırça ayarına, Avatar_Image Ayrıntılar panelinden bakmaktır.

   

4. Sağdaki boş alana tıklayıp Dönüştürme Fonksiyonları > Materyalden Görsel Fırçası Oluştur > Seç’i seç.

   

5. Boş Görsel Boyutu alanlarını, widget’taki simge kenarlığı materyalinin boyutuna ayarla. Bu örnekte kenarlık materyali X=50 ve Y=45’tir.

6. Tamamlanan bağlama şu şekilde görünmelidir:

   

   Büyütmek için resme tıkla.

7. Widget’ını kaydetmek için Derle’ye tıkla.

Ardından projene bir Gösterge Paneli Kontrol Cihazı cihazı sürükleyip Oyuncu Bilgileri Widget Geçersiz Kılma alanında UMG widget’ını cihaza ekleyeceksin.

Özel avatar isimliğinin görünümünü oynayarak test et. İsimlik, aşağıdaki görsel gibi görünmelidir.

Büyütmek için resme tıkla.

Sıradaki

• 

  Özel Can ve Kalkan Çubukları Oluşturma

  Özel gösterge panelin için özel can ve kalkan çubukları oluştur.