Özel Bir Geri Sayım Süreölçeri Oluşturma

Bir geri sayım süreölçerini çalıştıran Süreölçer cihazını kullanabilirsin, ancak Verse’te kendi geri sayım süreölçerini oluşturman halinde bu süreölçerin davranışını tam olarak ihtiyacın olan şeye uyacak şekilde özelleştirmen mümkün olacaktır.

Bu eğitim sana Verse ile kendi süreölçerini nasıl oluşturacağını ve geri sayıma zaman eklendiğinde nasıl çıkma kullanacağını gösterecek. Önce basit işlemlerle başla, daha sonra bunları bir projeden diğerine geçerken geliştirmenin yollarını bulacaksın.

Kullanılan Verse Dili Özellikleri

• if: if ifadesi, koşulları test eder ve başarısız olabilecek değerlere erişir.

• block: Bu örnekte, geri sayım süreölçeri oluşturulduğunda kullanıcı arayüzünü başlatmak için block ifadesi kullanılır.

• loop: loop ifadesi, kullanıcı arayüzünü günceller ve geri sayım sıfıra ulaştığında sona erer.

• spawn: Bir spawn ifadesi, herhangi bir bağlamda asenkron bir ifade başlatır.

• message: Mesaj türü, metnin yerelleştirilebileceği anlamına gelmekte olup bir mesaj değişkenini başlatmak için kullandığın dize, mesaj için varsayılan metin ve dildir.

• class: Bu örnek, geri sayımı yöneten ve görüntüleyen bir Verse sınıfı oluşturur.

• constructor: Oluşturucu, ilişkili olduğu sınıfın bir örneğini oluşturan özel bir fonksiyondur.

• Erişim belirleyicileri: Kodunun erişim seviyesini ayarlamak için erişim belirleyicilerini kullanabilirsin.

Kullanılan Verse API’leri

• Uyku: Sleep() API’si ile, kullanıcı arayüzü güncellemeleri arasındaki süreyi seçebilirsin.

• Olaylar: Verse’te kendi olaylarını oluşturabilir ve bunlar meydana geldiğinde özel fonksiyonlar ekleyebilirsin.

• Verse Kullanıcı Arayüzü: Oyuncu ve oyun ile ilgili bilgileri görüntülemek için özel bir oyun içi kullanıcı arayüzü oluştur.

Talimatlar

Kendi özel süreölçerini nasıl oluşturacağını öğrenmek için bu adımları izle. Tam kod, referans olması için bu kılavuzun sonuna eklenmiştir.

Bölümü Kurmak

Bu örnekte aşağıdaki nesne ve cihazlar kullanılıyor.

• 1 adet Düğme Cihazı: Oyuncu cihazla etkileşime geçtiğinde geri sayıma daha fazla zaman eklenir.

• 1 adet Oyunu Sonlandırma cihazı: Geri sayım sona erdiğinde bu cihaz oyunun bitmesine neden olur.

Bölümünü ayarlamak için şu adımları izle:

1. Bölümüne bir Buton cihazıyla Oyunu Sonlandırma cihazı ekle.

2. Yeni bir Verse cihazı oluştur ve Verse Explorer kullanarak cihazı, countdown_timer_example olarak adlandır. İzlenecek adımlar için Verse Kullanarak Kendi Cihazını Oluştur kısmına bakabilirsin.

3. countdown_timer_example içindeki Buton cihazına düzenlenebilir bir referans ekle ve bunu AddMoreTimeButton olarak adlandır. Buna ilişkin adımlar için Cihaz Özelliklerini Özelleştir kısmına bakabilirsin.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   

   Copy full snippet(4 lines long)

4. countdown_timer_example içindeki Oyunu Sonlandırma cihazına düzenlenebilir bir referans ekle ve bunu EndGame olarak adlandır.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   		        
            @editable
            EndGame : end_game_device = end_game_device{}
   

   Copy full snippet(7 lines long)

5. Cihazında yaptığın değişiklikleri ayrıntılar panelinde görmek için Verse dosyanı kaydet ve UEFN ana menüsünde Verse > Verse Kodu Oluştur kısmını seçerek bölümde cihazını güncelle.

