Özel Nitelikli Etkileşimler Oluşturma

Bu kılavuzda Nitelikli Etkileşim cihazı için özel bir kullanıcı arayüzü oluşturmak üzere kullanabileceğin bir UMG (Unreal Motion Graphics) tasarımı örneği ile onun Görünüm Modeli bağlamalarına yer verilmektedir.

Özel nitelikli etkileşimini oluştururken etkileşimi başlatacak bir olay ayarladığından emin ol. Ayrıca oyunculara nitelikli etkileşimi başarıyla tamamlamaları karşılığında eşyalar veren olay tetikleyiciler de ayarlayabilirsin.

Oyuncular veya objeler belirli bölgeleri hedefledikten sonra sinematik ara sahneler ayarlayarak bu örnekleri geliştirebilirsin.

Bu eğitimde, oyuncuların doğru bölgeleri hedeflemek için bir tetikleyici girdisini basılı tutabileceği hızlı bir basma nitelikli etkileşimin nasıl oluşturulacağı açıklanmaktadır.

Kullanıcı arayüzünü özelleştirmeye başlamadan önce tasarımlarında kullanacağın öğeleri oluşturmalı ve içe aktarmalısın. Tasarımında materyaller kullanma hakkında daha fazla bilgi edinmek için Materyallerle Özel Kullanıcı Arayüzü Oluşturma bölümüne bakabilirsin.

Cihazı Ayarla

Oyuncuların, isabet alması durumunda onlara başarı sağlayacak olan mükemmel bir bölgeyi hedeflediği bir golf örneği oluşturmak için aşağıdaki adımları izle. Kullanıcı arayüzünü tasarlarken panelleri Hiyerarşi paneline yerleştirdiğin sırada onları yeniden adlandırabilirsin.

1. İçerik Tarayıcısı’ndan projene bir nitelikli etkileşim cihazı yerleştir.

2. Cihazın Ayrıntılar panelinde aşağıdaki ayarları değiştir.

   

   Seçenek	Değer	Açıklama
   Kullanıcı Arayüzü Türü	Çubuk	Görüntülenecek kullanıcı arayüzünün türünü belirler.
   Özel Widget	Özel Kullanıcı Widget’ını ekle	Etkileşim için kullanılacak özel bir widget seç.
   Etkileşim Türü	Basılı tut ve bırak	Basılı Tut ve Bırak, tetikleyici düğmesi basılı tutulurken animasyonlu hale gelir, bırakıldığında ise etkinleşir.
   Ölçer Rengi	Bir renk seç	Bu örnekte kırmızı renk kullanılmaktadır.
   İyi Bölge Boyutu	80,0	İyi bölge boyutunu toplam ölçerin yüzdesi olarak ayarlar.
   İyi Bölge Konumu	0,0	İyi bölgenin konumunu ayarlar.
   Mükemmel Bölge Boyutu	15,0	Mükemmel bölgenin boyutunu iyi bölgenin yüzdesi olarak ayarlar.
   Mükemmel Bölge Pozisyonu	100,0	Mükemmel bölgenin konumunu ayarlar.
   İyi Bölge Rengi	Bir renk seç	Bu örnekte koyu yeşil renk kullanılmaktadır.
   Mükemmel Bölge Rengi	Bir renk seç	Bu örnekte limon yeşili rengi kullanılmaktadır.

Arka Plan Görseli Ekle

Bu örnekteki dikey ölçer çubuğu için arka plan görseli oluşturmak için aşağıdaki adımları izle. Bu kılavuzdaki arka plan, bölgelerin üzerinde duracağı, köşeleri yuvarlanmış, siyah bir çubuktur.

Bu eğitimdeki adımları yeniden oluştururken yukarıdaki görseli referans olarak kullan.

1. Etkileşimin için bir Kullanıcı Widget’ı oluştur.

2. Kullanıcı Widget’ı Editörü’ne erişmek için cihaza bağlı Kullanıcı Widget’ını bulup ona çift tıkla.

3. Hiyerarşi panelinde, genel tuval olarak görev yapacak bir katmanı sürükleyip alta yerleştir. Bu örnekte katman, Katman olarak adlandırılmıştır. Ardından, arka planı içerecek başka bir katmanı sürükle. Bu örnekte ilgili katman, SID olarak adlandırılmıştır.

4. Örnekte Bar olarak adlandırılan bir görseli sürükle ve alt Katman altına yerleştir.

5. Görsel’in Ayrıntılar panelinde arka planın için materyali veya dokuyu ayarla.

Bölgeleri Ayarla

Örneğin için, hedeflendiğinde otomatik olarak başarısızlığa yol açacak kötü bir bölge oluşturabilirsin. Ancak bu örnekte yalnızca, aşağıdaki üç kapsayıcıdan oluşan bir mükemmel bölge kullanılmaktadır:

• Başlangıç için PerfectZoneStart adlı boş bir alan.

• SizeBox adlı iyi veya mükemmel bölge.

• Ondan sonraki PerfectZoneEnd adlı boş alan.

Bu örneğin mükemmel bölgesini yeniden oluşturmak için aşağıdaki adımları izle.

1. Palet panelinden, bu örnekte SID olarak adlandırılmış alt Katman içine bir Yığın Kutusu sürükle ve yerleştir.

2. Ardından, şu alt öğeleri sürükle Yığın Kutusu içine yerleştir: Ölçek Kutusu > Boyut Kutusu.

   1. Ölçek Kutusu’nun Ayrıntılar panelinde Uzatma seçeneğini Kullanıcı Tarafından Belirlenmiş olarak ayarla. Ardından, mükemmel bölge üzerinde ne kadar boşluk olmasını istediğini belirtmek için Kullanıcı Tarafından Belirlenmiş Ölçek’i ayarla. Bu örnek için ölçeği 0,27 olarak ayarla.
   2. Boyut Kutusu içinde Yükseklik Geçersiz Kılma ayarını üst ölçerin yüksekliğine ayarla.

