Zamana duyarlı oyunlar için özel bir animasyonlu süreölçer oluştur. Kullanıcı Arayüzü animasyonlarıyla süreölçerin yanıp sönmesini sağlayabilir, hatta saati çevreleyen özel bir geri sayım Materyal ekleyebilirsin.
Bu öğreticide nasıl yapılacağı gösterilmektedir:
Bir materyal ayarla.
Bir saat yüzünü animasyona dönüştür.
Saat rengini değiştir.
Kullanıcı Arayüzü Açılır Pencereleri eğitimindeki talimatları izleyerek İçerik Tarayıcısı’nda bir Kullanıcı Widget’ı oluştur.
Adım 1: Widget’ları Ayarla
User Widget’ı oluşturduktan sonra, Widget Düzenleyicisini açmak için User Widget küçük resmine çift tıklayın.
Bir Katman widget’ını widget grafiğine sürükle ve sağ alt köşeyi sürükleyerek 1920 x 1080 ’de yeniden boyutlandır. Bu widget, kullanıcı arayüzünün görüntüleneceği ekran görevi görür.
Widget’ı Kök olarak yeniden adlandırmak için Hiyerarşi panelinde Katman widget’ına sağ tıkla. Bu ad aynı zamanda ekranın bir modeli olarak işlev gören widget olduğunu da hatırlatır.
Kök widget’ına ikinci bir Katman widget’ı sürükle. Bu widget, animasyonlu süreölçerin tasarımını ve fonksiyonunu oluşturan tüm widget’ları içerecektir.
Hiyerarşi panelinde ikinci Katman widget’ını ParentContainer olarak yeniden adlandır.
Details paneli'nde aşağıdaki özellikleri Ayarla:
Dolgu = 25,0
Yatay Hizalama = Hizalamayı Yatay Olarak Ortala
Bir Boyut Kutusu widget’ını ParentContainer widget’ına sürükle. Bu, alt widget’larının boyutunu belirleyecek ve uygulayacaktır. Boyut Kutusunun çocuk widget’ları saat yüzü olacaktır.
Hiyerarşi panelinde Boyut Kutusu widget’ını BgsizeBox olarak yeniden adlandır.
Ayrıntılar** panelinde **Yatay Hizalama** ve **Dikey Hizalama**'yı **Ortaya Hizalama** olarak ayarlayın.
Bu seçeneği açmak için Minimum İstenen Genişlik ve Maksimum İstenen Yükseklik değerlerini seçip işaretle, ardından özellikleri 130.0 olarak ayarla.
Kutu, aşağıda gösterildiği gibi Root widget’ına yerleştirilmelidir
Bir Görsel widget’ını BgsizeBox widget’ına sürükle.
Hiyerarşi panelinde Görsel widget’ı Süreölçeri’ni yeniden adlandır.
Ayrıntılar** panelinde **Yatay Hizalama** ve **Dikey Hizalama**'yı **Ortaya Hizalama** olarak ayarlayın.
Fırça > Görüntü özelliğine bir materyal örneği ekle. Bu, geri sayım yapan bir materyal olabilir.
Materyal, Üst Kapsayıcı widget’ının içindeki alanı doldurur.
Bir Metin Kutusu widget’ını Üst Kutu widget’ına sürükle.
Hiyerarşi panelinde Metin Kutusu widget’ını TimerText olarak yeniden adlandır.
Ayrıntılar panelinde Metin özelliğini 00:00 olarak ayarla.
Süreölçer Metni widget’ı, doğrudan Kullanıcı Widget’ının ortasında durur.
Ardından, Aciliyet durumu sırasında zamanı daha dinamik hale getirmek için Süreölçer Metni widget’ının animasyonunu hazırlayacaksın.
Adım 2: Süreölçer Metnini Animasyonlu Hale Getir
Süreölçerinin son birkaç saniyesinde aciliyet durumuna yönelik yakın bir tehlike hissi yaratmak için saatin zamanını canlandırın.
Aşağıda oluşturulan animasyonda süreölçer metni büyüyecek, kırmızıya dönecek ve ardından soluklaşacaktır. Bu animasyon, Süreölçer cihazında ayarlanan Aciliyet modu boyunca tekrarlanır.
Widget Editörü ekranının alt kısmındaki Animasyonlar ’a tıkla. Böylece animasyonlar oluşturabileceğin ve animasyon sekansına widget’lar ekleyebileceğin bir Sequencer paneli açılır.
Kullanıcı Widget’ında bir animasyon dosyası oluşturmak için +Animasyon ’a tıkla.
Animasyonu Aciliyet olarak adlandır. Bu animasyon daha sonra Kullanıcı widget’ına bağlama eklediğinde ayarlanacak.
Widget Grafiğinin çevresinde mavi bir SEÇİLDİ karesi bulunur.
Kullanıcı Widget’ındaki animasyona eklenebilecek Objelerin listesini açmak için +Ekle ’ye tıkla.
Hiyerarşi panelinde TimerText widget’ını seç.
Sequencer paneline TimerText eklemek için listeden TimerText ’i seç.
TimerText öğesinin yanındaki + simgesini seçerek hareket ettirilebilecek özelliklerin listesini aç.
Listeden Dönüşüm ’ü seç. Bu öğe, metni dönüştürebileceğin tüm yöntemleri ekler: Çevirme, Dönme, gam ve Kesme.
Ölçek seçeneklerini aç ve zaman çizelgesine anahtar kareler eklemek için + Anahtar Kare simgesini seç. X ekseni ve Y ekseni seçenekleri, yeni değerler girdiğinizde metnin boyutunu artırır ve azaltır.
Zaman çizelgesindeki Oynatma Çizgisini 0,25 saniyeye taşıyın, X ekseni ve Y ekseni değerlerini 1,5 olarak değiştirin, ardından X eksenive Y ekseni seçeneklerinin yanındaki +anahtar kare simgesine basın. Anahtar kareler zaman çizelgesinde görünür ve TimerText’te bir ilerleme gösterir.
Zaman çizelgesindeki Oynatma Çizgisini 0,5 saniyeye taşıyın, X ekseni ve Y ekseni değerlerini 2,0 olarak değiştirin, ardından X ekseni ve Y ekseni seçeneklerinin yanındaki +Anahtar Kare simgesine basın. Zaman çizelgesinde metnin ilerlemesini gösteren ilave anahtar kareler görünür.
TimerText’in yanındaki + simgesini seçip listeden Renk ve Opaklık’ı seç. Bu Sequencer’a Kırmızı, Yeşil, Mavi ve Alfa özelliği ekler.
Zaman çizelgesinde Oynatma Çizgisi ni sıfırla ve Renk ve Opaklıkseçeneğinin yanındaki + anahtar kare simgesini seç. Bu, zaman çizelgesindeki Renk ve Opaklık özelliklerinin her biri için ilk anahtar kareyi ayarlar.
Renk ve Opaklık’ı genişlet,Kırmızı değerini 1,0 olarak,Yeşil değerini 0,0 ve Mavi değerlerini 0,0 olarak değiştir. Bu kırmızı bir renk oluşturur.
Oynatma Çizgisi ni 0,25 saniyeye taşıyın, ardından Renk ve Opaklık altındaki her özellikin yanındaki + Anahtar Kare simgesini seçin. Bunu yapmak, zaman çizelgesine anahtar kareler ekler.
Oynatma Çizgisini 0,5 saniyeye taşıyın,Alfa değerini 0,0 olarak değiştirin ve + anahtar kare simgesiniseçin. Animasyon, zaman çizelgesindeki son anahtar karelere ulaştığında metin kaybolur.
Oynatma Çizgisini zaman çizelgesinde ileri geri hareket ettirirsen oluşturduğun animasyonun Widget Graph’ında oynatıldığını görürsün.
Şimdi, bir Görünüm Modeli ve Süreölçer cihazını Kullanıcı Widget’ı ile değiştirmek için Görünüm Bağlamaları ekle.
3. Adım: Görüntüleme Bağlamalarını Ekleme
Varsayılan Timer cihazı kullanıcı arayüzünü değiştirmek için Metin Kutusu widget’ını (TimerText) Timer cihazının ayarlarına bağlaman gerekir.
Windows menüsünden Görüntüleme Modeli öğesini seç. Görünüm Modeli penceresi açılır.
+ViewModel’e tıkla, ardından Cihaz Süreölçer Görüntüleme Modeli > Seç’i seç. Artık tüm Zamanlayıcı cihaz görünüm modelleri Kullanıcı Widget'ına bağlanabilir.
Hiyerarşi panelinde TimerText widget’ını seç.
Görünüm Bağlamaları panelini açmak için alttaki araç çubuğunda Görünüm Bağlamaları seçeneğine tıkla.
TimerText widget’ını Görünüm Bağlamaları paneline eklemek için +TimerText Widget ’ına tıkla.
Widget özellikleri açılır menüsünü açmak için TimerText alanını seç.
Açılır menüde TimerText > Metin > Seç’i seç. Bu, TimerText widget’ının Metnini bağlanan özellik olarak tanımlar.
Bağlamalar açılır menüsünü açmak için sağdaki boş alanı seç.
Bağlamalar açılır menüsünden TimerText ViewModel > Current Time > Seç öğesini seç. Bu, TimerText widget’ını Süreölçer cihazının geçerli saatine bağlar ve ekranda geçerli saati görüntüler.
Ardından, Aciliyet Modu sırasında ekranda oynatılması için animasyonu görünüm modeline eklersin.
Adım 4: Animasyonu Ekleme
Animasyonu, Görünüm Bağlamaları paneline TimerText için bağlamaları eklediğine benzer şekilde ekleyeceksin.
Görünüm Bağlamaları panelinin üst kısmındaki +Koşul Ekle ’yi seçin. Bu işlem, Görünüm Bağlamaları paneline koşullu bir satır ekler.
Görünüm modeli açılır menüsünü aç ve Kullanıcı Widget’ı > Seç öğesini seç. Bu, Kullanıcı Widget’ını Koşul’a ekler.
Soldaki alanı seçerek görünüm modeli bağlama açılır menüsünü aç.
Kreatif Süreölçer Görüntüleme Modeli > Aciliyet Durumu > Seç öğesini seç. Bu, IsUrgency belirli bir değere eşit olup olmadığını görmek için bir özellik olarak kullanır, ardından döndürülen değere (true/false) göre animasyonu tetikler.
Zaman alanını 1,0 olarak değiştir. Buna göre, İş Aciliyeti 1,0’a eşitse değerin true olduğu ve animasyonun oynatıldığı anlamına gelir.
Sağdaki alanı seçerek kuyruk açılır menüsünü aç ve Kullanıcı widget’ı > Kuyruk Oynatma Animasyonu > Seç’i seç. Şimdi oluşturduğun animasyon, Aciliyet modu 1,0'a eşit olduğunda oynatılmak üzere sıraya eklenir.
Animasyonda’nın yanındaki bağlama simgesini mavi bir Bağlantı simgesine dönüşecek şekilde seç.
Animasyonda alanını seç, ardından Kullanıcı Widget’ı > Animasyon adı > Seç öğesini seç. Seçilen animasyon kuyruğa alındığında oynatılır.
Başlama Saati değerini 10,0 olarak özelleştir. Bu değer, animasyonun oynatılmaya başlaması gereken saniyedeki saniye/karedir. 0.0 olarak ayarlanırsa, animasyonu 0.0 saniye/çerçeve animasyonundan başlayarak oynatacaktır.
Kayıttan Yürütme Hızını 0,5 olarak ayarla. Bu, animasyonun Sequencer’da ayarlanan hızın yarısında oynatılmasına neden olur.
Kullanıcı Widget’ını kaydetmek için Derle ’ye tıklayın.
5. Adım: Süreölçer Cihazını Ekle
Son adım, görünüm penceresine bir Zamanlayıcı cihazı eklemek ve ayarlarını özelleştirmektir.
Tüm cihaz klasörlerini açmak için **İçerik Tarayıcısı**’ndan **Fortnite** > **Cihazlar** klasörünü seç.
Süreölçer cihazını yüzeye çıkarmak için Öğe Görünümü arama çubuğuna Süreölçer yaz.
Zamanlayıcı cihazını görünüm penceresine sürükle.
Ayrıntılar panelinde Süreyi 30,0 saniyeye ayarla.
Özel Widget Sınıfını ortaya çıkarmak için Gelişmiş seçeneğini genişlet.
Özel Widget Sınıfı açılır menüsünden Kullanıcı Widge’ını seç.
İkinci Gelişmiş seçenek seti altında aşağıdaki ayarları kullan:
Etkileşime Girebilir = Hayır
Tamamlama Davranışı = Sıfırla
Oyun Sırasında Görünür = Gizli
Aciliyet Modunu Etkinleştir = Kontrol Et
Aciliyet Modu Süresi = 10,0 saniye
Artık oyuncular cihazla etkileşime giremez ve Zamanlayıcı, ayarlanan süre dolduğunda sıfırlanır. Aciliyet Modu etkinleştirildiğinde, özel animasyonun sıraya alınır ve Aciliyet Modu Zamanı’nda belirlenen süre boyunca oynatılır.
Değişikliklerini kaydet, ardından Gösterge Panelinde Kullanıcı Widget’ının çalıştığını görmek için projenin oynanış testini yap.
Oynanış testin, varsayılan Süreölçer cihazının yerine özel sürenin geçmesiyle ve belirtilen süre boyunca animasyonu oynatmasıyla sonuçlanmalıdır.
Kendi Kendine Yapabileceklerin
Süreölçeri birkaç şekilde kendi benzersiz projene özel hale getirebilirsin.
TimerText’in etrafına, süreölçer azaldıkça yavaşça kaybolan bir materyal ekle.
TimerText öğesini çevreleyen bir saate benzeyen bir doku ekle.
Süreölçeri ekranın merkezi yerine köşeye taşı.