Geri Sayımı Başlatma

Bu örnekte kendi kullanıcı arayüzünü çizen ve kendi geri sayımını yöneten bir Verse sınıfı oluşturacaksın.

Özel geri sayım süreölçerini yapmak için şu adımları izle:

1. Boş bir Verse dosyası oluştur ve bunu countdown_timer.verse olarak adlandır.

2. Dosyanın en üstüne aşağıdaki Verse modüllerini ekle:

   Verse

        using { /UnrealEngine.com/Temporary/UI }
        using { /UnrealEngine.com/Temporary/SpatialMath }
        using { /Fortnite.com/UI }
        using { /Verse.org/Colors }
        using { /Verse.org/Simulation }
   

   Copy full snippet(5 lines long)

3. Bir sınıf oluştur ve bunu countdown_timer olarak adlandır, ardından aşağıdaki değişkenleri ekle:

   • RemainingTime adlı ve 0,0 olarak başlatılan bir kayan değişken.

     Verse

                               var RemainingTime : float = 0.0
     

     Copy full snippet(1 line long)

   • Canvas adlı bir tuval widget değişkeni.

     Verse

       var Canvas : canvas = canvas{}
     

     Copy full snippet(1 line long)

   • Varsayılan beyaz metin renginde, RemainingTimeWidget adlı bir metin widget’ı.

     Verse

       RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
     

     Copy full snippet(1 line long)

   • RemainingTime’ın temsil ettiği değeri görüntülemek üzere bir tamsayı parametresi alan ve RemainingTimeText adlı bir mesaj döndüren bir fonksiyon.

     Verse

       RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
     

     Copy full snippet(1 line long)

   • MaybePlayerUI adlı ve false olarak başlatılan isteğe bağlı bir oyuncu kullanıcı arayüzü.

     Verse

       MaybePlayerUI : ?player_ui = false
     		
     

     Copy full snippet(2 lines long)

4. Sınıfın şöyle görünmelidir:

   Verse

        countdown_timer := class:
            MaybePlayerUI : ?player_ui = false
            var RemainingTime : float = 0.0
               var Canvas : canvas = canvas{}
               RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
               RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
   

   Copy full snippet(6 lines long)

5. Ekranın üst orta kısmında zamanın göründüğü kullanıcı arayüzünü oluşturmak için bir block ifadesi ekle. Bir block ifadesi yalnızca sınıf oluşturduğunda çalışır, böylece kullanıcı arayüzünü bu block ifadesinde bir kez oluşturabiliriz.

   Verse

        countdown_timer := class:
            block:
                set Canvas = canvas:
                    Slots := array:
                        canvas_slot:
                            Anchors := anchors:
                                Minimum := vector2{X := 0.5, Y := 0.05}
                                Maximum := vector2{X := 0.5, Y := 0.05}
                            Alignment := vector2{X := 0.5, Y := 0.0}
                            Offsets := margin{Top := 0.0, Left := 0.0, Bottom := 0.0, Right := 0.0}
   
   Expand code Copy full snippet(18 lines long)

6. Kullanıcı arayüzünü görüntülemek için StartCountdown() fonksiyonunu ekle.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   

   Copy full snippet(5 lines long)

7. countdown_timer_example.verse’te oyuncuya dair kullanıcı arayüzüne ve ilk geri sayım süresine yönelik bir referansla bir countdown_timer örneği oluştur. Oyun başlar başlamaz geri sayımın görünmesi için OnBegin()’de StartCountdown()’u çağır.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand code Copy full snippet(23 lines long)

8. Şu anda oynanış testi yaparsan kullanıcı arayüzü, geri sayım başladığında kalan süreyi göstermez, bu nedenle countdown_timer.verse içinde kullanıcı arayüzündeki geçerli geri sayım değerini güncelleyen bir fonksiyon oluştur ve bunu UpdateUI() olarak adlandır. StartCountdown()’da UpdateUI() fonksiyonunu çağır.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   		            
                # Update the UI when we start the timer to see the initial RemainingTime on screen
                UpdateUI()
   		
        UpdateUI() : void =
   
   Expand code Copy full snippet(12 lines long)

