Beispiele für Verse-Felder

Verse-Felder können direkt in UMG definiert werden. Variablen werden in einem Nutzer-Widget erstellt und dann im Verse-Code an Widget-Eigenschaften gebunden. Variablen übertragen Verse-Daten und werden im Asset Digest gezeigt. Zudem bieten sie die Möglichkeit, benutzerdefinierte dynamische Benutzeroberflächen zu erstellen, ohne sich auf die Geräte-Ansichtsmodelle verlassen zu müssen. 

Benutzeroberflächenbeispiel für Käufe auf Inseln

Das Shop-Beispiel baut auf der Marketplace-API auf, indem darin benutzerdefinierte Benutzeroberflächenelemente über Verse-Felder und die Verse-Benutzeroberfläche hinzugefügt werden. Daten werden von der API auf die Datenebene übertragen und es wird eine Verse-Klasse genutzt, um Spieler zu verfolgen und auf Spieler, die Objekte kaufen, zu reagieren.

Über die folgenden Dateien in der Vorlage wird das Aussehen der benutzerdefinierten Benutzeroberfläche erstellt: 

• shop_setup_device_template – Diese Datei definiert die var Shop und ruft die Funktion Benutzeroberfläche anzeigen (ShowUI) auf, um die in der Datei ui_shop programmierte Benutzeroberfläche anzuzeigen.

• ui_shop – Diese Klasse vereinigt alle Widgets in einer Verse-Datei über die Verse-Benutzeroberfläche. UMG handhabt das Charakterbild, die Gegenstandsdetails, die Header und den Preis sowie Zeilen mit Gegenständen. Die Verse-API handhabt die Hintergrundebenen und Schaltflächen.

• ui_shop_offer_item – Diese Klasse wird in jeder Gegenstandszeile der Ansehen-Schaltfläche hinzugefügt.

• link_volume_to_shop_device – Dieses Gerätescript nutzt das Bereich-Gerät, um das Anzeigen der Shop-Oberfläche auszulösen.

Alle von diesem Beispiel verwendeten Materialien, Texturen und Nutzer-Widgets befinden sich im Verzeichnis UI > Verse > InIslandTransaction.

Shop-Benutzeroberfläche

Die Gestaltung der Haupt-Shop-Benutzeroberfläche ist in einem OverlayRoot kodiert. Der OverlayRoot nutzt einen Materialblock, um die Material-Instanzen für die Hintergrundmaterialien des Haupthintergrunds und des Angebotshintergrunds aufzurufen.

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

Zudem wurde ein zweites Overlay hinzugefügt, das eine Stapelbox enthält. Die Stapelbox wird genutzt, um den Körper der Angebote zu erzeugen. Der finale Stapelbox-Slot ist für den Angebotsdetails-OverlayRoot (OfferDetailsOverlayRoot) reserviert, bei dem es sich um ein Nutzer-Widget handelt, das das Design der Details enthält.

 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

Angebote füllen

Die Funktion Angebote füllen (PopulateOffers) erstellt die Anzahl der eingegebenen Gegenstandszeilen für jeden Gegenstand, der im Angebotsgegenstand-Widget (OfferItemWidget) aufgeführt ist. So entsteht eine wiederholbare Aktion, die bei jedem Angebot in der Stapelbox funktioniert. Wenn du zum Beispiel drei Angebote hast, erstellt diese Funktion für jeden deiner Gegenstände drei Angebot-Widgets.

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


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

Für jedes Angebot aktualisiert die Funktion Ausgewählte Angebotsdetails aktualisieren (UpdateSelectedOfferDetails) die folgenden Daten:

• Name

• Symbol

• KurzeBeschreibung

• PriceFloat

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


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

Die Methode Geklickte Kaufen-Schaltfläche handhaben (HandleBuyButtonClicked) schickt den Spieler zum Epic Games-Zahlungsablauf, wenn er einen Kauf tätigt.

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

Geräteauslöser

In diesem Beispiel wird ein Bereich-Gerät als Auslöser genutzt, um die Shop-Benutzeroberfläche zu öffnen. Du kannst jedes beliebige Gerät nutzen, das als Auslöser dienen kann. Du kannst auch ganz auf ein Gerät verzichten. Die Spieler können sich den Gegenständen einzeln nähern, woraufhin sich die Benutzeroberfläche öffnet.

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