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 dievar Shopund ruft die FunktionBenutzeroberfläche anzeigen (ShowUI)auf, um die in der Dateiui_shopprogrammierte 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.
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{}