Los campos de Verse se pueden definir directamente en UMG. Las variables se crean en un widget de usuario y, luego, se vinculan a las propiedades de los widgets en el código Verse. Las variables pasan datos de Verse y se reflejan en el resumen del recurso. Además, ofrecen una forma de crear una IU dinámica y personalizada sin depender de los modelos de vista del dispositivo.
Ejemplo de la IU correspondiente a las transacciones dentro de la isla
El ejemplo de la tienda amplía la API del Marketplace añadiendo elementos personalizados de la IU en los campos de Verse y la IU de Verse. Los datos se transmiten desde la API a una capa de datos, y se utiliza una clase de Verse para realizar un seguimiento de los jugadores y responder a las compras de objetos que realizan.
Los siguientes archivos de la plantilla crean el aspecto de la IU personalizada:
shop_setup_device_template: este archivo define lavariable Shopy llama a la funciónShowUIa fin de mostrar la IU codificada en el archivoui_shop.ui_shop: una clase que consolida todos los widgets en un archivo de Verse a través de la IU de Verse. UMG gestiona la imagen del personaje, los detalles del elemento, los encabezados y el precio, así como las filas de elementos. La API de Verse gestiona las capas del fondo y los botones.ui_shop_offer_item: una clase que se añadirá al botón Vista de cada fila de elementos.link_volume_to_shop_device: una secuencia de comandos del dispositivo que utiliza el dispositivo de volumen como activador a fin de mostrar la interfaz de la tienda.
Comprar IU
El diseño de la IU de la tienda principal se codificó en un OverlayRoot. El OverlayRoot utiliza un bloque de material para llamar a las instancias de material correspondientes a los materiales de fondo del fondo principal y el de la oferta.
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
Se añade un segundo widget superpuesto que contiene una caja apilada. Las cajas apiladas se utilizan a fin de crear el cuerpo de las ofertas. El último espacio de las cajas apiladas está reservado para OfferDetailsOverlayRoot, que es un widget de usuario que contiene el diseño de los detalles.
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
La función PopulateOffers crea la cantidad de filas de elementos introducidas en cada elemento que aparece en el OfferItemWidget, lo que crea una acción repetible que funciona para cada oferta en las cajas apiladas. Por ejemplo, si tienes tres ofertas, esta función crea tres widgets de oferta para cada uno de tus elementos.
PopulateOffers(InOffers:[]offer) : void =
for (Offer : InOffers):
var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}En cada oferta, la función UpdateSelectedOfferDetails actualiza los siguientes datos:
Nombre
Ícono
ShortDescription
PriceFloat
UpdateSelectedOfferDetails(SelectedOffer : offer) : void =
var PriceFloat : float = 0.0
if (PriceVB := price_vbucks[SelectedOffer.Price]):
set PriceFloat = GetPriceVBucks(PriceVB)
El método HandleBuyButtonClicked envía al jugador al flujo de trabajo de pago de Epic Games cuando realiza una compra.
HandleBuyButtonClicked(SelectedOffer : offer) <suspends> : void =
BuyButton.OnClick().Await()
if (PlayerUI := GetPlayerUI[Player]):
HideUI(PlayerUI)
BuyOffer(Player, SelectedOffer)
Activador del dispositivo
En este ejemplo, un dispositivo de volumen se usa como activador para abrir la IU de la tienda. Puedes usar cualquier dispositivo como activador sustituto. O directamente no usar ninguno. Los jugadores pueden acercarse a los elementos por separado, y aparecerá la IU.
# 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{}