Ejemplos de campos de Verse

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 la variable Shop y llama a la función ShowUI para mostrar la IU codificada en el archivo ui_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.

Todos los materiales, texturas y widgets de usuario utilizados en este ejemplo se encuentran en las carpetas IU > Verse > InIslandTransaction.

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