3. Aynı Yığın Kutusu içine bir Boyut Kutusu > Ölçek Kutusu > Katman > Görsel de sürükle.

   1. Boyut Kutusu’nun Ayrıntılar panelinde Yükseklik Geçersiz Kılma değerini mükemmel bölge boyutuna ayarla.

   2. Ölçek Kutusu’nun Ayrıntılar panelinde Uzatma ayarını Kullanıcı Tarafından Belirlenmiş olarak ayarla. Ardından Kullanıcı Tarafından Belirlenmiş Ölçek ayarını 1 olarak ayarla.

   3. PerfectZone katmanı, mükemmel bölgeye dair materyal veya dokuyu içerecektir.

4. Aynı Yığın Kutusu içine bir Katman > Boyut Kutusu da sürükle.

   1. PerfectZoneEnd katmanının Ayrıntılar panelinde Uzatma ayarını Kullanıcı Tarafından Belirlenmiş olarak ayarla. Ardından, mükemmel bölge üzerinde ne kadar boşluk olmasını istediğini belirtmek için Kullanıcı Tarafından Belirlenmiş Ölçek’i ayarla. Bu örnek için ölçeği 0,49 olarak ayarla.
   
   1. Boyut Kutusu’nun Ayrıntılar panelinde Yükseklik Geçersiz Kılma ayarını alt ölçerin yüksekliğine ayarla.
   

5. Daha fazla ayrıntı eklemek için Yığın Kutusu’nun altında yer alan ve bu örnekte Çentikler olarak adlandırılmış olan bir Görsel ekleyerek arka plan bölgeleri için çentikler oluşturabilirsin.

Temizleyiciyi Ayarla

Bu örnekte temizleyicinin hareket eden bir kapsayıcının içinde olması gerekir. Bunu yapmak için iki eşya içeren bir Yığın Kutusu oluşturmalısın.

İlk eşya, Kullanıcı Ölçeği olarak ayarlanmış olan ve daha sonra ViewModel’da Nitelikli Etkileşim Ölçer Ölçeği’ne bağlayacağın bir Boyut Kutusu içerir. İkinci eşya ise içinde temizleyicinin olduğu bir kapsayıcı içerecektir.

1. SID katmanının altına, bu örnekte ScrubberStackBox olarak adlandırılmış olan Yığın Kutusu’nu, bu yığın kutusu, Katman > Boyut Kutusu ile Boyut Kutusu > Ölçek Kutusu > Görsel (Temizleyici adlı) olmak üzere iki alt kurulum içerecek şekilde sürükle ve yerleştir.

   1. ScrubberMovingZone katmanının Ayrıntılar panelinde Uzatma ayarını Kullanıcı Tarafından Belirlenmiş olarak ayarla. Ardından Kullanıcı Tarafından Belirlenmiş Ölçek ayarını 0 olarak ayarla.
   
   1. Boyut Kutusu’nun Ayrıntılar panelinde Yükseklik Geçersiz Kılma ayarını üst ölçerin yüksekliğine ayarla.
   
   1. ScrubberContainer Kutu Boyutu için Yükseklik Geçersiz Kılma ayarını 0 olarak ayarla.
   
   1. Ölçek Kutusu katmanının Uzatma ayarını Kullanıcı Tarafından Belirlenmiş olarak değiştir. Kullanıcı Tarafından Belirlenmiş Ölçek ayarını 1 olarak ayarla.
   
   1. Görsel Temizleyici’nin Görsel ayarında temizleyicinin materyalini veya dokusunu ayarla.
   

ViewModel’ı ayarla

Özel kullanıcı arayüzünü nitelikli etkileşim cihazına bağlamak için aşağıdaki adımları izle.

1. Kullanıcı Widget’ında Pencere > Görünüm Modelleri’ne giderek Görünüm Modelleri penceresini aç.

2. +Görünüm Modeli’ne tıkla. Ardından Cihaz - Nitelikli Etkileşim Görünüm Modeli’ni seç ve Seç’e tıkla.

3. Alt araç çubuğundan veya Pencere sekmesinden Görünüm Bağlamaları’nı seç.

4. Görünüm Bağlamaları’nı aşağıdaki görselle eşleşecek şekilde ayarla.

   
   1. ScrubberMovingZone’u eklemek için + Widget Ekle’ye tıkla.
   2. ScubberMovingZone’u Kullanıcı Tarafından Belirlenmiş Ölçek olarak, UEFN_SkiledInteraction_ViewModel’ı ise Geçerli Ölçer Değeri olarak ayarla.
   3. PerfectZoneStart’ı eklemek için + Widget Ekle’ye tıkla.
   4. PerfectZoneStart’ı Kullanıcı Tarafından Belirlenmiş Ölçek olarak, UEFN_SkiledInteraction_ViewModel’ı ise Mükemmel Bölge Minimum olarak ayarla.
   5. PerfectZoneEnd’i eklemek için + Widget Ekle’ye tıkla.
   6. PerfectZoneStart’ı Kullanıcı Tarafından Belirlenmiş Ölçek olarak ayarla ve Tamsayı ile Çift Duyarlıklı Sayı Ekle için bir dönüştürme fonksiyonu ekle.
   7. A’yı 1 olarak ayarla.
   8. B’yi UEFN_SkiledInteraction_Viewmodel/Mükemmel Bölge Maksimum olarak ayarla.
   9. B’yi Reddet’i True olarak ayarla.