Exemplo de campos em Verse

Os campos em Verse podem ser definidos diretamente no UMG. As variáveis são criadas em um Widget de Usuário e, em seguida, vinculadas às propriedades do widget no código Verse. As variáveis passam dados em Verse e são refletidas no resumo de ativos, além permitir a criação de interfaces de usuário dinâmicas sem depender de modelos de visualização de dispositivos. 

Exemplo de interface de Transações na Ilha

O exemplo da vitrine expande a API Loja ao adicionar elementos de interface de usuário personalizados por meio de campos Verse e da interface de usuário Verse. Os dados são passados da API para uma camada de dados, e uma classe Verse é usada para monitorar os jogadores e reagir àqueles que estão comprando objetos.

Os seguintes arquivos do modelo criam o aspecto visual da interface de usuário personalizada: 

• shop_setup_device_template - Este arquivo define a variável var Shop e chama a função ShowUI para exibir a interface codificada no arquivo ui_shop.

• ui_shop - Esta classe consolida todos os widgets em um arquivo Verse por meio da interface Verse. O UMG trata da imagem do personagem, detalhes do item, cabeçalhos e preço, além das linhas de itens. A API Verse trata dos botões e das camadas de fundo.

• ui_shop_offer_item - Esta classe adiciona o botão Ver para cada linha de itens.

• link_volume_to_shop_device - Este código de dispositivo usa o dispositivo Volume como gatilho para exibir a interface da loja.

Todos os materiais, texturas e widgets do usuário deste exemplo estão nas pastas Interface de Usuário > Verse > InIslandTransaction.

Interface da loja

O código de criação da interface principal da loja em OverlayRoot. OverlayRoot usa um bloco de material para chamar instâncias de material para materiais de fundo presentes no fundo principal e no fundo da 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

É adicionado outro widget de sobreposição que contém uma caixa de empilhamento (Stack Box). A caixa de empilhamento é usada para criar o corpo das ofertas. O espaço da caixa de empilhamento final é reservado para o OfferDetailsOverlayRoot, que consiste em um Widget de Usuário responsável pela criação dos detalhes.

 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

Função PopulateOffers

A função PopulateOffers cria a quantidade de linhas de itens inserida para cada item listado no OfferItemWidget, criando uma ação repetida que funciona para cada oferta na caixa de empilhamento. Por exemplo, se você tiver três ofertas, esta função cria três widgets de oferta para cada um dos seus itens.

    PopulateOffers(InOffers:[]offer) : void =
       
        for (Offer : InOffers):


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

Para cada oferta, a função UpdateSelectedOfferDetails atualiza os seguintes dados:

• Name

• Icon

• ShortDescription

• PriceFloat

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


            if (PriceVB := price_vbucks[SelectedOffer.Price]):
                set PriceFloat = GetPriceVBucks(PriceVB)

O método HandleBuyButtonClicked envia o jogador para o fluxo de trabalho de pagamento da Epic Games ao realizar uma compra.

    HandleBuyButtonClicked(SelectedOffer : offer) <suspends> : void =
       
        BuyButton.OnClick().Await()
       
        if (PlayerUI := GetPlayerUI[Player]):
            HideUI(PlayerUI)
       
        BuyOffer(Player, SelectedOffer)

Dispositivo de gatilho

Neste exemplo, um dispositivo Volume é usado como gatilho para abrir a interface da loja. Você pode usar qualquer dispositivo como gatilho substituto. Ou nenhum dispositivo. A interface é exibida quando os jogadores se aproximam dos itens individualmente.

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