9. Şimdi, ilk geri sayım kullanıcı arayüzünde görünür, ancak değer her saniye güncellenmez. Bunu yapmak için:

   • Kullanıcı arayüzünün saniye cinsinden ne sıklıkta güncelleneceğini temsil etmesi için TimerTickPeriod kayan değişkenini ekle. Bu örnekte bir saniye kullanılmaktadır.

     Verse

                               TimerTickPeriod : float = 1.0 # The timer "precision": how often, in seconds, it ticks.
     

     Copy full snippet(1 line long)

   • suspends belirleyicisine sahip bir fonksiyon oluşturarak buna RunCountdown() adını ver ve fonksiyonu StartCountdown()’dan çağır. Kullanıcı arayüzünü güncellemeden önce RunCountdown() değerini TimerTickPeriod kadar beklet ve bunu döngüde tekrarla. Döngüyü sona erecek şekilde ayarla ve geri sayım 0,0 değerine ulaştığında geri sayımın kullanıcı arayüzünden kaybolmasını sağla.

     Verse

       StartCountdown() : void =
           Print("Starting countdown")
     
           if (PlayerUI := MaybePlayerUI?):
               PlayerUI.AddWidget(Canvas)
     
               # Update the UI when we start the timer to see the initial RemainingTime on screen
               UpdateUI()
     
               spawn:
     
     Expand code Copy full snippet(24 lines long)

10. Oynanış testi yaptığında, geri sayımın 30'da başladığını ve süreölçer 0'a ulaşana ve geri sayım kullanıcı arayüzünden kaybolana kadar her saniye güncellendiğini görmen gerekir.

Daha Fazla Süre Ekleme

Bu geri sayım süreölçeriyle, daha fazla zaman eklemek ve eklenen zamanı çağırmak için özel bir yol eklemek isteyeceksin. Bu örnek, geri sayıma nasıl daha fazla süre ekleneceğini ve oyuncu Buton cihazıyla etkileşime geçtiğinde eklenen sürenin nasıl görüntüleneceğini gösterir.

Oyuncu Buton cihazıyla etkileşime geçtiğinde geri sayım süreölçerine daha fazla süre eklemek için şu adımları izle:

1. countdown_timer.verse içinde RemainingTime değişkenini Time adlı kayan parametredeki fonksiyona iletilen değerle güncelleyen, ardından kalan yeni süreyi göstermek için kullanıcı arayüzünü güncelleyen AddRemainingTime() adlı yeni bir fonksiyon oluştur.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   

   Copy full snippet(5 lines long)

2. countdown_timer_example.verse içinde, Buton cihazının InteractedWithEvent’ine abone ol ve oyuncu Buton cihazıyla etkileşime geçtiğinde AddRemainingTime()’ı çağır.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand code Copy full snippet(29 lines long)

3. Oyuncu düğmeyle etkileşime geçtiğinde geri sayıma eklenen süreyi çağırmak için countdown_timer sınıfına bir widget ekle.

   Verse

        AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} 
        AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
   

   Copy full snippet(2 lines long)

4. Yeni AddedTimeWidget için RemainingTime widget'ıyla aynı konumlandırma değerlerini kullan, ancak çıkma süresinin geri sayım zamanlayıcısının sağ üst tarafında görüntülenebilmesi için aşağıdaki değerleri değiştir:

   • AddedTimeWidget için ofsetlerdeki sol kenar boşluğunu 50,0 olarak ayarla.

   • RemainingTimeWidget için ofsetlerdeki üst kenar boşluğunu 25,0 olarak ayarla.

     Verse

                               countdown_timer := class:
                                   <# This block runs for each instance of the countdown_timer class.
                                   We can setup the canvas once here. #>
                                   block:
                                       set Canvas = canvas:
                                           Slots := array:
                                               canvas_slot:
                                                   Anchors := anchors:
                                                       Minimum := vector2{X := 0.5, Y := 0.05}
                                                       Maximum := vector2{X := 0.5, Y := 0.05}
     
     Expand code Copy full snippet(22 lines long)

