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 definiujevar Shopi wywołuje funkcjęShowUI, aby wyświetlić interfejs użytkownika zakodowany w plikuui_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.
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{}