Özel Konuşma Kullanıcı Arayüzü

Widget Editörü, konuşmaların için düğmelerin ve arka planların görünümünü tasarlamana olanak tanır. Özel modlar oluşturmak için Widget Editörü’nde hiçbir widget’a metin eklemen gerekmez. Tüm düğmeler ve metin bloğu widget’ları, metni ve diyaloğu konuşma bankandan çeker.

Widget Editörü’nü kullanarak aşağıdakileri içe aktarabilirsin:

• Görseller

• Önceden tasarlanmış iletişim kutuları

• Yazı tipi dosyaları

Widget Editörü kullanarak özel bir kullanıcı arayüzü oluşturmanın harika bir örneği Ninja Kaplumbağalar Arcade Şablonu eğitim sayfasında bulabilirsin.

Widget Editörü’nü açmak için:

1. İçerik Tarayıcısı’nda sağ tıkla ve Kullanıcı Arayüzü > Widget Blueprint’i seçeneğini belirle.

2. Widget Blueprint Seçimi penceresinden Modal Diyalog Varyantı’nı seç.

3. Widget Blueprint’ini adlandır ve Widget Editörü’nü açmak için widget küçük resmine çift tıkla.

4. Özel konuşma kutuları oluşturmak, Widget Editörü sayfasında belirtilen iş akışlarını kullanır.

Konuşma cihazıyla kullanacağın widget’lar büyük olasılıkla aşağıdakiler olacaktır:

• Tuval Paneli: Hizalama kontrolüyle tüm widget’ları yerleştirme ve daha fazlasını sağlayan bir panel.

• ConversationModalDialogViewModel için UEFN TextBlock: Konuşma başlık metni için.

• ConversationModalDialogViewModel için UEFN TextBlock: Konuşma gövde metni için.

• ConversationModalDialogViewModel için UEFN Butonu: Tüm düğmeler/metin seçenekleri için.

Değerleri Bağlama

Değerleri bağlama, konuşma grafiğine girilen metni ifade eder. Widget’lar, ViewModel’daki widget’lara düzgün bir şekilde bağlandığında konuşma düğümlerine girilen metnin tamamı oynanış sırasında widget’lara eklenir.

Özel konuşma kutusu için metin değerlerini bağlama işlemi Widget Editörü’ndeki Hiyerarşi paneli ile başlar.

1. Hiyerarşi panelinden bir widget seç. Hiyerarşinin en üstünden başlayıp listenin altına doğru inebilirsin.  

2. Alt araç çubuğundan Görünüm Bağlamaları’na tıkla. Görünüm Modeli paneli açılır.  

   

3. Gerekli öğeyi seç, ardından ViewModel panelinde + Widget Ekle’ye tıkla. Bu işlem, widget’ı otomatik olarak ViewModel listesine ekler.

   

   Widget’lar, ViewModel’a Widget alanına tıklayıp açılır menüden widget seçerek de eklenebilir.

   

4. UEFN Metin özelliğindeki Düzenle simgesi’ne tıklayarak ve Metin > Seç’i seçerek widget’a bağlanacak özelliği seç.

   

5. CreativeModalDialogViewmodel açılır menüsünden bir metin değeri veya bir buton değeri seç. Bu, seçilen değeri widget’a ekler. Seçim, hiyerarşideki widget türüne göre yapılmalıdır.

   

6. Değerleri widget’lara bağlama işlemini tamamlamak için Seç’e tıkla.

   1. Metin değerleri Başlık, Gövde veya Buton Numarası Ana Metni’ni içerir:

   2. Başlık, Konuşma cihazındaki Konuşmacı Adı alanında ayarlanan değer veya Açılır Diyalog cihazının Başlık alanında ayarlanan değerdir.

   3. Gövde, onu takip eden metindir ve genellikle oyuncuya konuşmadaki seçenekleri sunar. Bunlar, Varsayılan Giriş Noktası düğümüne bağlanan Konuşma düğümleridir.

   4. Buton Numarası Ana Metni, Konuşma Grafiği’nde sıralandığı şekliyle yanıt düğümlerinde görünen metindir.

   

Buton değerleri, kullanılan buton widget’larının sayısına göre numaralandırılmalıdır. Değerler, düğme widget’larının eklendiği sayısal sırayla ayarlanır. Butonlar, bir konuşma grafiğindeki Yanıt düğümleridir. Bu işlem, düğme metninin her bir düğmeye uygun şekilde bağlanmasını sağlar.

Butonları Bağlama

Düğme bağlama, bir düğme seçiminden sonra olay başlatmayı ifade eder. Bu, NPC’nin bir eşya verdiği tek bir olay olabileceği gibi, NPC’nin satacak eşyaları olduğu ve bir dizi olayı başlatan karmaşık bir değişim de olabilir.

Özel düğme widget’larında tetiklenen olayları programlamak için düğmeye ViewModel’dan olay mantığını eklemen gerekir.

1. Alt araç çubuğunda Bağlamaları Görüntüle’ye tıkla.

   

2. Widget Editörü’ndeki Hiyerarşi panelinden her seferinde bir düğme seç. Widget, Hiyerarşi panelinden seçildiğinde, seçilen düğme widget’ı otomatik olarak Widget alanına yerleştirilir.

