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 del widget en el código de Verse. Las variables pasan datos de Verse y se reflejan en el resumen de recursos, además de proporcionar una forma de crear una interfaz de usuario dinámica personalizada sin depender de los modelos de visualización del dispositivo.
Ejemplo de interfaz de usuario para transacciones en la isla
El ejemplo de tienda amplía la API de Marketplace añadiendo elementos de interfaz de usuario personalizados a través de campos de Verse y de IU de Verse. Los datos se pasan 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 interfaz de usuario personalizada:
shop_setup_device_template: este archivo define lavariable Shopy llama a la funciónShowUIpara 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 objeto, los encabezados y el precio, así como las filas de objetos. La API de Verse gestiona las capas de fondo y los botones.ui_shop_offer_item: una clase que se añade al botón Ver de cada fila de objeto.link_volume_to_shop_device: una secuencia de comandos de dispositivo que utiliza el dispositivo de zona como activador para mostrar la interfaz de la tienda.
Interfaz de usuario de la tienda
El diseño de la interfaz de usuario de la tienda principal está codificado en un OverlayRoot. OverlayRoot utiliza un bloque de material para llamar a las instancias de material para los materiales de fondo que se encuentran en el fondo principal y en el fondo 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 apilable. La caja apilable se utiliza para crear el cuerpo de las ofertas. El último espacio de la caja apilable 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 el número de filas de objetos introducidas para cada objeto que aparece en OfferItemWidget, creando una acción repetible que funciona para cada oferta en la caja apilada. Por ejemplo, si tienes tres ofertas, esta función crea tres widgets de oferta para cada uno de tus objetos.
PopulateOffers(InOffers:[]offer) : void =
for (Offer : InOffers):
var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}Para cada oferta, la función UpdateSelectedOfferDetails actualiza los siguientes datos:
Nombre
Icono
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 usuario al proceso 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)
Dispositivo activador
En este ejemplo, se utiliza un dispositivo de zona como activador para abrir la interfaz de usuario de la tienda. Puedes utilizar cualquier dispositivo como activador sustitutivo. También puedes optar por no usar ningún dispositivo. Los jugadores pueden acercarse a los objetos individualmente y aparecerá la interfaz de usuario.
# 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{}