Bu bölümde, Ninja Kaplumbağalar Arcade Şablonu oyuncu kullanıcı arayüzünü yeniden oluşturma adımlarını takip ederek oyunların için tamamen özelleştirilmiş kullanıcı arayüzü katmanlarını nasıl oluşturacağını öğreneceksin.
Adımların temel dökümü şöyledir:
Birden fazla eşzamanlı oyuncu için bir oyuncu bilgileri yığını oluştur.
Gösterge Paneli Kontrol Cihazı’nı özel kullanıcı arayüzünü görüntüleyecek şekilde ayarla.
Kullanıcı Arayüzü Materyal Laboratuvarı doku paketini ücretsiz şekilde indir ve kendi kullanıcı arayüzü yapılandırmalarınla dene!
Büyütmek için görsele tıkla.
Hadi başlayalım!
Özel Widget’lar Kur
İçerik Tarayıcısı’nda, Tümü > [Projenin ADI] > Kullanıcı Arayüzü > Widget’lar kısmına gidip UW_HUD_PlayerInfoBlock widget blueprint’ini aç.
Sol tarafta, ana editör penceresindeki Anahat Düzenleyicisi’ne benzer şekilde çalışan ve bitmiş widget’ın çeşitli bileşenlerini görüntüleyen Hiyerarşi sekmesini göreceksin.
Arka Plaka
Üst bölüm, kullanıcı arayüzünün katmanlı görünümünü tanımlayan üç arka plaka görselinden oluşur. Bunlar şunları içerir:
Backplate1_Image: Gri renk tonlu arka plan katmanı.
Backplate2_Image: Turuncu anahat katmanı.
Backplate3_Image: Beyaz anahat katmanı.
Bu görseller bir araya gelerek oyuncu bilgileri panelinin çerçeveli stilini oluşturur.
Kullanıcı arayüzünde kullanmak için görselleri içe aktarırken Doku Grubu’nu Kullanıcı Arayüzü olarak ve Sıkıştırma Ayarları’nı UserInterface2D(RGBA8) olarak seçtiğinden emin olmalısın.
Oyuncu Adı
Bu bileşen, Aktif Oyuncu Adı ve oyuncu oyunda canlı, avlanmış veya bağlantısı kesilmiş durumdayken gösterilecek olan Aktif Olmayan Oyuncu Adı olmak üzere iki öğeden oluşur.
Oyunculara takımlarında kimin aktif olduğunu ve kimin avlandığını bildirecek iki farklı renk seç.
Görünürlük değerini aktif oyuncu adı için Görünür olarak, aktif olmayan oyuncu adı içinse Gizli olarak ayarla. Bu, yalnızca belirli koşullarda gösterilir.
Genişlik Geçersiz Kılma değerini 220,0 olarak ayarla; böylece oyuncu adı uzun olduğunda oyuncu avatar simgesiyle üst üste binmez.
Oyuncu Avatarı Simgesi
Bu bileşen, oyunda seçtiği cilde göre oyuncunun karakter portresini gösterir.
Bileşen, Kullanıcı Arayüzü > Materyal Örneği klasörü altındaki MI_UI_PlayerCard adlı bir materyal örneğine bağlıdır.
Ayrıntılar panelindeki ayarları değiştirerek bu materyal örneğini istediğin gibi özelleştirebilirsin. Kendi görselini içe aktarıp birkaç anahat rengi eklemeyi dene!
Bu örnekte seçilen görsel, daha sonra karakter cildine bağlanacak boş, şeffaf bir görseldir.
Can
Bu bileşen, oyuncunun can ve kalkan seviyelerini gösteren kısımları içerir.
Üst seviyede, bu kısmın toplamda hangi büyüklükte olabileceğini belirleyen boyut kutusunu görebilirsin.
Sırada MI_UI_Health_Backplate adlı can arka plaka görseli var. Bu kullanıcı arayüzü materyali ayrıca Fortnite > Kullanıcı Arayüzü > Materyaller altında da yer alır. Bu materyal kapsamlı şekilde özelleştirilebilir ve oyuncunun can göstergesinin görüntülenmesiyle ilgili birçok seçenek sunabilir.
Arka plakanın üstünde, sırasıyla Health_Image ve Health_Shadow adlı bir can göstergesi ve bir gölge olmak üzere iki bileşenden oluşan bir yığın kutusu bulunur.
Health_Image, özelleştirilebilir bir ilerleme çubuğu kullanıcı arayüzü materyalidir. Materyal örneğini açtığında Önizleme Boyutu’nu değiştirerek yakınlaştırabilirsin.
Mevcut materyali nasıl etkilediğini görmek için Ayrıntılar panelindeki bazı ayarları değiştirmeyi dene.
Skaler parametre değerleri (ilerleme çubuğu dolum durumu) 0 ile 1 arasında değiştiğinden ve Fortnite’ın can ve kalkan değerleri genellikle 0 ile 100 arasında değiştiğinden, can ve kalkan değerlerinin oyunculara doğru şekilde gösterilmesi için Çarpan değerinin 0,01 olarak ayarlanması gerekir.
Health_Shadow göstergesi estetik için eklenen basit bir gölgeli katmandır.
Kalkan
Kalkan bileşeni, boş kalkan alanını koyu gri renkte gösteren Shields_Container arka planından ve ilerleme çubuğu kullanıcı arayüzü materyalini içeren Shields_Image öğesinden oluşur.
Shield_Image, Health_Image materyalinin basitleştirilmiş bir şekli olan basit bir ilerleme çubuğu materyal örneği kullanır.
Görünüm Bağlamaları Ekleme
Artık oyunun için kullanıcı arayüzünün temel bileşenlerini oluşturduğuna göre, her bileşenin bir canlı oturumdan aldığı verilere göre güncellenmesine olanak sağlayacak görüntüleme bağlamaları ekleyelim.
Oyuncu Adı
Bir oyuncunun adının doğru alanda görünmesini sağlamak için şu adımları takip et:
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 HUDPlayerInfoViewModel listesini görmek için:
1. Pencere > ViewModel’lar öğesini seçerek ViewModel’lar penceresini aç.
1. +ViewModel kısmına git ve Gösterge Paneli - Oyuncu Bilgileri ViewModel Temeli öğesini seç.
1. Cihaz - Gösterge Paneli Oyuncu Bilgileri ViewModel öğesine ve ardından Seç butonuna tıkla.
Hiyerarşi listesinden veya Kullanıcı Arayüzü Önizleme ekranının Oyuncu Adı alanına tıklayarak NameActive_Textöğesini seç.
+ NameActive_Text Widget’ı Ekle’ye tıkla ve açılır menüden Metin’i seç.
Sağdaki boş alanda HUDPlayerInfoViewModel’ı ve açılır menüden Oyuncu Adı’nı seç.
Elde edilen bağlama şu şekilde görünmelidir:
NameInactive_Text elemanı için 1 ile 3 arasındaki adımları yinele.
Aktif olmayan adın görünürlük ayarlarını değiştirmek için NameInactive_Text öğesine yeni bir widget ekle ve açılır menüden Görünürlük’ü seç.
Sağdaki boş alana tıkla ve Dönüştürme Fonksiyonları > Görünürlüğe (Boole) seçeneğini seç.
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 ve Avlandı seçeneklerini işaretle.
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, NameActive_Text’in yerini alır ancak oyuncu canlıyken daraltılmış olarak kalır.
Elde edilen NameInactive_Text bağlaması şu şekilde görünmelidir:
Değişiklikleri göndermek için Derle’ye bastığında oyuncu adları hazır olur!
Oyuncu Avatarı Simgesi
Hiyerarşi panelinden Profile_Image’ı seç veya kullanıcı arayüzü önizleme ekranında oyuncu simgesi alanına tıkla.
+ Profile_Image Widget’ı Ekle’ye tıkla.
Profile_Image > Fırça kısmına git ve Seç butonuna bas. Bu bağlama, temel olarak Profile_Image ayrıntılar panelinden seçilen fırça ayarına bakmayı içerir.
Sağdaki boş alana tıklayıp Dönüştürme Fonksiyonları > Doku Parametresini Ayarla kısmını seç.
Parametre Adı alanına Doku yaz. Bu alanın adını bulmak için oyuncu avatarı materyal örneğini aç.
Vektör/Skaler/Doku Parametrelerini Ayarla fonksiyonları için materyal örneği parametre adlarının Parametre Adı alanıyla tam olarak eşleştiğinden emin olmalısın.
Değer alanının yanındaki Bağlantı simgesine tıklayıp HUDPlayerInfoViewModel > Oyuncu Avatarı Simgesi’ni seç.
Tamamlanan bağlama şu şekilde görünmelidir:
Can ve Kalkan
Hiyerarşi’den Health_Image’ı seç veya kullanıcı arayüzü önizleme ekranındaki can göstergesi alanına tıkla.
+ Health_Image Widget Ekle seçeneğine tıkla.
Profile_Image > Fırça kısmına git ve Seç butonuna bas.
Sağdaki boş alana tıklayıp Dönüştürme Fonksiyonları > Skaler Parametre Ayarla’yı seç.
Parametre Adı alanına İlerleme yaz. Bu alanın adını bulmak için oyuncu avatarı materyal örneğini aç.
Değer ifadesinin yanındaki Bağlantı simgesine tıkla ve HUDPlayerInfoViewModel > Can kısmını seç.
İlerleme, oyuncunun kalan can yüzdesini verir ve Çarpan 0,1 olarak ayarlandığından her yüzdelik puan ilerleme çubuğunu 1/100 oranında hareket ettirir. İlerleme çubuğunun hareket ettiğini görmek için bunu, Materyal Örneğindeki yüzde değerini istediğin gibi değiştirerek test edebilirsin.
Can Yüzdesi Büyütmek için görsele tıkla.
Tamamlanan bağlama şu şekilde görünmelidir:
Kalkan göstergesi için 1’den 6’ya kadar olan adımları tekrarla ama Can yerine Kalkan’ı seç.
Kalkan için tamamlanan bağlama şu şekilde görünmelidir:
Değişiklikleri göndermek için Derle butonuna bas.
Tam Widget
Bu bağlama, tüm widget’ın yalnızca bir oyuncu oyuna bağlandıktan sonra görüntülenmesini sağlar.
Hiyerarşi menüsünden PlayerInfoBlock_Overlay’i seç.
+ PlayerInfoBlock_Overlay Widget Ekle’yi seç, ardından açılır menüden Görünürlük seçeneğine git.
Sağdaki boş alana tıkla ve Dönüştürme Fonksiyonları > Görünürlüğe (Boole) seçeneğini seç. 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 ve Bağlantı Kesildi’yi seç.
Gerçek Görünürlük değerini Daraltılmış, Sahte Görünürlük değerini ise İsabet Testi Yapılamaz (Sadece Kendisi) olarak ayarla.
Elde edilen bağlama bu şekilde görünmelidir. Değişikliklerini kaydetmek için Derle’ye bas.
Hepsi bu kadar, artık oyun içi bilgileri gösterecek eksiksiz şekilde kurulmuş bir kullanıcı arayüzü widget’ın var!
Bir Oyuncu Yığını Oluştur
Bu bölümde kontrol eden oyuncuyla birlikte ilave ekip oyuncularını da gösteren bir kullanıcı widget’ını nasıl oluşturacağını öğren.
İlk olarak İçerik Tarayıcısı’nda sağ tıkla ve Kullanıcı Arayüzü > Widget Blueprint’i seçerek yeni bir Widget Blueprint oluştur.
İletişim kutusunda Kullanıcı Widget’ı seçeneğine tıklayıp adını HUDInfoStack olarak değiştir.
Yeni bir editör penceresi açmak için Kullanıcı Widget’ına çift tıkla.
Başlamak için Palet panelinden bir Katman öğesini Hiyerarşi paneline sürükle.
Bir Yığın Kutusu’nu katmanın altındaki seviyeye sürükleyip adını PlayerInfoStack olarak değiştir.
Viewmodels panelinden +Viewmodel düğmesine bas ve bir Cihaz - Gösterge Paneli Takım/Ekip Oyuncu Bilgileri Listesi seç.
Ayrıntılar paneline gidip +Viewmodel Uzantısı Ekle butonuna bas. Bu, PlayerInfoStack’in bir Giriş Widget Sınıfını kabul etmesini sağlar.
Bu seçenek görünmüyorsa widget’ı bir kez daha derlemeyi dene.
Giriş Widget Sınıfı için daha önce oluşturulan PlayerInfoBlock’u seç. Alt kısımda, Giriş ViewModel olarak HUDPlayerInfoViewModel’i seç.
Yuva Şablonu bölümünden widget’lar arasındaki boşluğu ve hizalamayı ayarlayabilir ve belirli sayıda widget’ın oyunda nasıl görüneceğini önceden izleyebilirsin.
Widget’lar arası mesafeBüyütmek için GIF kısmına tıkla.
Görünüm Bağlamaları panelinde +Widget Ekle’ye tıklayıp HUDInfoStack’i seç. PlayerInfoStack_Viewmodel_Extension’ı seçip genişlet ve Öğeleri Ayarla’yı seç. PlayerInfoStack_Viewmodel_Extension listende görünmüyorsa Derle’ye bastığında görünecektir.
Sağdaki boş alanda HUDPlayerInfoViewModel > Takım/Ekip Oyuncu Bilgileri Dizisi’ni seç. Bunun sonucunda, oyuncu bilgileri ViewModel dizisi, Öğeleri Ayarla adlı fonksiyonla yeni kurulan uzantıya iletilir.
Değişikliklerini kaydetmek için Derle’ye bas. Artık bunları Gösterge Paneli Kontrol Cihazı’nı kullanarak oyununa eklemeye hazırsın.
Ekibin geri kalanından ayrı olarak kontrol eden oyuncu için bir widget yapmak istersen:
Kontrol eden oyuncun için yeni bir widget oluştur ve görünüm bağlamalarını daha önce Cihaz - Gösterge Paneli Kontrol Cihazı Oyuncu Bilgileri ViewModel’ı kullanarak yaptığın gibi ayarla.
Bu widget’ı yığın kutusunu içeren üst widget’ın altına yerleştir.
Bu widget için bir bağlama oluştur. Soldaki alanda Cihaz - Gösterge Paneli Kontrol Cihazı Oyuncu Bilgileri ViewModel seçeneğine git. Sağdaki alanda Cihaz - Gösterge Paneli Kontrol Cihazı Takım/Ekip Oyuncu Bilgileri Listesi > Kontrol Eden Oyuncu Bilgileri kısmını seç.
Gösterge Paneli Kontrol Cihazını Ayarla
İçerik Tarayıcısı’nda Gösterge Paneli Kontrol Cihazı’nı bul ve sahnene sürükle.
Kullanıcı Seçenekleri kısmında oyuncunun ne görmesini istediğini seçip Gösterge Panelini Göster seçeneğinin Evet olarak ve Takım Bilgilerini Göster seçeneğinin Hayır olarak ayarlandığından emin ol.
Aşağı kaydırarak Oyuncu Bilgileri Widget’ı Geçersiz Kılma’ya git ve HUDInfoStack widget’ını boş alana sürükle. Bunun oluşturduğun orijinal widget değil, yeni oluşturulan yığın widget’ı olduğundan emin olmalısın.
Kaydet öğesine tıkla.
Hepsi bu kadar! Oyununun oynanış testini yaptığında artık yeni kullanıcı arayüzün görünecek!
Sıradaki
Bundan sonra, yandan bakış oyunun için kameraları ve kontrol cihazlarını ayarlamayı öğreneceksin!