5. AddedTimeWidget’taki değeri güncelleyen ve widget’ı tekrar gizlemeden önce çıkmayı iki saniye boyunca görüntüleyen AddedTimeCallout() adlı yeni bir fonksiyon oluştur. AddRemainingTime() içinde AddedTimeCallout() çağrısı yap.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   		
            # Fire a simple callout to show the time being added.
            spawn:
                AddedTimeCallout(Time)
   		
   
   Expand code Copy full snippet(19 lines long)

6. Oynanış testi yaptığında, geri sayımın 30'da başladığını ve süreölçer 0'a ulaşana ve geri sayım kullanıcı arayüzünden kaybolana kadar her saniye güncellendiğini görmen gerekir. Oyuncu butonla etkileşime geçtiğinde, geri sayıma yirmi saniye eklenir ve iki saniye boyunca eklenen ilave süreyi gösteren bir çıkma görünür.

Geri Sayım Süreölçeri Bitiş Sinyali

Bu eğitimde daha önce, oyuncunun butona ne zaman bastığını ve geri sayım süreölçerine daha fazla zaman eklediğini anlamak için InteractedWithEvent Buton cihazını kullanmıştın. Ancak kodunda bir şey olduğunda başkalarının da bunu anlamak için kullanabileceği kendi özel olaylarını da oluşturabilirsin.

Bu örnek, özel olayların aşağıdaki davranışlarının nasıl kullanılacağını gösterir:

• Signal(): Bu fonksiyon, olayı bekleyen herkesin olayın gerçekleştiğini öğrenmesini sağlar.

• Await(): Bu asenkron fonksiyon, olay sinyali verilene kadar kendisinin kapsayan bağlamının yürütülmesini engeller.

Bu örnekte, Oyunu Sonlandırma cihazını etkinleştirebilmen için, geri sayım süreölçerine geri sayım bittiğinde sinyal verecek bir olay ekleyeceksin.

Geri sayım bitişine bir olay eklemek için şu adımları izle.

1. countdown_timer sınıfına CountdownEndedEvent adlı bir olay alanı ekle:

   Verse

        CountdownEndedEvent : event() = event(){}
   

   Copy full snippet(1 line long)

   event(), parametrik türdedir, yani bir değer veya obje örneği yerine bir sınıf veya arayüz döndürür. Türün event() olmasının ve bir sınıf örneğini nasıl oluşturduğunu taklit etmek için CountdownEndedEvent sabitini event(){} ile başlatmana dair gerekliliğin sebebi de budur.

2. RunCountdown()’u, CountdownEndedEvent’e sinyal verecek şekilde güncelle. Böylece CountdownEndedEvent, diğer kod döngüden çıkmadan önce bu kodun geri sayımın sona erdiğini öğrenmesini sağlayacaktır.

   Verse

        RunCountdown()<suspends> : void =
            # We loop with the TimerTickPeriod.
            # The UI is also updated each time.
            loop:
                Sleep(TimerTickPeriod)
                set RemainingTime -= TimerTickPeriod
                UpdateUI()
   
                # Timer End
                if (RemainingTime <= 0.0):
   
   Expand code Copy full snippet(14 lines long)

3. countdown_timer_example.verse dosyasında CountdownTimer ile ilişkili CountdownEndedEvent değerini bekle, ardından Oyunu Sonlandırma cihazını etkinleştir çünkü olay gerçekleştiğinde geri sayımın bittiğini biliyoruz.

   Verse

        OnBegin<override()<suspends> : void =
            AddMoreTimeButton.InteractedWithEvent.Subscribe(OnButtonInteractedWith)
            if:
                FirstPlayer := Self.GetPlayspace().GetPlayers()[0]
                PlayerUI := GetPlayerUI[player[FirstPlayer]]
            then:
                set CountdownTimer = countdown_timer{MaybePlayerUI := option{PlayerUI}, RemainingTime := InitialCountdownTime}
   		        
                CountdownTimer.StartCountdown()
                CountdownTimer.CountdownEndedEvent.Await()
   
   Expand code Copy full snippet(14 lines long)

4. Oynanış testi yaptığında, geri sayımın 30'da başladığını ve süreölçer 0'a ulaşana kadar her saniye güncellendiğini görmen gerekir. Geri sayım biter bitmez kullanıcı arayüzünden kaybolur ve oyun sona erer. Oyuncu butonla etkileşime geçtiğinde, geri sayıma yirmi saniye eklenir ve iki saniye boyunca eklenen süreyi gösteren bir açıklama balonu görünür.

