Przykłady pól Verse

Pola Verse można zdefiniować bezpośrednio w UMG. Zmienne są tworzone w widżecie użytkownika, a następnie powiązane z właściwościami widżetu w kodzie Verse. Zmienne przekazują dane Verse i są odzwierciedlane w podsumowaniu zasobów, a także umożliwiają tworzenie niestandardowego dynamicznego UI bez konieczności korzystania z modeli widoku urządzenia. 

Przykład UI transakcji na wyspie

Przykład witryny sklepu rozszerza interfejs API rynku, dodając niestandardowe elementy interfejsu użytkownika poprzez pola Verse i interfejs użytkownika Verse. Dane są przekazywane z API do warstwy danych, a klasa Verse służy do śledzenia graczy i reagowania na zakupy obiektów dokonywane przez graczy.

Następujące pliki w szablonie tworzą wygląd niestandardowego UI: 

• shop_setup_device_template – ten plik definiuje var Shop i wywołuje funkcję ShowUI, aby wyświetlić interfejs użytkownika zakodowany w pliku ui_shop.

• ui_shop – klasa, która konsoliduje wszystkie widżety w pliku Verse za pośrednictwem interfejsu użytkownika Verse. UMG obsługuje obraz postaci, szczegóły przedmiotów, nagłówki i ceny oraz rzędy przedmiotów. Interfejs API Verse obsługuje warstwy tła i przyciski.

• ui_shop_offer_item – klasa dodawana do każdego przycisku Widok każdego rzędu przedmiotów.

• link_volume_to_shop_device – skrypt urządzenia, który wykorzystuje urządzenie wolumenu jako wyzwalacz do wyświetlenia interfejsu sklepu.

Wszystkie materiały, tekstury i widżety użytkownika użyte w tym przykładzie znajdują się w folderach UI > Verse > InIslandTransaction.

UI sklepu

Projekt głównego interfejsu użytkownika sklepu jest zakodowany w OverlayRoot. OverlayRoot wykorzystuje blok materiału do wywołania instancji materiałów dla materiałów tła głównego tła i tła oferty.

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

Dodawany jest drugi widżet nakładki, który zawiera pole stosu. Pole stosu służy do tworzenia treści ofert. Ostatni pole w polu stosu jest zarezerwowane dla OfferDetailsOverlayRoot, który jest widżetem użytkownika zawierającym projekt szczegółów.

 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

Funkcja PopulateOffers tworzy określoną liczbę rzędów dla każdego przedmiotu wymienionego w OfferItemWidget, dzięki czemu powstaje powtarzalna akcja, która działa dla każdej oferty w polu stosu. Na przykład, jeśli masz trzy oferty, funkcja ta tworzy trzy widżety ofert dla każdego z twoich przedmiotów.

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


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

Dla każdej oferty funkcja UpdateSelectedOfferDetails aktualizuje następujące dane:

• Name

• Icon

• ShortDescription

• PriceFloat

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


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

Metoda HandleBuyButtonClicked przekierowuje gracza do procesu płatności Epic Games, gdy gracz dokonuje zakupu.

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

Wyzwalacz urządzenia

W tym przykładzie urządzenie wolumenu służy jako wyzwalacz otwierający interfejs użytkownika sklepu. Możesz użyć dowolnego urządzenia jako zastępczego wyzwalacza. Lub nie używać żadnego urządzenia. Gracze mogą podchodzić do poszczególnych przedmiotów, a interfejs użytkownika pojawi się w formie wyskakującego okienka.

# 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{}