Unreal Engine’de Papağan Kullanıcı Arayüzü | Unreal Engine 5.7 Dokümantasyon

UMG

Unreal kullanıcı arayüzü sistemine Unreal Motion Graphics ya da UMG denir. Unity’nin standart uGUI sisteminden çok daha farklıdır. UMG’nin Kullanıcı Arayüzü Tasarlayıcısı adlı aracı, daha önce bu sistemle çalışmışsanız Unity’nin UI Toolkit UI Builder’ına çok benzer. Tasarlayıcı, resmi dokümantasyonunda ayrıntılı olarak ele alınıyor; Kullanıcı Arayüzünüzü Oluşturma ve Örnek UMG Uygulamaları sayfaları, özellikle Unreal’a geçiş yapan Unity geliştiricileri için faydalıdır. UMG’nin temelinde, kullanıcı arayüzünüzü oluşturmak için kullanabileceğiniz bir dizi önceden hazırlanmış fonksiyon ve hiyerarşi olan widget’lar bulunur.

CommonUI

CommonUI (Yaygın Kullanıcı Arayüzü), Epic Games tarafından geliştirilen ve Papağan’da da kullandığımız birinci taraf bir eklentidir. CommonUI, normalde manuel olarak tekrar tekrar ayarlamanın çok zaman aldığı “yaygın” stilleri ve eylemleri widget’larda ayarlar. Pratik bir örnek, girdi cihazındaki değişiklikleri algılayıp ekrandaki girdi simgelerini otomatik olarak değiştirmektir. Bu işlemi manuel olarak yapmak çok zaman alır ama Yaygın Kullanıcı Arayüzü bu işlemi otomatikleştirir. CommonUI, Gelişmiş Girdi’nin tuş yeniden eşleştirme desteği için de gereklidir. Bu konu Gelişmiş Girdi dokümantasyonunda daha ayrıntılı olarak yer almaktadır.

CommonUI’yı ayarlamak için öncelikle Eklentiler penceresinden etkinleştirmelisiniz. Menüde Düzenle > Eklentiler’e gidin, “Yaygın Kullanıcı Arayüzü Eklentisi”ni (Common UI ya da CommonUI) arayıp etkinleştirin ve ardından editörü yeniden başlatın.
Proje Ayarları > Genel Ayarlar’a gidin ve Oyun Görünüm Penceresi İstemci Sınıfı’nı “GameViewportClient”tan “CommonGameViewportClient”a değiştirin. Bu işlem, CommonUI widget’larının motordan girdi olaylarını almasını mümkün kılar.
Proje Ayarları > Yaygın Girdi Ayarları altında Gelişmiş Girdi Desteğini Etkinleştir için onay kutusunu seçin. Bu, Gelişmiş Girdi’nin CommonInput ile çalışmasını mümkün kılar. CommonInput, CommonUI widget’ları içindeki girdiyi işler.
Son olarak, kod içinde kullanabilmeniz için projenizde bazı modülleri etkinleştirmeniz gerekir. $ProjectName.Build.cs dosyasına gidin, bu örnekte Parrot.Build.cs dosyasıdır. Aşağıdakileri PublicDependencyModuleNames listesine ekleyin:
- CommonInput
- CommonUI
- EnhancedInput
- GameplayTags
- UMG

Papağan’a Özgü Widget Hiyerarşisi

Papağan’da bakılacak ilk kullanıcı arayüzü sınıfı AParrotHUD’dır. Unreal Engine’de Gösterge Paneli (HUD) sınıfı, her yerel oyuncu için oluşturulan bir aktördür ve gösterge panelini yönetir. Doğrudan çizilebilen bir tuvale ve hata ayıklama tuvaline sahiptir. Bunu oyun modu yapılandırmanızın bir parçası olarak da atayabilirsiniz. Bu sınıfı Papağan’da kullandığınızda, tüm widget’larınızın oluşturulduğu ve yönetildiği kök widget’ın sahibi olan bir aktör olarak kullanılır.

Bu sahip olunan widget için sınıf türü UParrotGameLayout’tur. UParrotGameLayout, diğer tüm kullanıcı arayüzü widget’larınız için C++ temel widget kapsayıcısıdır (container). İçinde, UCommonActivatableWidgetContainerBase türünde bir “katmanlar” listesi bulunur. Gösterilmek istenen diğer tüm widget’lar bu katmanlardan birine itilecektir.

Kurduğumuz temel katmanlar şunlardır:

Oyun: UMG gösterge paneli widget’ınızı ittiğiniz katman.
GameMenu: Gösterge panelinin üstünde göstermek istediğiniz herhangi bir widget’ı ittiğiniz katman.
Menü: Duraklatma Ekranı, Ayarlar Ekranı, Çanta Ekranı ve diğer benzer ekranlar gibi tüm ekran widget’ları için katman.
Modal: Tüm modal açılır pencereleri için katman.

