UMG widget’larında kullanılacak temel materyalden materyal örnekleri yaparak temel M_UI_Shape_Rectangle materyaliyle özel kullanıcı arayüzü oluştur. Materyal şekli, benzersiz kullanıcı arayüzü tasarımları oluşturmak için kullanılabilecek düz şekiller oluşturmana da olanak sağlar. M_UI_Shape_Rectangle materyali, İçerik Tarayıcısı’ndaki Fortnite klasöründe Kullanıcı Arayüzü > Materyaller altında yer alır.
Materyal örnekleri boya gibi bir widget'ı doldurmak için kullanılabilir. Widget’lara doku eklemek yerine materyaller tercih edilir çünkü materyaller, içe aktarılan dokulardan daha az bellek kullanır. Materyaller, özellikle düz bir kullanıcı arayüzü tasarımı için UEFN ve UE'de kullanıcı arayüzü tasarlamanın daha iyi bir yoludur, çünkü işlenmesi daha kolaydır, 3D ve dinamik materyallerle daha gelişmiş görseller elde edebilirsin.
Fortnite İçin Unreal Editor’de (UEFN) birkaç cihazın özel kullanıcı arayüzü ayarlarında UMG widget’larına referans verilir. UMG widget’ları, gösterge panelinde (HUD) varsayılan Fortnite Kullanıcı Arayüzünün yerini alır.
Kullanıcı arayüzü oluşturmak için materyal kullanımı hakkında daha fazla eğitim için aşağıdakilere bakabilirsin:
Özel Kullanıcı Arayüzü Şekilleri Oluşturma
Özel bir kullanıcı arayüzü şekli oluşturmadan önce kullanıcı arayüzünün nasıl görünmesini istediğine karar ver, ardından kullanıcı arayüzü widget’ının görünümünü tasarlamak için M_UI_Shape_Rectangle materyalini kullan. Bu tasarım, özelleştirilmiş bir kare kadar basit veya bir çiçek şekli gibi daha karmaşık bir şey olabilir. Tasarımlar, widget’ını oluşturduğunda birlikte konumlandırılabilecek birden fazla şekil gerektirebilir.
Şekiller oluşturmak için önce orijinal M_UI_Shape_Rectangle materyalinin bir materyal örneğini oluşturman gerekir.
Materyal önizleme resmine sağ tıkla ve Materyal Örneği Oluştur’u seç.
Öğeyi Farklı Kaydet penceresinde materyal örneğini adlandır. Materyal örneği, projenin içerik klasörüne kaydedilecektir. Öğelerini birlikte gruplandırılacak şekilde adlandır. Örneğin, UEFN’deki hazır materyal örnekleri “M_UGC_” ile başlar ve “_Inst” ile biter. Senin materyal örneğin de bir örnek olarak M_UGC_Circus_Inst gibi görünmelidir.
Yeni materyal örneğine çift tıklayarak Materyal Örneği Editörü’nü aç. Editöre ayrıca öğeye sağ tıklayıp Düzenle’yi seçerek de erişebilirsin.
Materyal örneklerini tamamen özelleştirmek için ihtiyaç duyacağın araçlar, Materyal Örneği Editörü’nün Ayrıntılar panelinde yer almaktadır. Bu araçlar şu bölümlerde bulunur:
[1] Dolgu
[2] Vuruş
[3] Renkler
[4] Durum (Üzerine Gelindi/Odaklanıldı/Basıldı/Devre Dışı Bırakıldı)
Dolgu
Dolgu bölümündeki seçenekler materyalinin şeklini etkiler. Dolgu Şeffaflığı gibi birçok seçenek için 0,0 değeri ayarı devre dışı bırakırken 1,0 değeri ayarı etkinleştirecektir. Şeklinin Görünüm Penceresi’nde görünmesi için Dolgu Şeffaflığı seçeneğini etkinleştirmeyi unutma.
Yukarıdaki görselde bir şekil oluşturmak için kullanılan düzenlenmiş ayarları göreceksin.
Vuruş
Vuruş bölümündeki seçenekler, özelleştirilebilir bir kenarlık oluşturmak için ayarlanabilir. Önceden ayarlanmış mavi kenarlık rengi sayesinde Vuruş seçeneği değerlerini ayarlarken tasarımını görebileceksin.
Yukarıdaki görselde, Vuruş Şeffaflığı seçeneğinin mavi bir kenarlık görüntüleyecek şekilde 1,0 olarak ayarlandığı gösterilmektedir.
Renkler
Renk sekmesindeki seçenekler, oluşturduğun şekilleri daha da özelleştirmek için değiştirilebilir. Bu seçenekler yalnızca seçeneğe karşılık gelen boole değeri kutusuna tıklanarak seçenek “Açık” duruma getirildikten sonra ayarlanabilir.
Hem şekiller hem de kenarlıklar için gradyanlar dahi oluşturabilirsin. Gradyanlar değiştirildikçe bunları Görünüm Penceresinde önizleyebilirsin.
Yukarıdaki görselde renkler gradyanlar halinde uygulanmıştır. Bu seçenek, Gradyan açık/kapalı değeri 0,0’ın üzerinde olacak şekilde ayarlanarak etkinleştirilir.
Durum
Bu seçenek, Renk bölümünde yer alır ve şeklin renklerini çeşitli durumlarda ayarlamak amacıyla değiştirilebilir. Kullanıcı Arayüzü şeklinin üzerine gelme, odaklama, basma veya devre dışı bırakma gibi farklı oyuncu eylemleri için özel renkler ayarlayabilirsin.
Fiziksel Materyal seçeneği için bir materyal ayarlamadığın sürece şeklin, oluşturduğun widget’a aktarıldığında şeffaf bir kenarlığa sahip olacaktır. Bunu önlemek için fiziksel materyalini Ahşap olarak ayarla; böylece materyal gerçek bir materyal gibi işlenebilecektir.
Kullanıcı Arayüzü şeklini özelleştirmeyi bitirdikten sonra sağ üst köşedeki disket simgesine tıklayarak onu kaydetmeyi unutma. Özelleştirdiğin materyal örneği, projenin içerik klasörüne kaydedilecektir.
Bu eğitim örneğinde, bir araya geldiklerinde bir düğme arka planı ile birlikte bir ayçiçeği oluşturan şekiller kullanılmıştır.
Kullanıcı Arayüzü Widget’ları Oluşturma
Şimdi oyuncuların etkileşime gireceği widget’lar oluşturman gerekecektir. Widget’lar oluşturma ve Hiyerarşi sekmesini düzenleme hakkında daha fazla bilgi almak için Kullanıcı Arayüzü Widget Editörü belgesini okuyabilirsin.
Bu noktada tasarımının her unsuru için materyal örnekleri oluşturmuş olmalısın.
Bu eğitim örneği, bir çiçek yaprağı ile çiçek diskinin birden fazla örneğinden oluşmaktadır. Düğme bir tabandan ve düğme simgesi olarak kullanılan iki görselden oluşmaktadır.
Bu materyal örnekleri, özel bir tasarım oluşturmak için widget blueprint’ler halinde düzenlenecektir. Önceden hazırlanmış kullanıcı arayüzünü geçersiz kılmak için Açılır Diyalog cihazına aktarılacak olan şey widget blueprint’tir.
Özel Kullanıcı Arayüzünü oluşturan materyal örneklerinin yanı sıra düğme widget’larını da tutacak yeni bir widget blueprint oluştur. Cihazının ayarlarına eklenecek olan widget blueprint budur.
Bu widget’ta tüm özel materyal örneklerini birleştirerek tasarımını oluştur. Kullanıcı arayüzü widget’ını oluştururken widget adının altındaki Yaygın, Yaygın Kullanıcı Arayüzü, Panel, UIKIT ve Kullanıcı Tarafından Oluşturulan’daki öğeleri sürükle.
Yukarıdaki fotoğrafta, öğeler Hiyerarşi sekmesinde düzenlenmiş ve özel kullanıcı arayüzü için bir çiçek şekli oluşturacak biçimde görünüm penceresinde yeniden konumlandırılmıştır.
Tasarımından memnun olduğunda blueprint’ini kaydet ve İçerik Tarayıcına geri git. Artık bu blueprint, özel Kullanıcı Arayüzünü görüntüleyecek olan bir Açılır Diyalog cihazına aktarılacaktır.
Cihazlara Widget’lar Ekleme
Tasarımın hazır olduktan sonra widget’ını görüntülemek için bir Açılır Diyalog cihazı yerleştir.
Widget’ını Ayrıntılar > Modal Widget > Şablon Geçersiz Kılma Sınıfı’na sürükle.
Eserini bir başlatılmış bir oturum aracılığıyla görüntüleyebilir ve test edebilirsin.