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ávelvar Shope chama a funçãoShowUIpara exibir a interface codificada no arquivoui_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.
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{}