Aynı anda katman başına yalnızca bir widget etkindir. Birkaç farklı ekran widget’ını “Menü” katmanına itebilirsiniz ancak sadece sonuncusu etkin olup gösterilir.

Papağan’da, etkinleştirilebilir ekranlar için de bir sınıf hiyerarşisi oluşturduk çünkü bu widget’ların hepsi ortak işlevleri paylaşır ve Menü katmanına gönderir. Sınıf hiyerarşisi şu şekildedir:

Etkinleştirilebilir ekran sınıfı hiyerarşisi

Bu kurulum ile Papağan’da tüm kullanıcı arayüzü ekranlarını oluşturuyoruz.

Widget Stili

Yaygın Kullanıcı Arayüzü eklentisi ve ekran kurulumu ile widget’larınızı şekillendirmeye başlayabilirsiniz. İçerik/Kullanıcı Arayüzü/Widget’lar/Yaygın altındaki W_ButtonBase bakmak için iyi bir örnek teşkil eder. İçerik/Kullanıcı Arayüzü/Stil altındaki ButtonStyle_Base stil verilerini kullanır. Yaygın Kullanıcı Arayüzü’nden UCommonButtonStyle sınıfını kullanır. Özelleştirebileceğiniz birçok seçenek bulunuyor. Bazı örnekler, düğmenin durumuna bağlı olarak sesler ve fırçalardır. Yaygın Kullanıcı Arayüzü, kullandığınız widget’a bağlı olarak bunun gibi birçok farklı stil sınıfına sahiptir. Özel bir şey yapmanız gerekiyorsa, bu stil widget’larına ait motor kodu referans için incelenebilecek iyi bir kaynaktır.

Yükleme Ekranı

Papağan’daki yükleme ekranı, Epic Games’in birinci taraf eklentisi CommonLoadingScreen’i kullanır. Bu eklentinin uygulamadaki bir başka örneği Epic Games’in Lyra örnek projesinde yer alıyor. Bu eklentiyi neden kullandığımızı anlamak için, öncelikle Unreal Engine’deki bölüm yükleme temellerini kavramanız gerekiyor.

UE’de bölüm yüklemeyi birkaç şekilde yönetebilirsiniz. Basit bir yaklaşım, blueprint içinde Bölümü Aç düğümünü çağırmaktır. Bu fonksiyon bir haritayı bir dize (string) veya haritaya ait yumuşak obje referansı ile yükleyebilir. Bu basit haritalarda iyi çalışır ama dikkat edilmesi gereken bir nokta var. Bu fonksiyon çağrıldığında, harita eşzamanlı olarak yüklenir ve yeni harita için yüklenmesi gereken veri miktarına bağlı olarak belirgin bir takılma meydana gelebilir. Buradaki bir diğer sorun da görünüm penceresi eklenen bir widget’ın önceki bölümde bulunan bir oyuncu denetleyicisine bağlanacak olmasıdır. Bölüm geçişi olduğunda, bölümün boşaltılmasına yönelik işlemin bir parçası olarak temizlenir.

Haritaya bağlı olarak yeni bir oyun modu yüklemek faydalı olabilir (örn. Tek Oyunculu bölüm ve Çok Oyunculu bölüm). Peki yükleme ekranını nasıl kalıcı hale getirirsiniz ve Bölümü Aç ile olası yükleme aksaklıklarını nasıl önlersiniz? Hadi BP_ParrotGameInstance’a bir göz atalım.

Papağan Oyun Örneği Blueprint’i — Yumuşak obje referansınızı harita veri öğenize asenkron şekilde yükleyin. Zaten bölümü yüklediğiniz için, eşzamanlı yükleme isabeti konusunda endişelenmeden doğrudan Bölümü Aç’ı çağırabilirsiniz. CommonLoadingScreen eklentisi de burada çağrılır. Yükleme ekranı widget’ı bir sonraki haritanın “ön yüklemesi” sırasında çağrılacak ve “yükleme sonrası” sırasında kaldırılacaktır.

Bölümü burada ansenkron olarak yüklemek, Bölümü Aç çağrıldığında öğelerin hazır olmaması sorununu çözer. Yorumda da belirtildiği gibi, yükleme ekranı çalışması burada da zaten halledilmiştir. Eklentiyi yapılandırmak basittir ve yükleme ekranı widget’ını Düzenle > Proje Ayarları > Ortak Yükleme Ekranı’ndan ayarlayabilirsiniz.

Buradaki hata ayıklama geçişlerine de dikkat edin. Bunları editör içinde test etmek, yükleme ekranının paketlenmiş bir sürümde nasıl performans göstereceği hakkında daha iyi bir fikir verir.

Artık yükleme ekranıyla birlikte bölümler yükleniyor. BP_ParrotGameInstance tek oyunculu ve çok oyunculu bölüm sırasını nasıl oluşturduğumuzu görmek için kendi başınıza daha fazla inceleyebilirsiniz. Oyun durumunun kurulumu Unreal Oynanış Altyapısı (Framework) dokümantasyonunda ele alınmıştır.