3. + Widget Ekle’ye tıkla. Widget tekrar listeye eklenir.

   

4. Ok alanını seçip Modeli Görüntülemek için Tek Yol’u seç.

   

5. Butonu seç ve Tıklandığında seçeneğini belirle. Seçim penceresinde Seç’e değil, Olay’a tıkladığından emin ol.

6. ViewModel’da Yanıt’ı seç.

7. Aşağıdaki satırda buton için istediğin Yanıt değerini seç. Elde edilen bağlama şu şekilde görünmelidir:

   

Butonlarını, değer atanıp atanmamasına bağlı olarak gizlenecek/gösterilecek şekilde de ayarlayabilirsin:

1. Hiyerarşiden butonu seç ve butona bir widget ekle.

2. Görünürlük değerini seç.

3. Bağlamanın sağ tarafında karşılık gelen Buton Numarası Görünürlüğü öğesini bulup seç. Elde edilen bağlama şu şekilde görünmelidir:

   

4. Artık buton yalnızca seçilecek bir yanıt varsa görünür olur.

Büyütmek için gif’e tıkla.

Görünürlük bağlaması olmadan, yanıt alanındaki metin temizlenir ve oyuncular için boş bir seçim kutusu bırakılır:

Büyütmek için gif’e tıkla. Metin > Seç

Materyalleri Bağlama

Materyaller, UMG’de görsel widget’ını doldurmak için kullanılabilir. UMG ile kullanılan materyallerin, widget’ın materyal dosyasını tanıması ve onu görsel widget’ıyla birlikte kullanabilmesi için kullanıcı arayüzü materyali formatında olması gerekir. Kullanıcı arayüzü materyalleri hakkında daha fazla bilgi edinmek için Kullanıcı Arayüzü Materyalleri dokümantasyonuna bakabilirsin.

Materyaller, Materyaller Konuşma dizisini doldurmak için kullanılabilir. Materyal grafiğinde dokulara dönüştürülebilecek olan içe aktarılmış dosyalar ile özel materyaller oluşturabilirsin. Aşağıdaki dosya türleri, kabul edilen dosya türlerinin tam bir listesi değildir, ancak taramalı görsel öğelerini içe aktarma açısından standart olan türlerdir:

• .png

• .webp

• .jpg

Konuşma cihazında, materyallerini Konuşma Materyali dizisine ekle. Ardından Konuşma Grafiği’nde Materyali Ayarla düğümü mevcut olmalıdır. Materyaller bağlamalardaki grafikten referans alınır.

Bir materyali bir konuşma cihazına bağlamak için aşağıdaki adımları izle:

1. Kullanıcı Arayüzü Widget Editörü’nde, Hiyerarşi panelindeki Görsel widget’ına tıkla.

   

2. Görünüm Bağlamaları’na tıklayarak bağlamalar panelini aç. Panel, görsel widget’ı için bir bağlama çizgisiyle açılır.

   

3. Görsel widget’ını Görünüm Bağlamaları paneline eklemek için +AddWidget düğmesine tıkla.

   

4. Görsel widget’ının sol alanındaki Düzenle simgesine tıklayarak widget seçeneklerini aç.

   

5. Görsel Widget’ı > Fırça > Seç’i seç. Böylece, sağ alana seçilebilir Fırça bağlamaları eklenmiş olur.

   

6. Sağ alandaki Düzenle simgesini tıklayarak bağlama seçeneklerini aç.

   

7. Dönüştürme Fonksiyonu > Materyalden Görsel Fırçası Oluştur > Seç’i seç. Bunun sonucunda, bu widget için kullanmak istediğin materyali tam olarak belirleyebilmen için başka seçenekler açılır.

   

8. Materyal yuvasından Bağlantı simgesini seç, ardından menüden Kreatif Modal İletişim Kutusu Görünüm Modeli > Art 01 Materyali > Seç’i seç.

   

9. Görsel Boyutu yuvasında, Görsel widget’ının Ayrıntılar paneli’ndeki Görsel Boyutu seçeneği için kullandığın boyutun aynısını gir.

   

Sonuç, konuşmacı karakterini tanımlayan bir materyaldir.

Konuşma Kullanıcı Arayüzü Animasyonları Oluşturma

Konuşma Materyalini bir kullanıcı arayüzü animasyonunda da kullanabilirsin. Konuşma cihazında Konuşma Türü, Kutu veya Özel olarak ayarlanmalıdır. Konuşma materyaline, Materyal Grafiği’nde, Konuşma Animasyonunu Oynat düğümünü kullandığında konuşma cihazından referans verilebilir.

Bu konuşma düğümünü kullanıcı arayüzü widget’ına bağlamak için görünüm modelindeki İlerleme değerini, Sequencer’da oluşturduğun kullanıcı arayüzü animasyonuna bağlamak üzere kullanman gerekir.  Materyalini nasıl animasyonlu hale getireceğini öğrenmek için Kullanıcı Arayüzünü Animasyonlu Hale Getirme dokümantasyonuna bakabilirsin.