Verse Alanları Örnekleri

Verse alanları doğrudan UMG’de tanımlanabilir. Değişkenler, bir kullanıcı widget’ında oluşturulur ve ardından Verse kodundaki widget özelliklerine bağlanır. Değişkenler Verse verilerini aktarır ve öğe özetine yansıtılır. Ayrıca cihaz görünüm modellerine bağlı kalınmadan özel dinamik kullanıcı arayüzü oluşturulmasına olanak tanır. 

Ada İçi Alışveriş İşlemleri Kullanıcı Arayüzü Örneği

Vitrin örneğinde Verse alanları ve Verse kullanıcı arayüzü aracılığıyla özel kullanıcı arayüzü unsurları eklenerek Marketplace API’nin olanakları genişletilmiş olur. Veriler API’den bir veri katmanına aktarılır ve oyuncuları takip etmek ve oyuncuların objeler satın almasına yanıt vermek için bir Verse sınıfı kullanılır.

Şablonda yer alan aşağıdaki dosyalar, özel kullanıcı arayüzünün görünümünü oluşturur: 

• shop_setup_device_template: Bu dosya var Shop’u tanımlar ve ShowUI fonksiyonunu çağırarak ui_shop dosyasında kodlanan kullanıcı arayüzünü görüntüler.

• ui_shop: Tüm widget’ları Verse kullanıcı arayüzü aracılığıyla bir Verse dosyasında birleştiren bir sınıftır. UMG; karakter görselini, eşya ayrıntılarını, başlıklar ile fiyatı ve eşya satırlarını yönetir. Verse API, arka plan katmanlarını ve düğmeleri yönetir.

• ui_shop_offer_item: Her eşya satırının Görüntüle düğmesine eklenecek bir sınıf.

• link_volume_to_shop_device: Mağaza arayüzünü göstermek için Bölge cihazını tetikleyici olarak kullanan bir cihaz kodu.

Bu örnekte kullanılan tüm materyaller, dokular ve kullanıcı widget’ları Kullanıcı Arayüzü > Verse > InIslandTransaction klasöründe yer almaktadır.

Mağaza Kullanıcı Arayüzü

Ana mağaza kullanıcı arayüzünün tasarımı bir OverlayRoot içinde kodlanmıştır. OverlayRoot, ana arka plan ile teklif arka planının arka plan materyallerine dair materyal örneklerini çağırmak için bir materyal bloku kullanır.

set OverlayRoot = overlay:
            Slots := array:
                overlay_slot:
                    Widget := BackgroundWidget                      
                    VerticalAlignment := vertical_alignment.Fill
                    HorizontalAlignment := horizontal_alignment.Fill                    
                overlay_slot:
                    Widget := CloseButton
                    Padding := margin {Left := 824.0, Bottom := 30.0}
                    VerticalAlignment := vertical_alignment.Bottom

Bir yığın kutusu içeren ikinci bir katman widget’ı eklenir. Yığın kutusu, tekliflerin gövdesini oluşturmak için kullanılır. Son yığın kutusu yuvası, ayrıntıların tasarımını içeren bir kullanıcı widget’ı olan OfferDetailsOverlayRoot için ayrılmıştır.

 overlay_slot:
                                Widget := stack_box:
                                    Orientation := orientation.Horizontal
                                    Slots := array:
                                        stack_box_slot:
                                            Widget := stack_box:
                                                Orientation := orientation.Vertical
                                                Slots := array:
                                                    stack_box_slot:
                                                        Widget := HeaderWidget

PopulateOffers

PopulateOffers fonksiyonu, OfferItemWidget içinde listelenen her bir eşya için girilen eşya satırlarının sayısını oluşturarak yığın kutusundaki her bir teklif için uygulanabilir olan tekrarlanabilir bir eylem oluşturur. Örneğin, üç teklifin varsa bu fonksiyon her eşyan için üç teklif widget’ı oluşturur.

    PopulateOffers(InOffers:[]offer) : void =
       
        for (Offer : InOffers):


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

UpdateSelectedOfferDetails fonksiyonu her teklif için aşağıdaki verileri günceller:

• Ad

• Simge

• ShortDescription

• PriceFloat

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


            if (PriceVB := price_vbucks[SelectedOffer.Price]):
                set PriceFloat = GetPriceVBucks(PriceVB)

HandleBuyButtonClicked metodu, oyuncu bir satın alma işlemi yaptığında oyuncuyu Epic Games ödeme iş akışına yönlendirir.

    HandleBuyButtonClicked(SelectedOffer : offer) <suspends> : void =
       
        BuyButton.OnClick().Await()
       
        if (PlayerUI := GetPlayerUI[Player]):
            HideUI(PlayerUI)
       
        BuyOffer(Player, SelectedOffer)

Cihaz Tetiklemesi

Bu örnekte, mağaza kullanıcı arayüzünü açmak için tetikleyici olarak Bölge cihazı kullanılır. Tetikleyici olarak başka herhangi bir cihazı da kullanabilirsin. Ya da hiç cihaz kullanmayabilirsin. Oyuncular eşyaların her birine ayrı ayrı yaklaşabilir. Her durumda kullanıcı arayüzü açılacaktır.

# A Verse-authored creative device that can be placed in a level
link_volume_to_shop_device := class(creative_device):

    @editable
    var ShopTemplate:shop_setup_device_template = shop_setup_device_template{}
    
    @editable
    var OfferVolume:volume_device = volume_device{}