Sınıfını Diğer Kodlar Tarafından Kullanılmak Üzere Hazırlama

Artık kendi özel geri sayım süreölçeri sınıfını oluşturdun ve süreölçerin örneğini oluşturmak ve süreölçeri denetlemek için Verse tarafından yazılan bir cihaz kullandın.

Kendi özel sınıflarını (ve aslında herhangi bir kodu) oluşturduğunda, oluşturduklarına kimlerin erişebileceğini belirlemen önemlidir. Örneğin, kullanıcı arayüzünü yalnızca geri sayım süreölçeri oluşturabilmeli ve değiştirebilmelidir. Verse’te kodunun erişim seviyesini ayarlamak için erişim belirleyicileri kullanabilirsin.

Başkalarının erişmesini istediğin tanımlayıcılara public belirleyicisini ekle çünkü herkese açık (public), tanımlayıcının evrensel olarak erişilebilir olduğu anlamına gelir. Bu örnekte aşağıdakilerin tamamı countdown_timer_example cihazında kullanılmıştır, bu yüzden herkese açık bir erişime sahip olmalıdır:

• CountdownEndedEvent<public> : event() = event(){}

• StartCountdown<public>() : void =

• AddRemainingTime<public>(Time : float) : void =

Başkalarının erişmesini istemediğin tanımlayıcılara private belirleyicisini ekle çünkü özel (private), tanımlayıcıya yalnızca geçerli, o anki durumu barındıran kapsamda (bu durumda söz konusu kapsam countdown_timer sınıfıdır) erişilebileceği anlamına gelir.

Bu örnekte, aşağıdakiler özel erişime sahip olmalıdırlar:

• RemainingTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeText<localizes><private>(AddedTime : int) : message = " +{AddedTime}!"

• RemainingTimeText<localizes><private>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"

• var Canvas<private> : canvas = canvas{}

• TimerTickPeriod<private> : float = 1.0

• RunCountdown<private>()<suspends> : void =

• AddedTimeCallout<private>(Time : float)<suspends> : void =

• UpdateUI<private>() : void =

Bir sınıfın değişkenlerini kullanıma açmadan yeni bir sınıf örneğinin başlangıç değerlerini ayarlamak için bir oluşturucu kullanabilirsin. Oluşturucu, ilişkili olduğu sınıfın bir örneğini oluşturan özel bir fonksiyondur.

RemainingTime ve MaybePlayerUI değişkenlerini güncelleyen countdown_timer sınıfı için bir oluşturucu yarat.

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

Oluşturucuda ayarlanan RemainingTime ve MaybePlayerUI değişkenleri herkese açık erişime sahip olmamalıdır, ancak bir oluşturucuda ayarlanmışlarsa özel erişime sahip olamazlar. Bu değişkenler için internal belirleyicisini kullanabilirsin. Buna göre, tanımlayıcıya yalnızca geçerli, o anki durumu barındıran modülde erişilebilecektir.

• MaybePlayerUI<internal> : ?player_ui = false

• var RemainingTime<internal> : float = 0.0

Tam Kod

Aşağıdaki kod, özel bir geri sayım süreölçeri oluşturmak için tam koddur.

Bu örnekte iki Verse dosyası oluşturulmuştur.

countdown_timer.verse

using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Verse.org/Simulation }
using { /Fortnite.com/UI }

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

countdown_timer_example.verse

using { /Verse.org/Simulation }
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/UI }

countdown_timer_example := class(creative_device):

    @editable
    AddMoreTimeButton : button_device = button_device{}

    @editable

Kendi Kendine Yapabileceklerin

Bu kılavuzu tamamlayarak özel bir geri sayım süreölçeri oluşturmayı öğrenmiş oldun.

Öğrendiklerini kullanarak aşağıdakileri yapmayı dene:

• Süreölçer tik oranını değiştir ve her tik için bir olay ekle.

• Süreölçere duraklatma, sürdürme ve yeniden başlatma işlevlerini ekle.