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 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 la variable Shop y llama a la función ShowUI a fin de 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 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.

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

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